import { MovableModal, SuperTable } from '@/components';
import ExamPaperQuestionMajorController from '@/services/apis/ExamPaperQuestionMajorController';
import { ActionType } from '@ant-design/pro-components';
import { App, Button, Space } from 'antd';
import { useCallback, useRef, useState } from 'react';
import ExamPaperQuestionMajorEditModal from './ExamPaperQuestionMajorEditModal';

/** 试卷大题管理 */
const ExamPaperQuestionMajorModal: React.FC<{
    examPaperId: number;
    totalScore: number;
    onClose?: () => void;
}> = ({ examPaperId, totalScore, onClose }) => {
    const [open, setOpen] = useState<boolean>(true);
    const handleClose = () => { setOpen(false); setTimeout(() => onClose?.(), 300); };

    const actionRef = useRef<ActionType>();
    const [editOpen, setEditOpen] = useState(false);
    const currentRef = useRef<Partial<API.ExamPaperQuestionMajorOutput>>();

    const { modal, message } = App.useApp();

    // 删除
    const handleDelete = useCallback(async (id: number) => {
        modal.confirm({
            title: '警告',
            content: '确定立即删除吗',
            okText: '确定',
            cancelText: '取消',
            centered: true,
            onOk: async () => {
                await ExamPaperQuestionMajorController.del({ id });
                message.success('已删除');
                actionRef.current?.reload();
            },
        });
    }, [actionRef.current]);

    return (
        <>
            <MovableModal
                title="大题管理"
                width={1080}
                open={open}
                onCancel={handleClose}
                footer={false}
            >
                <SuperTable
                    headerTitle="大题列表"
                    actionRef={actionRef}
                    search={false}
                    cardProps={false}
                    options={{ setting: false, fullScreen: false }}
                    toolbar={{
                        actions: [
                            <Button key="edit" type="primary" onClick={() => {
                                currentRef.current = { id: 0, examPaperId };
                                setEditOpen(true);
                            }}>添加大题</Button>,
                        ],
                    }}
                    columns={[
                        {
                            title: '顺序',
                            dataIndex: 'sequence',
                            width: 48,
                            align: 'center',
                        },
                        {
                            title: '题号',
                            dataIndex: 'number',
                            width: 80,
                            align: 'center',
                        },
                        {
                            title: '标题',
                            dataIndex: 'title',
                            width: 160,
                        },
                        {
                            title: '提示语',
                            dataIndex: 'hint',
                        },
                        {
                            title: '分值',
                            dataIndex: 'score',
                            width: 80,
                            align: 'center',
                        },
                        {
                            title: '备注',
                            dataIndex: 'remark',
                            width: 96,
                        },
                        {
                            title: '操作',
                            valueType: 'option',
                            width: 96,
                            align: 'center',
                            render: (_, r) => {
                                return (
                                    <Space>
                                        <a onClick={() => {
                                            currentRef.current = r;
                                            setEditOpen(true);
                                        }}>修改</a>
                                        <a onClick={() => handleDelete(r.id)}>删除</a>
                                    </Space>
                                );
                            },
                        },
                    ]}
                    request={async () => {
                        const res = await ExamPaperQuestionMajorController.getListByExamPaperId({ exampaperid: examPaperId });
                        return {
                            data: res,
                            success: true,
                        };
                    }}
                />
            </MovableModal>

            {editOpen && currentRef.current &&
                <ExamPaperQuestionMajorEditModal
                    data={currentRef.current}
                    totalScore={totalScore}
                    onClose={() => setEditOpen(false)}
                    onFinish={() => actionRef.current?.reload()}
                />
            }
        </>
    );
};

export default ExamPaperQuestionMajorModal;
