<template>
  <div class="side-bar">
    <!-- 顶部系统名 -->
    <div class="top-title">
      <img src="@/assets/images/logo.png" alt="">
    </div>
    <!-- 菜单 -->
    <div class="menu">

      <el-menu mode="vertical" default-active="/home/index" :collapse="collapseStatus" :unique-opened="true" @select="selectMenu">

        <template v-for="(item, subIndex) of menus">
          <el-menu-item v-if="item.show" :index="item.path" :key="item.path">
            {{item.title}}
          </el-menu-item>
        </template>

        <el-submenu v-for="(subItem, index) of subMenu" :index="subItem.path" :key="subItem.path">

          <template slot="title">{{subItem.meta.title}}</template>

          <template v-if="subItem.children">
            <el-menu-item v-for="(item, subIndex) of subItem.children" :index="item.path" :key="item.path">
              {{item.meta.title}}
            </el-menu-item>
          </template>

        </el-submenu>

      </el-menu>

    </div>
  </div>
</template>
<script>
import { routes } from "@/router/";
export default {
  name: "sideBar",
  data() {
    return {
      menus: [],
      subMenu: [],
      collapseStatus: false
    };
  },
  //可访问data属性
  created() {
    this.createMenu();
  },
  //计算集
  computed: {

  },
  //方法集
  methods: {
    createMenu() {
      routes.forEach(item => {
        if (item.path === "/home") {
          if (item.children && item.children.length > 0) {
            let temp = item.children;
            temp.forEach(child => {

              if (child.children && child.children.length > 0) {
                this.subMenu.push(child);
              } else {
                this.menus.push({
                  path: child.path,
                  name: child.name,
                  title: child.meta?.title,
                  show: child.meta?.show
                });
              }

            });
          }
        }
      });
    },

    selectMenu(path, pathName) {
      if (this.$route.path === path) return;
      this.$router.push({ path });
    }

  },
}
</script>
<style lang="scss" scoped>
.side-bar {
  width: 100%;
  height: 100%;
  border-right: 1px solid #eeeeee;
  // 顶部系统名
  .top-title {
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #eeeeee;
  }
  // 菜单
  .menu {
    width: 100%;
    height: calc(100% - 60px);
  }
}
</style>
