import React, {useState} from 'react';
import {Button, Flex, message, Popconfirm, Table, Typography} from "antd";
import ManageTableColumn from "./ManageTableColumn";
import ImportDataDrawer from "./ImportDataDrawer";
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 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 [importDataOpen, setImportDataOpen] = useState(false);

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

    return (
        <div>
            {contextHolder}
            <ImportDataDrawer
                open={importDataOpen}
                onClose={importDataDrawerOnClose}
                fetchWorkloadData={fetWorkload}
            />
            <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>
            <Table
                rowSelection={
                    rowSelection
                }
                rowKey={(record) => record.id}
                columns={ManageTableColumn(commonAxios, messageApi, fetWorkload)}
                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;