<template>
  <a-menu
    class="layout-side-menu"
    mode="inline"
    theme="dark"
    :openKeys="openKeys"
    v-model="selectedKeys"
    @openChange="onOpenChange"
  >
    <template v-if="menus && menus.length > 0">
      <template v-for="menu in menus">
        <template v-if="!!menu.children">
          <a-sub-menu :key="menu.name">
            <span slot="title">
              <a-icon :type="menu.meta.menuIcon?menu.meta.menuIcon:'bars'" />
              <span>{{menu.meta.title}}</span>
            </span>
            <template v-for="child in menu.children">
              <a-menu-item :key="child.key" @click="onclick(child.path)">
                <a-icon :type="child.meta.menuIcon?child.meta.menuIcon:'bars'" />
                {{child.meta.title}}
              </a-menu-item>
            </template>
          </a-sub-menu> 
        </template>
        <template v-else> 
          <a-menu-item  :key="menu.name" @click="onclick(menu.path)">
            <a-icon :type="menu.meta.menuIcon?menu.meta.menuIcon:'bars'" />
            {{menu.meta.title}}
          </a-menu-item>
        </template>
      </template>
    </template>
  </a-menu>
</template>

<script>
import {routes} from '@/router/routes'
export default {
  name: 'SideMenu',
  data() {
    return {
      openKeys: [],
      selectedKeys: [],
      menus: [],
    }
  }, 
  watch: {
    $route(cur) {
      const notInSideMenus = ['home', 'info', 'person', 'noauth', 'login', 'networkErr', 'demo']
      if (notInSideMenus.indexOf(cur.name) >= 0) {
        this.openKeys = []
        this.selectedKeys = []
      }
    }, 
  },
  mounted(){ 
    let menus=[]
    for(let i=0;i<routes.length;i++){
      if(!!routes[i].children){
        for(let j=0;j<routes[i].children.length;j++){
          if(!!routes[i].children[j].meta.menuIcon){
            menus.push(routes[i].children[j])
            this.menus=menus 
          }
        }
      }
    }
  },
  methods: {
    // 点击菜单，收起其他展开的菜单
    onOpenChange(keys) {
      if (keys.length >= 2) {
        this.openKeys = keys.slice(1)
      } else {
        this.openKeys = keys
      }
    },
    onclick(key) { 
      this.$router.push({
        path: key,
      })
    }
  },
}
</script>

<style>
  .layout-side-menu {
    height: 90%;
    overflow-y: auto;
    scrollbar-arrow-color: #00284e; /*三角箭头的颜色*/
    scrollbar-face-color: #00284e; /*立体滚动条的颜色（包括箭头部分的背景色）*/
    scrollbar-3dlight-color: #00284e; /*立体滚动条亮边的颜色*/
    scrollbar-highlight-color: #00284e; /*滚动条的高亮颜色（左阴影？）*/
    scrollbar-shadow-color: #00284e; /*立体滚动条阴影的颜色*/
    scrollbar-darkshadow-color: #00284e; /*立体滚动条外阴影的颜色*/
    scrollbar-track-color: #000c17; /*立体滚动条背景颜色*/
    scrollbar-base-color:#00284e; /*滚动条的基色*/
  }
  /* 设置滚动条的样式 */
  .layout-side-menu::-webkit-scrollbar {
    width: 10px;
  }
  /* 滚动条滑块 */
  .layout-side-menu::-webkit-scrollbar-thumb {
    background:#00284e;
  }
</style>
