import React, {useState} from 'react';
import {Button, Flex, message, Popconfirm, Table, Typography} from "antd";
import ManageTableColumn from "./ManageTableColumn";
import ImportDataDrawer from "./ImportDataDrawer";
import EditDataManageDrawer from './EditDataManageDrawer';
import creatMessageCommonAxios from "../../../http/CreatMessageCommonAxios";

const DataManageTable = props => {

    const {workloadData, fetWorkload} = props;

    const [messageApi, contextHolder] = message.useMessage();
    const commonAxios = creatMessageCommonAxios(messageApi);

    const [selectIds, setSelectIds] = useState([]);

    // 新增编辑抽屉相关状态
    const [editDrawerOpen, setEditDrawerOpen] = useState(false);
    const [currentEditData, setCurrentEditData] = useState({});
    const rowSelection = {
        type: 'checkbox',
        onChange: (selectedRowKeys, selectedRows) => {
            setSelectIds(selectedRowKeys);
            console.log(selectIds)
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
    };

    const onBatchDelete = () => {
        let url = `/api/v1/workload/delete`
        commonAxios.delete(url, {data: selectIds}).then(res => {
            if (res.data.data && res.data.data === true) {
                messageApi.success("删除成功");
                fetWorkload()
                setSelectIds([]);
            } else {
                messageApi.warning('您要删除的数据不存在或已被删除！');
            }
        })
    }
    // 编辑按钮点击处理（关键：此函数将打开抽屉）
    const handleEdit = (record) => {
        console.log("编辑数据：", record); // 用于调试，确认是否触发
        setCurrentEditData(record);
        setEditDrawerOpen(true); // 打开抽屉
    };
    const [importDataOpen, setImportDataOpen] = useState(false);

    const importDataDrawerOnClose = () => {
        setImportDataOpen(false);
    }

    return (
        <div>
            {contextHolder}
            <ImportDataDrawer
                open={importDataOpen}
                onClose={importDataDrawerOnClose}
                fetchWorkloadData={fetWorkload}
            />
             {/* 编辑抽屉 */}
             <EditDataManageDrawer
                open={editDrawerOpen}
                setOpen={setEditDrawerOpen}
                commonAxios={commonAxios}
                fetchWorkload={fetWorkload}
                messageApi={messageApi}
                initialValues={currentEditData}
            />

            <Flex justify={"space-between"} align={"center"} gap={"middle"}>
                <h3>数据管理</h3>
                <Flex justify={"flex-end"} align={"center"} gap={"middle"}>
                    <Typography.Text>共{workloadData.total}条数据</Typography.Text>
                    <Button type={"primary"} onClick={() => setImportDataOpen(true)}>导入</Button>
                </Flex>
            </Flex>
            {/* 关键修复：传递 handleEdit 到表格列 */}
            <Table
                rowSelection={rowSelection}
                rowKey={(record) => record.id}
                columns={ManageTableColumn(commonAxios, messageApi, fetWorkload, handleEdit)} // 新增 handleEdit 参数
                dataSource={workloadData.list}
                pagination={false}
            />
            <div id={'batch-operation'} style={{
                position: 'fixed',
                bottom: 0,
                left: '0',
                width: '100%',
                height: '60px',
                background: 'rgb(245,245,245,0.8)',
                paddingLeft: 20,
                paddingRight: 20,
                display: selectIds.length !== 0 ? 'block' : 'none'
            }}>
                <Flex justify={"space-between"} align={"center"} style={{width: '100%', height: '100%'}}>
                    <Typography.Text>已选择<Typography.Text
                        type={'danger'}>{selectIds.length}</Typography.Text>项</Typography.Text>
                    <Popconfirm
                        title="批量删除工作量"
                        description={`确定批量删除这${selectIds.length}条记录吗？`}
                        onConfirm={() => onBatchDelete()}
                        okText="确定"
                        cancelText="算了"
                    >
                        <Button type={"primary"} danger>批量删除</Button>
                    </Popconfirm>
                </Flex>
            </div>
        </div>
    );
};

DataManageTable.propTypes = {};

export default DataManageTable;