<script>
import vueContextMenu from "@main/components/contextMenu";
 function noop() {}
export default {
    props:{
        panels:Array,
        onTabClick: {
        type: Function,
        default: noop
      },
      onTabRemove: {
        type: Function,
        default: noop
      },
      onTabCloseAll: {
        type: Function,
        default: noop
      }
    },
    data(){
        return {
            curContextMenuName:'',//右击tab
            curContextMenuIndex:null
        }
    },
    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+2)+'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;
            }

        },
        onClose(panel,e){
            e.stopPropagation();
            if(panel.$listeners&&panel.$listeners.onBeforeClose(panel,e)===false){
                return;
            }
            this.$emit('onTabClose',panel.name);
        },
        onActive(panel,evt){
            panel.$listeners&&panel.$listeners.onSelected(panel,evt)
            this.$emit('onTabChange',panel.name);
        },
        onContextMenu(panel,index,e) {
            e.preventDefault()
            this.curContextMenuName = panel.name;
            this.curContextMenuIndex = index,
            this.$refs['cmp-tabContextMenu'].open(e);
        },
        handleContextMenuRefresh() {
            let panel = this.panels[this.curContextMenuIndex];
            if(panel){
                let ifm = panel.$el.querySelector('iframe');
                if (ifm&&ifm.src&&ifm.src.indexOf('about:blank')==-1) {
                    ifm.contentWindow.window.location.reload();
                }
            }
        },
        handleContextMenuClose(e) {
            // e.stopPropagation();
            let panel = this.panels[this.curContextMenuIndex];
            if(panel.$listeners&&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);
        }
    },
    render(h){
        let {
            onClose,
            onActive,
            onContextMenu
        }=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>
            )  
            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">{panel.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,
                    },
                    {
                        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,
                    },
                ]
            }
        };
        return (
            <div>
                <ul>{tabs}</ul>       
                <vueContextMenu ref="cmp-tabContextMenu" {...ctxMenuProp}></vueContextMenu>
            </div>    
        )
    },
    updated(){
        this.$parent.resize();
    }
}
</script>