<template>
  <ul class="tag-cell-value">
    <li
      v-for="(item, index) in data"
      :key="index"
      :style="getTagStyle(item)"
    >
      {{getLabelProxy(item)}}
    </li>
  </ul>
</template>

<script>

export default {
  name: 'TagCellValue',
  props: {
    // 数据
    data: {
      type: Array,
      required: true
    },
    // 标签key，将采用指定字段读取对象中的数据
    labelKey: {
      type: [String, Function]
    },
    // 标签样式处理器
    tagStyle: {
      type: Function,
      default () {
        return () => {
          return {
            background: '#f5f7fa',
            color: '#555'
          }
        }
      }
    },
    // 字典编码，如果存在，将读取数据字典中的数据
    dictCode: {
      required: false
    },
    // 获取显示值函数
    getLabel: {
      required: false,
      type: Function
    }
  },
  methods: {
    // 获取标签key
    getLabelKey (item) {
      return this.__calcPropValue('labelKey', item)
    },
    // 获取显示值
    getLabelProxy (item) {
      // 如果存在getLabel函数，则直接调用函数获取显示值
      if (this.getLabel != null) {
        return this.getLabel(item)
      }
      // 否则按照默认规则获取显示值
      const labelKey = this.getLabelKey(item)
      if (labelKey) {
        if (this.dictCode != null) {
          return this.$d(`${this.dictCode}.${labelKey}`)
        }
        return item[labelKey]
      }
      if (this.dictCode != null) {
        return this.$d(`${this.dictCode}.${item}`)
      }
      return item
    },
    // 获取标签样式
    getTagStyle (item) {
      return this.__calcPropValue('tagStyle', item)
    },
    // 计算属性值
    __calcPropValue (propName, item) {
      if (typeof this[propName] === 'function') {
        return this[propName](item)
      }
      return this[propName]
    }
  }
}
</script>

<style scoped lang="scss">
.tag-cell-value {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  margin-top: 3px;
  li {
    display: inline-block;
    margin-right: 3px;
    margin-bottom: 3px;
    padding: 2px 5px;
    border: 1px solid var(--tag-border-color);
    border-radius: 4px;
    background: var(--tag-background-color);
  }
}
</style>
