<template>
  <template v-if="col.subs?.length">
    <ElTableColumn
      show-overflow-tooltip
      header-align="center"
      :label="col.label"
      :align="col.align"
      v-bind="col"
    >
      <RenderColumn v-for="item in col.subs" :col="item" :key="item.prop">
        <template
          v-for="(_, name) of slots"
          #[name]="scope: Record<string, any>"
        >
          <slot :name="name" v-bind="scope" />
        </template>
      </RenderColumn>
      <template #header="{ column, $index }">
        <component
          :is="col.headerRender"
          v-if="col.headerRender"
          :column="column"
          :index="$index"
        />
        <slot
          v-else-if="col.headerSlot"
          :name="col.headerSlot"
          :column="column"
          :index="$index"
        ></slot>
        <span v-else>{{ column.label }}</span>
      </template>
    </ElTableColumn>
  </template>
  <template v-else>
    <ElTableColumn
      v-if="col.showColumn !== false"
      header-align="center"
      v-bind="col"
    >
      <template #header="{ column, $index }">
        <component
          :is="() => col.headerRender(column, $index)"
          v-if="col.headerRender"
        />
        <slot
          v-else-if="col.headerSlot"
          :name="col.headerSlot"
          :column="column"
          :index="$index"
        ></slot>
        <span v-else>{{ column.label }}</span>
      </template>
      <template #default="{ row, $index }">
        <template v-if="col.formatDate">
          <span>{{ col.formatDate(row) }}</span>
        </template>
        <!-- 如果传递按钮数组，就展示按钮组 END-->
        <!-- render函数 (START) 使用内置的component组件可以支持h函数渲染和txs语法-->
        <component :is="() => col.render(row, $index)" v-if="col.render" />
        <slot
          v-else-if="col.slot"
          :name="col.slot"
          :row="row"
          :index="$index"
        ></slot>
        <span v-else>{{ row[col.prop!] }}</span>
      </template>
    </ElTableColumn>
  </template>
</template>
<script lang="ts" setup>
import type { Column } from 'element-plus'
import { type Slot, useSlots, type PropType } from 'vue'

defineProps({
  col: {
    type: Object as PropType<Column>,
    required: true,
  },
})
const slots = useSlots() as Record<string, Slot>
</script>
