/** @format */
import * as React from 'react';
import {Form} from 'antd';
import {FormComponentProps} from 'antd/es/form';
import message from '../../../../components/message';
import DataApiSelect from '../../../../components/select/dataApi';
import DataApiQueryTypeSelect from '../../../../components/select/dataApiQueryTypeList';
import DataApiComboList from '../../../../components/select/dataApiCombo';
import {decodeBase64} from '../../../../utils/base64';
import Modal from '../../../../components/modalForm';
import {useMerchantInsertDataApi} from '../../../../service/permission';
const formItemLayout = {
    labelCol: {
        xs: {span: 24},
        sm: {span: 4},
    },
    wrapperCol: {
        xs: {span: 24},
        sm: {span: 20},
    },
};
interface Iprops {
    onOk?: () => void;
}
const Add: React.FC<Iprops & FormComponentProps> = props => {
    const id = new URLSearchParams(decodeBase64(location.search.slice(1))).get('id');
    const {children, form, onOk} = props;

    const {getFieldDecorator, getFieldValue, validateFieldsAndScroll, resetFields, setFieldsValue} = form;
    const [state, setState] = React.useState({
        visible: false,
    });
    const [insertState, requestInsert] = useMerchantInsertDataApi();
    const handleUpdateModalVisible = () => {
        if (!state.visible) {
            form.resetFields();
        }
        setState(preState => ({...preState, visible: !preState.visible}));
    };

    const handleSubmit = () => {
        validateFieldsAndScroll((error, values) => {
            if (error) return;
            const {dataApi_id, ...rest} = values;
            requestInsert({
                ...rest,
                merchant_id: Number(id),
            }).then(error => {
                if (error) {
                    return message.error(error);
                }
                handleUpdateModalVisible();
                onOk && onOk();
            });
        });
    };
    return (
        <>
            {React.isValidElement(children) &&
                React.cloneElement(children, {
                    onClick: handleUpdateModalVisible,
                })}
            <Modal
                title='添加'
                loading={insertState.loading}
                visible={state.visible}
                onOk={handleSubmit}
                onCancel={handleUpdateModalVisible}
            >
                <Form {...formItemLayout}>
                    <Form.Item label='数据API'>
                        {getFieldDecorator('dataApi_id', {
                            initialValue: undefined,
                            rules: [
                                {
                                    required: true,
                                    message: '请选择数据Api!',
                                },
                            ],
                        })(
                            <DataApiSelect
                                onChange={() => {
                                    resetFields(['query_type_id', 'combo_id']);
                                }}
                            />,
                        )}
                    </Form.Item>
                    <Form.Item label='查询方式'>
                        {getFieldDecorator('query_type_id', {
                            initialValue: undefined,
                            rules: [
                                {
                                    required: true,
                                    message: '请选择查询方式!',
                                },
                            ],
                        })(
                            <DataApiQueryTypeSelect
                                onChange={() => {
                                    resetFields(['combo_id']);
                                }}
                                data_api_id={getFieldValue('dataApi_id')}
                            />,
                        )}
                    </Form.Item>
                    <Form.Item label='订单套餐'>
                        {getFieldDecorator('combo_id', {
                            initialValue: undefined,
                            rules: [
                                {
                                    required: true,
                                    message: '请选择订单套餐!',
                                },
                            ],
                        })(<DataApiComboList query_type_id={getFieldValue('query_type_id')} />)}
                    </Form.Item>
                </Form>
            </Modal>
        </>
    );
};
export default Form.create<Iprops & FormComponentProps>({
    name: 'add',
})(Add);
