<template>
    <span>
        <div v-for="(menu,idx) in data" :key="idx" :class="getClass()">
            <el-submenu v-if="!menu.is_leaf" :key="menu.id" :index="preidx+'-'+idx" >
                <template slot="title">
                    <i v-if="menu.icon" :class="'fa fa-'+menu.icon" style="font-size:20px"></i>
                    <span class="ml10">{{getMenuName(menu)}}</span>
                </template>
                <exMenuItem v-if="menu.children.length>0" :data="menu.children" :level="nextlv" :preidx="preidx+'-'+idx"></exMenuItem>
            </el-submenu>
            <el-menu-item v-else-if="!menu.noShowOnTree" :index="preidx+'-'+idx" :key="menu.id" @click="addTab(menu.com_type,getMenuName(menu),null,menu.urlparam)" :class="getClass()">
                <el-tooltip placement="right" effect="light" :open-delay="2000">
                    <div slot="content">code: {{menu.com_type}}<br/>name: {{getMenuName(menu)}}<br/>path: {{menu.fullPath}}<br/> url: {{menu.url}}<br/> param: {{JSON.stringify(menu.urlparam)}}</div>
                     <span class=""><i v-if="menu.icon" :class="'fa fa-'+menu.icon" style="font-size:20px;margin-right:10px"></i>{{getMenuName(menu)}}</span>
                </el-tooltip>
            </el-menu-item>
        </div>
    </span>
</template>

<script>

export default {
    props:{
        data:{
            type : Array,
            default(){
                return []
            }
        },
        level:{
            type : Number,
            default(){
                return 1;
            }
        },
        preidx:{
            type : String,
            default(){
                return "";
            }
        },
    },
    data() {
        return {
            nextlv : this.level+1,

        }
    },
    inject: ['addTab'],

    mounted() {
    },

    methods: {
        getClass(){
            if(!this.level || this.level==1){
                return "first-menu-background"
            }else if( this.level==2) {
                return "second-menu-background"
            }else{
                return "third-menu-background"
            }
        },
        getMenuName(menu){
            if(this.$store && this.$store.state.lang){
                return menu["name"+this.$store.state.lang] || menu.name;
            }else{
                return menu.name;
            }
        }
    }
}
</script>

<style lang="less" scoped>

</style>