<template>
  <div class="aside__panel">
    <div class="logo">管理平台</div>
    <el-menu
      style="background:none"
      text-color="#fff"
      active-text-color="#fff"
      class="el-menu-vertical-demo">
      <el-menu-item :index="String(item.systemid)" v-for="item in systemList" :key="item.index" @click="handelMenuClick(item,'system')">
        <span slot="title">{{item.systemname}}</span>
      </el-menu-item>
    </el-menu>
    <div style="padding:0 16px">
      <el-divider></el-divider>
    </div>
    <el-menu
      style="background:none"
      text-color="#fff"
      active-text-color="#fff"
      class="el-menu-vertical-demo">
      <el-menu-item :index="String(index)" v-for="(item,index) in menuApp" :key="index" @click="handelMenuAppClick(item,'app')">
        <div class="flex-align-center flex-between menuItem">
          <span slot="title">{{item.systemappname}}</span>
          <i class="el-icon-error menuIconClose" @click.stop="deleteMenuApp(item)"></i>
        </div>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'

export default {
  data () {
    return {
      systemList:[],
      active:"0"
    }
  },
  computed:{
    ...mapGetters({
      menuApp:'menuApp'
    })
  },
  methods:{
    handelMenuClick (item,type) {
      this.active = String(item.systemid)
      this.$emit('getModules',item.modules,type)
    },
    handelMenuAppClick (app,type) {
      let system = JSON.parse(sessionStorage.getItem('module_info'))
      let mod = system.filter(e=>{return e.systemid === app.systemid})[0].modules.filter(e=>{return e.systemmoduleid === app.systemmoduleid})[0]
      let clickApp = mod.apps.filter(e=>{return e.systemappid === app.systemappid})
      sessionStorage.setItem('active_modules',JSON.stringify(mod))

      this.$emit('getModules',system.filter(e=>{return e.systemid === app.systemid})[0].modules,type)

      this.$store.dispatch('setActiveApp',clickApp[0])
      
      this.$router.push({path:clickApp[0].path})
    },
    async deleteMenuApp (item) {
      const res = await this.$api.requested({
        "classname": "sysmanage.develop.userauthforweb.userauth",
        "method": "delete_usershortcuts",
        "content": {
          "systemappid":item.systemappid
        }
      })
      this.$store.dispatch('setAppMenu')
    }
  },
  mounted () {
    this.systemList = JSON.parse(sessionStorage.getItem('module_info'))
    this.$store.dispatch('setAppMenu')
  }
}

</script>
<style>
.aside__panel .el-menu-item{
  height: 40px;
  line-height: 40px;
}
.el-menu-item:focus, .el-menu-item:hover{
  background: none;
}
</style>
<style scoped>
.logo{
  width: calc(200px);
  height: 50px;
  line-height: 50px;
  color:#fff;
  padding-left: 20px;
  /* border-right: 1px solid #f1f2f3; */
}
.menuIconClose{
  display: none;
  color:#fff
}
.menuItem:hover .menuIconClose{
  display: block;
}
</style>