<template>
  <template v-if="col.subs?.length">
    <ElTableColumn
      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>
  <ElTableColumn v-else 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>
<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>
