/** @format */
import * as React from 'react';
import {Typography, Row, Popconfirm, Badge, notification} from 'antd';
import {ColumnProps} from 'antd/es/table';

import {TaskStatus, TaskStatuColor} from '../../../const/status';
import message from '../../../components/message';
import {PaginationProps} from 'antd/es/pagination';
import ViewTemplate from '../../../components/button/viewTemplate';
import Result from '../../../components/result';
import OnlineQuery from './components/onlineQuery';
import {useBatchList, useDeleteTask, ITaskRecordProps, useUpdateTask} from '../../../service/tasks';
import CreateTask from './components/createTask';
import Button from '../../../components/button';
import Table from '../../../components/table';
const {Title} = Typography;

const dataQuery: React.FC = () => {
    const [taskListState, requestTaskList] = useBatchList({
        type: 1,
    });
    const [deleteState, requestDelete] = useDeleteTask();
    const [updateState, requestUpdate] = useUpdateTask();
    const handleChangeTable = ({current}: PaginationProps) => {
        requestTaskList({
            page_number: current,
        });
    };
    const handleRetry = () => {
        requestTaskList();
    };
    const handleDelete = (record: ITaskRecordProps) => {
        requestDelete(record.id).then(error => {
            if (error) return message.error(error);
            requestTaskList();
        });
    };
    const handleUpdateStatus = (record: ITaskRecordProps) => {
        requestUpdate({task_id: record.id, status: record.status_code === 3 ? 1 : 3}).then(error => {
            if (error) {
                return notification.error({message: `更新任务—${record.file_name}失败`, description: error});
            }
            requestTaskList();
        });
    };
    const columns: ColumnProps<ITaskRecordProps>[] = [
        {
            title: '序号',
            key: 'index',
            dataIndex: 'index',
            width: 80,
            fixed: 'left',
        },
        {
            title: '任务名称',
            key: 'task_name',
            width: 250,
            dataIndex: 'task_name',
            fixed: 'left',
            render: text => {
                return text || '--';
            },
        },
        {
            title: '商户',
            key: 'merchant',
            width: 250,
            dataIndex: 'merchant',
            render: text => {
                return text || '--';
            },
        },
        {
            title: '是否使用商户账号',
            key: 'isUseMerchant',
            width: 130,
            dataIndex: 'isUseMerchant',
        },
        {
            title: '接口名称',
            key: 'api_name',
            width: 220,
            dataIndex: 'api_name',
        },
        {
            title: '接口地址',
            key: 'api_router',
            dataIndex: 'api_router',
        },
        {
            title: '状态',
            key: 'status_code',
            dataIndex: 'status_code',
            width: 96,
            render: text => {
                return <Badge color={TaskStatuColor[text - 1]} text={TaskStatus[text - 1]} />;
            },
        },
        {
            title: '创建时间',
            key: 'created_at',
            dataIndex: 'created_at',
            width: 160,
        },
        {
            title: '操作',
            width: 215,
            fixed: 'right',
            render: (_, record) => {
                return (
                    <>
                        <Popconfirm
                            okText='确认'
                            onConfirm={() => handleDelete(record)}
                            cancelText='取消'
                            title={`是否确认删除任务--${record.api_name}`}
                        >
                            <Button type='link'>删除</Button>
                        </Popconfirm>
                        <Button type='link' href={`${record.download_file}#${Date.now()}`}>
                            下载
                        </Button>
                        {record.status_code === 3 ? (
                            <Button type='link' onClick={() => handleUpdateStatus(record)}>
                                继续
                            </Button>
                        ) : record.status_code === 1 ? (
                            <Button type='link' onClick={() => handleUpdateStatus(record)}>
                                暂停
                            </Button>
                        ) : null}
                    </>
                );
            },
        },
    ];
    return (
        <>
            <React.Fragment>
                <Title level={4}>在线查询</Title>
                <OnlineQuery />
            </React.Fragment>
            <React.Fragment>
                <Title level={4}>批量查询</Title>
                <Row style={{marginBottom: 15}}>
                    <CreateTask onOk={handleRetry}>
                        <Button type='primary'>创建任务</Button>
                    </CreateTask>
                    <ViewTemplate type='ghost' style={{marginRight: 15, marginLeft: 15}}>
                        查看模板
                    </ViewTemplate>
                    <Button onClick={handleRetry}>刷新</Button>
                </Row>
                <Result error={taskListState.error} onRetry={handleRetry}>
                    <Table
                        columns={columns}
                        rowKey='id'
                        onChange={handleChangeTable}
                        pagination={{
                            total: taskListState.total,
                            current: taskListState.deepData.page_number,
                        }}
                        loading={taskListState.loading}
                        dataSource={taskListState.dataSource}
                    />
                </Result>
            </React.Fragment>
        </>
    );
};

export default dataQuery;
