import { AuditStatus } from '@/services/enums';
import { ProDescriptions, ProDescriptionsItemProps } from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import { Card, Drawer, Space, Tag, Timeline, TimelineItemProps, theme } from 'antd';
import { useState } from 'react';

export type ExamSpecialStudentDetailDrawerProps = {
    columns: ProDescriptionsItemProps<Partial<API.ExamSpecialStudentOutput>>[];
    data: Partial<API.ExamSpecialStudentOutput>;
    /** 关闭回调函数 */
    onClose: () => void;
};

/** 监测特殊学生详情 */
const ExamSpecialStudentDetailDrawer: React.FC<ExamSpecialStudentDetailDrawerProps> = ({ columns, data, onClose }) => {
    const [open, setOpen] = useState<boolean>(true);
    const handleClose = () => { setOpen(false); setTimeout(onClose, 300); };

    const { getKeyDict } = useModel('useDict');
    const auditStatusDict = getKeyDict('audit_status');
    const { token } = theme.useToken();

    return (
        <Drawer
            title="特殊学生详情"
            width={1080}
            open={open}
            onClose={handleClose}
            className="yb-pro-desc hide-header"
        >
            <ProDescriptions
                columns={columns}
                column={1}
                dataSource={data}
                labelStyle={{ width: 96 }}
            >
                <ProDescriptions.Item label="审核记录">
                    {data.auditList && data.auditList.length > 0 ?
                        <Card style={{ width: '100%' }} bodyStyle={{ paddingBottom: 0 }}>
                            <Timeline
                                mode="left"
                                items={data.auditList?.map((t) => {
                                    const status = auditStatusDict[t.status ?? 1];

                                    let item: TimelineItemProps = {
                                        children: (
                                            <Space direction="vertical">
                                                <Space size="large">
                                                    <span>{t.createTime}</span>
                                                    <Tag color={status.antStatus}>{status?.name}</Tag>
                                                </Space>
                                                <span>{t.remark}</span>
                                            </Space>
                                        ),
                                    };
                                    if (t.status === AuditStatus.REJECTED) {
                                        item.color = token.colorError;
                                    }

                                    return item;
                                }) ?? []}
                            />
                        </Card> : '无'
                    }
                </ProDescriptions.Item>
            </ProDescriptions>
        </Drawer>
    );
};

export default ExamSpecialStudentDetailDrawer;
