<template>
    <div class="pl-navbar" ref="nav">
        <div class="allFunc email" v-if="emailConfig.url" @click="jumpEmail(emailConfig.url)">
            <i class="icon iconfont icon-email"></i>
            <span  class="title">{{emailConfig.title || '邮件'}}</span>
        </div >
        <div class="allFunc" v-if="showAllFuncBtn">
            <i class="icon iconfont icon-menu-uncheckx"></i>
            <!-- <span ref="allFuncBtn" class="title" @mouseenter="allFuncTriggerOpen" @mouseleave="allFuncTriggerClose">{{$t('hivuiMain_allFunction')}}</span> -->
            <span ref="allFuncBtn" class="title" 
                @mouseenter="handleNavMenuBtnMouseEnter"
                @mouseleave="handleNavMenuBtnMouseLeave"
            >
                {{$t('hivuiMain_allFunction')}}
            </span>
            <i class="icon iconfont icon-arrow-down"></i>
            <!-- <allFuncMenu ref="allFuncMenu" :triggerObj="allFuncBtnObj" v-add2Body></allFuncMenu> -->
            <!-- 导航菜单组件 -->
            <conciseMenu
                ref="navmenu"
                :targetElRect="allFuncBtnObj"
                @mouseenter.native="handleNavMenuMouseEnter"
                @mouseleave.native="handleNavMenuMouseLeave($event)"
                placement="bottom"
                v-add2Body
            ></conciseMenu>
         
        </div>
        <div v-if="!hideHistoryFuncList" class="history" ref="dom-latelyUse"
        :title="$t('hivuiMain_recentlyUsed')"
         @mouseenter="handleShowLatelyUse"  @mouseleave="handleHideLatelyUse">
            <i class="icon iconfont icon-time"></i>
            <span class="title">{{$t('hivuiMain_recentlyUsed')}}</span>
            <i class="icon iconfont icon-arrow-down"></i>
        </div>

        <ky-menus v-if="useKyMenuStyle"></ky-menus>
        <div v-else class="menusArea pl-cl" :class="isMenuArrBtn?'hasMenusBtn':''">
            <i v-show="isMenuArrBtn" ref="scrollRtBtn" class="arrRt iconfont icon-arrow-right-circle" @mousedown="handleRtMenuScroll" @mouseup="handleMenuScrollEnd" @mouseleave="handleMenuScrollEnd"></i>
            <i v-show="isMenuArrBtn" ref="scrollLtBtn"  class="arrLt iconfont icon-arrow-left-circle" @mousedown="handleLtMenuScroll" @mouseup="handleMenuScrollEnd" @mouseleave="handleMenuScrollEnd"></i>
            <div class="scroll  menu-scroll" ref="domSrcoll">
                <p-menu ref="pmenu" mode="horizontal" style="margin:0">
                    <template v-for="item in menus" >
                        <p-menu-item v-if="item.isShow&&!(item.children&&item.children.length)" :icon="item.iconClass" @click="handleOpenFunc(item)" :key="item.resId">{{item.name}}</p-menu-item>
                        <nav-sub-menus  :menuitem="item" v-if="item.isShow&&item.children&&item.children.length" :key="item.resId"></nav-sub-menus>
                    </template>
                </p-menu>
            </div>
        </div>
        

        <!-- <ul class="pl-menus pl-menus-horizontal">
            <li class="pl-menus-item" v-for="(item,index) in menus">
                <a class="">
                    <i class="icon"></i>
                    <span class="title">{{item.title}}</span>
                </a>
            </li>
        </ul> -->
        <ul class="pl-menus pl-menus-sub pl-menus-pop" @mouseenter="handleShowLatelyUse"  @mouseleave="handleHideLatelyUse"
        :style="latelyUseStyle" v-add2Body>
            <li class="pl-menus-item" v-for="(item,index) in navsLatelyUse" @click="handleOpenLatelyFunc(item)" :key="index">
                <a class="title"><span class="txt">{{item.name}}</span></a>
            </li>
            <li v-show="navsLatelyUse.length==0" class="pl-menus-tips">
                {{$t('hivuiMain_nodata')}}
            </li>
        </ul> 
    </div>
</template>
<script> 
import {PMenu,PSubMenu,PMenuItem} from '../menus'
import allFuncMenu from '../allFuncMenu'
import conciseMenu from '../conciseSidebar/concisemenu.vue'
import NavSubMenus from './menus'
import screenfull from 'screenfull'
import kyMenus from '../kyMenus'
export default {
    inject:['addTab'],
    components:{
        PMenu,PSubMenu,PMenuItem,NavSubMenus,allFuncMenu,kyMenus,conciseMenu
    },
    data(){
        return {
            menuScrollTimer:null,
            isMenuArrBtn:false,
            latelyUseStyle:{
                display:'none',
                left:0,
                top:0,
                maxHeight:'50%',
                overflow:'auto'
            },
            showAllFuncBtn:window.customSysCofig.isShowAllFunc===false?false:true,
            hideHistoryFuncList:window.customSysCofig.hideHistoryFuncList||false,
            useKyMenuStyle:window.customSysCofig.useKyMenuStyle||false,
            isShowAllFuncMenu:false,
            allFuncBtnObj:{},
            emailConfig:window.customSysCofig.emailConfig || {},

        };
    },
    computed:{
        menus(){
            return this.$store.getters.menus;
        },
        navsLatelyUse(){
            return this.$store.getters.navsLatelyUse;
        }
    },
    mounted(){
        this.resize();
        window.addEventListener('resize',this.resize);
        this.allFuncBtnObj=this.showAllFuncBtn&&this.$refs.allFuncBtn.getBoundingClientRect();
    },
    methods:{ 
        jumpEmail(url){
            window.open(url);
        },
        /**
         * 鼠标进入导航菜单处理
         */
        handleNavMenuMouseEnter() {
        // 鼠标进入菜单区域，取消隐藏
            if (this.$refs.navmenu) {
                this.$refs.navmenu.isMouseOverMenu = true;
            }
        },

        /**
         * 鼠标离开导航菜单处理
         */
        handleNavMenuMouseLeave(e) {
            // 鼠标离开菜单区域，检查是否移向.pl-menus-item元素
            if (e) {
                const relatedTarget = e.relatedTarget || e.toElement;
                if (
                relatedTarget &&
                relatedTarget.closest &&
                relatedTarget.closest(".pl-menus-item")
                ) {
                // 如果移向.pl-menus-item元素，保持菜单显示
                if (this.$refs.navmenu) {
                    this.$refs.navmenu.isMouseOverMenu = true;
                }
                return;
                }
            }

            if (this.$refs.navmenu) {
                this.$refs.navmenu.isMouseOverMenu = false;
                this.$refs.navmenu.hide();
            }
        },
        /**
         * 鼠标进入导航菜单按钮处理
         */
        handleNavMenuBtnMouseEnter() {
            if (this.$refs.navmenu) {
                    this.$refs.navmenu.show();
                }
            },

        /**
         * 鼠标离开导航菜单按钮处理
         */
        handleNavMenuBtnMouseLeave() {
            // 延迟隐藏导航菜单
            setTimeout(() => {
                if (this.$refs.navmenu && !this.$refs.navmenu.isMouseOverMenu) {
                this.$refs.navmenu.hide();
                }
            }, 100);
        },
        resize(){
            if (!screenfull.isFullscreen && this.$refs.pmenu &&  this.$refs.pmenu.$el) {
                setTimeout(() => {
                    let c = this.$refs.pmenu.$el.children,w=0;
                    // console.log('---c--', c)
                    for(let i=c.length-1;i>=0;i--){
                        // console.log('---c[i]', c[i].offsetWidth)
                        w+=c[i].offsetWidth;
                    }
                    // console.log('offsetWidth', w)
                    this.$refs.pmenu.$el.style.width=`${w+2}px`;
                    this.isMenuArrBtn = this.$refs.domSrcoll.offsetWidth<w;
                    this.scrollBtnStatus();
                }, 50);
                
            }
        },

        handleOpenLatelyFunc(item){      
            if(item.type== "link"){
                window.open(item.resUrl,item.name);
                return;
            }
            this.addTab({
                resUrl:item.resUrl,
                name:item.name,
                openType:item.openType,
            });//inject 提供的方法只能 传一个参数
        },     
        async handleOpenFunc(item){  
            if(item.type== "link"){
                window.open(item.resUrl,item.name);
                return;
            }else if(item.type=="sso"){
                item.ssoUrl=await this.$store.dispatch("user/openSSOFuncPage",{
                    serviceUrl:item.resUrl
                });
            }
            // this.addTab(item.resUrl,item.name,item.resId)//,item.resId
            this.addTab(item);//inject 提供的方法只能 传一个参数
        },
        handleShowLatelyUse(){
            this.$store.dispatch('app/getLatelyUse')//最近使用 
            let s = this.$refs["dom-latelyUse"];
            let rect = s.getBoundingClientRect();
            this.latelyUseStyle.display ='block';
            this.latelyUseStyle.left = rect.left+'px';
            this.latelyUseStyle.top = rect.top + rect.height  +'px';
            this.latelyUseStyle.opacity = '1';
        },
        handleHideLatelyUse(){
            this.latelyUseStyle.display ='none';
        },
        handleLtMenuScroll(){
            this.handleMenuScrollEnd();
            this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft-30;
            this.menuScrollTimer = setInterval(()=>{
                this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft-10;
                this.scrollBtnStatus();
            },50);
            this.scrollBtnStatus();
        },
        handleRtMenuScroll(){
            this.handleMenuScrollEnd();
            this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft+30;
            this.menuScrollTimer = setInterval(()=>{
                this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft+10;
                this.scrollBtnStatus();
            },50);
            this.scrollBtnStatus();
        },
        handleMenuScrollEnd(){
            clearInterval(this.menuScrollTimer);
        },
        scrollBtnStatus(){            
            if(!(this.$refs.scrollLtBtn||this.$refs.scrollRtBtn)){
                return;
            }
            if(this.$refs.domSrcoll.scrollLeft==0){
                this.$refs.scrollLtBtn.style.opacity=0.3;
            }else{                
                this.$refs.scrollLtBtn.style.opacity=1;
            }

            if(this.$refs.domSrcoll.scrollLeft>=this.$refs.pmenu.$el.offsetWidth-this.$refs.domSrcoll.offsetWidth-1){
                this.$refs.scrollRtBtn.style.opacity=0.3;
            }else{
                this.$refs.scrollRtBtn.style.opacity=1;
            }
        },
        //全部功能弹窗
        allFuncTrigger(){
            let me=this;
            me.isShowAllFuncMenu=me.isShowAllFuncMenu?false:true;
            if(me.isShowAllFuncMenu){
                me.$refs.allFuncMenu.showBox();
            }else{
                me.$refs.allFuncMenu.hideBox();
            }
        },
        allFuncTriggerOpen(){
            let me=this;
            me.$refs.allFuncMenu.showBox();
        },
        allFuncTriggerClose(){
            let me=this;
            me.$refs.allFuncMenu.hideBox();
        },
    }
}
</script>