import { AuditTimeline } from '@/components';
import { ProDescriptions, ProDescriptionsItemProps } from '@ant-design/pro-components';
import { Card, Drawer } from 'antd';
import { useState } from 'react';

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

/** 监测缺测替补学生详情 */
const ExamAbsentReplaceDetailDrawer: React.FC<ExamAbsentReplaceDetailDrawerProps> = ({ columns, data, onClose }) => {
    const [open, setOpen] = useState<boolean>(true);
    const handleClose = () => { setOpen(false); setTimeout(onClose, 300); };
    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 }}>
                            <AuditTimeline auditList={data.auditList} />
                        </Card> : '无'
                    }
                </ProDescriptions.Item>
            </ProDescriptions>
        </Drawer>
    );
};

export default ExamAbsentReplaceDetailDrawer;
