<template>
  <el-menu
    :default-active="$route.path"
    :router="true"
    :unique-opened="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
    };
  },
  mounted() {
    console.log(this.menuList);
  },
  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>
