import React, {useState} from 'react';
import {useRequest} from 'umi'
import {Button, Modal, Upload, Form,Menu, Dropdown} from "antd";
import type {RcFile} from 'antd/lib/upload/interface'
import {UploadOutlined} from '@ant-design/icons'
import {exportExcel} from "@/services/exportExcel";
import {fetchImportExcel} from '@/services/gather'
import style from './index.less'

type DeviceImportProps = {
  update?: () => void;
  type?: string
}

const DeviceImport: React.FC<DeviceImportProps> = (props) => {
  const [form] = Form.useForm();
  const {update, type} = props
  const [visible, setVisible] = useState(false);
  const [fileList, setFileList] = useState<RcFile[]>([])

  const handleOpen = () => {
    console.log(`modal open now handleOpen !!!!!!!!!`)
      setVisible(true)
  }
  const handleClose = () => {
    setVisible(false);
    form.resetFields()
  }

  const importExcel = useRequest(fetchImportExcel, {
    manual: true,
    onSuccess: () => {
      handleClose()
      update?.()
    }
  })

  const onFinish = () => {
    const formData = new FormData();
    fileList?.forEach((file: Blob) => {
      formData.append('excel', file);
    });
    importExcel.run(formData)
  };
  const exportMeterTemplate = () => {
    if(type ==='meter'){
      //终端
      exportExcel({
        url: '/device-service/device/download-import-excel-Template',
        name: type === 'meter' ? '终端设备导入模版' :  `设备台账导入模版`,
      });
    }else{
      //设备台账
      exportExcel({
        url: '/device-service/device/download-import-excel-Template',
        name: type === 'meter' ? '终端设备导入模版' :  `设备台账导入模版`,
      });
    }
  }
  const layout = {
    labelCol: { span: 5 },
    wrapperCol: { span: 16 },
  };

  const beforeUpload = (file: RcFile) => {
    setFileList([file])
    return false;
  }
  const onRemove = () => {
    setFileList([])
  }
  return (
    <div>
      <Button style={{ marginRight: 15 }} onClick={handleOpen}><UploadOutlined />{type === 'meter' ? '导入终端设备' : '导入设备台账'}</Button>
      <Modal
        width={500}
        title={type === 'meter' ? '导入终端设备' : '导入设备台账'}
        visible={ visible }
        onCancel={ handleClose }
        centered
        footer={null}
        // getContainer={false}
      >
        <Form form={form} onFinish={onFinish}  {...layout} className={style.upload_form}>
          <Form.Item label="选择文件">
            <Upload
              fileList={fileList}
              beforeUpload={beforeUpload}
              onRemove={onRemove}
            >
              {fileList?.length === 0 && (<Button className="broad_btn"><UploadOutlined />上传</Button>)}
            </Upload>
          </Form.Item>
          <Form.Item label="导入模板">
            <a onClick={exportMeterTemplate}>{type === 'meter' ? '终端设备模板' : '设备台账模板'}</a>
          </Form.Item>
          <div style={{ marginTop: 32, textAlign: 'right' }}>
            <Button className="broad_btn" style={{marginRight: 20}} onClick={handleClose}>
              取消
            </Button>
            <Button className="broad_btn" disabled={fileList?.length === 0} type="primary" htmlType="submit">
              导入
            </Button>
          </div>
        </Form>
      </Modal>
    </div>
  );
};

export default DeviceImport;