import * as React from 'react';
import { observer } from 'mobx-react';
import { Table, TableColumnsType, TablePaginationConfig, Modal } from 'antd';
import { DownloadOutlined } from '@ant-design/icons';
import Search from './components/Search';
import dayjs from 'dayjs';
import store from './store';
import { Record } from './types';
import './style.less';

const DataExport: React.FC = () => {
    const {
        state,
        onClickSearch,
        onClickReset,
        onChangePagination,
        onClickDownload,
        init,
        reset
    } = store;
    const {
        listLoading,
        list,
        page
    } = state;

    React.useEffect(() => {
        init();
        return () => reset();
    }, []);

    const columns: TableColumnsType<Record> = [
        {
            title: '序号',
            dataIndex: 'index',
            width: 80,
            render: (text, record, index) => {
                return index + 1;
            }
        },
        {
            title: '聊天标题',
            dataIndex: 'dialog_name',
        },
        {
            title: '消息长度',
            dataIndex: 'length',
            render: (text) => {
                return text + '条';
            }
        },
        {
            title: '聊天时间',
            dataIndex: 'create_time',
            width: 200,
            render: (text) => {
                if (text) {
                    return dayjs(text).format('YYYY-MM-DD HH:mm:ss');
                } else {
                    return '--';
                }
            }
        },
        {
            title: '操作',
            dataIndex: 'operation',
            width: 80,
            fixed: 'right',
            render: (text, record) => {
                return (
                    <a
                        onClick={() => {
                            Modal.confirm({
                                title: '导出',
                                content: '确定导出Excel吗？',
                                onOk: async () => {
                                    await onClickDownload(record.id, record.dialog_name);
                                }
                            });
                        }}
                    >
                        <DownloadOutlined />
                    </a >
                )
            }
        }
    ];

    const paginationConfig: TablePaginationConfig = {
        // 显示数据总量
        showTotal: (total: number) => {
            return `共 ${total} 条`;
        },
        // 展示分页条数切换
        showSizeChanger: true,
        // 指定每页显示条数
        pageSizeOptions: ['10', '20', '50', '100'],
        // 快速跳转至某页
        showQuickJumper: true,
        current: page.pageNumber,
        pageSize: page.pageSize,
        total: page.total,
        onChange: async (page, pageSize) => {
            await onChangePagination(page, pageSize);
        },
    };

    return (
        <div className='dataExport'>
            <div className='dataExport-search'>
                <Search
                    onClickSearch={onClickSearch}
                    onClickReset={onClickReset}
                />
            </div>
            <div className='dataExport-table'>
                <Table
                    scroll={{ x: 'max-content' }}
                    rowKey={(record) => record.id}
                    loading={listLoading}
                    columns={columns}
                    dataSource={list}
                    pagination={paginationConfig}
                />
            </div>
        </div>
    );
};

export default observer(DataExport);