<template>
  <div id="layout__container">
    <!-- 全局加载动画 -->
    <!-- <LoadingSpinner /> -->

    <!-- header -->
    <header class="layout__header" v-if="shouldShowHeader">
      <Header></Header>
    </header>

    <!-- main -->
    <main class="layout__main">
      <Main></Main>
    </main>

    <!-- footer -->
    <footer class="layout__footer" v-if="shouldShowHeader">
      <Footer></Footer>
    </footer>
  </div>
</template>


<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import Header from './modules/Header/index.vue'
import Main from './modules/Main/index.vue'
import Footer from './modules/Footer/index.vue'
// import LoadingSpinner from '@/components/LoadingSpinner.vue'
// 获取路由实例
const route = useRoute()

// 根据isTop参数判断是否显示Header
// 当isTop为'false'或不存在时显示Header，为'true'时隐藏
const shouldShowHeader = computed(() => {
  // 路由参数通常是字符串类型，需要进行转换
  const isTop = route.query.isTop
  // 如果isTop为'true'则不显示Header，其他情况都显示
  return isTop !== 'true'
})
</script>


<style lang="less" scoped>
#layout__container {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;

  .layout__header {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 50;
    width: 100%;
  }

  .layout__main {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
  }

  .layout__footer {
    width: 100%;
    height: auto;
  }
}
</style>