import { TrueOrFalseValueEnum } from "@/common/valueEnum";
import { CardStepTitle, TagStatus } from "@/components";
import ExamPlanController from "@/services/apis/ExamPlanController";
import { ReloadOutlined } from "@ant-design/icons";
import { PageContainer, ProCard, ProDescriptions, ProTable } from "@ant-design/pro-components";
import { history, useModel, useParams } from "@umijs/max";
import { useRequest } from "ahooks";
import { Button, FloatButton, Tag, theme } from "antd";
import OrgExamDataPublishList from "./components/OrgExamDataPublishList";
import OrgExamDataReportList from "./components/OrgExamDataReportList";

const OrgExamPlanDetail: 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 { getKeyDict } = useModel('useDict');
    const educationStageDict = getKeyDict('education_stage');
    const examStatus = getKeyDict('exam_status');

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

    return (
        <PageContainer
            title={data?.fullName}
            loading={loading}
            onBack={() => history.back()}
            extra={<Button key="reload" icon={<ReloadOutlined />} onClick={run}>刷新</Button>}
        >
            <ProCard
                title={<CardStepTitle>基本信息</CardStepTitle>}
                extra={<Tag color={status?.antColor} style={{ marginRight: 0 }}>{status?.name}</Tag>}
            >
                <ProDescriptions size="small">
                    <ProDescriptions.Item label="监测学期">
                        {data?.semester?.name}
                    </ProDescriptions.Item>
                    <ProDescriptions.Item label="监测学段">
                        {data?.educationStage ? educationStageDict[data?.educationStage]?.name : ''}
                    </ProDescriptions.Item>
                    <ProDescriptions.Item label="备注说明">
                        {data?.remark}
                    </ProDescriptions.Item>
                </ProDescriptions>
            </ProCard>
            <ProTable
                headerTitle={<CardStepTitle>监测年级</CardStepTitle>}
                style={{ marginTop: token.margin }}
                options={false}
                dataSource={data?.examGrades}
                rowKey="id"
                search={false}
                pagination={false}
                bordered
                size="small"
                columns={[
                    {
                        title: '序',
                        valueType: 'option',
                        fixed: 'left',
                        width: 32,
                        align: 'center',
                        render: (_, r, index) => {
                            return index + 1;
                        },
                    },
                    {
                        title: '名称',
                        dataIndex: ['grade', 'name'],
                        width: 112,
                        align: 'center',
                    },
                    {
                        title: '全称',
                        dataIndex: ['grade', 'fullName'],
                        width: 160,
                        align: 'center',
                    },
                    {
                        title: '级（入学年）',
                        dataIndex: 'gradeBeginName',
                        width: 128,
                        align: 'center',
                    },
                    {
                        title: '届（毕业年）',
                        dataIndex: 'gradeEndName',
                        width: 128,
                        align: 'center',
                    },
                    {
                        title: '需要自编监测号',
                        dataIndex: 'isRequiredSelfExamNumber',
                        width: 120,
                        align: 'center',
                        render: (v, r) => {
                            const s = TrueOrFalseValueEnum[`${r.isRequiredSelfExamNumber}`];
                            return (<TagStatus status={s.status}>{s.text}</TagStatus>);
                        },
                    },
                    {
                        title: '自编监测号长度',
                        dataIndex: 'selfExamNumberLength',
                        width: 120,
                        align: 'center',
                        render: (v, r) => {
                            if (r.isRequiredSelfExamNumber) {
                                return v;
                            }
                            return '/';
                        },
                    },
                    {},
                ]}
            />
            <OrgExamDataReportList examPlanId={reqParams.id} />
            <OrgExamDataPublishList examPlanId={reqParams.id} />
            <FloatButton.BackTop visibilityHeight={100} />
        </PageContainer>
    );
}

export default OrgExamPlanDetail;