/** @format */

import * as React from 'react';
import Button from '../../../../components/button';
import message from '../../../../components/message';
import {Table, Popconfirm} from 'antd';
import {ColumnProps, PaginationConfig} from 'antd/es/table';
import {} from '../../../../const/status';
import {useViewTask, TaskItemProps, useDeleteTask} from '../../../../service/task';
import Modal from '../../../../components/modalForm';
interface Iprops {
    export_type: 1 | 0 | 2 | 3;
    title?: string;
}
const viewTask: React.FC<Iprops> = props => {
    const {children, export_type, title} = props;
    const [state, setState] = React.useState({
        visible: false,
    });
    const [taskState, requestTask] = useViewTask();
    React.useEffect(() => {
        if (state.visible) {
            requestTask({export_type: export_type, page_number: 1});
        }
    }, [state.visible]);
    const [deleteState, requestDelete] = useDeleteTask();
    const handleDelete = (id: number) => {
        requestDelete(id).then(error => {
            if (error) return message.error(error);
            requestTask();
        });
    };
    const handleUpdateVisible = () => {
        setState(preState => ({...preState, visible: !preState.visible}));
    };
    const handleChange = (pagination: PaginationConfig) => {
        requestTask({page_number: pagination.current});
    };
    const columns: ColumnProps<TaskItemProps>[] = React.useMemo(() => {
        return [
            {
                title: '序号',
                dataIndex: 'index',
                key: 'index',
                width: 80,
            },
            {
                title: '任务名称',
                dataIndex: 'file_name',
                key: 'file_name',
            },
            {
                title: '任务状态',
                dataIndex: 'status',
                key: 'status',
                width: 130,
            },
            {
                title: '创建时间',
                dataIndex: 'create_time',
                key: 'create_time',
                width: 160,
            },
            {
                title: '操作',
                key: 'opertion',
                width: 150,
                render: (_, record) => {
                    return (
                        <>
                            <Popconfirm
                                title={`是否确认删除该条任务${record.file_name}`}
                                okText='确认'
                                cancelText='取消'
                                onConfirm={() => handleDelete(record.id)}
                            >
                                <Button type='link' loading={deleteState.loading}>
                                    删除
                                </Button>
                            </Popconfirm>
                            {record.status_code === 2 ? (
                                <Button type='link' href={record.path + '#' + Math.random()}>
                                    下载
                                </Button>
                            ) : null}
                        </>
                    );
                },
            },
        ];
    }, [taskState.deepData]);
    return (
        <>
            {React.isValidElement(children) &&
                React.cloneElement(children, {
                    onClick: handleUpdateVisible,
                })}
            <Modal
                width={750}
                title={title || '查看任务'}
                footer={null}
                visible={state.visible}
                onCancel={handleUpdateVisible}
                maskClosable
            >
                <Table
                    onChange={handleChange}
                    rowKey='id'
                    size='middle'
                    pagination={{total: taskState.total}}
                    columns={columns}
                    loading={taskState.loading}
                    dataSource={taskState.dataSource}
                />
            </Modal>
        </>
    );
};
export default viewTask;
