<template>
  <li class="change-field" :class="newValue != null && newValue !== oldValue ? 'no-same' : ''">
    <div class="label">
      {{label}}
    </div>
    <div class="right-box" >
      <slot name="old" :value="oldValue">
        <span class="old">{{ oldValue | defaultValue }}</span>
      </slot>
      <template v-if="newValue != null && newValue !== oldValue">
        <i class="el-icon-right"/>
        <slot name="new" :value="newValue">
          <span class="new">{{ newValue | defaultValue }}</span>
        </slot>
      </template>
    </div>
  </li>
</template>

<script>
export default {
  name: 'ChangeField',
  props: {
    label: {
      type: String,
      default: null
    },
    prop: {
      type: String,
      default: null
    },
    newData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    oldData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
    oldValue() {
      return this.oldData == null ? null : this.oldData[this.prop]
    },
    newValue() {
      return this.newData == null ? null : this.newData[this.prop]
    }
  }

}

</script>

<style scoped lang="scss">
.change-field {
  width: 100%;
  padding: 0.5em 1em;
  font-size: 14px;
  display: flex;
  height: fit-content;
  line-height: 1.5em;
  justify-content: space-between;
  .label {
    width: fit-content;
  }
  .right-box {
    flex: 1;
    text-align: right;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    vertical-align: center;
  }
  i {
    line-height: 1.5em;
    margin: 0 0.5em;
  }
}
.change-field:nth-child(n +2) {
  border-top: 1px solid #ededed;
}
.change-field:hover {
  background-color: rgba(136, 131, 240, 0.08);
}

.no-same {
  color: red;
}
</style>
