/**
 * web端文件预览功能
 */
import React, { Component } from 'react';
import { Modal, Popconfirm } from 'antd';
const FileViewer = CLIENT_TYPE == 'mobile' ? null : require('react-file-viewer');

export default class index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
  }
  showModal = () => {
    this.setState({
      visible: true,
    });
  };

  handleOk = e => {
    this.setState({
      visible: false,
    });
  };

  handleCancel = e => {
    this.setState({
      visible: false,
    });
  };
  download = () => {
    let { path, pathName } = this.props;
    window.open(path, '_blank');
  };
  render() {
    let { path, pathName, width, height } = this.props;
    console.log(path, '????');
    const { visible } = this.state;
    let isShow =
      pathName?.indexOf('.pdf') !== -1 ||
      // || pathName?.indexOf('.doc') !== -1
      pathName?.indexOf('.mp3') !== -1 ||
      pathName?.indexOf('.mp4') !== -1 ||
      pathName?.indexOf('.csv') !== -1 ||
      pathName?.indexOf('.png') !== -1 ||
      pathName?.indexOf('.jpeg') !== -1 ||
      pathName?.indexOf('.gif') !== -1 ||
      pathName?.indexOf('.bmp') !== -1 ||
      pathName?.indexOf('.jpg') !== -1;
    let type;
    let isImg;
    if (pathName?.indexOf('.pdf') !== -1) {
      isShow = true;
      isImg = false;
      type = 'pdf';
    } else if (pathName?.indexOf('.jpg') !== -1) {
      isShow = true;
      isImg = true;
      type = 'jpg';
    } else if (pathName?.indexOf('.mp3') !== -1) {
      isShow = true;
      isImg = false;
      type = 'mp3';
    } else if (pathName?.indexOf('.mp4') !== -1) {
      isShow = true;
      isImg = false;
      type = 'mp4';
    } else if (pathName?.indexOf('.csv') !== -1) {
      isShow = true;
      isImg = false;
      type = 'csv';
    } else if (pathName?.indexOf('.png') !== -1) {
      isImg = true;
      isShow = true;
      type = 'png';
    } else if (pathName?.indexOf('.gif') !== -1) {
      isImg = true;
      isShow = true;
      type = 'gif';
    } else if (pathName?.indexOf('.bmp') !== -1) {
      isShow = true;
      isImg = false;
      type = 'bmp';
    } else {
      isShow = false;
    }
    return (
      <>
        {isShow ? (
          <Popconfirm
            title="该附件支持预览,是否预览?"
            onConfirm={this.download}
            onCancel={this.showModal}
            okText="下载"
            cancelText="预览"
          >
            {isImg ? (
              <img
                style={{
                  width: width ? width : '100%',
                  height: height ? height : '100%',
                }}
                src={path}
                alt={pathName}
              />
            ) : (
              <a target="_blank" href={path}>
                {pathName}
              </a>
            )}
          </Popconfirm>
        ) : (
          <a target="_blank" href={path}>
            {pathName}
          </a>
        )}

        <Modal
          title={pathName}
          visible={visible}
          width={1200}
          destroyOnClose
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          {type === 'pdf' ? (
            <iframe
              style={{
                width: '100%',
                height: 600,
              }}
              src={path}
            />
          ) : (
            <div
              style={{
                height: 600,
              }}
            >
              {FileViewer && (
                <FileViewer
                  fileType={type}
                  filePath={path}
                  // onError={this.onError}
                  // errorComponent={Error}
                  // unsupportedComponent={Error}
                />
              )}
            </div>
          )}
        </Modal>
      </>
    );
  }
}
