/**
 * Created by pans on 16/11/17.
 */
import React, {Component} from 'react';
import classNames from 'classnames';
import './ModalQm.less';
import './style.css';
export default class ModalQm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modal: this.props.visible,
      ok_text: (this.props.oktext == undefined) ? '确定' : this.props.oktext,
      cancel_text: (this.props.oktext == undefined) ? '取消' : this.props.canceltext
    }
  }

  render() {
    const previewModal = classNames({
      "hide": !this.state.modal,
      "modal_box": true
    });
    return (
      <div className={previewModal}>
        {this.props.children}
        <div className="del-icon" onClick={this.closeMeBtn.bind(this)}>
          <i className="iconmd-cross"></i>
        </div>
        <div className="btn-box">
          <div className="ok_div" onClick={this.okBtn.bind(this)}>{this.state.ok_text}</div>
          <div className="cancel_div" onClick={this.closeBtn.bind(this)}>{this.state.cancel_text}</div>
        </div>
      </div>
    )
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      modal: nextProps.visible
    });
    if (nextProps.visible == true) {
      document.body.style.overflow = 'hidden';
      let addhoverwrap = document.createElement('div');
      addhoverwrap.id = 'hoverwrapmd';
      document.body.appendChild(addhoverwrap);
      this.setState({
        modal: true
      })
    }
  }

  closeMeBtn() {
    this.delwrap();
  }

  okBtn() {
    this.props.ok();
    this.delwrap();
  }

  closeBtn() {
    this.props.cancel();
    this.delwrap();
  }

  //去掉模态框的背景层
  delwrap() {
    document.body.style.overflow = '';
    let delhoverwrap = document.getElementById("hoverwrapmd");
    document.body.removeChild(delhoverwrap);
    this.setState({
      modal: false
    })
  }
}