import { SuperTable } from '@/components';
import ExamOrgController from '@/services/apis/ExamOrgController';
import { ActionType, ProColumns } from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import { Drawer, Space, theme } from 'antd';
import { useCallback, useRef, useState } from 'react';

export type ExamOrgAddDrawerProps = {
    /** 监测计划ID */
    examPlanId: number;
    /** 选择机构回调函数 */
    onSelect: (orgs: API.SysOrgLiteOutput[]) => void;
    /** 关闭回调函数 */
    onClose: () => void;
};

/** 可添加机构列表 */
const ExamOrgAddDrawer: React.FC<ExamOrgAddDrawerProps> = ({ examPlanId, onClose, onSelect }) => {
    const [open, setOpen] = useState<boolean>(true);
    const handleClose = () => { setOpen(false); setTimeout(onClose, 300); };

    const { token } = theme.useToken();

    const [selectedRowKeys, setSelectedRowKeys] = useState<number[]>([]);
    const actionRef = useRef<ActionType>();

    const { getDictValueEnum } = useModel('useDict');

    const columns: ProColumns<API.SysOrgLiteOutput>[] = [
        {
            title: '机构代码',
            dataIndex: 'code',
            width: 80,
            align: 'center',
        },
        {
            title: '城乡类别',
            dataIndex: 'urbanRuralType',
            valueEnum: getDictValueEnum('urban_rural_type'),
            width: 80,
            align: 'center',
            search: { transform: (v) => ({ urbanRuralType: JSON.parse(v) }) },
        },
        {
            title: '机构全称',
            dataIndex: 'fullName',
            hideInSearch: true,
        },
        {
            title: '机构名称',
            dataIndex: 'name',
        },
        {
            title: '状态',
            dataIndex: 'status',
            valueEnum: getDictValueEnum('common_status', true),
            width: 80,
            align: 'center',
            search: { transform: (v) => ({ status: JSON.parse(v) }) },
        },
    ];

    const handleSelect = useCallback(async (rows: API.SysOrgLiteOutput[]) => {
        onSelect(rows);
        try {
            await ExamOrgController.addList({ examPlanId, sysOrgIdList: rows.map(t => t.id) });
            handleClose();
        }
        catch { }
    }, []);

    return (
        <Drawer
            title="添加被监测机构"
            width={1080}
            styles={{ body: { backgroundColor: token.colorBgLayout } }}
            open={open}
            onClose={handleClose}
        >
            <SuperTable<API.SysOrgLiteOutput>
                headerTitle="机构列表"
                actionRef={actionRef}
                columns={columns}
                scroll={{ x: 'max-content' }}
                tableLayout="fixed"
                cardProps={false}
                sticky={{ offsetHeader: -token.paddingLG }}
                options={{ setting: false, fullScreen: false }}
                request={async (params, sort) => {
                    return SuperTable.requestPageAgent({ params, sort }, async (p) => {
                        const res = await ExamOrgController.queryNotInSysOrgPageList({ ...p, examPlanId });
                        return res;
                    });
                }}
                rowSelection={{
                    selectedRowKeys,
                    onSelect: (record, selected, selectedRows) => {
                        setSelectedRowKeys(selectedRows.map((t) => t.id) || []);
                    },
                    onSelectAll: (_, selectedRows) => {
                        setSelectedRowKeys(selectedRows.map((t) => t.id) || []);
                    },
                }}
                tableAlertRender={({ selectedRowKeys, onCleanSelected }) => {
                    return (
                        <Space size="large">
                            <span>已选 {selectedRowKeys.length} 项</span>
                            <a onClick={() => {
                                setSelectedRowKeys([]);
                                onCleanSelected();
                            }}>取消选择</a>
                        </Space>
                    );
                }}
                tableAlertOptionRender={({ selectedRows }) => {
                    return (
                        <Space size="large">
                            <a onClick={() => handleSelect(selectedRows)}>批量添加</a>
                        </Space>
                    );
                }}
                pagination={{
                    onChange: () => {
                        setSelectedRowKeys([]);
                    },
                }}
            />
        </Drawer>
    );
};

export default ExamOrgAddDrawer;
