<template>
  <div class="layout">
    <Header />
    <el-container direction="vertical" :style="{ height: mainHeight + 'px' }">
      <AppMain />
      <Footer />
    </el-container>
  </div>
</template>
<script>
import Header from "./components/Header.vue";
import AppMain from "./components/AppMain.vue";
import Footer from "./components/Footer.vue";
export default {
  components: {
    Header,
    AppMain,
    Footer,
  },
  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];
      if (mainElement) {
        this.mainHeight = mainElement.offsetHeight - 70;
      } else {
        this.mainHeight = window.innerHeight - 70;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.layout {
  position: relative;
  min-height: 100%;
  margin: 0 auto;
  padding-bottom: 35px;
  overflow-y: hidden;
}
</style>
