<template>
  <div class="has-logo">
    <z-menu
      v-model:openKeys="openKeys"
      v-model:selectedKeys="selectedKeys"
      mode="inline"
      :inline-collapsed="isCollapse"
      @openChange="openChange"
    >
      <template v-for="route in routes">
        <sidebar-item
          v-if="route.hidden === false"
          :key="route.path"
          :item="route"
          :base-path="route.path"
        />
      </template>
    </z-menu>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import SidebarItem from './SidebarItem'

export default {
  components: { SidebarItem },
  data() {
    return {
      openKeys: [],
      selectedKeys: [this.$route.path]
    }
  },
  computed: {
    ...mapGetters(['sidebar', 'routes']),
    activeMenu() {
      const route = this.$route
      const { meta, path } = route
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path
    },
    isCollapse() {
      return !this.sidebar.opened
    }
  },
  watch: {
    // 监听菜单选中  展开
    $route(val) {
      this.selectedKeys = [val.path]
      // const { matched } = val
      // this.openKeys = [matched[0].path]
      // console.log(val, 'val', this.$route.path)
    }
  },
  created() {
    const { matched } = this.$route
    this.openKeys = [matched[0].path]
  },
  methods: {
    openChange(openKeys) {
      // if (openKeys.length > 1) {
      //   this.openKeys = [openKeys[openKeys.length - 1]]
      //   return false
      // }
      this.openKeys = openKeys
    }
  }
}
</script>
