<template>
  <div class="common-layout">
    <el-container>
      <el-header><Header @button-click="onButtonClick"></Header></el-header>
      <el-container>
        <el-aside :width="dynamicAsideWidth" class="home-aside">
          <Aside @collapse-changed="handleCollapseChange"></Aside>
        </el-aside>
        <el-container>
          <el-main class="main-content">
            <Breadcrumb />
            <div class="router-view-container">
              <RouterView></RouterView>
            </div>
            <el-drawer v-model="isOpening" size="50%" title="消息">
              <ChatPanel></ChatPanel>
            </el-drawer>
          </el-main>
        </el-container>
      </el-container>
      <el-footer><Footer></Footer></el-footer>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue' // 导入 ref 和 computed
import Aside from '@/components/Aside.vue'
import Footer from '@/components/Footer.vue'
import Header from '@/components/Header.vue'
import Breadcrumb from '@/components/Breadcrumb.vue'
import ChatPanel from '@/components/ChatPanel.vue'

const isAsideCollapsed = ref(false)
const isOpening = ref(false)

const handleCollapseChange = (collapsed: boolean) => {
  isAsideCollapsed.value = collapsed
}

const dynamicAsideWidth = computed(() => {
  return isAsideCollapsed.value ? '64px' : '200px'
})

const onButtonClick = () => {
  isOpening.value = !isOpening.value
  console.log(isOpening)
}
</script>

<style scoped>
.common-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.home-aside {
  transition: width 0.3s ease; /* 为 el-aside 添加宽度过渡效果 */
  overflow: hidden; /* 防止折叠时内部内容溢出或影响布局 */
}

.main-container {
  flex: 1;
}

/* 确保页头和页脚全宽 */
:deep(.el-header),
:deep(.el-footer) {
  padding: 0;
  width: 100%;
}

/* 移除默认的容器内边距 */
:deep(.el-main) {
  padding: 5px;
}

.user-home {
  padding: 5px;
}
.router-view-container {
  max-height: 80vh;
}
</style>
