<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="/certificationManagement" :collapse="collapseStatus" :unique-opened="true" @select="selectMenu">
        <side-bar-item v-for="item of sideBarData" :item-data="item" :key="item.path"></side-bar-item>
      </el-menu>

    </div>
  </div>
</template>
<script>
import SideBarItem from "@/components/SideBarItem";
export default {
  name: "sideBar",
  components: {
    SideBarItem
  },
  data() {
    return {
      menus: [],
      subMenu: [],
      collapseStatus: false
    };
  },
  //可访问data属性
  created() {
    console.log(this.sideBarData);
  },
  //计算集
  computed: {
    sideBarData() {
      return this.$store.state.routerModule.sideBarRoutes;
    }
  },
  //方法集
  methods: {
    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;
    box-sizing: border-box;
  }
  // 菜单
  .menu {
    width: 100%;
    height: calc(100% - 60px);

    ::v-deep .el-menu {
      height: 100%;
      border-right: unset;

      .menu-item-title {
        display: flex;

        & > img {
          margin-right: 15px;
        }
      }
    }
  }
}
</style>
