<template>
  <div class="aside">
    <el-scrollbar v-show="isCollapse && !$route.query.showMenu" wrap-class="scrollbar-wrapper">
      <el-menu
        :default-active="activeMenu"
        :collapse="false"
        background-color="inherit"
        :text-color="variables.menuText"
        :unique-opened="false"
        :active-text-color="variables.menuActiveText"
        :collapse-transition="false"
        mode="vertical"
      >
        <template v-for="(item, topMenuIndex) in menus">
          <sidebar-item
            :key="topMenuIndex"
            :item="item"
            :index="topMenuIndex + ''"
          />
        </template>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
// import Logo from './Logo'
import SidebarItem from './SidebarItem'
import variables from '@/styles/variables.scss'
import _cloneDeep from 'lodash.clonedeep'

export default {
  name: 'Sidebar',
  components: { SidebarItem },
  data() {
    return {}
  },
  computed: {
    ...mapGetters(['sidebar', 'routes', 'menus']),
    // routes() {
    //   return this.$router.options.routes
    // },
    activeMenu() {
      const route = this.$route
      const { meta, path } = route
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path
    },
    variables() {
      return variables
    },
    isCollapse() {
      return this.sidebar.opened
    }
  },
  watch: {
    // $route: {
    //   handler: function(val) {
    //   },
    //   immediate: true
    // }
  },
  created() {
    // if (this.menus.length === 0) {
    //   let menus = localStorage.getItem('menu')
    //   menus = JSON.parse(menus)
    //   if (menus) {
    //     this.$store.dispatch('menu/updateMenu', menus)
    //   }
    // }
  },
  mounted() {},
  methods: {
    sortMenuFun(value) {
      return _cloneDeep(value).sort((a, b) => {
        return a.sort - b.sort
      })
    }
  }
}
</script>

<style lang="scss">
@import "../../../styles/variables";

.aside {
  width: $asideBarWidth !important;
  overflow: hidden;
  height: 100%;
  background-color: #FFFFFF;
  .el-scrollbar__view {
    border: 1px solid #D3DBE1;
    box-sizing: border-box;
    overflow: auto;
    height: calc(100% - 76px)!important;
  }

  /deep/ .el-menu-item {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 !important;
  }

  /deep/ .el-menu-item:hover {
    background-color: rgba(0, 0, 0, 0.12);
  }

  /deep/ .el-menu-item:focus {
    background-color: transparent !important;

    .icon {
      background-color: rgba(0, 0, 0, 0.12);
    }
  }

  .icon {
    width: 30px;
    height: 30px;
    padding: 8px;
    border-radius: 2px;
  }
  .user-m-icon {
    font-size: 18px !important;
    // margin: 0 !important;
  }
  .menu-m-icon {
    width: 18px;
    // height: 24px;
  }
}
</style>