<template>
  <el-menu
    :default-active="$route.path"
    :router="true"
    text-color="#fff"
    background-color="#333333"
    active-text-color="#ffd04b"
    :collapse="menuType"
    class="el-menu-vertical-demo">
    <div class="menu-btn" @click="menuType = !menuType">
      <i v-if="!menuType" class="iconfont icon-shouqi"></i>
      <i v-if="menuType"
         class="iconfont icon-zhankai"></i>
    </div>
    <el-submenu v-for="(data,index) in menuList" :index="data.value" :key="index">
      <template slot="title">
        <i :class="'iconfont menu-icon '+data.icon"></i>
        <span>{{data.value}}</span>
      </template>
      <el-menu-item v-for="(item,i) in data.list" :index="item.path" :key="i" class="item">{{item.value}}</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>

  export default {
    name: "leftMenu",
    data(){
      return {
        menuList:this.$store.state.menuList,
        menuType:false
      }
    },
    methods:{
      changeMenuType:function(){
        this.$store.state.menuType = !this.$store.state.menuType
      },
      toPath:function (data) {
        this.$router.push({name:data.routerName})
        if(this.$store.state.openedTab.indexOf(data) < 0){
          this.$store.state.openedTab.push(data);
        }
      }
    },
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
  }
  .el-menu{
    background: @bg-b;
    color: white;
    overflow: auto;
    height: 100%;
    .menu-btn{
      height: 35px;
      background: @bg-b-s;
      line-height: 35px;
      /*text-align: center;*/
      i{
        font-size: 26px;
        float: right;
        padding: 0 15px;
      }
    }
    .el-submenu{
      .menu-icon{
        color: white;
        font-size: 18px;
        position: relative;
        right: 5px;
      }
      .el-menu-item{
        background: @main-font-color;
      }
      .template{
        color: black;
      }
    }
  }
</style>
