<template>
  <div style="height: 100%">
    <div class="head">
      <img src="../../../assets/image/QA.png" alt />
      <span>QA测试平台</span>
    </div>
    <!-- <div
      class="menu-toggle"
      @click="toggle_collapse"
    >|||</div> -->
    <!-- 左侧菜单栏 -->
    <el-menu :collapse="getCollapseState" :collapse-transition="false" background-color="#525E7C" 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'
// import { getUserDetail } from '@/api/getLogin/'
export default {
  name: 'Aside',
  data() {
    return {
      nav: [], // 左侧导航数据数组
      defaultOpen: ['0'],
      // 激活的菜单
      activePath: '',
      menuList: [],
      newNav: []
    }
  },
  methods: {
    getNav() {
      this.nav = menu.menu
      console.log('444', this.nav)
      // 循环判断新列表里的是数据是否在旧列表里出现
      this.nav.forEach((element) => {
        var temp = {}
        temp['id'] = element.id
        temp['icon'] = element.icon
        temp['title'] = element.title
        temp['child'] = []
        element.child.forEach((children) => {
          console.log('children: ', children)
          var flag = false
          console.log(this.menuList)
          this.menuList.forEach((menu) => {
            console.log('menu: ', menu)
            console.log('children.path', children.path)
            if (menu === children.path) {
              flag = true
            }
          })
          if (flag === true) {
            temp['child'].push(children)
          }
        })
        this.newNav.push(temp)
      })
      console.log('newNav', this.newNav)
      this.$store.dispatch('header/setNavs', {
        // nav: this.nav
        nav: this.newNav
      })
    },

    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)
    },
    // 获取用户详细信息
    async getUserDetail() {
      // getUserDetail().then((resp) => {
      //   this.menuList = resp.data.data.menuList
      //   console.log('menuList----', this.menuList)
      // })
      // this.getNav()
    }
  },
  computed: {
    activeNav() {
      // 当前激活的导航
      return this.$route.path
    },
    ...mapGetters({
      getCollapseState: 'header/CollapseState'
    })
  },
  created() {
    this.activePath = window.sessionStorage.getItem('activePath')
    this.getUserDetail()
    this.getNav()
  }
}
</script>

<style lang="less" scoped>
.head {
  width: 230px;
  line-height: 60px;
  text-align: center;
  display: flex;
  > img {
    height: 40px;
    width: 40px;
    margin: 10px 0px 0px 10px;
  }
  > span {
    font-size: 22px;
    color: #ffffff;
    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>
