/**
 * web端文件预览功能
 */
import React, {Component} from 'react';
import {Modal, Popconfirm} from 'antd';
import {checkIsImage} from '@/webPublic/one_stop_public/libs/UploadCom';
import {getContainer} from "@/webPublic/one_stop_public/utils/utils";

const FileViewer = CLIENT_TYPE == 'mobile' ? null : require('react-file-viewer');

export default class index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
    this.imageDom = null;
  }

  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;
    const {visible} = this.state;
    let isShow = false;
    let type;
    let isImg = checkIsImage(pathName);
    if (isImg) {
      isShow = true;
    } else {
      let find = ['.pdf', '.mp3', '.mp4', '.csv'].find((x) => {
        return pathName.indexOf(x) > -1;
      });
      if (find) {
        isShow = true;
      }
    }
    if (isShow) {
      type = pathName.split('.');
      type = Array.isArray(type) && type.length && type[type.length - 1];
    }

    return (
      <>
        {isShow ? (
          <Popconfirm
            title='该附件支持预览,是否预览?'
            onConfirm={this.download}
            onCancel={this.showModal}
            okText='下载'
            cancelText='预览'>
            {isImg ? (
              <img
                ref={(node)=>{ this.imageDom = node;}}
                style={{
                  width: width ? width : '100px',
                  height: height ? height : 'auto',
                }}
                src={path}
                alt={pathName}
              />
            ) : (
              <a target='_blank' href={path}>
                {pathName}
              </a>
            )}
          </Popconfirm>
        ) : (
          <a target='_blank' href={path}>
            {pathName}
          </a>
        )}
        {
          visible &&
        <Modal
          title={pathName}
          visible={visible}
          width={1200}
          destroyOnClose
          getContainer={() => {
            return getContainer(this.imageDom.parentNode.parentNode.parentNode);
          }}
          centered={true}
          onOk={this.handleOk}
          onCancel={this.handleCancel}>
          {type === 'pdf' ? (
            <iframe
              style={{
                width: '100%',
                height: 600,
              }}
              src={path}
            />
          ) : (
            <div
              style={{
                height: 650,
                maxWidth: 1200,
              }}>
              <a target={'_blank'} href={path} download={pathName}>
                下载文件
              </a>
              {FileViewer && (
                <FileViewer
                  fileType={type}
                  filePath={path}
                  // onError={this.onError}
                  // errorComponent={Error}
                  // unsupportedComponent={Error}
                />
              )}
            </div>
          )}
        </Modal>
        }

      </>
    );
  }
}
