import React, { useEffect, useState } from 'react';
import { Modal, Upload, Button, Form, Input, message, Popconfirm } from 'antd';

import { UploadOutlined, DownloadOutlined } from '@ant-design/icons';
import { UpLoadWebModuleTree, DownLoadWebModuleTree } from '@/services/webConfig/api';
import icon from '@/assets/images/common/警告.png';
import styles from './ImportOrExport.less';

const ImportOrExport = props => {
  const { visible, onFinish, onCancel, nodeObj, subSystemValue } = props;
  const [form] = Form.useForm();
  const [uploading, setUploading] = useState(false); // 文件是否上传成功
  const [file, setFile] = useState(); // 上传文件信息
  useEffect(() => {
    if (visible) {
      form.setFieldsValue({ fileName: '' });
    }
  }, [visible]);

  // 本地上传文件
  const beforeUpload = val => {
    console.log(val);
    form.setFieldsValue({ fileName: val.name });
    setFile(val);
    return false;
  };
  // 导出菜单
  const hadelExport = () => {
    window.location.href = DownLoadWebModuleTree({
      nodeId: nodeObj ? nodeObj.menuID : '-1',
      sysName: subSystemValue,
    });
  };
  // 提交上传文件
  const handleUpload = type => {
    if (!form.getFieldValue('fileName')) {
      message.info('请上传文件');
      return;
    }
    const formData = new FormData();
    formData.append('_files', file);
    formData.append('type', type);
    formData.append('nodeId', nodeObj ? nodeObj.menuID : '-1');
    formData.append('visible', subSystemValue);
    UpLoadWebModuleTree(formData)
      .then(res => {
        console.log(res);
        if (res.code === 0) {
          message.success('上传成功');
          onCancel();
        } else {
          message.error(res.msg);
        }
      })
      .catch(() => {
        message.error('网络异常，请稍后再试');
      });
  };

  return (
    <>
      <Modal
        title="菜单组导入导出"
        visible={visible}
        onOk={onFinish}
        width="550px"
        onCancel={onCancel}
        maskClosable={false}
        destroyOnClose
        centered
        footer={null}
      >
        <div style={{ paddingBottom: '15px' }}>
          <Form name="form" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} form={form}>
            <Form.Item label="本地导出">
              <Button type="primary" onClick={hadelExport} icon={<DownloadOutlined />}>
                导出菜单配置
              </Button>
            </Form.Item>
            <Form.Item label="本地导入">
              <div style={{ display: 'flex' }}>
                <Form.Item name="fileName" style={{ marginBottom: '0' }}>
                  <Input disabled />
                </Form.Item>
                <Upload beforeUpload={beforeUpload} showUploadList={false} accept=".json">
                  <Button
                    type="primary"
                    style={{ marginLeft: '10px' }}
                    icon={<UploadOutlined />}
                    shape="circle"
                  />
                </Upload>
                <Button
                  type="primary"
                  onClick={() => handleUpload(2)}
                  loading={uploading}
                  style={{
                    marginLeft: '10px',
                    display: nodeObj ? 'none' : 'block',
                  }}
                >
                  增量导入
                </Button>
                <Popconfirm
                  overlayClassName={styles.ImportOrExport}
                  title={
                    <span style={{ color: 'red' }}>
                      覆盖导入操作会覆盖所有菜单配置并使
                      <br />
                      角色菜单权限失效！！！是否继续导入？
                    </span>
                  }
                  icon={
                    <img
                      src={icon}
                      alt=""
                      width="18px"
                      height="18px"
                      style={{ marginTop: '3px' }}
                    />
                  }
                  onConfirm={() => handleUpload(1)}
                  onVisibleChange={() => console.log('visible change')}
                >
                  <Button
                    type="primary"
                    style={{
                      marginLeft: '10px',
                      display: nodeObj ? 'none' : 'block',
                      backgroundColor: '#ff8f18',
                      borderColor: '#ff8f18',
                    }}
                  >
                    覆盖导入
                  </Button>
                </Popconfirm>

                <Button
                  type="primary"
                  onClick={() => handleUpload(2)}
                  loading={uploading}
                  style={{
                    marginLeft: '10px',
                    display: nodeObj ? 'block' : 'none',
                  }}
                >
                  开始导入
                </Button>
              </div>
            </Form.Item>
          </Form>
        </div>
      </Modal>
    </>
  );
};

export default ImportOrExport;
