<!--Created by 熊超超 on 2018/4/24.-->
<template>
  <div class="left" tabindex="1">
    <el-menu :default-active="activeTab"
         :collapse="!menuExpand"
         @select="selectMenu" class="h-100">
      <template v-for="menu in menus">
        <my-menu :menu="menu" :key="menu.id"></my-menu>
      </template>
    </el-menu>
  </div>
</template>

<script>
import MyMenu from './MyMenu'
import {mapState, mapGetters} from 'vuex'

export default {
  components: {MyMenu},
  data() {
    return {}
  },
  computed: {
    ...mapState(['menus', 'activeTab', 'menuExpand']),
    ...mapGetters(['flatMenu']),
  },
  methods: {
    selectMenu(id, idPath) {
      console.log(id, idPath)
      const menu = this.flatMenu.find(m => m.id === id)
      if (menu && menu.path !== this.$route.fullPath) {
        this.$router.push(menu.path)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
  @import "../../css/vars.scss";
  .left{
    height: calc(100vh - 52px - 10px);
    overflow: auto;
  }
  .left:focus{
    outline: 0;
  }

  .left /deep/ {
    .el-menu:not(.el-menu--collapse) {
      width: 200px;
    }
  }

</style>
