import * as React from 'react';

import { Table, TableColumnsType, TablePaginationConfig, Drawer } from 'antd';
import { StepForwardOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
import store from './auditHistoryStore';
import { Record } from '../types';
import '../style.less';
import InfoModal from './InfoModal';
import PreviewModal from './PreviewModal';
import LocalStorage from '@/LocalStorage';


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

const AuditHistory: React.FC<AuditHistoryProps> = ({ open, onClose }) => {
    const {
        state,
        init,
        onChangePagination,
        onClickModify,
        infoModalOnClickConfirm,
        infoModalOnClickCancel,
        infoModalOnClickClose,
    } = 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();
            init(userId);
        }
    }, [open]);
    const columns: TableColumnsType<Record> = [
        {
            title: '序号',
            dataIndex: 'index',
            width: 80,
            render: (_text, _record, index) => {
                return index + 1;
            }
        },
        {
            title: '知识名称',
            dataIndex: 'name',
            width: 300,
            render: (text, record) => {
                // const previewUrl = `/preview/${record.url}`; // 根据实际字段构造 URL
                return (
                    <a
                        href={record.url}
                        target="_blank"
                        rel="noopener noreferrer"
                        onClick={(e) => {
                            e.stopPropagation(); // 防止 Table 默认事件干扰
                        }}
                    >
                        {text}
                    </a>
                );
            }
        },
        {
            title: '状态',
            dataIndex: 'status',
            render: (text) => {
                if (text === '1') {
                    return '待审核';
                } else if (text === '2') {
                    return '审核中';
                } else if (text === '3') {
                    return '审核通过';
                } else if (text === '4'||text === '5') {
                    return '审核拒绝';
                }
            }
        },
        {
            title: '审核人',
            dataIndex: 'userName',
            render: (text) => {
                return `${text}`;
            }
        },
        {
            title: '审核意见',
            dataIndex: 'comment',
            render: (text) => {
                if (text) {
                    return `${text}`;
                } else {
                    return '--';
                }
            }
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            width: 200,
            render: (text) => {
                if (text) {
                    return dayjs(text).format('YYYY-MM-DD HH:mm:ss');
                } else {
                    return '--';
                }
            }
        },
        // {
        //     title: '操作',
        //     dataIndex: 'operation',
        //     width: 150,
        //     fixed: 'right',
        //     render: (_text, record) => {
        //         return (
        //             <>
        //                 <a
        //                     style={{ marginRight: 16 }}
        //                     onClick={() => {
        //                         setDrawerFlag(true)
        //                         setDrawerData(record)
        //                     }}
        //                     title='查看'
        //                 >
        //                     查看
        //                 </a >
        //                 <a
        //                     style={{ marginRight: 16 }}
        //                     onClick={() => {
        //                         onClickModify(record.appId);
        //                     }}
        //                     title='审核'
        //                 >
        //                     <StepForwardOutlined />审核
        //                 </a >
        //             </>
        //         )
        //     }
        // }
    ];
    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);
        },
    };

    return (
        <Drawer
            title="审核历史"
            width="80%"
            open={open}
            onClose={onClose}
        >
            <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);