import BaseFormSelect from '../../../../components/BaseFormSelect';
import {
  ModalForm,
  ProFormDependency,
  ProFormUploadButton,
} from '@ant-design/pro-components';
import { Button, Col, Form, Row, message } from 'antd';
import React from 'react';
import {
  CommonController,
  DoctorController,
  types,
} from '../../../../services';

interface ImportFormProps {
  title: string;
  trigger: JSX.Element;
  onSubmit?: () => void;
  orgList: types.SelectOptionFields[];
}
const ImportForm: React.FC<ImportFormProps> = (props) => {
  const { trigger, title, orgList, onSubmit } = props;
  const [form] = Form.useForm();

  return (
    <ModalForm
      layout="horizontal"
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 18 }}
      width={800}
      title={title}
      trigger={trigger}
      form={form}
      autoFocusFirstInput
      modalProps={{
        destroyOnClose: true,
      }}
      submitTimeout={2000}
      onFinish={async (values) => {
        const { orgCode, deptCode, files } = values || {};
        const [file] = files || [];
        const forms = new FormData();
        forms.append('orgCode', orgCode);
        forms.append('deptCode', deptCode);
        forms.append('file', file.originFileObj);
        const res = await DoctorController.importDoctorApi(forms);
        message.success(res.message || '导入成功');
        onSubmit?.();
        return true;
      }}
    >
      <BaseFormSelect
        label="机构名称"
        name="orgCode"
        fieldProps={{
          options: orgList || [],
          showSearch: true,
          onChange: () => {
            form.setFieldValue('deptCode', undefined);
          },
        }}
        rules={[{ required: true }]}
      />
      <ProFormDependency name={['orgCode']}>
        {({ orgCode }) => {
          return (
            <BaseFormSelect
              label="所属科室"
              name="deptCode"
              params={{ orgCode }}
              fieldProps={{
                showSearch: true,
                fetchDataOnSearch: false,
              }}
              request={async () => {
                return await CommonController.getDeptOptionsApi({ orgCode });
              }}
              rules={[{ required: true }]}
            />
          );
        }}
      </ProFormDependency>
      <ProFormUploadButton
        label="excel导入"
        name="files"
        max={1}
        rules={[
          {
            required: true,
            message: '请上传excel文件',
          },
        ]}
        fieldProps={{
          beforeUpload: () => false,
        }}
      />
      <Row>
        <Col offset={4}>
          <Button
            type="link"
            style={{ padding: 0 }}
            onClick={() => DoctorController.exportDoctorApi()}
          >
            下载医护导入模板
          </Button>
        </Col>
      </Row>
      <Row>
        <Col offset={4}>
          <span style={{ color: 'red' }}>
            注：模板文件中内容标题的名称与顺序不可更改
          </span>
        </Col>
      </Row>
    </ModalForm>
  );
};

export default ImportForm;
