/** @format */

import * as React from 'react';
import {notification} from 'antd';
import TaskForm from './taskform';
import {Moment} from 'moment';
import MerchantSelect from '../../../../../components/select/merchant';
import BaseApiSelect from '../../../../../components/select/baseApiSelect';
import {useMerchantExportTask} from '../../../../../service/tasks';
interface CreateTaskProps {
    export_name: string;
    time_list: string;
    time: [Moment, Moment];
    api_id_list: number[];
    merchant_id: number | '';
}
const CreatteTask: React.FC = props => {
    const {children} = props;
    const [state, setState] = React.useState({
        visible: false,
    });
    const [exportState, requestExport] = useMerchantExportTask();
    const handlePost = (values: CreateTaskProps) => {
        requestExport(values as any).then(error => {
            if (error) {
                return notification.error({
                    message: '创建导出任务失败!',
                    description: error,
                });
            }
            handleUpdateModalVisible();
        });
    };
    const handleUpdateModalVisible = () => {
        setState(preState => ({...preState, visible: !preState.visible}));
    };
    const [dependState, setDependState] = React.useState<{merchant_id: number | ''; api_id_list: number[] | ''}>({
        merchant_id: '',
        api_id_list: '',
    });
    return (
        <>
            {React.isValidElement(children)
                ? React.cloneElement(children, {
                      onClick: handleUpdateModalVisible,
                  })
                : null}
            <TaskForm
                visible={state.visible}
                loading={exportState.loading}
                handlePost={handlePost}
                onCancel={handleUpdateModalVisible}
                childs={[
                    {
                        key: 'merchant_id',
                        label: '商户',
                        component: (
                            <MerchantSelect
                                api_ids={dependState.api_id_list.toString()}
                                onChange={id =>
                                    setDependState(preState => ({...preState, merchant_id: id as number | ''}))
                                }
                            />
                        ),
                    },
                    {
                        key: 'api_id_list',
                        label: '接口',
                        rules: [
                            {
                                required: true,
                                message: '请选择接口!',
                            },
                        ],
                        component: (
                            <BaseApiSelect
                                onChange={id =>
                                    setDependState(preState => ({...preState, api_id_list: id as number[] | ''}))
                                }
                                merchant_id={dependState.merchant_id}
                                mode='multiple'
                            />
                        ),
                    },
                ]}
            />
        </>
    );
};
export default CreatteTask;
