/** @format */

import * as React from 'react';
import {notification} from 'antd';
import message from '../../../../../components/message';
import ExportForm from './logExportForm';
import ProviderSelect from '../../../../../components/select/providerSelect';
import ProviderApi from '../../../../../components/select/providerApi';
import {useProvideExportLog} from '../../../../../service/controlPanel';
const merchantLogExport: React.FC = props => {
    const modalRef: any = React.useRef(null);
    const [requestState, requestData] = useProvideExportLog();
    const handleSubmit = (values: any) => {
        requestData(values).then(error => {
            if (error) return notification.error({message: '供应商导出日志报表失败', description: error});
            message.success('供应商导出日志报表成功');
            modalRef.current.handleUpdateModalVisible();
        });
    };
    const [dependState, setDependState] = React.useState<{provider_id: number | ''; provider_api_id: '' | number}>({
        provider_id: '',
        provider_api_id: '',
    });
    const clear = () => {
        setDependState({
            provider_id: '',
            provider_api_id: '',
        });
    };
    return (
        <ExportForm
            wrappedComponentRef={modalRef}
            loading={requestState.loading}
            submit={handleSubmit}
            cancle={clear}
            formItem={[
                {
                    key: 'provider_id',
                    label: '供应商',
                    component: (
                        <ProviderSelect
                            allowClear
                            onChange={provider_id => {
                                setDependState(preState => ({...preState, provider_id: provider_id as number | ''}));
                            }}
                            provider_api_id={dependState.provider_api_id}
                        />
                    ),
                },
                {
                    key: 'provider_api_id',
                    label: '接口',
                    options: {rules: [{required: true, message: '请选择接口'}]},
                    component: (
                        <ProviderApi
                            allowClear
                            onChange={provider_api_id => {
                                setDependState(preState => ({
                                    ...preState,
                                    provider_api_id: provider_api_id as number | '',
                                }));
                            }}
                            provider_id={dependState.provider_id}
                        />
                    ),
                },
            ]}
        >
            {props.children}
        </ExportForm>
    );
};
export default merchantLogExport;
