<template>
  <div class="min-h-screen bg-gray-50 dark:bg-gray-900 flex">
    <!-- 移动端遮罩层 -->
    <div 
      v-if="isSidebarOpen" 
      class="fixed inset-0 bg-gray-900/50 z-40 lg:hidden" 
      @click="isSidebarOpen = false"
    />
    
    <!-- 侧边栏 -->
    <AppSidebar 
      class="fixed top-0 bottom-0 z-50 transition-transform duration-300 ease-in-out" 
      :class="isSidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'"
    />
    
    <!-- Right Content Area -->
    <div class="flex-1 lg:ml-64 flex flex-col min-w-0">
      <!-- Fixed Header -->
      <AppHeader 
        class="fixed top-0 right-0 left-0 lg:left-64 z-30 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700" 
        :is-sidebar-open="isSidebarOpen"
        :toggle-sidebar="toggleSidebar"
      />
      
      <!-- Main Content -->
      <main class="flex-1 overflow-y-auto pt-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
          <slot />
        </div>
      </main>
      
      <!-- Footer -->
      <AppFooter />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { watch } from 'vue'

const isSidebarOpen = ref(false)

// 切换侧边栏
const toggleSidebar = () => {
  isSidebarOpen.value = !isSidebarOpen.value
}

// 监听路由变化，在移动端自动关闭侧边栏
const route = useRoute()
const stopWatch = watch(() => route.path, () => {
  if (isSidebarOpen.value) {
    isSidebarOpen.value = false
  }
})

// 组件卸载时清理监听器
onUnmounted(() => {
  stopWatch()
})
</script>