<template>
  <div>
    <el-tag :type="tagType" effect="dark" size="small" style="cursor: pointer" v-if="showInfo" @mouseenter="showProcessStatus">
      {{ inputValue }}
      <i class="el-icon-info" style="cursor: pointer"></i>
    </el-tag>
    <el-tag :type="tagType" size="small" v-else effect="dark">
      {{ inputValue }}
    </el-tag>
  </div>
</template>

<script>
  export default {
    name: "CmsApprovalStatus",
    data() {
      return {
        showInfo: false,
        matchConfig: {
          SAVE: "info",
          DEAL: "primary",
          REFUSE: "danger",
          SUBMIT: "primary",
          PASS: "success",
          EXCEPTION: "danger",
        }
      }
    },
    methods: {
      showProcessStatus() {
        this.$message.info('鼠标进入事件...');
      }
    },
    computed: {
      tagType() {
        const constantObj = this.constantObj;
        const keys = Object.keys(constantObj);
        for (let key in constantObj) {
          if (this.value === constantObj[key]) {
            return this.matchConfig[key]
          }
        }
        return "info"
      },
      inputValue() {
        const data = this.dataList;
        for (const index in data) {
          const item = data[index];
          if (item[this.props.value] === this.value) {
            if (this.infoIconValue === item[this.props.value]) this.showInfo = true;
            return item[this.props.field];
          }
        }
        return this.value;
      }
    },
    props: {
      value: {
        type: [ String, Number, Boolean ],
        default: ""
      },
      props: {
        type: Object,
        default: () => {
          return { field: 'label', value: 'value' }
        }
      },
      infoIconValue: [ String, Number, Boolean ],
      constantObj: Object,
      dataList: [],
    }
  }
</script>

<style scoped>

</style>
