<template>
  <div class="layout-container">
    <el-container class="layout-wrapper">
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '64px' : '200px'" class="layout-aside">
        <Sidebar :collapse="isCollapse" />
      </el-aside>
      
      <el-container class="layout-main">
        <!-- 顶部栏 -->
        <el-header class="layout-header">
          <Header :collapse="isCollapse" @toggle-collapse="toggleCollapse" />
        </el-header>
        
        <!-- 主内容区 -->
        <el-main class="layout-content">
          <router-view v-slot="{ Component }">
            <transition name="fade" mode="out-in">
              <keep-alive>
                <component :is="Component" />
              </keep-alive>
            </transition>
          </router-view>
        </el-main>
      </el-container>
    </el-container>
    
    <!-- 主题设置抽屉 -->
    <ThemeDrawer />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Sidebar from './components/Sidebar.vue'
import Header from './components/Header.vue'
import ThemeDrawer from './components/ThemeDrawer.vue'
import { useThemeStore } from '@/store/modules/theme'

const isCollapse = ref(false)
const themeStore = useThemeStore()

const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value
}

// 初始化主题
onMounted(() => {
  themeStore.initTheme()
})
</script>

<style scoped>
.layout-container {
  height: 100vh;
}

.layout-wrapper {
  height: 100%;
}

.layout-aside {
  background-color: var(--sidebar-bg);
  transition: width var(--transition-duration) var(--transition-timing);
  overflow: hidden;
  border-right: 1px solid var(--border-lighter);
}

.layout-main {
  display: flex;
  flex-direction: column;
}

.layout-header {
  height: var(--header-height);
  padding: 0;
  background-color: var(--header-bg);
  box-shadow: var(--header-shadow);
  display: flex;
  align-items: center;
}

.layout-content {
  flex: 1;
  padding: 20px;
  background-color: var(--bg-page);
  overflow: auto;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
