<template>
    <div class="common-table-wrapper">
        <!-- 1. 表格主体 -->
        <el-table :data="tableData" style="width: 100%" :border="border" :size="size" :stripe="stripe"
            :row-key="rowKey || undefined" v-loading="loading" @selection-change="handleSelectionChange">

            <!-- 默认插槽：让父组件自定义列 -->
            <slot></slot>

            <!-- 空数据状态（可选） -->
            <template #empty>
                <el-empty description="暂无数据" />
            </template>
        </el-table>

        <!-- 2. 分页组件 -->
        <div v-if="showPagination" class="pagination-container">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :size="size"
                :page-sizes="[10, 20, 50, 100]" :background="true" layout="total, sizes, prev, pager, next, jumper"
                :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';

// 1. 定义 Props
const props = defineProps({
    // 总条数（由父组件从接口获取后传入）
    total: {
        type: Number,
        default: 0,
    },
    // 是否正在加载中
    loading: {
        type: Boolean,
        default: false,
    },
    // 外部传入的数据列表（可选，你也可以在组件内部自己维护）
    dataList: {
        type: Array,
        default: () => [],
    },
    // 默认每页显示条数
    defaultPageSize: {
        type: Number,
        default: 10,
    },
    stripe: {
        type: Boolean,
        default: false,
    },
    border: {
        type: Boolean,
        default: false,
    },
    size: {
        type: String,
        default: ''
    },
    showPagination: {
        type: Boolean,
        default: true,
    },
    rowKey: {
        type: [String, Function],
        default: '',
    }
});

// 2. 定义 Emits（向父组件传递事件）
const emit = defineEmits<{
    (event: 'update:page', page: number, size: number): void;
    (event: 'selection-change', selection: any[]): void;
}>();

// 3. 内部状态（分页参数）
const currentPage = ref(1);
const pageSize = ref(props.defaultPageSize);

// 4. 内部表格数据（优先用 props.dataList，如果没传就默认展示空数组）
// 这种设计让你的组件既可以是展示型，也可以是受控型
const tableData = ref(props.dataList);

// 监听父组件传入的 dataList 变化，更新表格
watch(
    () => props.dataList,
    (newVal) => {
        tableData.value = newVal || [];
    },
    { immediate: true, deep: true }
);

// 5. 分页事件处理
const handleSizeChange = (val: number) => {
    pageSize.value = val;
    // 切换页大小时，通常重置到第一页（看业务需求，也可保持当前页）
    currentPage.value = 1;
    emit('update:page', currentPage.value, pageSize.value);
};

const handleCurrentChange = (val: number) => {
    currentPage.value = val;
    emit('update:page', currentPage.value, pageSize.value);
};

// 6. 处理多选变化
const handleSelectionChange = (selection: any[]) => {
    emit('selection-change', selection);
};

// 7. 暴露方法给父组件（比如手动刷新、重置页码等）
defineExpose({
    currentPage,
    pageSize,
    // 重置到第一页
    resetPage: () => {
        currentPage.value = 1;
        emit('update:page', currentPage.value, pageSize.value);
    }
});
</script>

<style scoped lang="scss">
.common-table-wrapper {
    width: 100%;
    background: #fff;
    border-radius: 8px;
    box-sizing: border-box;
}

:deep(.el-table__header) {
    thead {
        th{
            padding: 10px 0;
            background: #f8f8f8 !important;
        }
    }
}

.pagination-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}
</style>
