<template>
  <div class="layout-nav">
    <div class="logo-wrap">
      <img :src="CONFIG.logo_small" class="small" v-if="collapsed">
      <img :src="CONFIG.logo_big" class="big" v-else>
    </div>
    <div class="nav-wrap" v-if="left_menu.list.length">
      <Menu :active-name="left_menu.active_name" :open-names="left_menu.open_names" @on-select="menuChange" accordion ref="sideMenu" theme="dark" v-show="!collapsed" width="auto">
        <template v-for="(item,index) in left_menu.list">
          <side-menu-item :menu="item" v-if="item.menus && item.menus.length"></side-menu-item>

          <menuItem :name="item.id" v-else>
            <Icon :type="item.icon" v-if="item.icon"/>
            <span>{{item.title}}</span>
          </menuItem>
        </template>
      </Menu>

      <div class="menu-collapsed" v-show="collapsed">
        <template v-for="(item,index) in left_menu.list">
          <collapsed-menu :level="1" :menu="item"></collapsed-menu>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
//  此处组件不能用异步加载（异步加载导致刷新页面菜单无法高亮）
import sideMenuItem from "views/layout/menu/side_menu_item";
import collapsedMenu from "views/layout/menu/collapsed_menu";

export default {
  components: {
    sideMenuItem,
    collapsedMenu
  },
  props: {
    collapsed: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    ["left_menu.open_names"]() {
      if (this.$refs.sideMenu && this.left_menu.list.length) {
        this.$nextTick(() => {
          this.$refs.sideMenu.updateOpened();
          this.$refs.sideMenu.updateActiveName();
        });
      }
    }
  },
  methods: {
    /**
     * [menuChange 菜单点击事件]
     * @param  {[type]} mid [description]
     * @return {[type]}     [description]
     */
    menuChange(mid) {
      const menu = this.permissions_object[mid];
      switch (menu.open) {
        case 0: // iframe方式
          this.$router.push({ path: '/iframe', query: { mid: menu.id } });
          break;
        case 1: // 打开新窗口
          window.open(menu.path);
          break;
        case 2: // 弹出窗口
          const top = (window.outerHeight - menu.height) / 2;
          const left = (window.outerWidth - menu.width) / 2;
          window.open(
            menu.path,
            "",
            `width=${menu.width},height=${menu.height},top=${top},left=${left}`
          );
          break;
        case 3: // vue组件
          this.$router.push({ path: menu.path, query: { mid: menu.id } });
          break;
      }
    }
  }
};
</script>