import React, { useEffect } from 'react';
import { Form } from 'antd';
import {
  ProForm,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
const EditForm = ({ editDataInitValue, onFinish, onFormSubmit,
  addOrEdit,
  deptName,
  inputTenantChange}: { [key: string]: any }) => {
  const t = useIntl();
  const [form] = Form.useForm();
  useEffect(() => {
    // 校验表单
    if (onFormSubmit !== 0) {
      form.validateFields().then((values: API.addWorker) => {
        onFinish(values);
      }
      ).catch((errorInfo: any) => {
        console.log('Failed:', errorInfo);
      }
      );
    } else {
      form.resetFields();
    }
  }, [onFormSubmit]);
  return (
    <div>
      <ProForm
        submitter={false}
        initialValues={editDataInitValue}
        form={form}
        name="basic"
        layout="vertical"
        autoComplete="off"
      >
          {deptName&&<div style={{marginBottom:'12px'}}>{t.formatMessage({
              id: 'userMange.label.DeptName',
              defaultMessage: '部门名称',
            })}{`: `}{deptName}</div>}
          {addOrEdit==='add'&&<ProFormText
            name="userName"
            label={t.formatMessage({
              id: 'userMange.label.UserNameNew',
              defaultMessage: '登录名',
            })}
            rules={[
              {
                required: true,
              },
            ]}
            fieldProps={{
              onBlur:(e) => inputTenantChange(e.target.value),
              maxLength:30
            }}
          />}
          <ProFormText
   
            name="nickName"
            label={t.formatMessage({
              id: 'userMange.label.nickName',
              defaultMessage: '姓名',
            })}
            rules={[
              {
                required: true,
              },
            ]}
            fieldProps={{
              maxLength:30
            }}
          />
 
 
          <ProFormText
    
            name="phone"
            label={t.formatMessage({
              id: 'userMange.label.phoneNumber',
              defaultMessage: '手机号码',
            })}
            
            rules={[
             
              {
                pattern: /^(\+86)?1[3-9]\d{9}$|^(\+65)?[689]\d{7}$/,
                message: t.formatMessage({
                  id: 'tenantManage.rules.pleaseInputRight',
                  defaultMessage: '请输入正确的格式！',
                }),
              },
            ]}
          />
          <ProFormText
            name="email"
            label={t.formatMessage({
              id: 'userMange.form.Email',
              defaultMessage: '电子邮箱',
            })}
            rules={[
              {
                pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
                message: t.formatMessage({
                  id: 'tenantManage.rules.pleaseInputRight',
                  defaultMessage: '请输入正确的格式！',
                }),
              },
            ]}
            fieldProps={{
              maxLength:50
            }}
          />

          <ProFormSelect
            request={async () => t.locale === 'zh-CN' ? [
              {
                value: 0,
                label: '男',
              },
              {
                value: 1,
                label: '女',
              },
              {
                value: 2,
                label: '保密',
              },
            ] : [
              {
                value: 0,
                label: 'Male',
              },
              {
                value: 1,
                label: 'Female',
              },
              {
                value: 2,
                label: 'Secrecy',
              },
            ]}
            name="sex"
            label={t.formatMessage({
              id: 'userMange.form.gender',
              defaultMessage: '用户性别',
            })}
          />
          <ProFormTextArea name="remark" label={t.formatMessage({
            id: 'userMange.form.tip',
            defaultMessage: '备注',
          })}
            fieldProps={{
              maxLength: 300,
              showCount: true
            }}
          />
      </ProForm>
    </div>
  );
};

export default EditForm;