import React, { Component } from 'react';
import { Image } from 'antd';
import './ShowImage.less';
import FullScreen from '../../../assets/quanping.svg';

export default class ShowImg extends Component {
  constructor(props) {
    super(props);
    this.state = {
      f: this.props.firstIndex,
      R: 0,
      S: 1,
      i: 0,
      SS: 1,
      data: this.props.data,
      fullScreen: false,
      // eslint-disable-next-line react/no-unused-state
      showimgs: this.props.showimgs,
      maxNum: this.props.data !== undefined ? this.props.data.length - 1 : 0,
      imgVisible: false,
    };
  }
  componentDidMount() {

  }
  componentWillReceiveProps(props) {
    this.setState({ f: props.firstIndex });
  }
  // 向左预览
  leftshow = () => {
    const { maxNum } = this.state;
    if (this.state.f === 0) {
      this.setState({
        f: maxNum, R: 0, S: 1, i: 0, SS: 1,
      });
    } else {
      this.setState({
        f: this.state.f - 1, R: 0, S: 1, i: 0, SS: 1,
      });
    }
    // eslint-disable-next-line react/no-string-refs
    this.refs.imgstyle.setAttribute('src', this.props.data[this.state.f]);
  }

  // 向右预览
  rightshow = () => {
    const { maxNum } = this.state;
    if (this.state.f === maxNum) {
      this.setState({
        f: 0, R: 0, S: 1, i: 0, SS: 1,
      });
    } else {
      this.setState({
        f: this.state.f + 1, R: 0, S: 1, i: 0, SS: 1,
      });
    }
    // eslint-disable-next-line react/no-string-refs
    this.refs.imgstyle.setAttribute('src', this.props.data[this.state.f]);
  }

  // 顺时针旋转
  rotateright = () => {
    this.setState({ R: this.state.R + 90 });
    // eslint-disable-next-line react/no-string-refs
    this.refs.imgstyle.style.transform = `rotate(${this.state.R}deg) scale(${this.state.SS},${this.state.SS})`;
  }

  // 逆时针旋转
  rotateleft = () => {
    this.setState({ R: this.state.R - 90 });
    // eslint-disable-next-line react/no-string-refs
    this.refs.imgstyle.style.transform = `rotate(${this.state.R}deg) scale(${this.state.SS},${this.state.SS})`;
  }

  // 放大
  showbig = () => {
    if (this.state.i >= 0) {
      this.setState({ S: this.state.S + 1, i: this.state.i + 1, SS: 1 * (this.state.S + 0.1) });
    } else {
      this.setState({ S: this.state.S - 1, i: this.state.i + 1, SS: 1 / (this.state.S - 1) });
    }
    // eslint-disable-next-line react/no-string-refs
    this.refs.imgstyle.style.transform = `rotate(${this.state.R}deg) scale(${this.state.SS},${this.state.SS})`;
  }

  // 缩小
  showmin = () => {
    if (this.state.i <= 0) {
      this.setState({ S: this.state.S + 1, i: this.state.i - 1, SS: 1 / (this.state.S + 1) });
    } else {
      this.setState({ S: this.state.S - 1, i: this.state.i - 1, SS: 1 * (this.state.S - 1) });
    }
    // eslint-disable-next-line react/no-string-refs
    this.refs.imgstyle.style.transform = `rotate(${this.state.R}deg) scale(${this.state.SS},${this.state.SS})`;
  }

  // 全屏
  fullScreen = () => {
    this.setState({
      imgVisible: true,
    });
    // this.setState({ fullScreen: !this.state.fullScreen });
  }

  render() {
    const {
      toggleshow, showimgs, imgOffsetWidth, imgOffsetHeight, bFullScreen,
    } = this.props;
    const {
      data, f, R, SS, fullScreen,
    } = this.state;
    const bigWidth = imgOffsetWidth !== undefined && imgOffsetWidth !== null ? imgOffsetWidth : '950';
    const bigHeight = imgOffsetHeight !== undefined && imgOffsetHeight !== null ? imgOffsetHeight : '600';
    return (
      <div>
        {
          showimgs ?
            <div>
              <div className="dilong toggleshow" onClick={toggleshow} />
              <div
                className="bigimg toggleshow"
                style={{ width: fullScreen || bFullScreen ? '100vw' : `${bigWidth}px`, height: fullScreen || bFullScreen ? '100vh' : `${bigHeight}px`, overflow: 'hidden' }}
              >
                <div className="imgheader" style={{ right: bFullScreen ? '0px' : 'none' }}>
                  <div className="left_top" onClick={this.leftshow}><i className="icon icon-left" style={{ fontSize: '30px' }} /></div>
                  <div className="right_top" onClick={this.rightshow}><i className="icon icon-right" style={{ fontSize: '30px' }} /></div>
                  <div className="rotateright_top" onClick={this.rotateright}><i className="icon icon-rturn" style={{ color: '#999', fontSize: '22px' }} /></div>
                  <div className="rotateleft_top" onClick={this.rotateleft}><i className="icon icon-lturn" style={{ color: '#999', fontSize: '22px' }} /></div>
                  <div className="full_screen" onClick={this.fullScreen}><img src={FullScreen} alt="" style={{ width: 22, height: 22 }} /></div>
                  <div className="showbig_top" onClick={this.showbig}><i className="icon icon-imgbig" style={{ color: '#999', fontSize: '22px' }} /></div>
                  <div className="showmin_top" onClick={this.showmin}><i className="icon icon-imgmin" style={{ color: '#999', fontSize: '22px' }} /></div>
                  <div className="close_top" onClick={toggleshow} ><i className="icon icon-close" style={{ color: '#999', fontSize: '22px' }} /></div>
                  <div className="headtitle">预览图片</div>
                </div>
                <div className="previewBox">
                  {/* eslint-disable-next-line react/no-string-refs */}
                  <img src={data[f]} className="imgstyle" style={{ transform: `rotate(${R}deg) scale(${SS},${SS})` }} ref="imgstyle" alt="无图片" onDoubleClick={this.fullScreen} />
                  <Image
                    src={data[f]}
                    style={{ display: 'none' }}
                    preview={{
                      visible: this.state.imgVisible,
                      scaleStep: 0.5,
                      src: data[f],
                      onVisibleChange: (value) => {
                        this.setState({
                          imgVisible: value,
                        });
                      },
                    }}
                  />
                </div>
              </div>
            </div>
            : null
        }
      </div>
    );
  }
}