/** @format */

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

import {PaginationProps} from 'antd/es/pagination';
import Result from '../../../components/result';
import message from '../../../components/message';
import Table from '../../../components/table';
import CrateTask from './components/createTaskForm';
import {TaskStatus, TaskStatuColor} from '../../../const/status';
import Button from '../../../components/button';
import ViewTemplate from '../../../components/button/viewTemplate';
import {IsourceItem} from '../../../service/sourceQuery';
import {useDeleteTask, useBatchList} from '../../../service/tasks';
const sourceQuery: React.FC = () => {
    const [listState, requestList] = useBatchList({type: 2});

    const [deleteState, requestDelete] = useDeleteTask();

    const handleDelete = (id: number) => {
        requestDelete(id).then(error => {
            if (error) return message.error(error);
            requestList();
        });
    };

    const handleRetry = () => {
        requestList();
    };
    const handleChangeTable = ({current}: PaginationProps) => {
        requestList({page_number: current});
    };
    const colunms: ColumnProps<IsourceItem>[] = [
        {
            title: '序号',
            key: 'index',
            dataIndex: 'index',
            width: 100,
            fixed: 'left',
        },
        {
            title: '任务文件',
            key: 'file_name',
            width: 270,
            dataIndex: 'file_name',
            fixed: 'left',
            render: text => {
                return text || '--';
            },
        },
        {
            title: '接口',
            key: 'api_name',
            dataIndex: 'api_name',
            render: text => {
                return text || '--';
            },
        },
        {
            title: '接口路径',
            key: 'api_router',
            dataIndex: 'api_router',
            render: text => {
                return text || '--';
            },
        },
        {
            title: '状态',
            key: 'status_code',
            dataIndex: 'status_code',
            render: text => {
                return <Badge color={TaskStatuColor[text - 1]} text={TaskStatus[text - 1]} />;
            },
        },
        {
            title: '创建时间',
            key: 'created_at',
            dataIndex: 'created_at',
            width: 170,
            render: text => {
                return text || '--';
            },
        },
        {
            title: '操作',
            key: 'opertion',
            width: 180,
            fixed: 'right',
            render: (_, record) => {
                return (
                    <>
                        <Popconfirm onConfirm={() => handleDelete(record.id)} title={`是否删除--${record.file_name}`}>
                            <Button type='link'>删除</Button>
                        </Popconfirm>
                        <Button type='link' href={record.download_file + '#' + Date.now()}>
                            下载
                        </Button>
                    </>
                );
            },
        },
    ];

    return (
        <>
            <Row style={{marginBottom: 15}} type='flex' justify='end'>
                <CrateTask onOk={() => requestList()}>
                    <Button style={{marginRight: 15}} type='primary'>
                        创建任务
                    </Button>
                </CrateTask>
                <ViewTemplate>查看模板</ViewTemplate>
            </Row>
            <Result error={listState.error} onRetry={handleRetry}>
                <Table
                    pagination={{total: listState.total, current: listState.deepData.page_number}}
                    rowKey='id'
                    loading={listState.loading}
                    columns={colunms}
                    onChange={handleChangeTable}
                    dataSource={listState.dataSource}
                />
            </Result>
        </>
    );
};
export default sourceQuery;
