<template>
  <div class="panel">
    <div class="flex-align-stretch">
      <asideTemp @getModules="getModules"></asideTemp>
      <div style="flex:100" class="body__panel">
        <headeTemp></headeTemp>
        <div>
          <menuTemp class="sticky normal-margin" ref="menu"></menuTemp>
          <div class="radius">
            <keep-alive :include="pageCache">
              <router-view></router-view>
            </keep-alive>
          </div>
        </div>
      </div>
      <navTemp  @getModules="getModules"></navTemp>
    </div>
    <socketMessage></socketMessage>
  </div>
</template>

<script>
import headeTemp from './modules/header.vue'
import asideTemp from './modules/aside.vue'
import menuTemp from './modules/menu.vue'
import navTemp from './modules/navRight.vue'
import socketMessage from '@/components/socketMessage/index.vue'

import {mapGetters} from 'vuex'

export default {
  components:{
    headeTemp,
    asideTemp,
    menuTemp,
    navTemp,
    socketMessage
  },
  computed: {
    ...mapGetters({
      pageCache: 'pageCache'
    })
  },
  data () {
    return {

    }
  },
  methods:{
    getModules (mod,type) {
      // this.$refs['menu'].setModules(mod,type)
    }
  }
}

</script>
<style>
.panel{
  background: url("../../assets/wallhaven-0pq8gm.jpeg") no-repeat;
  background-size: cover;
}
.el-menu{
  border-right:0
}
</style>
<style scoped>
.body__panel{
  height: 100vh;
  /* padding-right: 16px; */
  padding-right: 60px;
  margin-right: 10px;
  overflow-y: scroll;
}
.body__panel::-webkit-scrollbar{
  display:none !important;

}
.sticky {
  position: sticky;
}
.radius{
  /* margin: 16px 0; */
  border-radius:10px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
  transform: translate3d(0,-2px,0);
  background: #fff;
}

</style>