<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import Footer from './components/Footer.vue';
import Toolbar from './components/Toolbar.vue';

const router = useRouter();
const isContentLoaded = ref(false);

// 等待路由完全就绪（所有初始导航和异步组件加载完毕）
router.isReady().then(() => {
  isContentLoaded.value = true;
});
</script>

<template>
  <div id="contentPane">
    <Toolbar></Toolbar>
    <div v-if="$route.path === '/ContactUs'">
      <router-view/>
      <!-- 如果 ContactUs 页面也需要Footer并同样逻辑加载，则也加上 v-if -->
      <!--
      <div id="footer" v-if="isContentLoaded">
        <Footer></Footer>
      </div>
      -->
    </div>
    <div v-else id="defaultcontainer">
      <div id="content"><router-view/></div>
      <!-- 仅当 isContentLoaded 为 true 时渲染 Footer -->
      <div id="footer" v-if="isContentLoaded">
        <Footer></Footer>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import "node_modules/bootstrap/scss/_functions.scss";
@import "node_modules/bootstrap/scss/_variables.scss";
@import "node_modules/bootstrap/scss/_mixins.scss";

#contentPane{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  //裁剪多余区域
  overflow: hidden;
}
#defaultcontainer{
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 确保在内容不足时，Footer也能被推到底部 */
}
#content{
  display: flex;
  position: relative;
  flex:1; /* 关键：让内容区占据所有可用空间，将Footer推到底部 */
  width: 100%;
  /* min-height: 100%; 这行可能不再需要，因为父容器已经是flex并且此元素flex:1 */
}

#footer{
  margin-top: 0px; /* 或者 auto，取决于具体设计 */
  /* flex-shrink: 0; // 防止Footer在空间不足时被压缩，如果需要的话 */
}

@include media-breakpoint-between(xs, md) {
}

@include media-breakpoint-up(md) {
}
</style>
