<template>
<!-- // 整体网站结构 -->
<el-container :style="{height: containerStyle.height}">
  <el-header style="height:auto"><navigation /></el-header>
  <el-container>
    <sidebar :obj="sidebar" />
    <el-main><router-view></router-view></el-main>
  </el-container>
</el-container>
</template>

<script>
import Navigation from '@/components/learnSysLayout/navigation.vue'
import Sidebar from '@/components/learnSysLayout/sidebar.vue'

export default {
  components: { Navigation, Sidebar },
  data () {
    const clientHeight = document.documentElement.clientHeight - 1 + 'px'
    const clientWidth = document.documentElement.clientWidth + 'px'
    return {
      /**
       * 整个结构 样式
       * obj.height 整个结构高度
       * obj.width 整个结构宽度
       */
      containerStyle: { height: clientHeight, width: clientWidth },
      /**
       * 侧边栏 样式
       * obj.containerStyle 继承上面的整个结构 样式
       * obj.sidebarStyle 侧边栏 样式对象
       * obj.status 判断侧边栏 展开还是收起
       * obj.beforeMoveInitX 在拖拽侧边栏前，拖拽时，鼠标初始X值
       * obj.isMouseDown 鼠标是否按下
       */
      sidebar: {
        containerStyle: null,
        sidebarStyle: { width: '263px' },
        status: false,
        beforeMoveInitX: 0,
        isMouseDown: false
      }
    }
  },
  mounted () {
    this.sidebar.containerStyle = this.containerStyle
    /* 监听侧边栏的当前状态 */
    this.$root.$on('updateStatus', (status) => {
      this.sidebar.status = status
      this.sidebar.sidebarStyle.width = (status ? 'auto' : '200px')
    })
  }
}
</script>

<style lang="scss" scoped>
.el-header {
  z-index: 1;
  background: #fff;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
  padding: 10px 5px;
}
.el-main {
  padding: 0;
  position: relative;
}
</style>
