<template>
  <span>
    <template v-for="(dict, index) in getDictDatas2(type, resValue)">
      <!-- 默认样式 -->
      <span
        v-if="dict.colorType === 'default' || dict.colorType === '' || dict.colorType === undefined"
        :key="dict.value"
        :index="index"
        :class="dict.cssClass"
      >{{ dict.label }}</span>
      <!-- Tag 样式 -->
      <el-tag
        v-else
        :key="dict.value"
        :disable-transitions="true"
        :index="index"
        :type="dict.colorType"
        :class="dict.cssClass"
        :size="tagSize"
      >
        {{ dict.label }}
      </el-tag>
    </template>
  </span>
</template>

<script>
export default {
  name: 'DictTag',
  props: {
    // eslint-disable-next-line vue/require-default-prop
    type: String,
    // eslint-disable-next-line vue/require-default-prop
    value: [Number, String, Boolean, Array],
    tagSize: {
      type: String,
      default: 'mini'
    }
  },
  computed: {
    // 重新解析value
    resValue() {
      let res = ''
      if (this.value === null || undefined || isNaN(this.value)) {
        res = ''
      } else if (typeof this.type === 'number') {
        res = this.value + ''
      } else {
        res = this.value
      }
      return res
    }
  }
}
</script>
<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
</style>
