<script setup lang="ts">
import { DictType, getDictByCode } from '@/utils/dict'

const props = withDefaults(
  defineProps<{
    // 标签文本
    label?: string
    // 宽度
    width?: number | string
    // 最小宽度
    minWidth?: number | string
    // 对齐方式
    align?: 'left' | 'center' | 'right'
    // 表头对齐方式， 若不设置该项，则使用表格的对齐方式
    headerAlign?: 'left' | 'center' | 'right'
    // 列是否固定在左侧或者右侧。 true 表示固定在左侧
    fixed?: boolean | 'left' | 'right'
    // 绑定属性
    prop?: string
    // 字典
    dict: string
    // 是否显示
    visible?: boolean
  }>(),
  {
    visible: true
  }
)

const dictList = ref<DictType[]>([])

getDictByCode(props.dict).then((resp) => {
  dictList.value = resp
})
</script>
<template>
  <el-table-column
    :label="label"
    :width="width"
    :min-width="minWidth"
    :align="align"
    :header-align="headerAlign"
    :fixed="fixed"
  >
    <template #default="scope">
      <template v-for="(item, index) in dictList" :key="index">
        <template v-if="scope.row[prop as string] === item.value">
          <span v-if="item.cssStyle === 'default'">
            {{ item.label }}
          </span>
          <el-tag v-else size="small" :type="item.cssStyle" style="min-width: 40px">
            {{ item.label }}
          </el-tag>
        </template>
      </template>
    </template>
  </el-table-column>
</template>
