<script lang="tsx">
import { defineComponent, PropType, computed } from 'vue'
import { isHexColor } from '@/utils/color'
import { ElTag } from 'element-plus'
import { getDictOptions, getDictObj } from '@/utils/dict'
import type { CSSProperties } from 'vue'

export default defineComponent({
  name: 'DictTag',
  props: {
    // 字典类型
    type: {
      type: String,
      required: true
    },
    // 字典值
    value: {
      type: [String, Number, Boolean],
      required: true
    },
    // 自定义 Tag 的样式
    style: {
      type: Object as PropType<CSSProperties>,
      default: () => ({})
    }
  },
  setup(props) {
    // 获取字典数据
    const dictOptions = computed(() => {
      return getDictOptions(props.type)
    })

    // 获取字典对象
    const dictObj = computed(() => {
      if (props.value === undefined || props.value === null) {
        return null
      }
      return getDictObj(props.type, props.value.toString())
    })

    // 标签文本
    const label = computed(() => {
      return dictObj.value?.label || ''
    })

    // 标签类型
    const type = computed(() => {
      return dictObj.value?.tag || ''
    })

    // 标签颜色
    const color = computed(() => {
      return dictObj.value?.color || ''
    })

    // 渲染函数
    return () => {
      if (!props.type || props.value === undefined || props.value === null) {
        return null
      }

      // 只有当 type 有值且是有效的类型时才传递 type 属性
      const validTypes = ['primary', 'success', 'info', 'warning', 'danger']
      const tagProps = type.value && validTypes.includes(type.value) ? { type: type.value } : { type: 'info' } // 默认使用 info 类型

      // 添加标签的文字颜色为白色，解决自定义背景颜色时标签文字看不清的问题
      const style = color.value && isHexColor(color.value) ? { ...props.style, color: '#fff' } : props.style

      return (
        <ElTag style={style} {...tagProps} color={color.value && isHexColor(color.value) ? color.value : ''} disableTransitions={true}>
          {label.value}
        </ElTag>
      )
    }
  }
})
</script>
