/** @format */

import * as React from 'react';
import {Input, Form} from 'antd';
import SelectDataType from '../../../../../components/select/dataType';
import {FormComponentProps} from 'antd/es/form';
import ModalForm from '../../../../../components/modalForm';
const formItemLayout = {
    labelCol: {
        xs: {span: 24},
        sm: {span: 4},
    },
    wrapperCol: {
        xs: {span: 24},
        sm: {span: 20},
    },
};
export interface formValuesProps {
  data_api_name: string;
  version: string;
  data_api_type: number;
  data_api_desc: string;
}
interface DataApiSetProps {
    values?: formValuesProps
    visible?: boolean;
    title:string;
    onCancel?: () => void;
    onSubmit?: (values:formValuesProps) => void;
    loading?:boolean
}
const DataApiSet: React.FC<DataApiSetProps & FormComponentProps> = props => {
    const {visible=false,title, values, form, onCancel,loading=false, onSubmit} = props;
    const {getFieldDecorator, validateFieldsAndScroll} = form;
    const handleSubmit = () => {
      validateFieldsAndScroll((error, values) => {
          if (error) return;
          onSubmit&&onSubmit(values)
      });
    };
    const formColumns=React.useMemo(()=>{
     return [
        {
            label: '数据API',
            key: 'data_api_name',
            initialValue: values?.data_api_name||"",
            rules: [
                {
                    required: true,
                    message: '请输入数据API名称!',
                },
            ],
            Component: <Input placeholder="请输入数据API名称" />,

        },
        {
            label: '版本',
            key: 'version',
            initialValue: values?.version||"",
            rules: [
                {
                    required: true,
                    message: '请设置版本号!',
                },
            ],
            Component: <Input placeholder="请设置版本号" />,
        },
        {
            label: '类别',
            key: 'data_api_type',
            initialValue: values?.data_api_type||1,
            Component: <SelectDataType />,
            rules: [
                {
                    required: true,
                    message: '请选择类别!',
                },
            ],
        },
        {
            label: '数据描述',
            key: 'data_api_desc',
            initialValue: values?.data_api_desc,
            Component: <Input.TextArea rows={4} placeholder="请输入数据API描述" />,
        },
    ];
    },[])
   

   
    return (
        <ModalForm loading={loading} visible={visible} onCancel={onCancel} onOk={handleSubmit} title={title}>
            <Form {...formItemLayout}>
                {formColumns.map(element => {
                    const {key, label, Component, ...rest} = element;
                    return (
                        <Form.Item label={label} key={key}>
                            {getFieldDecorator(key, rest)(Component)}
                        </Form.Item>
                    );
                })}
            </Form>
        </ModalForm>
    );
};
export default Form.create<DataApiSetProps & FormComponentProps>({name: 'DataApiSet'})(DataApiSet);
