<template>
    <div :class="['pl-portal-panel',isHover?'pl-portal-panelHover':'']" 
        @mouseenter="isHover=true" 
        @mouseleave="isHover=false" 
        :style="panelStyle"
    >
        <p-tabs ref="cmp-tabs" v-model="defTabKey"
        :hasMoreMenu="false"
        :hasContextMenu="false">
            <p-tabpanel 
                v-for="(item,index) in tabs" :key="item.id"
                :close="false" 
                :title="item.name" 
                :name="item.resId"                 
                :url="hasPower(item.resUrl)?rootUrl+item.resUrl:''"
                :itemData="item"
            >      
                <div class="pl-noPower" v-if="!hasPower(item.resUrl)">
                    <i class="iconfont icon-quanxian"></i>
                    <div class="txt">暂无功能权限!</div>
                </div>
            </p-tabpanel>
        </p-tabs> 
        
    </div>
</template>
<script>

import {PTabs,PTabpanel} from '@main/components/tabpanel'
import {baseURL,codeProjectName} from '@main/config'
export default {
     components:{
        PTabs,PTabpanel
    },
    props:{
        tabList:{            
            type:Array,
            default:[]
        },
        height:{
            type:[String, Number],
            require:true
        }
    },
    data(){
        let tabs = this.tabList;
        let l = tabs.length;
        return {
            defTabKey:l>0?tabs[0].resId:'',
            isHover:false,
            curIndex:0,
            tabs:tabs,
            rootUrl:baseURL+codeProjectName
        }
    },
    computed:{
        panelStyle(){
            let h = this.height>100?this.height:100;
            let stl = {
                // height:(h-58-12)+'px',//总的-头部-边距
                height:h+'px',
                position:'relative'
            }
            return stl;
        }
    },
    methods:{
        hasPower(url){
            let powers = this.$store.getters.powerList;
            for(let i=powers.length-1;i>=0;i--){
                if(url.indexOf(powers[i].resUrl)>-1){
                    return true
                }
            }
            return false;
        },
        doRender(){
            this.$refs['cmp-tabs'].resize(); 
        }
    }
}
</script>
<style scoped>
</style>