<template>
  <div class="side2">
    <slot></slot>
    <Menu v-if="menus" class="side-menu" ref="menu" :active-name="$route.path.split('/')[1]" width="auto">
      <template v-for="(item,index) in menus.children">
        <template>
          <template v-if="!isCollapsed">
            <MenuItem :name="item.menu_url.split('/')[1]" :to="item.menu_url" v-if="item.is_show_menu == 'YES'">
            <Icon :custom="item.menu_icon" class="v-2 mr-15" size="22"></Icon>
            <span class="f-16">{{item.menu_name}}</span>
            </MenuItem>
          </template>
          <template v-else>
            <Tooltip :content="item.menu_name" placement="right" v-if="item.is_show_menu == 'YES'">
              <MenuItem :name="item.menu_url.split('/')[1]" :to="item.menu_url">
              <Icon :custom="item.menu_icon" class="mr-0" size="22"></Icon>
              </MenuItem>
            </Tooltip>
          </template>
        </template>
      </template>
    </Menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //isCollapsed: false,
      menus: []
    };
  },
  props: {
    isCollapsed: Boolean
  },
  watch: {
    isCollapsed() {
      this.$nextTick(() => {
        this.$refs.menu.updateActiveName();
      });
    }
  },
  created() {
    if (system.menuCodes.length == 1) {
      this.menus = system.menus[0];
    } else {
      let menus = system.menus.filter((item, index) => {
        return item.menu_code == system.menuCodes[1];
      });
      this.menus = menus[0];
    }
  },
  methods: {
    handleSelect(name) {
      // console.log(name);
    },
    handleOpen(name) {
      // console.log(name);
    },
    getActive() {
      //console.log(this.$route.path.split('/'))
      // return this.$route.path.split("/")[1];
      return false;
    },
    handleCollapsedChange() {
      this.$refs.sider.toggleCollapse();
    }
  }
};
</script>
<style scoped lang="less">
@import "~@/assets/less/variable";
.side2 {
  padding-top: 15px;
}
.ivu-menu-light {
  background: #f0f1f2;
}
.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;
  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>

