<template>
    <div class="accountabilityLayoutPage">
      <el-row >
        <el-col :span="4" id="sider">
          <MenuList></MenuList>
        </el-col>
        <el-col :span="20" id="main">
          <transition name="el-zoom-in-center">
            <section>
              <BreadCrumb></BreadCrumb>
              <div id='mainConArea'>
                <el-scrollbar style="height:100%;">
                  <router-view></router-view>
                </el-scrollbar>
              </div>
            </section>
          </transition>
        </el-col>
      </el-row>
    </div>
</template>

<script>
  import MenuList from "@/components/Layout/menuList/menuList"
  import BreadCrumb from "@/components/breadcrumb"
  // import Applications from "@/components/common/applications"
    export default {
        name: "layout",
      components: {
        MenuList,
        BreadCrumb,
        // Applications
      },
      data() {
        return {
          id: this.$route.params.id,
          dat: {
            name: 'admin',
            password: 'admin'
          }
        }
      },
      watch: {

      },
      mounted() {
        this.update();
        var self = this;
        window.onresize = function() {
          var timer;
          if (timer) return;
          var timer = setTimeout(() => {
            self.update();
            timer = null;
          }, 200);
        };
      },
      methods: {
        update() {
          var clientHeight =
            document.documentElement.clientHeight ||
            document.body.clientHeight ||
            document.body.offsetHeight;
          var height = clientHeight - 228;
          this.$nextTick(() => {
            let mainConArea = document.querySelector("#mainConArea");
            if (mainConArea) mainConArea.style.height = height + "px";
          });
        }
      }
    }
</script>

<style lang='scss'>
.accountabilityLayoutPage {
  #mainConArea{
    width: 100%;
    overflow: hidden;
  }
  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
}
</style>
