import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import { Button, Icon } from 'antd';
import './TaskResultLayer.css'

class ImageLayer extends Component {

	constructor(props) {
		super(props);
		this.state = {
			visible: false,
			previewImage: '',
			current: 90,
			transStyle: ''
		}
	}
	translate = () => {
		this.setState({
			current: (this.state.current + 90) % 360,
			transStyle: 'rotate(' + this.state.current + 'deg)'
		});
	}


	render() {
		let { showImage, imageSrc, } = this.props;
		return ReactDOM.createPortal(
			<div>
				{showImage ?
					<div className="taskResultLayer">
						<div className={"ImageLayerbutton mt20"}>
							<Button
								className={"fr"}
								onClick={() => this.props.onImageLayerClose()}
							>
								关闭<Icon type="close" />
							</Button>

							<Button
								href={imageSrc}
								className={"fr mr10"}
							>
								下载<Icon type="vertical-align-bottom" />
							</Button>

							<Button
								onClick={() => this.translate()}
								className={"fr mr10"}
							>
								旋转<Icon type="reload" theme="outlined" />
							</Button>
						</div>
						<div className="passContent" style={{ transform: this.state.transStyle }}>
							<img src={imageSrc} className="passImg" unselectable="on" alt="" />
						</div>


					</div>
					:
					<div></div>
				}
			</div>,
			document.getElementById('root'),
		);
	}
}

export default ImageLayer;
