<template>
  <span :class="{ tipsOldVal: isCompare && hasChange() }">
    <el-popover
      placement="top-start"
      width="200"
      trigger="hover"
      v-if="isCompare && hasChange()"
      :disabled="!hasHData"
    >
      <div class="f12 d-txt">{{ $t1("变更前") }}：{{ oldVal }}</div>
      <div slot="reference" class="icon">
        <i class="el-icon-warning" :class="{ hasNoHData: !hasHData }"></i>
      </div>
    </el-popover>
    <slot></slot>
  </span>
</template>

<script>
export default {
  name: "fieldCompare",
  props: {
    oldVal: [String, Number, Boolean],
    newVal: [String, Number, Boolean],
    hasHData: {
      type: Boolean,
      default: true,
    },
    isCompare: Boolean,
  },
  methods: {
    isNull(val) {
      return val == null || val == "" || val == undefined;
    },
    hasChange() {
      if (this.isNull(this.oldVal) && this.isNull(this.newVal)) return false;
      return this.oldVal !== this.newVal;
    },
  },
};
</script>

<style scoped>
.hasNoHData {
  color: #30b08f !important;
}

.d-txt {
  white-space: pre-line;
}
.el-icon-warning {
  z-index: 5;
}
</style>
