<template>
  <el-main class="layoutMain">
    <el-container :style="{ height: mainHeight + 'px' }" class="mainContainerClass">
      <SideBar/>
      <UserMainCon/>
    </el-container>
  </el-main>
</template>
<script>
import SideBar from "./SideBar.vue"
import UserMainCon from "./UserMainCon.vue"
export default{
  components:{
    SideBar,
    UserMainCon,
  },
  data() {
    return {
      mainHeight: 0,
      
    };
  },
  mounted(){
      this.updateMainHeight();
      window.addEventListener('resize', this.updateMainHeight);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.updateMainHeight);
  },
  methods: {
    updateMainHeight() {
      let mainElement = document.querySelectorAll('.layout')[0];
      let resetElement = document.querySelectorAll('.headerBox')[0].offsetHeight;
      if(mainElement){
        this.mainHeight = mainElement.offsetHeight-(2.65*resetElement);
      }else{
        this.mainHeight = window.innerHeight-(2.65*resetElement);
      }
    },
  }
}
</script>
<style lang="scss" scoped>
:deep() .mainContainerClass{
  overflow-y: auto;
}
</style>