<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.name)">
                <a-icon :type="child.meta.menuIcon?child.meta.menuIcon:'bars'" />
                {{child.meta.title}}
              </a-menu-item> -->
              <template v-if="child.meta.title == '系统信息配置' ||child.meta.title == '拓展信息管理' || child.meta.title == '日志管理'">
                <a-menu-item v-if="$store.state.hasAllRight" :key="child.key" @click="onclick(child.name)">
                  <a-icon :type="child.meta.menuIcon?child.meta.menuIcon:'bars'" />
                  {{child.meta.title}}
                </a-menu-item>
              </template>

              <a-menu-item v-else :key="child.key" @click="onclick(child.name)">
                <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.name)">
            <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: [],
      isAllPerm: false
    }
  }, 
  watch: {
    $route(cur) {
      const notInSideMenus = ['home', 'info', 'person', 'noauth', 'login', 'networkErr', 'demo']
      if (notInSideMenus.indexOf(cur.name) >= 0) {
        this.openKeys = []
        this.selectedKeys = []
      }
    }, 
  },
  mounted(){ 
    // this.$ajax.get({
    //   url: this.$api.GET_USER_INFO,
    // }).then(res => {
    //   if(res.code == 200) {
    //     this.isAllPerm = res.data.content.isAllPerm
    //     console.log(this.isAllPerm)
    //     let menus=[]
    //     let tempmenu = []
    //     let isLoadExtendMenu = this.$cookie.get('customKeyEnable')
    //     for(let i=0;i<routes.length;i++){
    //       if(!!routes[i].children){
    //         for(let j=0;j<routes[i].children.length;j++){
    //           if(!!this.isAllPerm) { // 超管访问
    //             if(!!routes[i].children[j].meta.menuIcon && routes[i].children[j].name == 'systemManagement' && isLoadExtendMenu == 'false'){
    //               let target = routes[i].children[j].children
    //               if(target.length > 0) {
    //                 for(let k = 0 ; k < target.length; k++) {
    //                   if(target[k].name == 'tbls') {
    //                     if(isLoadExtendMenu == 'true') {
    //                       tempmenu.push(target[k])
    //                     }
    //                   } else {
    //                     tempmenu.push(target[k])
    //                   }
    //                 }
    //               }
    //               let lusso = routes[i].children[j]
    //               lusso.children = []
    //               lusso.children = tempmenu
    //               menus.push(lusso)
    //             } else if (!!routes[i].children[j].meta.menuIcon) {
    //               menus.push(routes[i].children[j])
    //             }
            
    //           } else if(!this.isAllPerm) { // 非超管访问
    //             if(routes[i].children[j].meta.isAllPerm == false) {
    //               if(!!routes[i].children[j].meta.menuIcon && routes[i].children[j].name == 'systemManagement' && isLoadExtendMenu == 'false'){
    //                 let target = routes[i].children[j].children
    //                 if(target.length > 0) {
    //                   for(let k = 0 ; k < target.length; k++) {
    //                     if(target[k].name == 'tbls') {
    //                       if(isLoadExtendMenu == 'true') {
    //                         tempmenu.push(target[k])
    //                       }
    //                     } else {
    //                       tempmenu.push(target[k])
    //                     }
    //                   }
    //                 }
    //                 let lusso = routes[i].children[j]
    //                 lusso.children = []
    //                 lusso.children = tempmenu
    //                 menus.push(lusso)
    //               } else if (!!routes[i].children[j].meta.menuIcon) {
    //                 menus.push(routes[i].children[j])
    //               }
    //             }
    //           }
    //         }
    //       }
    //     }
    //     this.menus=menus 
    //   }
    // })
  },
  computed: {
    menus(){
      // console.log(this.$store.state.menuList)
      return this.$store.state.menuList
    }
  },
  methods: {
    // 点击菜单，收起其他展开的菜单
    onOpenChange(keys) {
      if (keys.length >= 2) {
        this.openKeys = keys.slice(1)
      } else {
        this.openKeys = keys
      }
    },
    onclick(key) { 
      this.$router.push({
        name: 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>
