import React, { Component } from 'react';
import style from './index.less';
import arrowIcon from '@images/arrowIcon.png';
import pushEmpty from '@images/pushEmpty.png';
import {pushPage2} from '@utils/config';
import {dragBox} from '@utils/drag';

class PushData extends Component{
    constructor(props){
        super(props);
        this.state = {
            hashNum:0
        }
        this.showPushData = this.showPushData.bind(this)
        this.hidePushData = this.hidePushData.bind(this)
    }
    showPushData(){
        const {togglePushData} = this.props
        setTimeout(function(){
        dragBox('dragModalWrap','dragModalTitle','add')

        })
        togglePushData()
    }
    hidePushData(){
        const {togglePushData} = this.props
        dragBox('dragModalWrap','dragModalTitle','del')
        togglePushData()
    }
    componentWillReceiveProps(next){
        // if(next.update!=this.props.update){
          this.setState({
            hashNum:Math.random()
          });
        // }
      }

    render(){
        const {hashNum } = this.state
        const {mrId,planCode,showPushData,togglePushData ,windowWidth,windowHeight} = this.props
        // console.log(windowWidth,windowHeight)
        const url =`${pushPage2}?mrId=${mrId}&planCode=${planCode}&data=${hashNum}`;
        return <div >
            {!showPushData&&<div className={style['slideButton']} style={{right:(windowWidth-1200)/2+'px'}} onClick={this.showPushData}> 
                朗通智能提醒 
                <img class={style['arrowIcon']} src={arrowIcon} alt=""/>
            </div>}
            {showPushData&&<div id="dragModalWrap" className={style['pushWrapper']} style={{right:(windowWidth-1200)/2+'px'}}>
                {/* <div id="dragModalTitle"  className={style['pushDataTitle']}>朗通智能提醒 <span className={style['pushDataHide']} onClick={this.hidePushData}>收起</span></div> */}
                <div className={style['pushDataTitle']}>朗通智能提醒 <span className={style['pushDataHide']} onClick={this.hidePushData}>收起</span></div>
                {mrId&&<iframe id='embedPage'  src={url} frameborder="0" width="400" height="560"></iframe>}
                {!mrId&&<div className={style['pushEmpty']}>
                        <div className={style['pushEmptyBox']}>
                            <img className={style['pushEmptyImg']} src={pushEmpty} alt=""/>
                            <p>等待内容输入中…</p>
                        </div>
                </div>}

            </div>}
        </div>
    }
}

export default PushData;