<template>
	<div>
		<el-table
			ref="tableRef"
			:data="data"
			:row-key="rowKey"
			:border="border"
			:stripe="stripe"
			:loading="loading"
			:height="tableHeight"
			:size="size"
			:highlight-current-row="highlightCurrentRow"
			@row-dblclick="onRowDblClick"
			@selection-change="onSelectionChange"
			@sort-change="onSortChange"
			v-bind="tableProps"
		>
			<!-- 选择框 -->
			<el-table-column v-if="showSelection" type="selection" width="55" align="center" />

			<!-- 序号 -->
			<el-table-column v-if="showIndex" type="index" width="55" align="center" label="#" />

			<template v-for="col in columns" :key="col.prop">
				<!-- <el-table-column
					v-if="col.isFormater"
					:prop="col.prop"
					:label="col.label"
					:width="col.width"
					:min-width="col.minWidth"
					:align="col.align || 'center'"
					:sortable="col.sortable || false"
					:fixed="col.fixed || false"
					:show-overflow-tooltip="col.showOverflowTooltip || true"
					:formatter="(row:any,col:any)=>col.formater(row,col)"
				/> -->
        <div >{{col}}</div>
			
				<!-- <el-table-column
					v-else
					:prop="col.prop"
					:label="col.label"
					:width="col.width"
					:min-width="col.minWidth"
					:align="col.align || 'center'"
					:sortable="col.sortable || false"
					:fixed="col.fixed || false"
					:show-overflow-tooltip="col.showOverflowTooltip || true"
				>
					<template #default="scope">
						<slot v-if="$slots[col.prop]" :name="col.prop" v-bind="scope" />
						<component
							v-else-if="col.render"
							:is="col.render"
							v-bind="{ row: scope.row, col, index: scope.$index }"
						/>
						<span v-else>{{ scope.row[col.prop] }}</span>
					</template>
				</el-table-column> -->
			</template>

			<!-- 操作列 -->
			<el-table-column
				v-if="$slots.actions"
				label="操作"
				:fixed="actionFixed"
				:width="actionWidth"
				align="center"
			>
				<template #default="scope">
					<slot name="actions" v-bind="scope" />
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
import { formatter, type TableColumnCtx } from 'element-plus';
import { TableColumn } from '../type';

interface Props {
	columns: TableColumn[];
	data: Record<string, any>[];
	loading?: boolean;
	rowKey?: string;
	border?: boolean;
	stripe?: boolean;
	size?: 'small' | 'default' | 'large';
	showIndex?: boolean;
	showSelection?: boolean;
	highlightCurrentRow?: boolean;
	actionWidth?: string | number;
	actionFixed?: 'left' | 'right' | boolean;
	tableProps?: Record<string, any>; // 透传 Element Plus Table 所有 props
	autoHeight?: boolean;
	heightOffset?: number; // 距离底部的偏移量
}

const props = withDefaults(defineProps<Props>(), {
	columns: () => [],
	data: () => [],
	loading: false,
	rowKey: 'id',
	border: false,
	stripe: true,
	size: 'default',
	showIndex: false,
	showSelection: false,
	highlightCurrentRow: false,
	actionWidth: 180,
	actionFixed: 'right',
	tableProps: () => ({}),
	autoHeight: true,
	heightOffset: 360,
});

defineOptions({ name: 'ProTable' });

const emit = defineEmits<{
	(e: 'row-dblclick', row: any): void;
	(e: 'selection-change', selection: any[]): void;
	(e: 'sort-change', col: TableColumnCtx<any>): void;
}>();

// 表格高度
const tableHeight = ref<string | number>('auto');

const calcHeight = () => {
	if (props.autoHeight) {
		tableHeight.value = window.innerHeight - props.heightOffset;
	}
};

// 监听窗口变化
onMounted(() => {
	calcHeight();
	window.addEventListener('resize', calcHeight);
});
onBeforeUnmount(() => {
	window.removeEventListener('resize', calcHeight);
});

// 事件处理
const onRowDblClick = (row: any) => emit('row-dblclick', row);
const onSelectionChange = (selection: any[]) => emit('selection-change', selection);
const onSortChange = (col: TableColumnCtx<any>) => emit('sort-change', col);

// 暴露 Element Plus Table API
const tableRef = ref();
const clearSelection = () => tableRef.value?.clearSelection();
const toggleRowSelection = (row: any, selected?: boolean) =>
	tableRef.value?.toggleRowSelection(row, selected);
const getSelectionRows = () => tableRef.value?.getSelectionRows();

defineExpose({
	clearSelection,
	toggleRowSelection,
	getSelectionRows,
	tableRef,
});
</script>
