<template>
    <div class="table-container">
        <el-table :data="tableData" :row-key="rowKey" :tree-props="treeProps" :border="border"
            :highlight-current-row="highlightCurrentRow" v-bind="$attrs" @row-click="handleRowClick">
            <!-- 动态表头列 -->
            <template v-for="(column, index) in columns" :key="index">
                <el-table-column v-if="!column.slotName" :prop="column.prop" :label="column.label" :width="column.width"
                    :align="column.align || 'left'" :sortable="column.sortable" />

                <!-- 具名插槽列 -->
                <el-table-column v-else :label="column.label" :width="column.width" :align="column.align || 'left'">
                    <template #default="{ row }">
                        <slot :name="column.slotName" :row="row" />
                    </template>
                </el-table-column>
            </template>
        </el-table>
    </div>
</template>

<script setup lang="ts">
// 定义表格列配置接口
interface TableColumn {
    prop?: string
    label: string
    width?: string | number
    align?: 'left' | 'center' | 'right'
    slotName?: string // 具名插槽名称
    sortable?: boolean // 是否可排序
}

// 定义表格组件属性接口
interface Props {
    tableData: any[]
    rowKey?: string
    treeProps?: {
        children: string
    }
    columns?: TableColumn[],
    border?: boolean // 是否显示边框
    highlightCurrentRow?: boolean // 是否高亮当前行
}

const props = withDefaults(defineProps<Props>(), {
    border: true,
    highlightCurrentRow: true,
})

// 定义组件抛出的事件
const emit = defineEmits<{
    (e: 'row-click', row: any): void // 保留原有行点击事件
}>()

/**
 * 处理行点击事件（兼容原有逻辑）
 */
const handleRowClick = (row: any) => {
    // 增加空值保护，避免传递 null 给父组件
    if (!row) return
    emit('row-click', row)
}
</script>

<style scoped lang="scss">
.table-container {
    max-width: calc(100vw - 200px);
    max-height: calc(100vh - 180px);
    overflow: auto;
}
</style>
