<template>
  <!--判断scopedSlots.default可知道是否存在子元素-->
  <el-table-column v-if="$scopedSlots.default && show" v-bind="$attrs" :key="$attrs.label" :class-name="className" :min-width="minWidth">
    <template slot-scope="scope">
      <!--原element组件使用了作用域插槽, 这里仿照-->
      <slot v-bind="scope"></slot>
    </template>
  </el-table-column>
  <!--$attrs传入所有column属性-->
  <el-table-column v-else-if="($attrs.prop || '').includes('otAtt') && show" v-bind="$attrs" :key="$attrs.label" :min-width="minWidth">
    <template slot-scope="scope">
      {{allLotConfigs.skuList ? getLotName($attrs.prop, scope.row) : scope.row[$attrs.prop]}}
    </template>
  </el-table-column>
  <el-table-column v-else-if="show" v-bind="$attrs" :key="$attrs.label" :formatter="formatColumn" :min-width="minWidth"></el-table-column>
</template>

<script>
export default {
  name: 'table-column',
  computed: {
    show () {
      const labels = this.$parent.$attrs.filteredLabels
      // 判断条件: 没有label属性的(首列勾选组) || table没传labels属性的 || table的labels属性初始空数组 || 筛选时
      return !this.$attrs.label || !labels || !labels.length || labels.includes(this.$attrs.label)
    },
    // table数据
    values () {
      const data = this.$parent.data || []
      return data.map(item => item[this.$attrs.prop])
    },
    // 为存在scope的添加className
    className () {
      const parentClass = this.$attrs['class-name'] || ''
      const classPre = this.$attrs.prop || `encode-${this.$utils.transChar(this.$attrs.label)}` // 有的列因为有slotScope而不给prop
      return classPre ? `${parentClass} ${classPre}-column` : ''
    },
    // 列最小宽度
    minWidth () {
      if (!this.$attrs.label) return undefined
      const maxOne = Math.max(this.minLength, this.$attrs.label.length * this.$consts.fontRate.CHAR_RATE) * 14 + 20
      return this.$attrs.width || maxOne
    },
    // 批次属性配置
    allLotConfigs () {
      return this.$store.state.framework.lotAttrsConfigs
    },
  },
  watch: {
    values: {
      immediate: true,
      handler (val) {
        this.$nextTick(() => {
          // 详情中的列表需要在nextTick才能生效
          if (this.$scopedSlots.default) {
            // 存在自定义节点
            const nodes = document.querySelector('.el-table__body-wrapper').querySelectorAll(`.${this.$attrs.prop || `encode-${this.$utils.transChar(this.$attrs.label)}`}-column`)
            if (nodes.length) {
              // ## 有可能会来不及获取nodes, 就切换菜单进入下一页了, 再研究吧
              const target = Array.from(nodes).map(item => item.innerText)
              this.$set(this, 'minLength', this.$utils.getMaxLength(target))
              // this.minLength = this.$utils.getMaxLength(target)
            }
          } else {
            this.$set(this, 'minLength', this.$utils.getMaxLength(val))
            // this.minLength = this.$utils.getMaxLength(val)
          }
        })
      }
    }
  },
  data () {
    return {
      minLength: 5, // 初始也不要写成0, 避免未及时设置宽度太丑
    }
  },
  methods: {
    // 通过逻辑值获取显示值
    getLotName (prop, rowData) {
      let name = rowData[prop]
      // 极端情况会返回第一个值
      const skuLotMap = this.allLotConfigs.skuList
        .find(item =>
          // queryParams 存在哪个值就判断哪个值, 否则返回 true, 不返回 true 会导致不进行后续判断
          (rowData.skuCode
            ? rowData.skuCode === item.skuCode
            : true
          ) &&
          (rowData.ownerCode
            ? rowData.ownerCode === item.ownerCode
            : true
          )
        ) || {}
      // 找到对应的属性列表
      const lotAttrList = (this.allLotConfigs.lotList.find(item => skuLotMap.lotCode === item.lotCode) || {}).lotAttList || []
      // 找到对应的属性配置
      const lotConfigMap = lotAttrList.find(item => item.lotField.toLowerCase().includes(prop.slice(-4))) || {}
      if (lotConfigMap.keyValue) {
        const keyName = lotConfigMap.titleZh
        // 存在 keyValue 说明是筛选类, 再找对应的筛选列表
        const lotValueMap = this.allLotConfigs.lotValueList.find(item => item.masterCode === lotConfigMap.keyValue) || {}
        // 找到对应筛选的名称
        const valueName = ((lotValueMap.valueList || [])
          .find(item => item.key === rowData[prop]) || {}).nameZh || '-'
        name = `${keyName} : ${valueName}`
      }
      return name || '-'
    },
    // 获取并设置下拉选项
    setSelectOptions (obj) {
      const lotValueMap = this.allLotConfigs.lotValueList.find(item => item.masterCode === obj.keyValue) || {}
      this.$set(obj, 'options', lotValueMap.valueList || []) // 可能存在空值的情况
    },
  },
}
</script>
