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 { Button, Drawer, Popconfirm, message } from 'antd';
import { useRef, useState } from 'react';

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

    const columns: ProColumns<API.SysLogOpOutput>[] = [
        {
            title: '请求方式',
            dataIndex: 'reqMethod',
            width: 80,
            align: 'center'
        },
        {
            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: 'url',
            hideInSearch: true
        },
        {
            title: '操作时间',
            dataIndex: 'opTime',
            sorter: true,
            sortDirections: ['ascend', 'descend', null],
            hideInSearch: true,
        },
        {
            title: '操作人',
            dataIndex: 'name'
        },
        {
            title: '操作人帐号',
            dataIndex: 'account',
            hideInSearch: true
        },
        {
            title: '详情',
            dataIndex: 'action',
            valueType: 'option',
            width: 88,
            align: 'center',
            render: (_, r) => (
                <a
                    onClick={() => {
                        currentRef.current = r;
                        setDetailShow(true);
                    }}
                >
                    查看详情
                </a>
            ),
        },
        {
            title: '操作时间',
            dataIndex: 'opTime',
            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.SysLogOpOutput>
                headerTitle="操作日志列表"
                actionRef={actionRef}
                columns={columns}
                request={async (params, sort) => {
                    return SuperTable.requestPageAgent({ params, sort }, async (p) => {
                        const res = await SysLogController.queryLogOpPageList(p);
                        return res;
                    });
                }}
                toolbar={{
                    actions: [
                        <Popconfirm
                            key="clear-log"
                            title="确定要清空所有操作日志吗？"
                            onConfirm={async () => {
                                try {
                                    await SysLogController.clearLogOp();
                                    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.SysLogOpOutput>
                    dataSource={currentRef.current}
                    columns={columns as ProDescriptionsItemProps<API.SysLogOpOutput>[]}
                    column={1}
                    // bordered
                    size="small"
                    labelStyle={{ width: 96 }}
                />
            </Drawer>
        </PageContainer>
    );
};

export default LogOp;
