import { downloadFileByBlob } from "@/common/net/download";
import { CardStepTitle, StatusIcon, SuperTable } from "@/components";
import ExamPatriarchQuestionnaireProgressController from "@/services/apis/ExamPatriarchQuestionnaireProgressController";
import { DownloadOutlined } from "@ant-design/icons";
import { ActionType, PageContainer, ProColumns, ProTable } from "@ant-design/pro-components";
import { history, useModel, useParams } from "@umijs/max";
import { Button, Typography, theme } from "antd";
import { useRef } from "react";

const OrgExamPatriarchProgress: React.FC = () => {
    const reqParams = useParams() as unknown as { examPlanId: number };

    const { token } = theme.useToken();
    const { getDictValueEnum } = useModel('useDict');

    const actionRef = useRef<ActionType>();

    // 进度统计列定义
    let progressCountColumns: ProColumns<API.ExamStudentPatriarchQuestionnaireProgressStatOutput>[] = [
        {
            title: '年级',
            dataIndex: 'gradeName',
            width: 144,
            align: 'center',
            render: (v, r) => `${v}（${r.gradeBeginYear}级）`,
        },
        {
            title: '班级',
            dataIndex: 'classNumber',
            width: 64,
            align: 'center',
            renderText: (v) => `${v}班`,
        },
        {
            title: '应答人数',
            dataIndex: 'totalCount',
            width: 80,
            align: 'center',
        },
        {
            title: '已答人数',
            dataIndex: 'completedCount',
            width: 80,
            align: 'center',
            renderText: (v) => <Typography.Text type="success">{v}</Typography.Text>,
        },
        {
            title: '未答人数',
            dataIndex: 'uncompletedCount',
            width: 80,
            align: 'center',
            renderText: (v) => <Typography.Text type="danger">{v}</Typography.Text>,
        },
        {
            title: '完成进度',
            dataIndex: 'completedProgress',
            valueType: (r) => ({
                type: 'progress',
                status: r.completedProgress === 0 ? 'exception' : r.completedProgress >= 100 ? 'success' : 'active',
                precision: 1,
            }),
        },
    ];

    return (
        <PageContainer
            title="学生家长问卷填答进度统计"
            onBack={() => history.back()}
        >
            <ProTable<API.ExamStudentPatriarchQuestionnaireProgressStatOutput>
                headerTitle={<CardStepTitle>学生家长问卷填答进度</CardStepTitle>}
                search={false}
                pagination={false}
                scroll={{ x: 'max-content' }}
                size="small"
                bordered
                rowKey="id"
                columns={progressCountColumns}
                columnEmptyText=""
                request={async () => {
                    const res = await ExamPatriarchQuestionnaireProgressController.getProgressList({ examplanid: reqParams.examPlanId });
                    return {
                        success: true,
                        data: res,
                    };
                }}
            />

            <SuperTable<API.ExamStudentPatriarchQuestionnaireProgressOutput>
                headerTitle={<CardStepTitle>学生家长问卷填答明细</CardStepTitle>}
                style={{ marginTop: token.margin }}
                actionRef={actionRef}
                scroll={{ x: 'max-content' }}
                rowKey="id"
                columnEmptyText=""
                columns={[
                    {
                        title: '年级',
                        dataIndex: 'gradeName',
                        width: 144,
                        align: 'center',
                        render: (v, r) => `${v}（${r.gradeBeginYear}级）`,
                    },
                    {
                        title: '班级',
                        dataIndex: 'classNumber',
                        width: 64,
                        align: 'center',
                        renderText: (v) => `${v}班`,
                    },
                    {
                        title: '校区',
                        dataIndex: ['sysOrgBranch', 'name'],
                        width: 88,
                        align: 'center',
                    },
                    {
                        title: '姓名',
                        dataIndex: 'name',
                        width: 160,
                        align: 'center',
                    },
                    {
                        title: '证件类型',
                        dataIndex: 'certificateType',
                        valueEnum: getDictValueEnum('certificate_type'),
                        width: 112,
                        align: 'center',
                    },
                    {
                        title: '证件号码',
                        dataIndex: 'idNumber',
                        width: 160,
                        align: 'center',
                    },
                    {
                        title: '是否完成',
                        dataIndex: 'is_completed',
                        width: 80,
                        align: 'center',
                        render: (_, r) => {
                            return (<StatusIcon status={r.isCompleted ? 'success' : 'error'} filled />);
                        },
                    },
                    {
                        title: '填答手机',
                        dataIndex: 'mobile',
                        width: 128,
                        align: 'center',
                    },
                    {
                        title: '提交时间',
                        dataIndex: 'submitTime',
                        width: 144,
                        align: 'center',
                    },
                    {},
                ]}
                toolbar={{
                    actions: [
                        <Button
                            key="export"
                            icon={<DownloadOutlined />}
                            onClick={async () => {
                                const res = await ExamPatriarchQuestionnaireProgressController.exportUncompletedExcel({ examPlanId: reqParams.examPlanId });
                                if (res) {
                                    downloadFileByBlob(res.data, res.fileName);
                                }
                            }}
                        >下载未填答学生名单</Button>
                    ],
                }}
                request={async (params, sort) => {
                    return SuperTable.requestPageAgent({ params, sort }, async (p) => {
                        const res = await ExamPatriarchQuestionnaireProgressController.queryPageList({ ...p, examPlanId: reqParams.examPlanId });
                        return res;
                    });
                }}
            />

        </PageContainer>
    );
}

export default OrgExamPatriarchProgress;
