/* eslint-disable react-hooks/rules-of-hooks */
/*
 * @Description:
 * @Author: leizhe
 * @Date: 2022-04-11 18:12:39
 * @LastEditTime: 2022-05-20 15:25:04
 * @LastEditors: leizhe
 */
import React, { useEffect, useState } from 'react';
import {
  Modal,
  Form,
  Input,
  notification,
  message,
  Button,
  Col,
  Row,
  Upload,
  Popconfirm,
} from 'antd';
import { ImportDataDictionary } from '@/services/dataCenter/api';

const importModal = props => {
  const { visible, onCancel, callBackSubmit = () => {} } = props;
  const [addForm] = Form.useForm();
  const [file, setFile] = useState('');
  const [load, setLoad] = useState(false); // 提交加载

  useEffect(() => {
    setLoad(false);
    addForm.resetFields();
  }, [visible]);

  const aa = {
    beforeUpload: file => {
      console.log(file);
      addForm.setFieldsValue({
        ModelFile: file.name,
      });
      setFile(file);
      console.log(file);
      return false;
    },
  };

  const importData = () => {
    addForm.validateFields().then(validate => {
      if (validate) {
        setLoad(true);
        const formData = new FormData();
        formData.append('file', file);
        ImportDataDictionary(formData).then(res => {
          setLoad(false);
          if (res.code === 0) {
            callBackSubmit();
            addForm.resetFields();
            notification.success({
              message: '提示',
              duration: 3,
              description: '导入成功',
            });
          } else {
            notification.error({
              message: '提示',
              duration: 3,
              description: res.msg,
            });
          }
        });
      }
    });
  };

  const title1 = (
    <>
      <span>覆盖导入数据</span>
      <span style={{ color: 'rgb(24, 144, 255)' }}>（不支持导入从老运维导出的数据）</span>
    </>
  );
  return (
    <Modal
      title={title1}
      visible={visible}
      onCancel={onCancel}
      destroyOnClose
      // onOk={importData}
      afterClose={() => {
        addForm.resetFields();
      }}
      // confirmLoading={load}
      maskClosable={false}
      footer={[
        <Button key="back" onClick={onCancel}>
          取消
        </Button>,
        <Popconfirm
          placement="topLeft"
          title="将覆盖原有数据是否继续导入"
          onConfirm={importData}
          okText="确认"
          key="submit"
          cancelText="取消"
        >
          <Button type="primary" loading={load}>
            确认
          </Button>
        </Popconfirm>,
      ]}
      // okText="确认"
      // cancelText="取消"
    >
      <Form form={addForm} labelCol={{ span: 5 }}>
        <Row>
          <Col span={17}>
            <Form.Item
              label="模型文件"
              name="ModelFile"
              labelCol={{ span: 7 }}
              rules={[
                {
                  required: true,
                  message: '请选择文件',
                },
              ]}
            >
              <Input placeholder="仅支持.xls, .xlsx格式" />
            </Form.Item>
          </Col>
          <Col span={7}>
            <Form.Item>
              <Upload {...aa} accept=".xls, .xlsx">
                <Button style={{ width: '130px' }}>上传文件</Button>
              </Upload>
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};
export default importModal;
