import {
  ProForm,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import { Col, Form, message } from 'antd';
import { useEffect } from 'react';
import {
  addCompanyVerify,
} from '@/services/common/userCenter';

const EditForm = ({
  editDataInitValue,
  onFinish,
  onFormSubmit,
  listItem,
  addOrEdit,
  parentName
  
}: {
  [key: string]: any;
}) => {
  const t = useIntl();
  const [form] = Form.useForm();
  // 获取字典里的选项信息

  const changeDeptName = ({target}:any)=>{
    let obj = {
      deptName:target.value, 
      parentId:listItem && listItem.deptId? listItem.deptId:'0'
    };
    if (!parentName){
      obj.parentId = '0';
    }
    addCompanyVerify(obj).then((res:any)=>{
      if (!res.data){
        form.setFieldsValue({
          deptName: '',
        });
        message.error(
          t.formatMessage(
            { id: 'form.info.addList' }
          ),
        );
      }
    });
  };

  useEffect(() => {
    // console.log(listItem, addOrEdit, parentName,'xsxsx');
    // 校验表单
    if (onFormSubmit !== 0) {
      setTimeout(() => {
        form
        .validateFields()
        .then((values) => {
          values.deptLocation = values.locationId;
          onFinish(values);
        })
        .catch((errorInfo) => {
          console.log('Failed:', errorInfo);
        });
      }, 200);
    } else {
      form.resetFields();
    }
  }, [onFormSubmit]);

  return (
    <div>
      <ProForm
        submitter={false}
        initialValues={editDataInitValue}
        form={form}
        name="basic"
        layout="vertical"
        autoComplete="off"
      >
        {
        ((parentName && addOrEdit === 'edit') || 
        (listItem?.deptName && addOrEdit === 'add'))&&<div style={{marginBottom:'12px'}}>{t.formatMessage({
              id: 'companyMange.columns.CompanyNameParent',
              defaultMessage: '上级组织',
            })}{`: `}{addOrEdit === 'edit'? parentName:listItem?.deptName}</div>}
        <Col span={24}>
          <ProFormText
            name="deptName"
            label={t.formatMessage({
              id: 'companyMange.columns.CompanyName',
              defaultMessage: '组织名称：',
            })}
            rules={[
              {
                required: true,
              },
            ]}
            fieldProps={{
              maxLength: 30
            }}
            onBlur={changeDeptName}
          />
        </Col>
        <Col span={24}>
          <ProFormTextArea
            name="remark"
            label={t.formatMessage({
              id: 'companyMange.form.TeamDescription',
              defaultMessage: '组织描述:',
            })}
            fieldProps={{
              maxLength: 300,
              showCount: true
            }}
          />
        </Col>
      </ProForm>
    </div>
  );
};

export default EditForm;