<template>
  <div>
    <el-tag v-for="(item,index) in kpiItemList" :key="index" size="small" class="match-item">
      <span class="match-item-name">{{ item.itemName }}
        (<span class="match-item-kpi">{{ item.kpiName }}</span>)
      </span>
    </el-tag>
  </div>
</template>

<script>
import cloneDeep from 'lodash/cloneDeep'
import { findItem, findPathArray } from '@/utils/tree'

export default {
  props: {
    type: { type: Number, default: 4 },
    value: { type: Array, default: () => [] }
  },
  data() {
    return {
      options_kpi: [],
      kpiItemList: []
    }
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        if (this.options_kpi.length === 0) { this.getOptionsKPI() }
        const arrayData = cloneDeep(newVal)
        const itemList = []
        // this.getOptionsKPI()
        arrayData.forEach(id => {
          const valueList = findPathArray(this.options_kpi, id, 'value', 'children')
          const itemParentInfo = findItem(this.options_kpi, valueList[(valueList.length - 2) || 0], 'value', 'children')
          const itemInfo = findItem(this.options_kpi, id, 'value', 'children')

          console.log(valueList, itemParentInfo, itemInfo, this.options_kpi)

          itemList.push({
            itemName: itemParentInfo.label,
            kpiName: itemInfo.label
          })
        })

        this.kpiItemList = itemList
      },
      immediate: true
    }
  },
  created() { },
  mounted() { },
  methods: {
    async getOptionsKPI() {
      if (this.type === 4 && window.SITE_CONFIG.dict_colExport) {
        this.options_kpi = window.SITE_CONFIG.dict_colExport
      } else if (this.type === 2 && window.SITE_CONFIG.dict_colChart) {
        this.options_kpi = window.SITE_CONFIG.dict_colChart
      } else {
        const { data: res } = await this.$http.get('/table/dict/optionsColumn', { params: { type: this.type }})
        this.options_kpi = res.data
      }
    }
  }

}
</script>

<style lang="scss">
.match-item{
    margin-right: 5px;
}
</style>
