<template>
  <div style="height: 100%">
    <div class="head">
      <img src="../../../assets/image/QA.png" alt />
      <span>测试平台</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/Login/'
import { getNsByRoleId } from '@/api/k8s'

export default {
  name: 'Aside',
  data() {
    return {
      nav: [], // 左侧导航数据数组
      defaultOpen: ['0'],
      // 激活的菜单
      activePath: '',
      menuList: []
    }
  },
  methods: {
    getNav() {
      const tempNav = menu.menu
      // 循环判断新列表里的是数据是否在旧列表里出现
      tempNav.forEach((element) => {
        var temp = {}
        temp['id'] = element.id
        temp['icon'] = element.icon
        temp['title'] = element.title
        temp['child'] = []
        element.child.forEach((children) => {
          var flag = false
          if (this.menuList.length > 0) {
            this.menuList.forEach((menu) => {
              if (menu === children.path) {
                flag = true
              }
            })
            if (flag === true) {
              temp['child'].push(children)
            }
          }
        })
        // 判断子菜单是否为空，为空不添加
        if (temp.child.length > 0) {
          this.nav.push(temp)
        }
      })
      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)
    },
    // 获取用户详细信息
    getUserDetail() {
      getUserDetail().then((resp) => {
        // 异步调用action
        // this.$store.dispatch('user/userMsg', {
        //   userInfo: resp.data.data
        // })
        // 判断token失效时，清空缓存，跳转到登陆页面
        if (resp.data.data === false) {
          this.$message.error(resp.data.msg)
          window.sessionStorage.clear()
          this.$router.push('/login')
        }
        // 同步赋值mutations
        this.$store.commit('user/SET_USER', resp.data.data)

        // 将用户信息存储到session中
        window.sessionStorage.setItem(
          'permissionList',
          resp.data.data.permissionCodeList
        )
        window.sessionStorage.setItem('menuList', resp.data.data.menuList)
        this.menuList = resp.data.data.menuList
        this.getNav()
      })
    },
    // 获取namespace列表，该列表决定用户是否展示新增、更新等按钮
    getUserNsList() {
      getNsByRoleId().then((resp) => {
        window.sessionStorage.setItem('nsList', resp.data.data)
      })
    }
  },
  computed: {
    activeNav() {
      // 当前激活的导航
      return this.$route.path
    },
    ...mapGetters({
      getCollapseState: 'header/CollapseState'
      // 获取用户信息
      // getUserId: 'user/UserId'
    })
  },
  created() {
    this.activePath = window.sessionStorage.getItem('activePath')
    this.getUserDetail()
    this.getUserNsList()
  }
}
</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>
