import { CardStepTitle } from "@/components";
import ExamPlanController from "@/services/apis/ExamPlanController";
import { ExamStatus } from "@/services/enums";
import { PageContainer, ProCard, ProDescriptions } from "@ant-design/pro-components";
import { history, useModel, useParams } from "@umijs/max";
import { useRequest } from "ahooks";
import { App, Button, FloatButton, Space, Tag } from "antd";
import { useCallback } from "react";
import ExamDataPublishList from "./components/ExamDataPublishList";
import ExamDataReportList from "./components/ExamDataReportList";
import ExamGradeList from "./components/ExamGradeList";
import ExamOrgList from "./components/ExamOrgList";
import ExamResultList from "./components/ExamResultList";
import ExamSampleList from "./components/ExamSampleList";

const ExamPlanDetail: React.FC = () => {
    const reqParams = useParams() as unknown as { id: number };
    const { data, run, loading } = useRequest(() => {
        return ExamPlanController.getById({ id: reqParams.id });
    });

    // const { token } = theme.useToken();
    const { message, modal } = App.useApp();

    const { getKeyDict } = useModel('useDict');
    const educationStageDict = getKeyDict('education_stage');
    const examStatus = getKeyDict('exam_status');

    const status = data?.status ? examStatus[data?.status] : undefined;

    // 开始监测
    const handleStart = useCallback(async () => {
        modal.confirm({
            title: '确认消息',
            content: '确定立即开始吗',
            okText: '确定',
            cancelText: '取消',
            centered: true,
            onOk: async () => {
                try {
                    await ExamPlanController.start({ id: reqParams.id });
                    message.success('已开始');
                    run();
                }
                catch { }
            },
        });
    }, []);
    // 结束监测
    const handleStop = useCallback(async () => {
        modal.confirm({
            title: '确认消息',
            content: '确定立即结束吗',
            okText: '确定',
            cancelText: '取消',
            centered: true,
            onOk: async () => {
                try {
                    await ExamPlanController.stop({ id: reqParams.id });
                    message.success('已结束');
                    run();
                }
                catch { }
            },
        });
    }, []);
    // // 取消监测
    // const handleCancel = useCallback(async () => {
    //     modal.confirm({
    //         title: '确认消息',
    //         content: '确定立即取消吗',
    //         okText: '确定',
    //         cancelText: '取消',
    //         centered: true,
    //         onOk: async () => {
    //             await ExamPlanController.cancel({ id: reqParams.id });
    //             message.success('已取消');
    //             run();
    //         },
    //     });
    // }, []);

    return (
        <PageContainer
            title={data?.fullName}
            loading={loading}
            onBack={() => history.back()}
        // extra={<Button key="reload" icon={<ReloadOutlined />} onClick={run}>刷新</Button>}
        >
            <ProCard
                title={<CardStepTitle>基本信息</CardStepTitle>}
                extra={
                    <Space>
                        <Tag color={status?.antColor}>{status?.name}</Tag>
                        {status?.value === ExamStatus.READY &&
                            <Button
                                type="primary"
                                onClick={handleStart}
                                disabled={status?.value !== ExamStatus.READY}
                            >开始监测</Button>
                        }
                        {status?.value === ExamStatus.ACTIVE &&
                            <Button
                                // type="primary"
                                danger
                                onClick={handleStop}
                                disabled={status?.value !== ExamStatus.ACTIVE}
                            >结束监测</Button>
                        }
                        {/* <Button
                            onClick={handleCancel}
                            disabled={status?.value !== ExamStatus.ACTIVE}
                        >取消监测</Button> */}
                    </Space>
                }
            >
                <ProDescriptions size="small">
                    <ProDescriptions.Item label="监测名称">
                        {data?.name}
                    </ProDescriptions.Item>
                    <ProDescriptions.Item label="监测简称">
                        {data?.shortName}
                    </ProDescriptions.Item>
                    <ProDescriptions.Item label="监测学期">
                        {data?.semester?.name}
                    </ProDescriptions.Item>
                    <ProDescriptions.Item label="监测学段">
                        {data?.educationStage ? educationStageDict[data?.educationStage]?.name : ''}
                    </ProDescriptions.Item>
                    <ProDescriptions.Item label="创建人员">
                        {data?.createSysUser?.name}
                    </ProDescriptions.Item>
                    <ProDescriptions.Item label="创建时间">
                        {data?.createTime}
                    </ProDescriptions.Item>
                    <ProDescriptions.Item label="备注说明">
                        {data?.remark}
                    </ProDescriptions.Item>
                </ProDescriptions>
            </ProCard>

            {data?.educationStage &&
                <ExamGradeList
                    examPlanId={reqParams.id}
                    examPlanStatus={data?.status}
                    educationStage={data?.educationStage}
                    semesterId={data?.semesterId}
                />
            }

            <ExamDataReportList examPlanId={reqParams.id} examPlanStatus={data?.status} />
            <ExamOrgList examPlanId={reqParams.id} examDataReports={data?.examDataReports ?? []} />
            <ExamSampleList examPlanId={reqParams.id} />
            <ExamResultList examPlanId={reqParams.id} semesterId={data?.semesterId ?? 99999} />
            <ExamDataPublishList examPlanId={reqParams.id} examPlanStatus={data?.status} />

            <FloatButton.BackTop visibilityHeight={100} />
        </PageContainer>
    );
}

export default ExamPlanDetail;