import * as React from 'react';

import { Table, TableColumnsType, TablePaginationConfig, Drawer, Row, Col, Input, Button, Spin } from 'antd';
import { StepForwardOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
import store from './evaluationTaskHistoryStore';
import { Record } from '../types';
// import InfoModal from './InfoModal';
// import PreviewModal from './PreviewModal';
// import LocalStorage from '@/LocalStorage';


interface AuditHistoryProps {
    open: boolean;
    onClose: () => void;
    record?: Record;
}

const AuditHistory: React.FC<AuditHistoryProps> = ({ open, onClose, record }) => {
    const {
        state,
        init,
        onChangePagination,
        onSetName
    } = store;
    const {
        listLoading,
        list,
        infoModalId,
        infoModalOpen,
        page
    } = state;

    const [drawerFlag, setDrawerFlag] = React.useState<boolean>(false);
    const [drawerData, setDrawerData] = React.useState<any>({});
    React.useEffect(() => {
        if (open) {
            // const userInfo = LocalStorage.getUserInfo();
            // const userId = (userInfo?.id ?? '').toString();
            onSetName(record?.taskName || '');
            init();
        }
    }, [open]);
    const columns: TableColumnsType<any> = [
        {
            title: '任务名称/ID', dataIndex: 'taskId', width: 220,
            render: (text, record: any) => {
                return <div>
                    <div style={{ fontWeight: 600 }}>{record.taskName}</div>
                    <div style={{ color: '#999', fontSize: 12, marginTop: 4 }}>ID: {record?.taskId}
                    </div>
                </div>
            },
        },
        {
            title: '状态', dataIndex: 'status', width: 120,
            render: (text) => {
                let color = '#52c41a';
                let statusText = '';
                if (text === '0') {
                    color = '';
                    statusText = '未执行';
                } else if (text === '1') {
                    return <Spin size="small" />;
                } else if (text === '2') {
                    color = '#52c41a';
                    statusText = '成功';
                } else if (text === '3') {
                    color = '';
                    statusText = '失败';
                }
                return <span style={{ color }}>{statusText}</span>;
            }
        },
        {
            title: '模型服务', dataIndex: 'model', width: 120
        },
        { title: '类型', dataIndex: 'evaluationType', width: 140 },
        { title: '数据集', dataIndex: 'datesetName', width: 140 },
        { title: '结果打分', dataIndex: 'resultStore', width: 140 },
        { title: '创建时间', dataIndex: 'createTime', width: 140 },
        { title: '开始时间', dataIndex: 'startTime', width: 140 },
        { title: '结束时间', dataIndex: 'endTime', width: 140 },
        {
            title: '操作',
            dataIndex: 'status',
            align: 'center',
            width: 120,
            fixed: 'right',
            render: (val, record: any) => {
                if (record.status === '3') {
                    return (<p className='cursor-pointer' onClick={() => {
                    }}>
                        下载
                    </p>)
                } else {
                    return (<p className='text-primary cursor-pointer' onClick={() => {
                        window.open(record.fullUrl)
                    }}>
                        下载
                    </p>)
                }
            },
        }
    ];
    const paginationConfig: TablePaginationConfig = {
        // 显示数据总量
        showTotal: (total: number) => {
            return `共 ${total} 条`;
        },
        // 展示分页条数切换
        showSizeChanger: true,
        // 指定每页显示条数
        pageSizeOptions: ['10', '20', '50', '100'],
        // 快速跳转至某页
        showQuickJumper: true,
        current: page.pageNum,
        pageSize: page.pageSize,
        total: page.total,
        onChange: async (page, pageSize) => {
            await onChangePagination(page, pageSize);
        },
    };
    const [kbName, setKbName] = React.useState<string>('');
    const handleSearch = async () => {
        init();
    }
    return (
        <Drawer
            title="评测历史"
            width="80%"
            open={open}
            onClose={onClose}
        >
            {/* <div style={{ marginBottom: 12 }}>
                <Row gutter={12} align="middle">
                    <Col span={6}>
                        <Input placeholder="名称" value={kbName} onChange={(e) => {
                            setKbName(e.target.value)
                            onSetName(e.target.value)
                        }} />
                    </Col>
                    <Col>
                        <Button type="primary" onClick={handleSearch}>搜索</Button>
                    </Col>
                </Row>
            </div> */}
            <div className='knowledgeLibList'>
                <div className='knowledgeLibList-table'>
                    <Table
                        scroll={{ x: 'max-content' }}
                        rowKey={(record) => record.createTime}
                        loading={listLoading}
                        columns={columns}
                        dataSource={list}
                        pagination={paginationConfig}
                    />
                </div>
            </div>
        </Drawer>
    );
}
export default observer(AuditHistory);