<template>
  <div style="height: 100%">
    <div class="head">
      <img src="../../../assets/image/logo.png" alt />
      <span>量测试平台</span>
    </div>
    <!-- <div
      class="menu-toggle"
      @click="toggle_collapse"
    >|||</div> -->
    <!-- 左侧菜单栏 -->
    <el-menu :collapse="getCollapseState" :collapse-transition="false" background-color="#525E7D" text-color="#fff" active-text-color="#ffd04b" router :default-active="activePath">
      <!-- 一级菜单：w -->
      <el-submenu :index="item.id + ''" v-for="item in nav" :key="item.id">
        <template slot="title">
          <i :class="item.icon"></i>
          <span>{{ item.title }}</span>
        </template>

        <!-- 二级菜单 -->
        <el-menu-item :index="subItem.path" v-for="subItem in item.child" :key="subItem.path" @click="saveNavState(subItem.path)">
          <template slot="title">
            <i :class="subItem.icon"></i>
            <span>{{ subItem.title }}</span>
          </template>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import menu from './menu.json'
export default {
  name: 'Aside',
  data() {
    return {
      nav: [], // 左侧导航数据数组
      defaultOpen: ['0'],
      // 激活的菜单
      activePath: ''
    }
  },
  methods: {
    getNav() {
      this.nav = menu.menu
      this.$store.dispatch('header/setNavs', {
        nav: this.nav
      })
    },
    toggle_collapse() {
      if (this.getCollapseState === false) {
        this.$store.commit('header/setCollapse', true)
      } else {
        this.$store.commit('header/setCollapse', false)
      }
    },
    // 保存链接的激活状态
    saveNavState(activePath) {
      this.activePath = activePath
      window.sessionStorage.setItem('activePath', activePath)
    }
  },
  computed: {
    activeNav() {
      // 当前激活的导航
      return this.$route.path
    },
    ...mapGetters({
      getCollapseState: 'header/CollapseState'
    })
  },
  created() {
    this.getNav()
    this.activePath = window.sessionStorage.getItem('activePath')
  }
}
</script>

<style lang="less" scoped>
.head {
  width: 230px;
  line-height: 60px;
  text-align: center;
  display: flex;
  > img {
    height: 34px;
    width: 70px;
    margin: 16px 0px 0px 10px;
  }
  > span {
    font-size: 22px;
    color: #3f9eff;
    margin-left: 15px;
  }
}

.el-menu {
  border-right: none;
}

.menu-toggle {
  background-color: rgb(44, 46, 46);
  font-size: 10px;
  line-height: 20px;
  color: beige;
  text-align: center;
  letter-spacing: 0.2em;
}
</style>
