<template>
  <div class="menu_panel">
    <el-menu router :default-active="activeIndex" text-color="#333" class="el-menu-demo shadow" mode="horizontal">
      <el-submenu v-show="hasMoreApp(mod)" v-for="(mod,index) in modules" :key="mod.index" :index="String(index)">
        <template slot="title"><b>{{mod.systemmodulename}}</b></template>
        <el-menu-item :index="app.path" v-for="(app) in mod.apps" :key="app.index" @click="setActiveModules(mod,app)">{{app.meta.title}}</el-menu-item>
      </el-submenu>
      <el-menu-item v-show="!hasMoreApp(mod)" :index="mod.path" v-for="mod in modules" :key="mod.index" @click="setActiveModules(mod,mod.apps[0])"><b>{{mod.systemmodulename}}</b></el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeIndex:'0',
      modules:[]
    }
  },
  methods:{
    setModules (mod,type) {
      this.modules = mod
      if (type === 'system') {
        this.setActiveModules(mod[0],mod[0].apps[0])
        let inactivePath = mod[0].apps[0].path
        this.$router.replace({path:inactivePath})
      }
    },
    hasMoreApp (mod) {
      if (mod.apps.length > 1) {
        return true
      } else {
        mod.path = mod.apps[0].path
        return false
      }
    },
    setActiveModules (mod,app) {
      this.$store.dispatch('setActiveApp',app)
      sessionStorage.setItem('active_modules',JSON.stringify(mod))
    },
    setDefaultData (mod) {
      let system = JSON.parse(sessionStorage.getItem('module_info'))
      this.setModules(system[0].modules)
    }
  },
  mounted () {
    this.setDefaultData()
  }
}

</script>
<style>
</style>
<style scoped>
.shadow{
   box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
   transform: translate3d(0,-2px,0);
   border-radius: 10px;
   border:none;
   overflow: hidden;
}
.menu_panel{
  padding: 0px 16px 0 0px;
}
</style>