<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="menu-refresh">
    <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>
      <template v-for="(item,i) in data.list">
        <el-menu-item
          v-if="!item.hidden" class="item"
          :index="item.path" :key="i">{{item.value}}
        </el-menu-item>
      </template>
    </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 lang="less">
  @import "../../util/public";

  .menu-refresh {
    &:not(.el-menu--collapse) {
      width: 200px;
    }

    &.el-menu {
      overflow-x: hidden;
      overflow-y: auto;
      overflow-y: scroll;
      box-sizing: border-box;
      height: 100%;
      background: @bg-b;
      color: white;

      &::-webkit-scrollbar {
        background-color: #333333; /* or add it to the track */

        &:hover {
          &::-webkit-scrollbar-thumb {
            background-color: #999;
          }
        }
      }

      &::-webkit-scrollbar-thumb {
        background-clip: padding-box;
        border: solid 3px transparent;
        border-radius: 6px;
        background-color: #C1C1C1;
      }

      .menu-btn {
        width: 100%;
        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>