<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>
          </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>
