<template>
<div>
  <div class="aside__panel" :class="!collapse?'width-160':'bg'">
    <div  class="logo flex-align-center" :class="collapse?'flex-around':''">
      <i class="el-icon-s-fold inline-16" @click="collapse = !collapse"></i>
      <img v-show="img.usetype === 'actionlogo' && !collapse" v-for="img in siteinfo.attinfos" :key="img.index" style="height:40px" :src="img.url" alt="">
    </div>
    <!-- <p v-if="!collapse" style="padding:0 20px;font-size:12px;color:#eeeeee">系统</p> -->
    <el-menu
     :collapse="collapse"
     :collapse-transition="false"
      style="background:none"
      text-color="#fff"
      active-text-color="#fff"
      :default-active="activeIndex"
      class="el-menu-vertical-demo">
      <div class="menu_scroll__panel">
        <el-menu-item :index="String(item.systemid)" v-for="item in systemList" :key="item.index" @click="handelMenuClick(item,'system')" @mouseenter.native="debounce(selectStyle,100)()" @mouseleave.native="outStyle">
          <p style="text-align:center" v-if="collapse">{{item.systemname.substr(0, 1)}}</p>
          <span slot="title">{{item.systemname}}</span>
        </el-menu-item>
        <el-divider class="divider"></el-divider>
        <!-- <p v-if="!collapse" style="padding:0 20px;font-size:12px;color:#eeeeee">应用</p> -->
        <!-- <el-divider content-position="left">应用</el-divider> -->
        <el-menu-item :index="String(index + 10)" v-for="(item,index) in menuApp" :key="index" @click="handelMenuAppClick(item,'app')" @mouseenter.native="debounce(selectStyle,100)()" @mouseleave.native="outStyle">
          <p class="" style="text-align:center" v-if="collapse">{{item.systemappname.substr(0, 1)}}</p>
          <span slot="title">{{item.systemappname}}</span>
          <i v-if="!collapse" style="float:right;line-height: 40px;" class="el-icon-error menuIconClose" @click.stop="deleteMenuApp(item)"></i>
        </el-menu-item>
      </div>
      <div>
        <el-divider class="divider"></el-divider>
        <el-menu-item index="99" style="font-size:12px;margin-top:20px"  @click="handelMenuClick(item,'system')" @mouseenter.native="debounce(selectStyle,100)()" @mouseleave.native="outStyle">
          <i v-if="collapse" class="el-icon-aim"  style="font-size:12px;color:#fff"></i>
          <span slot="title"><b>网站地图</b></span>
        </el-menu-item>
        <el-menu-item index="100"  style="font-size:12px"  @click="handelMenuClick(item,'system')" @mouseenter.native="debounce(selectStyle,100)()" @mouseleave.native="outStyle">
          <i v-if="collapse" class="el-icon-menu"  style="font-size:12px;color:#fff"></i>
          <span slot="title"><b>配置菜单</b></span>
        </el-menu-item>
      </div>
    </el-menu>
  </div>
  <div v-if="collapse" :class="fixedMenu" class="aside__panel" @mouseenter="selectStyle" @mouseleave="outStyle()">
    <div style="height:64px;line-height:64px;text-align: center;" class="logo" @click="collapse = false">
      <i class="el-icon-s-unfold inline-16" ></i>Expand menu
    </div>
    <el-menu
      style="background:none"
      text-color="#fff"
      active-text-color="#fff"
      class="el-menu-vertical-demo">
      <div class="menu_scroll__panel">
        <el-menu-item :index="String(item.systemid)" v-for="item in systemList" :key="item.index" @click="handelMenuClick(item,'system')">
          <div slot="title"><span class="name__icon inline-16" style="text-align:center">{{item.systemname.substr(0, 1)}}</span>{{item.systemname}}</div>
        </el-menu-item>
        <el-divider class="divider"></el-divider>
        <!-- <p v-if="!collapse" style="padding:0 20px;font-size:12px;color:#eeeeee">应用</p> -->
        <!-- <el-divider content-position="left">应用</el-divider> -->
        <el-menu-item :index="String(index + 10)" v-for="(item,index) in menuApp" :key="index" @click="handelMenuAppClick(item,'app')">
          <div slot="title"><span class="name__icon inline-16" style="text-align:center">{{item.systemappname.substr(0, 1)}}</span>{{item.systemappname}}</div>
        </el-menu-item>
      </div>
      <div>
         <el-divider class="divider"></el-divider>
        <el-menu-item index="99" style="margin-top:20px">
          <span slot="title" style="font-size:12px">网站地图</span>
        </el-menu-item>
        <el-menu-item index="100">
          <span slot="title" style="font-size:12px">配置菜单</span>
        </el-menu-item>
      </div>
    </el-menu>
  </div>
</div>
</template>

<script>
import {mapGetters} from 'vuex'

export default {
  data () {
    return {
      systemList:[],
      active:"0",
      collapse:false,
      fixedMenu:'no__panel',
      timer:null,
      activeIndex:'0'
    }
  },
  computed:{
    ...mapGetters({
      menuApp:'menuApp',
      siteinfo:'siteinfo',
       activeApp:'activeApp',
    })
  },
  methods:{
    handelMenuClick (item,type) {
      this.active = String(item.systemid)
      // this.$emit('getModules',item.modules,type)
      this.$store.dispatch('getModules',{mod:item.modules,type:type})
    },
    handelMenuAppClick (app,type) {
      let system = JSON.parse(sessionStorage.getItem('module_info'))

      let at_sys_modules = system.filter(e=>{
        if (e.systemid === app.systemid)
        return e
      })[0].modules

      let at_modules = at_sys_modules.filter(e=>{
        if (e.systemmoduleid === app.systemmoduleid)
        return e
      })[0]
      let at_app = at_modules.apps.filter(e=>{
        if (e.systemappid === app.systemappid)
        return e
      })[0]

      sessionStorage.setItem('active_modules',JSON.stringify(at_modules))
      
      this.$store.dispatch('getModules',{mod:at_sys_modules,type:type})

      this.$store.dispatch('setActiveApp',{name:app.systemappname,app:at_app,val:''})

      this.$router.push({path:at_app.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')
    },
    debounce (fn, wait) {
      var that = this
      that.timer = null
      return function () {
        if (that.timer !== null) clearTimeout(that.timer)
        that.timer = setTimeout(fn, wait)
      }
    },
    selectStyle () {
      var _this = this;
      _this.fixedMenu = 'pos__panel'
    },
    outStyle () {
      clearTimeout(this.timer)
      this.fixedMenu = 'no__panel'
    }
  },
  mounted () {

    let active_model = JSON.parse(sessionStorage.getItem('active_modules'))
    if (sessionStorage.getItem('activeApp')) {
      let active_app = JSON.parse(sessionStorage.getItem('activeApp'))
      this.$store.dispatch('setActiveApp',{app:active_app,val:''})
    } else {
      this.$store.dispatch('setActiveApp',{app:active_model.apps[0],val:''})
    }
    this.systemList = JSON.parse(sessionStorage.getItem('module_info'))

    this.$store.dispatch('setAppMenu')
    
  },
  watch:{
    activeApp (val) {
      let active_model = JSON.parse(sessionStorage.getItem('active_modules'))
      this.activeIndex = String(active_model.systemid)
    }
  }
}

</script>
<style>
.aside__panel .el-menu{
  background: none;
}
.width-160{
  width: 160px !important;
}
.aside__panel {
  transition: linear .3s;
  height:100vh;
  flex: 1 0 auto ;
  margin-right: 10px;
  width: 54px;
  transition: .2s linear;
  /* background-color: rgba(255 ,255,255,.1) !important; */
}
.aside__panel .el-divider--horizontal {
  margin:6px 0;
}
.aside__panel .el-menu-item{
  height: 40px;
  line-height: 40px;
  padding-left:16px !important;
}
.aside__panel .el-menu-item:hover{
  background-color: rgba(255 ,255,255,.2) !important;
}
.el-menu-item:focus, .el-menu-item:hover{
  background: none;
}
.is-active .menuIconClose{
  display: block !important;
}
</style>
<style scoped>
.is-active{
  background-color: rgba(255 ,255,255,.2) !important;
  box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
  transition: .5 linear;
}
.logo{
  display:flex;
  align-items:center;
  /* justify-content:flex-start; */
  height: 62px;
  line-height: 62px;
  color:#fff;
  padding-left:16px;
  text-align: center;
  /* border-right: 1px solid #f1f2f3; */
}
.bg{
  margin-right: 10px;
}

.bg .logo{
  margin-left: 0px;
}
.bg p{
  height:24px;
  width: 24px;
  line-height: 24px;
  margin-top:9px;
  border-radius: 100%;
  background-color: rgba(255 ,255,255,.2)
}
.name__icon{
  display: inline-block;
  height:20px;
  width: 20px;
  line-height: 20px;
  border-radius: 100%;
  font-size: 12px;
  background-color: rgba(255 ,255,255,.2)
}
.is-active p{
  background:none !important;
}
.menuIconClose{
  display: none;
  opacity: .5;
}
.menuItem:hover .menuIconClose{
  display: block;
}
.divider{opacity: .2;}
.pos__panel{
  position: absolute;
  left:0;
  top:0;
  width: 200px;
  box-shadow: 2px 8px 8px 0 rgb(0 0 0 / 20%);
  background: rgba(52,60,71,.95);
  z-index: 999;
  transition: .1s ease-in-out;
}
.no__panel{
  position: absolute;
  width: 200px;
  left:-200px;
  top:0;
  background: rgba(32, 30, 30, 0.8);
  z-index: 999;
  transition: .1s ease-in-out;
  
}
.menu_scroll__panel{
  height:calc(100vh - 200px);
  overflow-y:scroll
}
.menu_scroll__panel::-webkit-scrollbar{
  display:none !important;
}
</style>