/** @format */

import * as React from 'react';

import {Form, Input, InputNumber, Row, Col, Switch} from 'antd';
import Result from "../../../../components/result"
import {FormComponentProps} from 'antd/es/form';
import AccessControl from '../../../../components/AccessControl';
import SourceToMerchant from './merchantInfo';
import ModalForm from '../../../../components/modalForm';
import MethodSelectComponent from '../../../../components/select/method';

import {useGetSourceToMerchant} from '../../../../service/provideApi';

const formItemLayout = {
    labelCol: {
        sm: {span: 5},
    },
    wrapperCol: {
        sm: {span: 18},
    },
};

export interface UpdateAPiProps {
  threshold_timeout: number;
  threshold_fail_rate: number;
  threshold_norecord_rate: number;
  warning_enable: boolean;
  thirdpart_api_name: string;
  provider_api_code: string;
  thirdpart_host: string;
  thirdpart_api_router: string;
  thirdpart_api_method: string;
  count_type: number;
  count_key: string;
  count_value: string;
  cost: String;
  count: number;
  state: number;
  create_time: string;
  provider_api_id: number;
  id:number
}
interface ApiSetProps {
    values?: UpdateAPiProps;
    visible?: boolean;
    title?: string;
    onCancel?: () => void;
    onSubmit?: () => void;
    loading?:boolean
}
const ApiSet: React.FC<ApiSetProps & FormComponentProps> = props => {
    const {values, visible, loading=false,title, onCancel, form,onSubmit} = props;
    const {getFieldDecorator,getFieldValue,validateFieldsAndScroll} = form;
    const [merchantState, requestMerchant] = useGetSourceToMerchant();
        //获取数据源平台的商户信息

    React.useEffect(()=>{
      handleRetry()
    },[values?.id])

    const handleRetry=()=>{
      if(values&&values.id){
        requestMerchant(values.id)
      }
    }

    const handleSubmit=()=>{
      validateFieldsAndScroll((error,values)=>{
        if(error) return;
        onSubmit && onSubmit(values)

      })
    }
    const formColumns = React.useMemo(() => {
        const columns = [
            {
                title: '基本信息',
                child: [
                    {
                        label: '接口',
                        Component: <Input />,
                        key: 'thirdpart_api_name',
                        initialValue:values?.thirdpart_api_name,
                        rules: [
                            {
                                required: true,
                                message: '请输入接口名!',
                            },
                        ],
                    },
                    {
                        label: '接口代码',
                        Component: <Input />,
                        key: 'provider_api_code',
                        initialValue:values?.provider_api_code,
                        rules: [
                            {
                                required: true,
                                message: '请输入接口代码!',
                            },
                        ],
                    },
                    {
                        label: '接口域名',
                        Component: <Input />,
                        key: 'thirdpart_host',
                        initialValue:values?.thirdpart_host,

                        rules: [
                            {
                                required: true,
                                message: '请输入接口域名!',
                            },
                        ],
                    },
                    {
                        label: '接口路径',
                        Component: <Input />,
                        key: 'thirdpart_api_router',
                        initialValue:values?.thirdpart_api_router,

                        rules: [
                            {
                                required: true,
                                message: '请输入接口路径!',
                            },
                        ],
                    },
                    {
                        label: '接口方法',
                        Component: <MethodSelectComponent />,
                        key: 'thirdpart_api_method',
                        initialValue:values?.thirdpart_api_method,

                        rules: [
                            {
                                required: true,
                                message: '请选择接口方法!',
                            },
                        ],
                    },
                    {
                        label: '接口单价(￥)',
                        Component: <InputNumber style={{width: '100%'}} min={0} />,
                        key: 'cost',
                     
                        initialValue:values?.cost,

                        rules: [
                            {
                                required: true,
                                message: '请输入接口单价!',
                            },
                        ],
                    },
                    {
                        label: '日调用上限',
                        Component: <InputNumber style={{width: '100%'}} min={0} />,
                        key: 'count',
                        initialValue:values?.count,
                        rules: [
                            {
                                required: true,
                                message: '请输入日调用上限!',
                            },
                        ],
                    },
                    {
                        label: '是否启用',
                        valuePropName: 'checked',
                        Component: <Switch />,
                        initialValue:values?.state===1?true:false,
                        key: 'state',
                    },
                    {
                        label: '权限控制',
                        Component: <AccessControl />,
                        initialValue:{
                          count_type: values?.count_type,
                          count_key: values?.count_key,
                          count_value: values?.count_value,
                        },    
                        key: 'count_type',
                    },
                ],
            },
        ];
        return columns;
    }, []);

    return (
        <ModalForm
            title={title}
            width={1000}
            onCancel={onCancel}
            loading={loading}
            visible={visible}
            onOk={handleSubmit}
        >
            <Form {...formItemLayout}>
                {formColumns.map((item, index) => {
                    return (
                        <div key={index}>
                            <h3>{item.title}</h3>
                            <Row gutter={24}>
                                {item.child.map((element, index) => {
                                    const {Component, label, key, ...rest} = element;
                                    if (index === item.child.length - 1) {
                                        const formItemLayout = label
                                            ? {labelCol: {sm: {span: 2}}}
                                            : {wrapperCol: {sm: 24}};
                                        return (
                                            <Col span={24} key={key}>
                                                <Form.Item {...formItemLayout} label={label}>
                                                    {getFieldDecorator(key, rest)(Component)}
                                                </Form.Item>
                                            </Col>
                                        );
                                    }
                                    return (
                                        <Col span={12} key={key}>
                                            <Form.Item label={label}>
                                                {getFieldDecorator(key, rest)(Component)}
                                            </Form.Item>
                                        </Col>
                                    );
                                })}
                            </Row>
                        </div>
                    );
                })}
            </Form>
            <Result error={merchantState.error} onRetry={handleRetry}>
              <SourceToMerchant max={getFieldValue("count")} dataSource={merchantState.dataSource} loading={merchantState.loading} />
            </Result>
        </ModalForm>
    );
};
export default Form.create<ApiSetProps & FormComponentProps>({name: 'apiSet'})(ApiSet);
