<template>
  <div class="main-nav">
    <el-menu
      ref="navbar"
      :default-active="activeIndex"
      text-color="#333"
      active-text-color="#1F71FF"
      router
      :default-openeds="openeds"
    >
      <nav-bar-item
        v-for="(item, index) in leftMenu"
        :item="item"
        :navIndex="String(index)"
        :index="index"
        :key="index"
        :class="{'is-active':activeIndex==index}"
      ></nav-bar-item>
    </el-menu>
  </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import NavBarItem from './NavBarItem'
import Bus from '../../util/Bus';
export default {
  components: { NavBarItem },
  computed: {
    ...mapGetters([
      'menuMap'
    ])
  },
  data() {
    return {
      activeIndex: '0',
      openeds: ['0', '1', '2'],
      leftMenu: []
    }
  },
  watch: {
    menuMap(val, oldVal) {
      this.initNav()
    }
  },
  mounted() {
    this.initNav()
  },
  created() {

  },
  methods: {
    initNav() {
      const navList = []
      this.menuMap.forEach(item => {
        if (item.secondMenuList && item.secondMenuList.length > 0) {
          const child = []
          item.secondMenuList.forEach(_item => {
            child.push({
              name: _item.menuName,
              path: _item.url
            })
          })
          const nav = {
            name: item.menuName,
            child: child
          }
          navList.push(nav)
        }
      });
      this.leftMenu = navList
    }
  },

}
</script>

<style>
</style>
