import React from 'react';
import { connect } from 'dva';
import { Icon } from 'antd';
import ReactDOM from 'react-dom';
import ReactToPrint from "react-to-print";
import styles from './imgPreView.css';

class ImgPreView extends React.Component {
  constructor(props) {
    super(props);
    this.el = document.createElement('div')
    this.state = {
      imgStyle: {
        "userSelect": "none"
      }
    };
    this.rotate = 0;
    this.scaleChange = 1;
  };
  
  handleShowView () {
    document.querySelector('#root').appendChild(this.el)
  }
  
  zoomInImage () {
    if (this.scaleChange < 3)  this.scaleChange = this.scaleChange + 0.1;
    this.setState({
      imgStyle: {
        ...this.state.imgStyle,
        transform: "rotate(" + 90 * this.rotate + "deg) scale(" + this.scaleChange + ")"
      }
    })
  }
  zoomOutImage () {
    if (this.scaleChange > 0.2)  this.scaleChange = this.scaleChange-0.1;
    this.setState({
      imgStyle: {
        ...this.state.imgStyle,
        transform: "rotate(" + 90 * this.rotate + "deg) scale(" + this.scaleChange + ")"
      }
    });
  }
  rotateImg() {
    this.rotate++;
    this.setState({
      imgStyle: {
        ...this.state.imgStyle,
        transform: "rotate(" + 90 * this.rotate + "deg) scale(" + this.scaleChange + ")"
      }
    })
  }
  handleCloseView() {
    document.querySelector('#root').removeChild(this.el)
  }
  render() {
    return <div>
      <span onClick={this.handleShowView.bind(this)}>{this.props.children}</span>
      {
        ReactDOM.createPortal(
          <div className={styles.PreView}>
            <Icon type="close-circle"
                  className={styles.closeBtn}
                  onClick={this.handleCloseView.bind(this)}
                  theme="outlined" />
            <div className={styles.imgBox}>
              <div className={styles.imgDiv} style={this.state.imgStyle}>
                <img ref={e => this.imgNode = e} style={{ width: "100%"}} src={this.props.source} alt=""/>
              </div>
            </div>
            <div className={styles.actionBtn}>
              <span className={styles.iconWrap}>
                <Icon type="plus"
                      style={{ fontSize: 26 }}
                      onClick={this.zoomInImage.bind(this)}
                      theme="outlined" />
              </span>
              <span className={styles.iconWrap}>
                <Icon type="minus"
                      style={{ fontSize: 26 }}
                      onClick={this.zoomOutImage.bind(this)}
                      theme="outlined" />
              </span>
              <span className={styles.iconWrap}>
                <Icon type="enter"
                      style={{ fontSize: 26 }}
                      onClick={this.rotateImg.bind(this)}
                      theme="outlined" />
              </span>
              <ReactToPrint
                trigger={() => <span className={styles.iconWrap}>
                  <Icon
                    type="printer"
                    style={{ fontSize: 26 }}
                    theme="outlined" />
                </span>}
                content={() => this.imgNode}
              />
            </div>
          </div>,
          this.el
        )
      }
    </div>
  }
}

export default ImgPreView;
