weaver_trunk_cli/pc4mobx/portal4public/components/wea-portal-floatarea/index.js

import React from 'react';
import { WeaTools} from 'ecCom';
import { addContentPath } from '../../util/pathUtil';

class WeaPortalFloatArea extends  React.Component{
    constructor(props) {
        super(props);
        this.state = {
            floatAreaData : {},
            bayWindowLoading : false,
            subcompanyid : -1 ,
        }
       
    }

    componentWillMount(){
        this.hideBayWindow()
        window.bayWindow = null
    }


    componentDidMount(){
        this.hideBayWindow();
        this.initFloatArea();
    }

    componentDidUpdate(){
        if(WeaTools.ls.getStr('floatareaCheckShow') && WeaTools.ls.getStr('floatAreaPreviewData') ){
            var floatAreaData = JSON.parse(WeaTools.ls.getStr('floatAreaPreviewData'));
            if(this.state && floatAreaData){
                    if( (!WeaTools.ls.getStr('floatareaCheckShow') || WeaTools.ls.getStr('floatareaCheckShow') == 'leave')&& floatAreaData.displayType != '0'){//离开门户页面时隐藏
                        this.floatAreaShow(false)
                    }else{
                        
                        this.getFloatAreaShow(WeaTools.ls.getStr('floatareaCheckShow'))
                    }

            }
            
        }

    }


    floatAreaShow = (obj) =>{
        if(obj == false){
            $("#portal-bay-window-outer").hide();
        }else{
            $("#portal-bay-window-outer").show();
        }
    }


    initFloatArea = ()=>{//初始化
        var floatAreaPreviewId = -1 ;//判断是否是预览
        if(WeaTools.ls.getStr('floatAreaPreviewId')){
            floatAreaPreviewId = WeaTools.ls.getStr('floatAreaPreviewId');
        }
            loadjs.isDefined("bay-window") ? loadjs.ready('bay-window',()=>{//初始化
                this.setState({bayWindowLoading:true})
                WeaTools.callApi('/api/portal/hpFloatArea/getPortalBayWindow', 'GET',{
                    floatAreaPreviewId: floatAreaPreviewId,
                }).then((result)=>{
                    if(result){
                        this.setState({floatAreaData:result})
                        WeaTools.ls.set('floatAreaPreviewData',result);
                        this.getFloatAreaShow(WeaTools.ls.getStr('floatareaCheckShow'))
                    }
                })
            }) : loadjs(['/cloudstore/resource/pc/bay-window/jquery.bay-window.js'],'bay-window',()=>{
                this.setState({bayWindowLoading:true})
                WeaTools.callApi('/api/portal/hpFloatArea/getPortalBayWindow', 'GET',{
                    floatAreaPreviewId: floatAreaPreviewId,
                }).then((result)=>{
                    if(result){
                        this.setState({floatAreaData:result})
                        WeaTools.ls.set('floatAreaPreviewData',result);
                        this.getFloatAreaShow(WeaTools.ls.getStr('floatareaCheckShow'))
                    }

                })
            })
            WeaTools.ls.set('floatAreaPreviewId',-1);//预览使用一次后赋值清空
    }






    startBayWindow = ()=>{
        const {bayWindowLoading} = this.state
        const setBayWindow = this.setBayWindow
        let temp = setInterval(function(){
            if(bayWindowLoading){
                clearInterval(temp)
                setBayWindow()
                $("#portal-bay-window").show();
            }
        },1000)

    }
    setBayWindow = ()=>{
        if(!window.bayWindow){
            var floatAreaData = this.state.floatAreaData;
            this.bayWindow = $('#portal-bay-window').autoMove({parentDom:$("#container"),floatAreaData});
            window.bayWindow = this.bayWindow
        }

    }


    hideBayWindow = ()=>{
        if(this.bayWindow && this.bayWindow.stop){
            $("#portal-bay-window").hide();
            
            this.bayWindow.stop();

        }
    }

    showBayWindow = ()=>{
        if(this.bayWindow && this.bayWindow.start){
            this.bayWindow.start();
            $("#portal-bay-window").show();
        }
    }


    overshow = ()=>{
        $("#bay-window-switch").show()
    }

    outHide = ()=>{
        $("#bay-window-switch").hide()
    }

    getFloatAreaShow = (id)=>{
        if(WeaTools.ls.getStr('floatAreaPreviewData')){//如果没有飘窗则不进入数据判断
            //飘窗显示判断 
            var floatAreaData = JSON.parse(WeaTools.ls.getStr('floatAreaPreviewData'));
            if(floatAreaData.displayType == '0'){
                this.floatAreaShow(true)
            }else if(floatAreaData.displayType == '2'){
                //页面显示
                var strs = new Array();
                var display = false ;
                var i ;
                strs = floatAreaData.displaySrc.split(","); //字符分割
                for (i=0;i<strs.length ;i++ ){
                    if(strs[i] == id){
                        display = true;
                    } 
                }

                this.floatAreaShow(display)
            }else if(floatAreaData.displayType == '1'){

                this.floatAreaShow(id && id != 'leave')//在pad页面
            }
        }

    }


    render(){
        let htmlimg = <div></div>
        if(this.state.floatAreaData.sizeType == '0'){
            htmlimg = <img src={addContentPath(this.state.floatAreaData.picSrc)} style={{cursor:'pointer' , width:this.state.floatAreaData.sizeWidth+'px' , height: this.state.floatAreaData.sizeHeight+'px' }} onClick={this.state.floatAreaData.linkSrc?()=>{window.open(addContentPath(this.state.floatAreaData.linkSrc))} : ''} onLoad={()=>{this.startBayWindow()}}/>
        }else{
            htmlimg = <img src={addContentPath(this.state.floatAreaData.picSrc)} style={{cursor:'pointer'}} onClick={this.state.floatAreaData.linkSrc?()=>{window.open(addContentPath(this.state.floatAreaData.linkSrc))} : ''} onLoad={()=>{this.startBayWindow()}}/>
        }

        return(
            <div id='portal-bay-window' style={{'z-index':'95',display: 'none','font-size':'0px'}}  onMouseOver={this.state.floatAreaData.windowSwitch == '1'?()=>{this.overshow()}:()=>{this.outHide()}} onMouseOut={()=>{this.outHide()}}   > 
                {htmlimg}
                <div id='bay-window-switch' style={{position: 'absolute',top: '0px',right: '0px','font-size':'0px' ,display : 'none'}} onClick={()=>{this.hideBayWindow()}} ><span className="icon-coms-excel2" style={{'font-size':'20px',cursor:'pointer',color:'#000000'}}></span></div>
            </div>  
        )
    }
}

export default WeaPortalFloatArea;