import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Button } from 'antd';
import ProTable from '@ant-design/pro-table';
import { getOperationLog, } from '../actions/operationLogs';
import moment from 'moment';

const UserManage = (props) => {
    const { dispatch, clientHeight, user } = props

    const [dataSource, setDataSource] = useState([]);
    const [date, setDate] = useState([moment().subtract(1, 'days'), moment()]);

    const columns = [
        {
            title: '关键字',
            dataIndex: 'keyword',
            hideInTable: true,
        }, {
            title: '时间',
            dataIndex: 'time',
            key: 'time',
            valueType: 'dateRange',
            fieldProps: {
                value: date,
                onChange: e => { setDate(e) }
            },
            ellipsis: true,
            width: 150,
            render: (_, record) => {
                console.log(record, 'record')
                return <div>{moment(record.time).format('YYYY-MM-DD HH:mm:ss')}</div>
            }
        }, {
            title: '客户端类型 ',
            dataIndex: 'clientType',
            key: 'clientType',
            search: false,
            ellipsis: true,
        }, {
            title: '内容',
            dataIndex: 'content',
            key: 'content',
            search: false,
            ellipsis: true,
        }, {
            title: '操作用户',
            dataIndex: 'user',
            key: 'user',
            search: false,
            ellipsis: true,
            width: 150,
            render: (_, record) => {
                return <div>{record.user?.name}</div>
            }
        },
    ];

    return (
        <ProTable
            columns={columns}
            dataSource={dataSource || []}
            pagination={{ pageSize: 20, size: 'default' }}
            options={false}
            rowKey="id"
            request={async (params = {}) => {
                const res = await dispatch(getOperationLog({
                    limit: params?.pageSize,
                    page: params?.current - 1,
                    keyword: params?.keyword,
                    startTime: date ? date[0].format('YYYY-MM-DD') + ' 00:00:00' : '',
                    endTime: date ? date[1].format('YYYY-MM-DD') + ' 23:59:59' : '',
                }));
                setDataSource(res?.payload.data?.rows);
                return {
                    ...res,
                    total: res.payload.data.count ? res.payload.data.count : 0,
                };
            }}
            onReset={() => { setDate([moment().subtract(1, 'days'), moment()]) }}
        />
    )
}

function mapStateToProps(state) {
    const { global, auth } = state;
    return {
        clientHeight: global.clientHeight,
        user: auth.user,
    };
}

export default connect(mapStateToProps)(UserManage);