import {Pagination, Table} from "antd";
import {useEffect, useState} from "react";

const TableWithPagination = ({
                                 columns, // 表格列配置（必需）
                                 dataSource: externalDataSource, // 外部传入的静态数据（可选，与 fetchData 二选一）
                                 fetchData, // 外部传入的动态请求函数（可选）
                                 paginationProps = {
                                     total: 0,
                                     defaultPageSize: 5,
                                     pageSizeOptions: ["5", "10", "20", "50"],
                                 }, // 分页参数（可选，带默认值）
                                 rowSelection = false, // 是否显示复选框（默认 false）
                                 tableStyle = {}, // 表格样式（可选）
                                 paginationStyle = {}, // 分页组件样式（可选）
                                 rowKey = "key", // 行唯一标识（默认 'key'）
                                 isPagination = true, // 是否显示分页组件（默认 true）
}) => {
    const [currentPage, setCurrentPage] = useState(1);
    const [pageSize, setPageSize] = useState(paginationProps.defaultPageSize || 5);
    const [total, setTotal] = useState(paginationProps.total || 0);
    const [tableData, setTableData] = useState(externalDataSource || []);
    const [isLoading, setIsLoading] = useState(false);

    const {pageSizeOptions}= paginationProps

    // 动态请求数据（如果外部传入 fetchData，则内部触发请求）
    const loadData = async () => {
        if (!fetchData) return; // 无请求函数，使用静态数据
        try {
            setIsLoading(true);
            // 调用外部传入的请求函数，传入当前页码和页大小
            const data = await fetchData(currentPage, pageSize);
            setTableData(data);
            // 注意：总条数如果由接口返回，需要外部在 fetchData 中处理（或通过 props 传递更新）
            // 这里简化为：如果外部传入 total，直接使用；否则由数据长度推导（仅静态场景）
            if (paginationProps.total === undefined && externalDataSource) {
                setTotal(externalDataSource.length);
            }
        } catch (error) {
            console.error("表格数据请求失败：", error);
            setTableData([]);
        } finally {
            setIsLoading(false);
        }
    };
    useEffect(() => {
        // 缓冲一下，避免中间态请求（优化体验）
        const timer = setTimeout(() => {
            loadData();
        }, 0);
        return () => clearTimeout(timer);
    }, [currentPage, pageSize, fetchData]);

    // 监听外部传入的静态数据变化（如果外部数据更新，表格同步更新）
    useEffect(() => {
        if (externalDataSource) {
            setTableData(externalDataSource);
            setTotal(paginationProps.total || externalDataSource.length);
        }
    }, [externalDataSource, paginationProps.total]);

    // 页码变更处理
    const handlePageChange = (page) => {
        setCurrentPage(page);
    };

    // 页大小变更处理（重置页码为 1）
    const handleShowSizeChange = (_, size) => {
        setPageSize(size);
        setCurrentPage(1);
    };

    // 处理复选框选择（如果外部需要，可通过 props 传递 onChange）
    const handleRowSelection =
        typeof rowSelection === "object" && rowSelection.onChange
            ? rowSelection.onChange
            : () => {};

    // 组装复选框配置
    const rowSelectionConfig = rowSelection
        ? {
            type: "checkbox",
            onChange: handleRowSelection,
            ...(typeof rowSelection === "object" ? rowSelection : {}),
        }
        : null;

    return (
        <div style={{width: "100%", ...tableStyle}}>
            <Table
                columns={columns}
                dataSource={tableData}
                rowKey={rowKey}
                pagination={false} // 关闭 AntD 自带分页，使用自定义分页
                rowSelection={rowSelectionConfig}
                loading={isLoading}
                bordered={false}
                scroll={{x: "max-content"}} // 适配多列，避免横向溢出
                className="zjl-table-header"
            />
            <style jsx={true} >{`
                :global(.zjl-table-header .ant-table-thead > tr > th) {
                    background-color: #F0F7F7 !important;
                }
            `}</style>
            {/* 分页组件 */}
            {isPagination && (
                <div style={{textAlign: "right", marginTop: 16, ...paginationStyle}}>
                    <Pagination
                        current={currentPage}
                        pageSize={pageSize}
                        total={total}
                        onChange={handlePageChange}
                        onShowSizeChange={handleShowSizeChange}
                        showSizeChanger
                    pageSizeOptions={pageSizeOptions}
                    showTotal={(total) => `共 ${total} 条记录`}
                />
            </div>
            )}
        </div>
    )
}
export default TableWithPagination;
