<template>
  <div class="main-content">
    <!-- 面包屑导航 -->
    <Breadcrumb v-if="showBreadcrumb" />
    
    <!-- 页面标题 -->
    <PageHeader v-if="showPageHeader" />
    
    <!-- 主要内容 -->
    <div class="content-wrapper">
      <!-- 内容区域使用 router-view 来渲染路由匹配的组件 -->
      <router-view />
    </div>
    
    <!-- 返回顶部按钮 -->
    <BackToTop v-if="showBackToTop" />
    
    <!-- 全局加载状态 -->
    <GlobalLoading v-if="isGlobalLoading" />
  </div>
</template>

<script setup lang="js">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRoute } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import Breadcrumb from './Breadcrumb.vue'
import PageHeader from './PageHeader.vue'
import BackToTop from './BackToTop.vue'
import GlobalLoading from './GlobalLoading.vue'

const route = useRoute()
const authStore = useAuthStore()

// 显示面包屑
const showBreadcrumb = ref(true)

// 显示页面标题
const showPageHeader = ref(true)

// 显示返回顶部按钮
const showBackToTop = ref(true)

// 全局加载状态
const isGlobalLoading = ref(false)

// 监听路由变化，处理页面加载状态
const handleRouteChange = () => {
  // 页面切换时显示加载状态
  isGlobalLoading.value = true
  
  // 模拟页面加载完成
  setTimeout(() => {
    isGlobalLoading.value = false
  }, 300)
}

// 页面滚动处理
const handleScroll = () => {
  // 可以在这里处理滚动相关的逻辑
}

// 组件挂载时添加事件监听
onMounted(() => {
  window.addEventListener('scroll', handleScroll)
  handleRouteChange()
})

// 组件卸载时移除事件监听
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<style scoped>
.main-content {
  min-height: 100%;
}

.content-wrapper {
  margin-top: 16px;
  position: relative;
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
  .content-wrapper {
    margin-top: 12px;
  }
}
</style>