/** @format */

import * as React from 'react';
import {notification} from 'antd';
import ExportForm from './logExportForm';
import message from '../../../../../components/message';
import MerchantSelect from '../../../../../components/select/merchant';
import BaseApiSelect from '../../../../../components/select/baseApiSelect';
import {useMerchantExportLog} from '../../../../../service/controlPanel';
const merchantLogExport: React.FC = props => {
    const modalRef: any = React.useRef(null);
    const [requestState, request] = useMerchantExportLog();
    const handleSubmit = (values: any) => {
        request(values).then(error => {
            if (error) {
                return notification.error({message: '创建日志导出失败', description: error});
            }
            message.success('创建日志导出成功');
            modalRef.current.handleUpdateModalVisible();
        });
    };
    const [dependState, setDependState] = React.useState<{api_id: number | ''; merchant_id: '' | number}>({
        merchant_id: '',
        api_id: '',
    });
    const clear = () => {
        setDependState({
            merchant_id: '',
            api_id: '',
        });
    };
    return (
        <ExportForm
            wrappedComponentRef={modalRef}
            submit={handleSubmit}
            loading={requestState.loading}
            cancle={clear}
            formItem={[
                {
                    key: 'merchant_id',
                    label: '商户',
                    component: (
                        <MerchantSelect
                            api_ids={dependState.api_id}
                            onChange={merchant_id => {
                                setDependState(preState => ({...preState, merchant_id: merchant_id as number | ''}));
                            }}
                        />
                    ),
                },
                {
                    key: 'api_id',
                    label: '接口',
                    options: {rules: [{required: true, message: '请选择接口'}]},
                    component: (
                        <BaseApiSelect
                            merchant_id={dependState.merchant_id}
                            onChange={api_id => {
                                setDependState(preState => ({...preState, api_id: api_id as number | ''}));
                            }}
                        />
                    ),
                },
            ]}
        >
            {props.children}
        </ExportForm>
    );
};
export default merchantLogExport;
