<template>
  <template v-for="(col, index) in columns" :key="index">
    <el-table-column v-if="col.children" :label="col.label" align="center">
      <template v-for="(child, childIndex) in col.children" :key="childIndex">
        <el-table-column v-if="child.isTag" v-bind="child" align="center" resizable>
          <template #default="{ row }">
            <dict-tag v-if="child.dictType" :type="child.dictType!" :value="row[child.prop!]" />
            <el-tag :type="tagType(row[child.prop!])" v-else>{{
              child.formatter?.(row) || ''
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column v-else v-bind="child" align="center" resizable />
      </template>
    </el-table-column>
    <el-table-column v-else-if="col.isTag" v-bind="col" align="center" resizable>
      <template #default="{ row }">
        <dict-tag v-if="col.dictType" :type="col.dictType!" :value="row[col.prop!]" />
        <el-tag :type="tagType(row[col.prop!])" v-else>{{ col.formatter?.(row) || '' }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column v-else v-bind="col" align="center" resizable />
  </template>
</template>

<script setup lang="ts">
defineOptions({
  name: 'DailyTableColumn'
})

interface ColumnProps {
  label: string
  prop?: string
  children?: ColumnProps[]
  isTag?: boolean
  dictType?: string
  formatter?: (row: any) => any
  [key: string]: any
}

const props = defineProps<{
  columns: ColumnProps[]
}>()

const { columns } = toRefs(props)

const tagType = (status: number) => {
  switch (status) {
    case 0:
      return 'info'
    case 10:
      return 'primary'
    case 20:
      return 'success'
    case 30:
      return 'danger'
  }
}
</script>
