<template>
  <el-table-column v-if="column.children && column.children.length" :label="column.label" v-bind="getColumnAttrs">
    <TableColumn v-for="child in column.children" :key="child.prop || child.label" :column="child">
      <template v-for="(_, name) in $slots" #[name]="slotData">
        <slot :name="name" v-bind="slotData" />
      </template>
    </TableColumn>
  </el-table-column>
  <el-table-column v-else :prop="column.prop" :label="column.label" v-bind="getColumnAttrs">
    <template #default="scope">
      <Render v-if="column.render" :render="column.render" :row="scope.row" :index="scope.$index" />
      <slot v-else-if="column.slot" :name="column.slot" :row="scope.row" :index="scope.$index" />
    </template>
  </el-table-column>
</template>

<script setup lang="ts">
  import { computed } from 'vue';
  import Render from './Render.vue';
  import type { TableColumnProps } from '@/types/basic-table';

  const props = defineProps<{
    column: TableColumnProps;
  }>();

  const getColumnAttrs = computed(() => {
    const { children, prop, label, render, slot, ...rest } = props.column;
    return rest;
  });
</script>
