/** @format */

import * as React from 'react';
import {Input, Row, Col} from 'antd';
import {PaginationProps} from 'antd/es/pagination';
import Table from '../../../components/table';
import {ColumnProps} from 'antd/es/table';
import Button from '../../../components/button';
import ModalJsonView from '../../logAnalysis/log/components/modalJsonView';

import {useLoggingList, LoggingItemProps} from '../../../service/logging';
import Result from '../../../components/result';
const {Search} = Input;

interface dataState {
    title?: string;
    data?: {title: string; src: null | object; keyWord: string | undefined}[];
    visible: boolean;
}
interface LoggingRecordState extends LoggingItemProps {
    index: number;
}
const Loging: React.FC = () => {
    const [jsonViewState, setJsonViewState] = React.useState<dataState>({
        visible: false,
    });
    const [listState, requestList] = useLoggingList({
        search: '',
        page_num: 1,
        page_size: 10,
    });
    const handleTableChange = (pagination: PaginationProps) => {
        const {current} = pagination;
        requestList({
            page_num: current,
        });
    };
    const handleContentCompare = (data: dataState) => {
        setJsonViewState(data);
    };
    //搜索框的数据
    const TableColumns = React.useMemo(() => {
        const columns: ColumnProps<LoggingRecordState>[] = [
            {
                title: '账户名',
                dataIndex: 'user',
                key: 'user',
                width: '50',
                render: text => {
                    return text ? text : '--';
                },
            },
            {
                title: '模块',
                dataIndex: 'modules',
                key: 'modules',
            },
            {
                title: '行为',
                key: 'func',
                dataIndex: 'func',
            },
            {
                title: '名称',
                dataIndex: 'name',
                key: 'name',
                render: text => {
                    return text ? text : '--';
                },
            },
            {
                title: '修改内容',
                dataIndex: 'compare',
                key: 'compare',
                render: (text, record) => {
                    return (
                        <Button
                            type="link"
                            onClick={() => {
                                handleContentCompare({
                                    visible: true,
                                    title: record.user +'-' + record.modules +'-' + record.func + ' 对比',
                                    data: [
                                        {
                                            title: '修改前内容',
                                            src: record.before,
                                            keyWord: listState.deepData.search,
                                        },
                                        {
                                            title: '修改后内容',
                                            src: record.after,
                                            keyWord: listState.deepData.search,
                                        },
                                    ],
                                });
                            }}
                        >
                            对比
                        </Button>
                    );
                },
            },
            {
                title: '操作时间',
                dataIndex: 'created_at',
                key: 'created_at',
            },
        ];
        return columns;
    }, [listState.deepData]);
    const handleSearch = (val: string) => {
        requestList({page_num: 1, search: val});
    };
    return (
        <>
            {jsonViewState.data?.length?
                <ModalJsonView data={jsonViewState.data} title={jsonViewState.title} visible={jsonViewState.visible} onCancel={() => handleContentCompare({visible: false})} />
                : null}
            <Row style={{marginBottom: 15}}>
                <Col xxl={4} xl={5} lg={5}>
                    <Search placeholder="请输入修改后内容" disabled={listState.loading} onSearch={handleSearch} enterButton />
                </Col>
            </Row>
            <Result error={listState.error} onRetry={() => requestList({page_num: 1})}>
                <Table
                    rowKey="id"
                    onChange={handleTableChange}
                    loading={listState.loading}
                    pagination={{
                        total: listState.total,
                        current: listState.deepData.page_num,
                    }}
                    dataSource={listState.dataSource}
                    columns={TableColumns}
                    scroll={{x: false}}
                />
            </Result>
        </>
    );
};
export default Loging;
