<template>
  <div class="side-menu-wrapper">
    <slot></slot>
    <Menu v-if="menus" class="side-menu" ref="menu" :active-name="getActive()" width="auto">
      <template v-for="(item,index) in menus">
        <template>
          <a :href="item.menu_url" style="color:#333">
            <MenuItem :name="item.menu_url.split('/')[1]" v-if="item.is_show_menu == 'YES'">
            <Icon :custom="item.menu_icon" class="v-2 mr-15 iconfont" size="22"></Icon>
            <span class="f-16">{{item.menu_name}}</span>
            </MenuItem>
          </a>
        </template>
      </template>
    </Menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      system: {},
      menus: []
    };
  },
  created() {
    utils.refreshMenuInfo(["PC_OPEN"], menus => {
      this.menus = menus;
    });
  },
  methods: {
    getActive() {
      return this.$route.path.split("/")[1];
    }
  }
};
</script>
<style scoped lang="less">
@import "~@/assets/less/variable";
.side-menu-wrapper {
  border-top: 1px solid #f0f0f0;
}
.side-menu {
  height: calc(100vh - 90px);
  overflow-y: auto;
  position: static;
}
.side-menu::-webkit-scrollbar,
.side-menu::-moz-scrollbar,
.side-menu::-ms-scrollbar {
  width: 0;
  height: 100%;
}
.side-menu::-webkit-scrollbar-thumb,
.side-menu::-moz-scrollbar-thumb,
.side-menu::-ms-scrollbar-thumb {
  border-radius: 50px;
  //-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #e5e5e5;
}
.ivu-dropdown {
  width: 100%;
}
.dropmenu-title {
  display: inline-block;
  line-height: 60px;
  height: 60px;
  width: 100%;
  text-align: center;
  &.active {
    background: @primary-color;
    color: #fff;
  }
}
</style>

