<!--
  @description: 模板页面
  @author: Adrian
-->
<template>
  <div :class="{folds:isCollapse}" class="layout">
    <el-row>
      <!-- navbar 头部导航-->
      <div class="top">
        <headerBar />
      </div>
      <!-- body -->
      <div class="bottom">
        <!-- sidebar -->
        <div class="fixed_sidemenu">
          <el-scrollbar class="scrollbar">
            <sidebar @reload="reload" />
          </el-scrollbar>
        </div>
        <!-- main -->
        <div
          :style="{ marginLeft: `${isCollapse ? 49 : 181}px` }"
          class="content"
        >
          <el-scrollbar ref="scroll" class="scrollbar appMain">
            <el-backtop target=".appMain .el-scrollbar__wrap" :bottom="100" :right="60" :visibility-height="40" />
            <appMain ref="appMain" />
          </el-scrollbar>
        </div>
      </div>
    </el-row>
  </div>
</template>
<script>
/* vuex*/
import { mapGetters } from 'vuex'
/* 组件*/
import { headerBar, sidebar, appMain } from './components'
export default {
  name: 'Layout',
  components: {
    headerBar,
    sidebar,
    appMain
  },
  computed: {
    ...mapGetters(['isCollapse'])
  },
  watch: {
    '$route.path'() {
      this.$refs['scroll'].wrap.scrollTop = 0 // 设置滚动初始值
    }
  },
  methods: {
    // 刷新
    reload() {
      this.$refs.appMain.reload()
    }
  }
}
</script>
<style lang="less" scoped>
  .layout {
    background-color: #edf0f5;
    height: 100%;
    width: 100%;

    .bottom {
      /*max-width: 1920px;*/
      &:after {
        content: "";
        display: block;
        height: 0;
        width: 0;
        clear: both;
        zoom: 1;
      }

      .fixed_sidemenu {
        width: 180px;
        background-color: #ffffff;
        transition: 0.3s width ease-in-out;
        position: fixed;
        height: 100%;
        box-shadow: 1px 0px 0px 0px rgba(196, 211, 237, 0.45);
      }

      .content {
        margin-left: 190px;
        border-radius: 0px 0px 4px 4px;
        height: 100%;
        transition: 0.3s margin-left ease-in-out;
      }
      .scrollbar {
        background: #ffffff;
        height: calc(100vh - 56px);
        width: 100%;
      }
    }
    /*点击展开折叠样式*/
    &.folds {
      .fixed_sidemenu {
        width: 48px;
      }
      .content {
        margin-left: 49px;
      }
    }
  }
</style>
