import {useEffect, useState} from "react";
import {Pagination, Table, Button, Tag} from "antd";
import styles from '../AssetList.less'
const mockData = [
    {
        'key': '1',
        '资产ID': 1,
        '资产名称': '工业终端A',
        '管理人': '李经萍',
        '状态': '在线',
        '地点': '车间A',
        '编号': 'ASSET-001',
        '二维码信息': 'QR-001',
        '分类分组': '终端',
        '数量单位': '台',
        '更新时间': '2025-10-20',
        '维保时间': '2026-04-20',
        '资产类型': '硬件',
        '关联资产': '关联传感器S-001',
    },
    {
        'key': '2',
        '资产ID': 2,
        '资产名称': '核心服务器B',
        '管理人': '吴洁丽',
        '状态': '在用',
        '地点': '机房A',
        '编号': 'ASSET-002',
        '二维码信息': 'QR-002',
        '分类分组': '服务器',
        '数量单位': '台',
        '更新时间': '2025-10-15',
        '维保时间': '2026-03-15',
        '资产类型': '硬件',
        '关联资产': '关联存储设备D-001',
    },
    {
         'key': '3',
        '资产ID': 3,
        '资产名称': '千兆路由器C',
        '管理人': '李姝萍',
        '状态': '在线',
        '地点': '机房B',
        '编号': 'ASSET-003',
        '二维码信息': 'QR-003',
        '分类分组': '网络设备',
        '数量单位': '台',
        '更新时间': '2025-10-10',
        '维保时间': '2026-02-10',
        '资产类型': '硬件',
        '关联资产': '关联交换机E-001',
    },
    {
        'key': '4',
        '资产ID': 4,
        '资产名称': '防火墙设备D',
        '管理人': '何克金',
        '状态': '在用',
        '地点': '机房A',
        '编号': 'ASSET-004',
        '二维码信息': 'QR-004',
        '分类分组': '安全设备',
        '数量单位': '台',
        '更新时间': '2025-10-05',
        '维保时间': '2026-01-05',
        '资产类型': '硬件',
        '关联资产': '关联服务器B',
    },
    {
        'key': '5',
        '资产ID': 5,
        '资产名称': '无线打印机E',
        '管理人': '李勇',
        '状态': '库存',
        '地点': '仓库A',
        '编号': 'ASSET-005',
        '二维码信息': 'QR-005',
        '分类分组': '外设',
        '数量单位': '台',
        '更新时间': '2025-10-01',
        '维保时间': '2026-05-01',
        '资产类型': '硬件',
        '关联资产': '关联服务器B',
    },
    {
        'key': '6',
        '资产ID': 6,
        '资产名称': '运维管理软件F',
        '管理人': '周牧民',
        '状态': '在用',
        '地点': '办公区A',
        '编号': 'ASSET-006',
        '二维码信息': 'QR-006',
        '分类分组': '软件',
        '数量单位': '套',
        '更新时间': '2025-09-25',
        '维保时间': '2026-06-25',
        '资产类型': '软件',
        '关联资产': '关联工业终端A',
    },
    {
        'key': '7',
        '资产ID': 7,
        '资产名称': '传感器配件包G',
        '管理人': '何艳丽',
        '状态': '维保中',
        '地点': '维修区A',
        '编号': 'ASSET-007',
        '二维码信息': 'QR-007',
        '分类分组': '附件',
        '数量单位': '件',
        '更新时间': '2025-09-20',
        '维保时间': '2025-11-20',
        '资产类型': '硬件',
        '关联资产': '关联传感器S-001',
    },
];

const AssetTable = () => {
    // 分页状态
    const [currentPage, setCurrentPage] = useState(1);
    const [pageSize, setPageSize] = useState(5);
    const [total, setTotal] = useState(85); // 实际项目中由接口返回总条数
    const [loading, setLoading] = useState(false);
    // 表格数据（实际项目中由接口请求赋值）
    const [dataSource, setDataSource] = useState(mockData);

    // 接口请求函数（实际项目中替换为真实接口逻辑）
    const fetchAssetData = async (page , size ) => {
        try {
            // 模拟接口请求，实际替换为：
            // const res = await axios.get('/api/assets', { params: { page, size } });
            // setDataSource(res.data.list);
            // setTotal(res.data.total);
            console.log(page,size)

        } catch (error) {
            console.error('获取资产数据失败：', error);
        }
    };

    // 组件挂载时初始化数据
    useEffect(() => {
        const timer=setTimeout(()=>{
            fetchAssetData(currentPage, pageSize);
        },0)
        return ()=>{
            clearTimeout(timer);
        }
    }, [currentPage,pageSize]);

    useEffect(()=>{
        setCurrentPage(1);
    }, [pageSize]);
    // 处理分页变更
    const handlePageChange = (page) => {
            console.log(page)
            setCurrentPage(page);
    };

    // 处理页大小变更
    const handleShowSizeChange = (_, size) => {
            console.log(1)
            // setCurrentPage(1);
            setPageSize(size);
            setLoading(true);
    };

    // 表格列配置
    const columns = [

        {
            title: '资产ID',
            dataIndex: '资产ID',
            key: '资产ID',
        },
        {
            title: '资产名称',
            dataIndex: '资产名称',
            key: '资产名称',
        },
        {
            title: '管理人',
            dataIndex: '管理人',
            key: '管理人',
        },
        {
            title: '状态',
            dataIndex: '状态',
            key: '状态',
            render:(value)=>{
                return <Tag color={value === '在线' ? 'green' : value === '在用' ? 'orange' : 'red'}>{value}</Tag>
            }
        },
        {
            title: '地点',
            dataIndex: '地点',
            key: '地点',
        },
        {
            title: '编号',
            dataIndex: '编号',
            key: '编号',
        },
        {
            title: '二维码信息',
            dataIndex: '二维码信息',
            key: '二维码信息',
        },
        {
            title: '分类分组',
            dataIndex: '分类分组',
            key: '分类分组',
        },
        {
            title: '数量单位',
            dataIndex: '数量单位',
            key: '数量单位',
        },
        {
            title: '更新时间',
            dataIndex: '更新时间',
            key: '更新时间',
        },
        {
            title: '维保时间',
            dataIndex: '维保时间',
            key: '维保时间',
        },
        {
            title: '资产类型',
            dataIndex: '资产类型',
            key: '资产类型',
        },
        {
            title: '关联资产',
            dataIndex: '关联资产',
            key: '关联资产',
        },
        {
            title: '操作',
            key: '操作',
            render: () => (
                <>
                    <Button style={{color:'rgba(44, 158, 157, 1)'}} type="link" size="small">查看详情</Button>
                    <Button style={{color:'rgba(44, 158, 157, 1)'}} type="link" size="small">编辑</Button>
                    <Button  type="link" danger size="small">删除</Button>
                    <Button style={{color:'rgba(44, 158, 157, 1)'}} type="link" size="small">关联</Button>
                </>
            ),
        },
    ];

    // 封装分页组件
    const CustomPagination = ({ current, pageSize, total, onChange, onShowSizeChange }) => (
        <Pagination
            current={current}
            pageSize={pageSize}
            total={total}
            onChange={onChange}
            onShowSizeChange={onShowSizeChange}
            showSizeChanger
            pageSizeOptions={['5', '10', '20', '50']}
            showTotal={(total) => `共 ${total} 条记录`}
        />
    );

    return (
        <div style={{width:'100%'}}>
            <Table
                columns={columns}
                dataSource={dataSource}
                rowKey="key"
                pagination={false} // 关闭自带分页，使用自定义分页
                rowSelection={{
                    type: 'checkbox', // 启用多选行
                    // 可选：处理选中事件
                    // onChange: (selectedRowKeys, selectedRows) => {
                    //   console.log('选中行：', selectedRows);
                    // },
                }}
                style={{width:'100%'}}
                className={styles.table}
            />
            <div style={{ textAlign: 'right', marginTop: 16 }}>
                <CustomPagination
                    current={currentPage}
                    pageSize={pageSize}
                    total={total}
                    onChange={handlePageChange}
                    onShowSizeChange={handleShowSizeChange}
                />
            </div>
        </div>
    );
};

export default AssetTable;
