/**
 * 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
        } = this.props
        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
        let type;
        if(pathName?.indexOf('.pdf') !== -1){
            isShow = true
            type = 'pdf'
        }  else if(pathName?.indexOf('.mp3') !== -1){
            isShow = true
            type = 'mp3'
        }   else if(pathName?.indexOf('.mp4') !== -1){
            isShow = true
            type = 'mp4'
        }   else if(pathName?.indexOf('.csv') !== -1){
            isShow = true
            type = 'csv'
        }  else if(pathName?.indexOf('.png') !== -1){
            isShow = true
            type = 'png'
        }  else if(pathName?.indexOf('.gif') !== -1){
            isShow = true
            type = 'gif'
        }  else if(pathName?.indexOf('.bmp') !== -1){
            isShow = true
            type = 'bmp'
        } else {
            isShow = false
        }
        return (
            <>
                    {
                        isShow?
                        <Popconfirm
                            title="该附件支持预览,是否预览?"
                            onConfirm={this.download}
                            onCancel={this.showModal}
                            okText="下载"
                            cancelText="预览"
                        >
                                <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.default
                                    fileType={type}
                                    filePath={path}
                                    // onError={this.onError}
                                    // errorComponent={Error}
                                    // unsupportedComponent={Error}
                                />}
                            </div>
                    }

                </Modal>
            </>
        )
    }
}