<!--
  @description: 模板页面
  @author: Adrian
-->
<template>
  <section class="sidebar">
    <!--展开收起-->
    <div class="collapse-state pointer" @click="isCollapseState">
      <i class="iconfont icon-shouqidaohang" style="margin-right: 5px;color: #007CCC" />
      <span :style="isCollapse?'opacity:0':'opacity:1'">收起导航</span>
    </div>
    <!-- 菜单 -->
    <el-menu
      :default-active="activeLink"
      :collapse="isCollapse"
      :unique-opened="true"
      router
      class="sidebar-menu"
      @select="menuSelect"
    >
      <el-menu-item
        v-for="(item,index) in menu"
        v-if="item.children&&item.children.length === 0"
        :key="index"
        :index="resolvePath(item.path)"
        class="sidebar-menu-stair"
      >
        <i :class="item.icon&&item.icon" class="iconfont" />
        <span slot="title">{{ item.name&&item.name }}</span>
      </el-menu-item>
      <el-submenu v-else-if="item.children&&item.children.length > 0" :index="index.toString()">
        <template slot="title">
          <i :class="item.icon&&item.icon" class="iconfont" />
          <span slot="title">{{ item.name&&item.name }}</span>
        </template>
        <el-menu-item-group v-for="(child,ind) in item.children" :key="ind">
          <el-menu-item :index="resolvePath(item.path,child.path)">
            {{ child.name&&child.name }}
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </section>
</template>
<script>
/**
   {
     "path": "/path",// 一级菜单
     "name": "name",// 要英文，因为需要国际化，
     "icon": "iconfontclass",// 为前端的字体图标的class
     "children": [
       {
         "path": "/path",// 二级菜单
         "name": "name",// 要英文，因为需要国际化，
         // 二级菜单不需要icon，根据设计图二级菜单没有icon
       }
     ]
   }
   */
import path from 'path'
import { mapGetters } from 'vuex'

export default {
  name: 'Sidebar',
  data() {
    return {
      activeLink: '' // 菜单索引
    }
  },
  computed: {
    ...mapGetters(['menu', 'isCollapse'])
  },
  watch: {
    $route(to) {
      // 初始化菜单高亮索引
      this.initSelect(to)
    }
  },
  created() {
    // 初始化菜单高亮索引
    this.initSelect(this.$route)
  },
  methods: {
    // 初始化菜单高亮索引
    initSelect(to) {
      // 路由选中的方法，这种方法有问题，临时解决，如果有时间后期需要改掉
      // 原理是，因为可以跳转的菜单只有二级菜单，且只有二级菜单，超出二级就会有问题，只有一级理论上应该没事，但是没有测试，后期会测到
      if (to.matched && to.matched.length > 1) {
        if (to.matched[0].path && to.matched[1].meta && to.matched[1].meta.path) {
          this.activeLink = path.resolve(to.matched[0].path, to.matched[1].meta && to.matched[1].meta.path)
          return
        }
      }
      this.activeLink = to.path
    },
    // 菜单点击回调
    menuSelect(index, indexPath) {
      // 实现点击菜单刷新效果
      if (this.activeLink === index) {
        this.$emit('reload')
      }
      // 设置索引
      this.activeLink = index
    },
    // 收起展开菜单
    isCollapseState() {
      this.$store.dispatch('setSidebarIsCollapse', !this.isCollapse)
    },
    // 以路径的形式进行拼接
    resolvePath(...paths) {
      return path.resolve(...paths)
    }
  }
}
</script>
<style lang="less" scoped>
  .sidebar {
    padding-top: 44px;
    position: relative;
    height: calc(100vh - 56px);
    .collapse-state {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      padding-left: 16px;
      height: 44px;
      line-height: 44px;
      color: rgba(96, 98, 102, 1);
      font-size: 14px;
      font-family: MicrosoftYaHei;
      font-weight: 400;

      i {
        color: #ABB0B7;
      }
    }
  }
</style>
