<template>
  <div class="layout-container">
    <el-container>
      <el-header ref="headerRef">
        <Headers />
      </el-header>
      <el-main :style="{ minHeight: minHeight + 'px' }">
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </el-main>
      <div ref="footerRef" class="footer">
        <Footer />
      </div>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import Headers from './headers.vue'
import Footer from './footer.vue'

const headerRef: any = ref(null)
const footerRef: any = ref(null)
const minHeight: any = ref(200)
onMounted(() => {
  const viewportHeight = window.innerHeight
  minHeight.value = viewportHeight - headerRef.value.$el.offsetHeight - footerRef.value.offsetHeight
})
</script>

<style lang="scss" scoped>
.layout-container {
  background: linear-gradient(180deg, #f2f8ff 0%, #f4f4f4 100%);
  position: relative;
  width: 100%;
  min-width: 1316px;

  .el-header {
    height: 112px;
    padding: 0;
  }
  .el-main {
    padding: 0;
    overflow: hidden;
  }
  .footer {
    padding: 0;
    width: 100%;
    background-color: #022756;
    z-index: 1;
  }
}
</style>
