<!--
 * @Descripttion:
 * @Version: 1.0
 * @Author: +C
 * @Date: 2022-02-24 17:27:13
 * @LastEditors: wufz
 * @LastEditTime: 2023-01-12 14:22:39
-->

<template lang="html">
    <a-menu v-model="currentKeys" class="menuList" theme="dark" mode="inline" :open-keys="openKeys">
      <a-menu-item key="/readMe">
        <router-link to="/readMe">
        <a-icon type="pie-chart" />
        <span>组件库说明</span>
        </router-link>
      </a-menu-item>
      <a-menu-item key="/install">
        <router-link to="/install">
        <a-icon type="pie-chart" />
        <span>安装</span>
        </router-link>
      </a-menu-item>
      <a-menu-item key="/quikeStart">
        <router-link to="/quikeStart">
        <a-icon type="pie-chart" />
        <span>快速上手</span>
        </router-link>
      </a-menu-item>
        <a-sub-menu v-for="item in list" :key="item.fold" @titleClick="openChange">
          <span slot="title"><a-icon type="appstore" /><span>{{ item.name }}</span></span>
          <a-menu-item v-for="nav in item.list" :key="'/'+item.fold+'/'+nav.comName">
            <router-link :to="'/'+item.fold+'/'+nav.comName">
              {{ nav.comName+' '+nav.name }}
            </router-link>
          </a-menu-item>
         </a-sub-menu>
      </a-menu>
</template>

<script>
import { navList } from "../navList.json"
export default {
  data() {
    return {
      currentKeys: ['/readMe'],
      openKeys: [],
      list: navList
    }
  },
  watch: {
    $route(to, from) {
      this.currentKeys = [to.path]
      if (to.path.indexOf('/') > -1) {
        let arr = to.path.split('/')
        if (arr.length > 2) {
          let index = this.openKeys.indexOf(arr[1])
          if (index == -1) {
            this.openKeys.push(arr[1])
          }
        }
      }
    }
  },
  created() { },
  methods: {
    openChange(params) {
      let index = this.openKeys.indexOf(params.key)
      if (index > -1) {
        this.openKeys.splice(index, 1)
      } else {
        this.openKeys.push(params.key)
      }
    }
  }
}
</script>

<style scoped lang="css">
.menuList >>> .ant-menu-item > a {
  display: inline;
}
</style>
