<template>
  <div style="width: 200px">
    <a-menu
      mode="inline"
      theme="dark"
      v-model="current"
      @openChange="onOpenChange"
      :inlineCollapsed="collapsed"
      :openKeys="openKeys"
      @click="handleClick"
    >

      <template v-for="menu in list">
        <template v-if="menu.children && menu.children.length > 0">
            <a-sub-menu :key="menu.name" class="mus">
              <span slot="title"><a-icon :type="menu.meta.menuIcon" /><span>{{menu.meta.title}}</span></span>
              <a-menu-item class="mus" v-for="(item) in menu.children" :key="item.name">
                <a-icon type="search" />
                <span>{{item.meta.title}}</span>
              </a-menu-item>
            </a-sub-menu>

        </template >

        <template v-else>
            <a-menu-item class="mus" :key="menu.name">
              <a-icon :type="menu.meta.menuIcon" />
              <span>{{menu.meta.title}}</span>
            </a-menu-item>

        </template >

      </template >


    </a-menu>
  </div>
</template>

<script>
import common from '@/util/common'
import {menus} from '@/router/routes'

export default {
  name: 'SideMenu',
  props: {
    menuMode:{
      type: String,
      required: true,
      validator (value) {
        return common.oneOf(value, ['vertical','inline' ])
      }
    }
  },
  data() {
    return {
      collapsed: false,
      list:[],
      light:[],
      current:[],
      rootSubmenuKeys: [],
      openKeys: [],
    }
  },
  methods: {
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1)
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : []
      }
    },
    toggleCollapsed() {
      this.collapsed = !this.collapsed
    },
    jump(name){
      if (this.$route.name == name) {
        return
      } else {
        this.$router.push({name})
      }
    },
    handleClick(e) { 
      this.current = [e.key]
      this.jump(e.key)
    },
  },
  mounted(){
    this.list = menus
    menus.forEach(col=>{
      this.rootSubmenuKeys.push(col.name)
    })
  },
  watch:{
    $route(to){ 
      menus.forEach(ele => {
        if (ele.name == to.name) {
          this.current = [to.name]
        }
      })
    }
  }
}
</script>

<style scoped>
  .mus{
    text-align: left;
  }
</style>
