import vueContextMenu from "@main/components/contextMenu";
// import screenfull from 'screenfull'
 function noop() {}
export default {
    props:{
        panels:Array,
        onTabClick: {
        type: Function,
        default: noop
      },
      onTabRemove: {
        type: Function,
        default: noop
      },
      onTabCloseAll: {
        type: Function,
        default: noop
      },
        hasContextMenu:{
            type:Boolean,
            default:true
        }
    },
    data(){
        return {
            curContextMenuName:'',//右击tab
            curContextMenuIndex:null,
            show:true,//用于强制刷新
        }
    },
    watch:{
        panels(){
            this.show=false;
            this.$nextTick(()=>{
                this.show = true;//用于强制刷新
            });
        }
    },
    methods:{
        resize(){
            let tabWidth=0;
            let children = this.$el.querySelectorAll('li');
            Array.prototype.map.call(children, function (el, index, list) {
                let rct = el.getBoundingClientRect();        
                tabWidth += rct.width;
            });
            this.$el.style.width = (tabWidth+5)+'px';


            
            let id = this.$parent.currentName;
            if (this.$refs[id] == null) return;
                let scrollLeft = this.$refs[id].offsetLeft,
                scrollArea = this.$refs[id].parentNode.parentNode.parentNode;
            if (scrollArea.offsetWidth < scrollLeft) {
                scrollArea.scrollLeft = scrollLeft;
            } else if (scrollArea.scrollLeft > scrollLeft) {
                scrollArea.scrollLeft = scrollLeft;
            }

        },
        async onClose(panel,e){
            e.stopPropagation();
            // if(panel.$listeners&&panel.$listeners.onBeforeClose&&await panel.$listeners.onBeforeClose(panel,e)===false){
            //     return;
            // }
            this.$emit('onTabClose',panel.name);
        },
        onActive(panel,evt){
            panel.$listeners&&panel.$listeners.onSelected&&panel.$listeners.onSelected(panel,evt)
            this.$emit('onTabChange',panel);
        },
        onContextMenu(panel,index,e) {
            if(this.hasContextMenu==false){
                return;
            }
            e.preventDefault()
            this.curContextMenuName = panel.name;
            this.curContextMenuIndex = index,
            this.$refs['cmp-tabContextMenu'].open(e);
        },
        handleContextMenuRefresh(e) {
            let panel = this.panels[this.curContextMenuIndex];
            if(!panel){return}
            if(panel.$listeners&&panel.$listeners.onBeforeRefresh&&panel.$listeners.onBeforeRefresh(panel,e)===false){
                return;
            }
            panel.reload();
            // let ifms = panel.$el.querySelectorAll('iframe');
            // for(let i=ifms.length-1;i>=0;i--){
            //     ifms[i].contentWindow.window.location.reload();
            // }
        },
        async handleContextMenuClose(e) {
            // e.stopPropagation();
            let panel = this.panels[this.curContextMenuIndex];            
            if(!panel){return}
            // if(panel.$listeners&&panel.$listeners.onBeforeClose&&await panel.$listeners.onBeforeClose(panel,e)===false){
            //     return;
            // }
            this.$emit('onTabClose',panel.name);
        },
        handleContextMenuCloseAll(e) {
            this.$emit('onTabCloseAll');
        },
        handleContextMenuCloseRt() {
            this.$emit('onTabCloseRt',this.curContextMenuName,this.curContextMenuIndex);
        },
        handleContextMenuCloseLt() {
            this.$emit('onTabCloseLt',this.curContextMenuName,this.curContextMenuIndex);
        },
        handleContextMenuCloseOt() {
            this.$emit('onTabCloseOt',this.curContextMenuName,this.curContextMenuIndex);
        },
        handleFullScreen(){
            // this.FullCreeen(document.documentElement);
            this.$emit('onFullScreen')
        },
        handleBlankPage(){
            let panel = this.panels[this.curContextMenuIndex];
            panel.$listeners&&panel.$listeners.onBlankPage&&panel.$listeners.onBlankPage();
        },
        handleCopyLink(){
            let panel = this.panels[this.curContextMenuIndex];
            panel.$listeners&&panel.$listeners.onCopyLink&&panel.$listeners.onCopyLink();
        },
        FullCreeen(element) {
            // let el = element;
            // let rfs =
            //     el.requestFullScreen ||
            //     el.webkitRequestFullScreen ||
            //     el.mozRequestFullScreen ||
            //     el.msRequestFullScreen;
            //     // Element.requestFullscreen() 此方法用于发出异步请求使元素进入全屏模式。
            //     // 调用此API并不能保证元素一定能够进入全屏模式。如果元素被允许进入全屏幕模式，
            //     // document对象会收到一个fullscreenchange事件，通知调用者当前元素已经进入全屏模式。如果全屏请求不被许可，则会收到一个fullscreenerror事件。
            // if (typeof rfs != "undefined" && rfs) {
            //     rfs.call(el);
            // } else if (typeof window.ActiveXObject != "undefined") {
            //     let wscript = new ActiveXObject("WScript.Shell");
            //     if (wscript != null) {
            //     wscript.SendKeys("{F11}");
            //     }
            // }
            screenfull.toggle()
        },
        outFullCreeen(element){
            // let el = element;
            // let cfs = el.cancelFullScreen || el.webkitCancelFullScreen ||
            //     el.mozCancelFullScreen || el.exitFullScreen;
            // if (typeof cfs != "undefined" && cfs) { 
            //     cfs.call(el);
            // } else if (typeof window.ActiveXObject != "undefined") {
            //     let wscript = new ActiveXObject("WScript.Shell");
            //     if (wscript != null) {
            //         wscript.SendKeys("{F11}");
            //     }
            // }
        },
    },
    render(h){
        let {
            onClose,
            onActive,
            onContextMenu,
            hasContextMenu,
            show
        }=this;
        let tabs = this._l(this.panels,(panel,index)=>{           
            const nodeProps = {
                class:{                
                    ['pl-tabs-item']:1,
                    ['pl-tabs-itemSeld']:panel.name == this.$parent.currentName
                },
                attrs:{
                    id:'tab_'+panel.name
                }
            };
            const closeTpl = (
                <i class="pl-tabs-itemClose iconfont icon-close" on-click={(ev) => { onClose(panel, ev); }}></i>
            )  
            const title = panel.title; 
            return (
                <li ref={panel.name} on-contextmenu={(ev) => { onContextMenu(panel,index, ev); }}>
                    <div {...nodeProps} on-click={(ev) => {onActive(panel, ev); }}>
                        <span class="pl-tabs-itemTxt sys-tab-item-text">{title}</span>
                        {(panel.close===""||panel.close===true)&&closeTpl}
                    </div>
                </li>
            )
        });
        const ctxMenuProp = {
            props: {
                ['menu-items']: [
                    {
                        title: this.$t('hivuiMain_tab_ctxmenu_refresh'),
                        iconClass: 'icon-refresh',
                        handler: this.handleContextMenuRefresh,
                    },
                    {
                        title: this.$t('hivuiMain_tab_ctxmenu_close'),
                        iconClass: 'icon-close-circle',
                        handler: this.handleContextMenuClose,
                        divided: true,
                    },
                    // {
                    //     title: this.$t('hivuiMain_tab_ctxmenu_closeleft'),
                    //     iconClass: 'icon-arrow-leftMore-circle',
                    //     handler: this.handleContextMenuCloseLt,
                    // },
                    {
                        title: this.$t('hivuiMain_tab_ctxmenu_closeright'),
                        iconClass: 'icon-arrow-rightMore-circle',
                        handler: this.handleContextMenuCloseRt,
                    },
                    {
                        title: this.$t('hivuiMain_tab_ctxmenu_closeother'),
                        iconClass: 'icon-closeOther',
                        handler: this.handleContextMenuCloseOt,
                    },
                    {
                        title: this.$t('hivuiMain_tab_ctxmenu_closeall'),
                        iconClass: 'icon-closeAll',
                        handler: this.handleContextMenuCloseAll,
                    },
                    
                    {
                        title: this.$t('hivuiMain_tab_ctxmenu_fullscreen'),
                        iconClass: 'icon-quanping',
                        handler: this.handleFullScreen,
                        divided: true,
                    },
                    {
                        title: this.$t('hivuiMain_tab_ctxmenu_blankPage'),
                        iconClass: 'icon-xinbiaoqianye',
                        handler: this.handleBlankPage,
                    },
                    {
                        title: this.$t('hivuiMain_tab_ctxmenu_copyLink'),
                        iconClass: 'el-icon-document-copy',
                        handler: this.handleCopyLink,
                    },
                ]
            }
        };
        return (
            <div>
                <ul>{show?tabs:''}</ul>
                {
                    hasContextMenu&&(
                        <vueContextMenu ref="cmp-tabContextMenu" {...ctxMenuProp}></vueContextMenu>
                    )
                }                   
            </div>    
        )
    },
    updated(){
        this.$parent.resize();
    }
}