import BaseForm from '@/components/BaseForm';
import { DETERMINE_ROLENAME } from '@/services/Urls';
import { getRequest } from '@/services/common/role';
import { useIntl } from '@umijs/max';
import { Form, FormProps } from 'antd';
import { useEffect } from 'react';
type RoleSettingFormType = {
  initialValues?: {
    [key: string]: any;
  };
  onSave: (values: any) => void;
  isEdit: boolean;
  handelSubmit: number;
};

const RoleSettingForm = ({
  onSave,
  initialValues,
  isEdit,
  handelSubmit,
}: RoleSettingFormType) => {
  const [form] = Form.useForm();
  const intl = useIntl();
  const config: FormProps = {
    form: form,
    layout: 'vertical',
    initialValues: { ...initialValues },
  };
  let itemColumn = [
    {
      type: 'input',
      itemProps: {
        name: 'roleId',
        rules: [{ required: isEdit }],
        hidden: true,
      },
    },
    {
      type: 'input',
      itemProps: {
        name: 'version',
        rules: [{ required: isEdit }],
        hidden: true,
      },
    },
    {
      type: 'input',
      itemProps: {
        name: 'roleName',
        label: intl.formatMessage({ id: 'role.columns.title.roleName' }),
        validateTrigger: 'onBlur',

        rules: [
          {
            required: true,
            message: intl.formatMessage(
              {
                id: 'form.rules.required',
              },
              {
                label: intl.formatMessage({
                  id: 'role.columns.title.roleName',
                }),
              },
            ),
          },
          () => ({
            //    console.log(e.target.value);
            // ;
            // console.log(data);
            async validator(_: any, value: string) {
              if (value) {
                if (isEdit && value === initialValues?.roleName) {
                  return Promise.resolve();
                } else {
                  const data = await getRequest(DETERMINE_ROLENAME, {
                    roleName: value,
                  });
                  if (!data.data) {
                    return Promise.resolve();
                  } else {
                    return Promise.reject(
                      intl.formatMessage({
                        id: 'role.info.text.repeatName',
                      }),
                    );
                  }
                }
              } else {
                return Promise.resolve();
              }

              // return Promise.reject(new Error('The new password that you entered do not match!'));
            },
          }),
        ],
      },
      elementProps: {
        placeholder: intl.formatMessage({
          id: 'form.info.text.entrt',
        }),
        maxLength: 30,
      },
    },
    {
      type: 'textArea',
      itemProps: {
        name: 'remark',
        label: intl.formatMessage({ id: 'role.columns.title.remark' }),
      },
      elementProps: {
        placeholder: intl.formatMessage({
          id: 'form.info.text.entrt',
        }),
        maxLength: 300,
        showCount: true,
        // autoSize:true
        style:{resize:'none'}
      },
    },
  ];
  useEffect(() => {
    // 校验表单，成功提交表单的数据给onSave
    // console.log(handelSubmit);
    if (handelSubmit) {
      form
        .validateFields()
        .then((values) => {
          onSave(values);
        })
        .catch((errorInfo) => {
          console.log('Failed:', errorInfo);
        });
    } else {
      form.resetFields();
    }
  }, [handelSubmit]);

  return <BaseForm config={config} itemColumn={itemColumn} />;
  // <Form
  //   initialValues={initialValues}
  //   form={form}
  //   layout="vertical"
  //   labelCol={{span:24}}
  //   wrapperCol={{span:24}}
  // >
  //   <Form.Item name="id" rules={[{ required: isEdit }]} hidden>
  //     <Input />
  //   </Form.Item>
  //   <Form.Item
  //     label={intl.formatMessage({ id: 'role.columns.title.roleName' })}
  //     name="roleName"
  //     rules={[
  //       {
  //         required: true,
  //         message: intl.formatMessage(
  //           {
  //             id: 'form.rules.required',
  //           },
  //           {
  //             label: intl.formatMessage({
  //               id: 'role.columns.title.roleName',
  //             }),
  //           },
  //         ),
  //       },
  //     ]}
  //   >
  //     <Input placeholder={intl.formatMessage({ id: 'form.info.text.entrt' })}/>
  //   </Form.Item>
  // </Form>
};

export default RoleSettingForm;