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

const LogVis: React.FC = () => {
    const { getDictValueEnum } = useModel('useDict');
    const visTypeValueEnum = getDictValueEnum('vis_type');

    const actionRef = useRef<ActionType>();
    const currentRef = useRef<API.SysLogVisOutput>();
    const [detailShow, setDetailShow] = useState(false);

    const columns: ProColumns<API.SysLogVisOutput>[] = [
        { title: '访问者', dataIndex: 'name' },
        {
            title: '访问类型',
            dataIndex: 'visType',
            width: 80,
            align: 'center',
            valueEnum: visTypeValueEnum,
        },
        {
            title: '是否成功',
            dataIndex: 'success',
            width: 80,
            align: 'center',
            valueEnum: TrueOrFalseValueEnum,
            search: { transform: (v) => ({ success: JSON.parse(v) }) },
        },
        {
            title: 'IP',
            dataIndex: 'ip',
            width: 120,
            align: 'center',
            hideInSearch: true
        },
        {
            title: '浏览器',
            dataIndex: 'browser'
        },
        {
            title: '访问时间',
            dataIndex: 'visTime',
            hideInSearch: true
        },
        {
            title: '访问者',
            dataIndex: 'account'
        },
        {
            title: '详情',
            dataIndex: 'action',
            valueType: 'option',
            width: 88,
            align: 'center',
            render: (_, r) => (
                <a
                    onClick={() => {
                        currentRef.current = r;
                        setDetailShow(true);
                    }}
                >
                    查看详情
                </a>
            ),
        },
        {
            title: '操作时间',
            dataIndex: 'visTime',
            valueType: 'dateTimeRange',
            hideInTable: true,
            hideInDescriptions: true,
            colSize: 2,
            fieldProps: { allowEmpty: [true, true] },
            search: { transform: (v) => ({ searchBeginTime: v[0], searchEndTime: v[1] }) },
        },
    ];

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

export default LogVis;
