/** @format */

import * as React from 'react';
import {Form, Input} from 'antd';
import {FormComponentProps} from 'antd/es/form';
import ModalForm from '../../../../components/modalForm';
import {phonePattern} from "../../../../const/regular"

const formItemLayout = {
    labelCol: {
        xs: {span: 24},
        sm: {span: 4},
    },
    wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
    },
};

export interface formDataProps {
    platform_name: string;
    platform_code: string;
    contact: string;
    email: string;
    provider_id: number;
}
interface sourceFormProps {
    title: string;
    values?: formDataProps;
    loading?:boolean;
    visible?: boolean;
    onSubmit?: (values: formDataProps) => void;
    onCancel?: () => void;
}
const SourceForm: React.FC<sourceFormProps & FormComponentProps> = props => {
    const {title,loading=false, visible = false,values, onCancel, onSubmit, form} = props;
    const {validateFieldsAndScroll, getFieldDecorator} = form;
    const handleSubmit = () => {
        validateFieldsAndScroll((error, values) => {
            if (error) return;
            onSubmit && onSubmit(values);
        });
    };
    const formColumns = React.useMemo(() => {
        return [
            {
                label: '平台名称',
                component: <Input placeholder='请输入平台名称' />,
                key: 'platform_name',
                initialValue:values?.platform_name,
                rules: [
                    {
                        required: true,
                        message: '请输入平台名称!',
                    },
                ],
            },
            {
                label: '平台码',
                key: 'platform_code',
                initialValue:values?.platform_code,
                component: <Input placeholder='请输入平台码' />,
                rules: [
                    {
                        required: true,
                        message: '请输入平台码!',
                    },
                ],
            },
            {
                label: '电话号码',
                initialValue:values?.contact,
                rules:[{pattern:phonePattern,message:"请输入正确得手机号码"}],
                component: <Input placeholder='请输入手机号码!' />,
                key: 'contact',
            },
            {
                label: '邮箱',
                initialValue:values?.email,
                key: 'email',
                rules:[{
                  type: 'email',
                  message: '请输入正确得邮箱号码!',
                }],
                component: <Input placeholder='请输入正确的邮箱地址' />,
            },
        ];
    }, []);
    return (
        <ModalForm loading={loading} onOk={handleSubmit} onCancel={onCancel} title={title} visible={visible}>
            <Form {...formItemLayout}>
                {formColumns.map(element => {
                    const {label, key, component, ...rest} = element;
                    return (
                        <Form.Item label={label} key={key}>
                            {getFieldDecorator(key, {
                                ...rest,
                            })(component)}
                        </Form.Item>
                    );
                })}
            </Form>
        </ModalForm>
    );
};
export default Form.create<sourceFormProps & FormComponentProps>({name: 'sourceForm'})(SourceForm);
