import { useEffect } from 'react';
import {
  ModalForm,
  ProForm,
  ProFormDigit,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { Form } from 'antd';

export type ListFormProps = {
  onCancel: (flag?: boolean, formVals?: unknown) => void;
  onSubmit: (values: API.CompanyList.Company) => Promise<void>;
  open: boolean;
  values?: Partial<API.CompanyList.Company>;
  // jobGroupOptions: DictOptionType[];
  // statusOptions: DictValueEnumObj;
};

const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

const listEdit: React.FC<ListFormProps> = (props) => {
  const [form] = Form.useForm();

  useEffect(() => {
    form.resetFields();
    if (props.values) {
      form.setFieldsValue(props.values);
    }
  }, [form, props]);

  const handleCancel = () => {
    props.onCancel();
    form.resetFields();
  };

  const handleFinish = async (values: Record<string, any>) => {
    props.onSubmit(values as API.CompanyList.Company);
  };

  return (
    <ModalForm<{
      name: string;
      company: string;
    }>
      title={`${props.values ? '编辑' : '新增'}企业`}
      form={form}
      autoFocusFirstInput
      open={props.open}
      modalProps={{
        destroyOnClose: true,
        onCancel: () => handleCancel(),
      }}
      submitTimeout={2000}
      onFinish={handleFinish}
    >
      <ProFormDigit label="InputNumber" name="companyId" disabled hidden={true} />
      <ProForm.Group>
        <ProFormText width="md" name="name" label="单位名称" placeholder="请输入单位名称" />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormText width="md" name="code" label="信用代码" placeholder="请输入信用代码" />
        <ProFormText width="md" name="industry" label="主要行业" placeholder="请输入主要行业" />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormTextArea width="xl" name="location" label="单位地点" placeholder="请输入单位地点" />
      </ProForm.Group>
    </ModalForm>
  );
};

export default listEdit;