import { CardStepTitle } from "@/components";
import ExamOrgDataReportController from "@/services/apis/ExamOrgDataReportController";
import { DataReportStatus, DataReportType, ExamStatus } from "@/services/enums";
import { ActionType, ProTable } from "@ant-design/pro-components";
import { history, useModel } from "@umijs/max";
import { Button, Tag, Typography, theme } from "antd";
import { useRef } from "react";

/** 监测上报类型管理 */
const OrgExamDataReportList: React.FC<{
    /** 监测计划ID */
    examPlanId: number;
}> = ({ examPlanId }) => {
    const { token } = theme.useToken();

    const actionRef = useRef<ActionType>();
    const { getDictValueEnum, getKeyDict } = useModel('useDict');
    const dataReportStatusDict = getKeyDict('data_report_status');

    return (
        <ProTable<API.ExamOrgDataReportUnionOutput>
            toolbar={{
                title: <CardStepTitle>数据上报</CardStepTitle>,
                // subTitle: '根据下面上报类型要求填报并在截止时间前提交',
            }}
            style={{ marginTop: token.margin }}
            search={false}
            size="small"
            bordered
            scroll={{ x: '100%' }}
            sticky={{ offsetHeader: 56 }}
            actionRef={actionRef}
            options={{ density: false, fullScreen: false, setting: false }}
            pagination={false}
            columns={[
                {
                    title: '序',
                    valueType: 'option',
                    fixed: 'left',
                    width: 32,
                    align: 'center',
                    render: (_, r, index) => {
                        return index + 1;
                    },
                },
                {
                    title: '上报类型',
                    dataIndex: ['examDataReport', 'type'],
                    valueEnum: getDictValueEnum('data_report_type'),
                    width: 144,
                    // align: 'center',
                    fixed: 'left',
                },
                {
                    title: '上报说明',
                    dataIndex: ['examDataReport', 'remark'],
                    // ellipsis: true,
                },
                {
                    title: '监测上报',
                    dataIndex: ['examDataReport', 'status'],
                    valueEnum: getDictValueEnum('exam_status', true),
                    width: 80,
                    align: 'center',
                },
                {
                    title: '上报截止时间',
                    dataIndex: ['examDataReport', 'endTime'],
                    width: 144,
                    align: 'center',
                    render: (v, r) => {
                        if (r.examDataReport?.status === ExamStatus.READY) {
                            return null;
                        }
                        return <Typography.Text type={r.examDataReport?.status === ExamStatus.ACTIVE ? 'danger' : undefined}>{v}</Typography.Text>;
                    },
                },
                {
                    title: '上报人',
                    dataIndex: ['examOrgDataReport', 'reportSysUser', 'name'],
                    width: 88,
                    align: 'center',
                },
                {
                    title: '上报时间',
                    dataIndex: ['examOrgDataReport', 'reportTime'],
                    width: 144,
                    align: 'center',
                },
                {
                    title: '上报状态',
                    dataIndex: ['examOrgDataReport', 'status'],
                    valueEnum: getDictValueEnum('data_report_status', true),
                    width: 80,
                    align: 'center',
                    render: (v, r) => {
                        if (!r.examOrgDataReport?.status) {
                            return null;
                        }
                        const s = dataReportStatusDict[r.examOrgDataReport?.status]
                        return (<Tag color={s.antStatus} style={{ marginRight: 0 }}>{s.name}</Tag>);
                    },
                },
                {
                    title: '操作',
                    valueType: 'option',
                    width: 64,
                    align: 'center',
                    fixed: 'right',
                    render: (_, r) => {
                        let linkText = '填报';
                        if (r.examDataReport?.status !== ExamStatus.ACTIVE || r.examOrgDataReport?.status === DataReportStatus.REPORTED) {
                            linkText = '查看';
                        }
                        return (
                            <Button
                                type="link"
                                size="small"
                                onClick={() => {
                                    switch (r.examDataReport?.type) {
                                        case DataReportType.STUDENT:
                                            history.push(`/exam-s/stu/report/${examPlanId}`);
                                            break;
                                        case DataReportType.SP_STUDENT:
                                            history.push(`/exam-s/sp-stu/report/${examPlanId}`);
                                            break;
                                        case DataReportType.TEACHER:
                                            history.push(`/exam-s/teacher/report/${examPlanId}`);
                                            break;
                                        case DataReportType.TEACHER_COURSE:
                                            history.push(`/exam-s/t-course/report/${examPlanId}`);
                                            break;
                                        case DataReportType.ABSENT_REPLACE:
                                            history.push(`/exam-s/absent/report/${examPlanId}`);
                                            break;
                                        case DataReportType.SCHOOL_EXAM_SCORE:
                                            history.push(`/exam-s/school-exam-score/report/${examPlanId}`);
                                            break;
                                    }
                                }}
                            >{linkText}</Button>
                        );
                    },
                }
            ]}
            rowKey="examDataReportId"
            request={async () => {
                const res = await ExamOrgDataReportController.getListByExamPlanId({ examplanid: examPlanId });
                return {
                    data: res,
                    success: true,
                };
            }}
        />
    );
}

export default OrgExamDataReportList;
