import BaseForm from '@/components/BaseForm';
import { useIntl } from '@umijs/max';
import { Form, FormProps } from 'antd';
import { useEffect } from 'react';
type RoleChangeFormType = {
  initialValues?: {
    [key: string]: any;
  };
  onSave: (values: any) => void;
  inputTenantChange: (values: any) => void;
  submitForm: number;
  option: any;
  addOrEdit: any;
};

const AddOrEditForm = ({
  onSave,
  inputTenantChange,
  initialValues,
  submitForm,
  option,
  addOrEdit,
}: RoleChangeFormType) => {
  const [form] = Form.useForm();
  const intl = useIntl();
  // console.log(option, 'option');
  const config: FormProps = {
    form: form,
    layout: 'vertical',
    initialValues: { ...initialValues },
  };
  let itemColumn = [
    {
      type: 'input',
      itemProps: {
        name: 'userName',
        label: intl.formatMessage({ id: 'userMange.label.UserNameNew' }),
        rules: [{ required: true }],
        hidden: addOrEdit === 'edit',
      },
      elementProps: {
        onBlur: (e: any) => inputTenantChange(e.target.value),
        maxLength: 30,
      },
    },
    {
      type: 'input',
      itemProps: {
        name: 'nickName',
        label: intl.formatMessage({ id: 'userMange.label.nickName' }),
        rules: [{ required: true }],
      },
      elementProps: {

        maxLength: 30,
      },
    },
    {
      type: 'input',
      itemProps: {
        name: 'phone',
        label: intl.formatMessage({ id: 'userMange.label.phoneNumber' }),
        rules: [
          {
            pattern: /^(\+86)?1[3-9]\d{9}$|^(\+65)?[689]\d{7}$/,
            message: intl.formatMessage({
              id: 'tenantManage.rules.pleaseInputRight',
              defaultMessage: '请输入正确的格式！',
            }),
          }],
        hidden: false,
      },
    },
    {
      type: 'input',
      itemProps: {
        name: 'email',
        label: intl.formatMessage({ id: 'userMange.label.email' }),
        rules: [
          {
            pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
            message: intl.formatMessage({
              id: 'tenantManage.rules.pleaseInputRight',
              defaultMessage: '请输入正确的格式！',
            }),
          }],
        hidden: false,
      },
      elementProps: {
        maxLength: 50,
      },
    },
    {
      type: 'select',
      options: option,
      itemProps: {
        name: 'sex',
        label:intl.formatMessage({
          id: 'userMange.form.gender',
          defaultMessage: '用户性别',
        }),
      }, 
    },
    {
      type: 'textArea',
      itemProps: {
        name: 'remark',
        label: intl.formatMessage({ id: 'userMange.form.tip' }),
      },
      elementProps: {
        placeholder: intl.formatMessage({
          id: 'form.info.text.entrt',
        }),
        maxLength: 300,
        showCount: true,
        style:{resize:'none'}
      },
    },
    
  ];
  useEffect(() => {
    // 校验表单，成功提交表单的数据给onSave
    if (submitForm) {
      form
        .validateFields()
        .then((values) => {
          console.log(values, 'values');
          onSave(values);
        });
    }
    else {
      form.resetFields();
    }
  }, [submitForm]);

  return <BaseForm config={config} itemColumn={itemColumn} />;
};

export default AddOrEditForm;