<template>
    <div >
        <el-menu
         default-active="2"
         class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="transparent"
        text-color="#fff"
        active-text-color="#ffd04b"
        :router="true"
        >
             <el-submenu v-for="(item, i) in menuInfoList" :index="item.index + ''" :key="i">
                <template slot="title"> <font class="menuFont"><i :class="item.icon"></i>{{item.name}}</font></template>
                    <el-menu-item v-for="(subInfo, subI) in item.subList" :index="i+''+subI" :key="subI" :route="subInfo.path">
                        <i class="el-icon-right"></i>{{subInfo.subName}}
                    </el-menu-item>
            </el-submenu>
        </el-menu>
    </div>
    
</template>

<script type="text/javascript">
import getThreeEnum from './../server/menu.js'
export default {
    data() {
        return {
            menuInfoList:[]
        };
    },
    created() {
        this.menuInfoList = getThreeEnum();
        
    },

    methods: {
        changeEnum (info) {
          sessionStorage.setItem("defaultPagesInfo", JSON.stringify(info));
          this.$emit('checkMenu', {index:info.index});
        },
        handleOpen (key, index) {
        },
        handleClose (key, index) {
        }
    }
};
</script>
<style type="text/css">
/* .menuFont {
    font-size: 16px;
}
.menuSubFont {
    font-size: 12px;
}
.el-menu {
    background:transparent
}

.el-menu-item.is-active{
border-left: solid 3px #26a1fa;
background: red !important;
}
.el-menu {
    background:transparent
}
.el-menu:active,.el-menu:focus {
    background: rgb(255 255 255 / 15%);
} */

.el-menu-item.is-active {
    background:transparent !important;
}
.el-submenu__title:focus,.el-submenu__title:hover {
    /* background:transparent !important; */
    background:rgb(255 255 255 / 15%) !important;
}
.el-menu-item{
    border: 1px solid rgb(255 255 255 / 12%);
}
.el-menu-item:active,.el-menu-item:focus,.el-menu-item:hover {
    /* background:transparent !important; */
    background:rgb(255 255 255 / 15%) !important;
}
.el-submenu .el-menu-item {
    min-width: 190px;
}
</style>

