/*
 *cfg{width:,height,src,hide,css}
 * cfg.src 如果设置，iframe 框架 将被隐藏，start()参数 url 设置，将显示iframe。
 * */
export class frameBox{
    constructor(cfg){
        this.width=cfg.width,
        this.height=cfg.height,
        this.sizeTag=0,
        this.css=cfg.css||'sam',
        this.NAME='frameBox',
        this.panel=document.querySelector('.yui3-panel'),
        this.bd=null,
        this.hd=null,
        this.ft=null,
        this.selectfiles=this.strToNodes('<span style="cursor:pointer;" id="selectfiles">选择文件</span>'),
        this.url=null
    }
    start(url=null){
        this.url=url;
        let iframe = document.createElement('iframe'); 
        iframe.src= url;
        document.body.classList.add('yui3-skin-'+this.css);
        this.panel=document.body.appendChild(this.strToNodes(`<div  class="yui3-panel yui3-panel-content" style="position: fixed;height:${this.height};width:${this.width};z-index:10"><div class="yui3-widget-hd"><span>&nbsp;</span><span class="yui3-widget-buttons" ><button style="cursor:pointer;" class="yui3-button yui3-button-resize" type="button" name="resize"></button> <button style="cursor:pointer;" class="yui3-button yui3-button-close" type="button" name="close">close</button></span></div><div class="yui3-widget-bd" style="padding:8px;"></div></div>`));
        this.panel.querySelector('.yui3-button-close').addEventListener('click',this.hide.bind(this));
        this.panel.querySelector('.yui3-button-resize').addEventListener('click',this._reSize.bind(this));
        this.hd=this.panel.querySelector('.yui3-widget-hd');
        this.bd=this.panel.querySelector('.yui3-widget-bd');
        this.bd.style.overflow='auto';
        if(!url){
            this.ft=this.panel.appendChild(this.strToNodes('<div class="yui3-widget-ft" ><span class="yui3-widget-buttons"><button name="updata" class="yui3-button"> 刷新 </button></span></div>'));
            this.hd.replaceChild(this.selectfiles,this.hd.firstChild);
        }else{ 
            this.bd.style.padding=0;
            this.bd.appendChild(iframe).style.cssText ='border:0;width: 100%;';
        }
        this.panel.addEventListener('reSize',this._setCenter.bind(this,this.panel));
        this.panel.addEventListener('reSize',this._changeFmHeight.bind(this,iframe,this.hd));
        this._changeFmHeight(iframe,this.hd);
        this._boxMove(this.panel,this.hd);
        this._setCenter(this.panel);
    }
    setTitle(s){
        let n = this.strToNodes('<span>'+s+'</span>');
        this.hd.replaceChild(n,this.hd.firstChild);
    }
    hide(){this.panel.remove()}
    _reSize(){
        this.sizeTag = !this.sizeTag; 
        if(this.sizeTag){
            this.panel.style.width='100%';
            this.panel.style.height=document.documentElement.clientHeight+'px';
        }else{
            this.panel.style.width = this.width,
            this.panel.style.height = this.height
        }
        this.fire(this.panel,'reSize');
    }
    _setCenter(n){
        n.style.left = Math.floor((document.documentElement.clientWidth  - n.offsetWidth)/2)+'px';
        n.style.top = Math.floor((document.documentElement.clientHeight - n.offsetHeight)/2)+'px';
        n.style.top<0&&(n.style.top=0);
    }
    _changeFmHeight(iframe,hd){
        this.url?this.fire(iframe.contentWindow.document,'reSize',{'reHeight':this.panel.offsetHeight}):
           this.bd.style.height=this.panel.offsetHeight-this.hd.offsetHeight-this.ft.offsetHeight+'px';
        iframe.height=this.panel.offsetHeight-this.hd.offsetHeight-3+'px';
    }
    _boxMove(n,hd){
        let m,x,y;
        hd.addEventListener('mousedown',function(e){m=1;x=e.clientX-n.offsetLeft;y=e.clientY-n.offsetTop;});    
        document.addEventListener('mouseup',function(e){m=0;x=0;y=0;});
        document.addEventListener('mousemove',function(e){if(m){n.style.left=e.clientX-x+'px';n.style.top=e.clientY-y+'px'}});
    }
    strToNodes(s) { 
　　  let objE = document.createElement("div"); 
　　  objE.innerHTML = s; 
　　  return objE.childNodes[0]; 
    }
    _getClientHeight(){
        let h=0,bh=document.body.clientHeight,eh=document.documentElement.clientHeight;
        if(bh&&eh){    
            h=(bh<eh)?bh:eh;            
        }else{    
            h=(bh>eh)?bh:eh;        
        }    
        return h;    
    }
    _getScrollTop(){    
        let h=0,etop=document.documentElement.scrollTop;    
        if(document.documentElement&&etop){    
            h=etop;    
        }else if(document.body){    
            h=document.body.scrollTop;    
        }    
        return h;    
    }
    fire(n,e,o={},canBubble=false,cancelable=false){
        let evt = document.createEvent("HTMLEvents");
        evt.initEvent(e, canBubble, cancelable);
        Object.assign(evt,o);
        n.dispatchEvent(evt);
        return evt;
    }
}