import { SuperTable, TagStatus } from '@/components';
import ExamPaperController from '@/services/apis/ExamPaperController';
import ExamPlanController from '@/services/apis/ExamPlanController';
import { AuditStatus, ExamPaperWriterType } from '@/services/enums';
import { RightOutlined } from '@ant-design/icons';
import { ActionType, PageContainer, ProColumns } from '@ant-design/pro-components';
import { history, useParams } from '@umijs/max';
import { useRequest } from 'ahooks';
import { theme } from 'antd';
import { useRef } from 'react';
import { ExamPaperLiteItem } from '../../typing';

/** 双向细目表编制试卷列表 */
const TwclCourseList: React.FC = () => {
    const reqParams = useParams() as unknown as { examPlanId: number };

    const actionRef = useRef<ActionType>();
    const { token } = theme.useToken();

    const { data, loading } = useRequest(() => {
        return ExamPlanController.getById({ id: reqParams.examPlanId });
    });

    const columns: ProColumns<ExamPaperLiteItem>[] = [
        {
            title: '年级',
            dataIndex: ['grade', 'name'],
            width: 120,
            align: 'center',
        },
        {
            title: '科目',
            dataIndex: ['course', 'name'],
            width: 120,
            align: 'center',
        },
        {
            title: '总分',
            dataIndex: 'score',
            width: 120,
            align: 'center',
        },
        {
            title: '备注',
            dataIndex: 'remark',
        },
        {
            title: '状态',
            dataIndex: 'submitted',
            width: 80,
            align: 'center',
            render: (_, r) => {
                if (r.submitted) {
                    return <TagStatus status="success">已提交</TagStatus>;
                }
                return <TagStatus status="error">未提交</TagStatus>;
            },
        },
        {
            title: '操作',
            valueType: 'option',
            width: 80,
            align: 'center',
            fixed: 'right',
            render: (_, r) => {
                return (
                    <a onClick={() => history.push(`/exam-c/tr-twcl/course/detail/${r.id}`)}>
                        去编辑
                        <RightOutlined style={{ marginLeft: token.marginXXS }} />
                    </a>
                );
            },
        },
    ];

    return (
        <PageContainer
            title={`${data?.fullName ?? ''} - 双向细目表编制`}
            onBack={() => history.back()}
            loading={loading}
        >
            <SuperTable<ExamPaperLiteItem>
                headerTitle="科目列表"
                actionRef={actionRef}
                columns={columns}
                search={false}
                columnEmptyText=""
                request={async () => {
                    const res = await ExamPaperController.getWriterListByExamPlanId({
                        examplanid: reqParams.examPlanId,
                        writertype: ExamPaperWriterType.TWCL,
                    });
                    const data = res?.map(t => {
                        return {
                            ...t,
                            submitted: ![AuditStatus.UNSUBMIT, AuditStatus.REJECTED].includes(t.twclStatus),
                        } as ExamPaperLiteItem;
                    });
                    return {
                        data,
                        success: true,
                    };
                }}
            />
        </PageContainer>
    );
};

export default TwclCourseList;
