<!-- 侧边栏双排菜单一级 license by http://eleadmin.com -->
<template>
  <div class="ele-admin-sidebar-nav ele-scrollbar-hide">
    <slot name="top"/>
    <div class="ele-admin-sidebar-nav-menu ele-scrollbar-hide">
      <a-menu
        v-if="useDeep"
        mode="inline"
        :theme="theme"
        :selected-keys="active"
        :inline-indent="inlineIndent"
        :inline-collapsed="isCollapse">
        <template v-for="m in data">
          <ele-pro-sidebar-item v-if="!m.meta.hide" :key="m.path" :item="m" :first-pop-class="firstPopClass"/>
        </template>
      </a-menu>
      <ele-pro-sidebar-menus
        v-else
        :data="data"
        mode="inline"
        :theme="theme"
        :selected-keys="active"
        :inline-indent="inlineIndent"
        :inline-collapsed="isCollapse"
        :first-pop-class="firstPopClass"/>
    </div>
    <div v-if="showNavCollapse" class="ele-admin-sidebar-nav-tool-item" @click="toggleCollapse">
      <menu-unfold-outlined v-if="collapse"/>
      <menu-fold-outlined v-else/>
    </div>
    <slot name="bottom"/>
  </div>
</template>

<script>
import {MenuFoldOutlined, MenuUnfoldOutlined} from '@ant-design/icons-vue';
import EleProSidebarItem from '../../ele-pro-sidebar-item';
import EleProSidebarMenus from '../../ele-pro-sidebar-menus';

export default {
  name: 'EleProSidebarNav',
  components: {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    EleProSidebarItem,
    EleProSidebarMenus
  },
  emits: ['toggle-collapse'],
  props: {
    // 导航数据
    data: Array,
    // 导航选中
    active: Array,
    // 主题, light | dark
    theme: String,
    // 导航是否折叠
    collapse: Boolean,
    // 菜单是否折叠
    menuCollapse: Boolean,
    // 子级缩进
    inlineIndent: Number,
    // 是否显示折叠按钮
    showNavCollapse: Boolean,
    // 是否使用递归渲染菜单item
    useDeep: Boolean
  },
  data() {
    return {
      // 一级pop菜单class
      firstPopClass: 'ele-admin-sidebar-nav-menu-pop'
    };
  },
  computed: {
    // 是否折叠
    isCollapse() {
      return this.collapse || this.menuCollapse;
    }
  },
  methods: {
    /* 折叠展开侧栏 */
    toggleCollapse() {
      this.$emit('toggle-collapse');
    }
  }
}
</script>
