/**
 * 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;
		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>
			</>
		);
	}
}
