<template>
  <div class="navigation-menu" >
    <div>
      <el-button
        style="width: 100%"
        size="small"
        type="text"
        v-if="is_collapse"
        @click="switchFold"
      >展开</el-button>
      <el-button
        style="width: 100%"
        size="small"
        type="text"
        v-if="!is_collapse"
        @click="switchFold"
      >收起</el-button>
    </div>
    <el-menu
      width="180px"
      :default-active="menu_current"
      :collapse="is_collapse"
      :router="true"
      @open="handleOpen"
      @close="handleClose"
    >
      <el-submenu
        v-for="(level_one, level_one_idx) in nav_config"
        :key="level_one_idx"
        :index="level_one.router"
      >
        <!-- 一级菜单 -->
        <template slot="title">
          <i :class="level_one.icon_image"></i>
          <span>{{level_one.menu_name}}</span>
        </template>
        <el-menu-item
          v-for="(level_two, level_two_idx) in level_one.children"
          :key="level_two_idx"
          :index="level_two.router"
          @click="clickNav([level_one, level_two])"
        >
          <!-- 二级菜单 -->
          <template slot="title">
            <i :class="level_two.icon_image"></i>
            <span>{{level_two.menu_name}}</span>
          </template>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'Navigation-menu',
  props: {
    menu_current: {
      type: String,
      default: '测试'
    },
    // 导航配置
    nav_config: {
      type: Array,
      default: null,
    },
    // 导航收起状态
    is_collapse: {
      type: Boolean,
      default: false,
    }
  },
  methods: {
    // 点击菜单
    clickNav(nav_list) {
      let that = this
      let data = {
        name: nav_list[nav_list.length - 1].menu_name,
        router: nav_list[nav_list.length - 1].router,
        breadcrumb_list: nav_list,
      }
      that.$emit('clickNav', data)
    },
    // 切换展开状态
    switchFold() {
      let that = this
      that.$emit('switchFold', !that.is_collapse)
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>

<style lang="scss" scoped>
.el-menu {
  border: none;
}
.navigation-menu{
  padding: $spacing-mini $spacing-mini;
}
</style>