import { SuperTable } from '@/components';
import SysLogController from '@/services/apis/SysLogController';
import {
    ActionType,
    PageContainer,
    ProColumns,
    ProDescriptions,
    ProDescriptionsItemProps,
} from '@ant-design/pro-components';
import { Button, Drawer, Popconfirm, message } from 'antd';
import { useRef, useState } from 'react';

const LogEx: React.FC = () => {
    const actionRef = useRef<ActionType>();
    const currentRef = useRef<API.SysLogExOutput>();
    const [detailShow, setDetailShow] = useState(false);

    const columns: ProColumns<API.SysLogExOutput>[] = [
        { title: '类名', dataIndex: 'className', ellipsis: true },
        { title: '方法名', dataIndex: 'methodName', ellipsis: true },
        { title: '异常名称', dataIndex: 'exceptionName', ellipsis: true },
        { title: '异常信息', dataIndex: 'exceptionMsg', ellipsis: true },
        { title: '异常时间', dataIndex: 'exceptionTime', width: 144 },
        { title: '操作账户', dataIndex: 'account', width: 128, className: 'minw-64' },
        {
            title: '详情',
            dataIndex: 'action',
            valueType: 'option',
            width: 88,
            align: 'center',
            fixed: 'right',
            render: (_, r) => (
                <a
                    onClick={() => {
                        currentRef.current = r;
                        setDetailShow(true);
                    }}
                >
                    查看详情
                </a>
            ),
        },
    ];

    return (
        <PageContainer title={false} childrenContentStyle={{ paddingTop: 0 }}>
            <SuperTable<API.SysLogExOutput>
                headerTitle="异常日志列表"
                actionRef={actionRef}
                columns={columns}
                request={async (params, sort) => {
                    return SuperTable.requestPageAgent({ params, sort }, async (p) => {
                        const res = await SysLogController.queryLogExPageList(p);
                        return res;
                    });
                }}
                toolbar={{
                    actions: [
                        <Popconfirm
                            key="clear-log"
                            title="确定要清空所有异常日志吗？"
                            onConfirm={async () => {
                                try {
                                    await SysLogController.clearLogEx();
                                    message.success('已全部清空');
                                    actionRef.current?.reload();
                                } catch { }
                            }}
                        >
                            <Button>清空日志</Button>
                        </Popconfirm>,
                    ],
                }}
            />
            <Drawer
                title="日志详情"
                open={detailShow}
                onClose={() => setDetailShow(false)}
                width="80%"
                // styles={{ body: { padding: '0 8px 8px 8px', marginTop: -12 } }}
                className="yb-pro-desc hide-header"
            >
                <ProDescriptions<API.SysLogExOutput>
                    dataSource={currentRef.current}
                    columns={columns as ProDescriptionsItemProps<API.SysLogExOutput>[]}
                    column={1}
                    // bordered
                    size="small"
                    labelStyle={{ width: 96 }}
                />
            </Drawer>
        </PageContainer>
    );
};

export default LogEx;
