<template>
  <div class="basic-layout">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="header-left">
        <button class="sidebar-toggle" @click="toggleSidebar">
          <i class="icon-menu"></i>
        </button>

        <!-- 面包屑导航 -->
        <Breadcrumb :items="breadcrumbItems" />
      </div>

      <div class="header-right">
        <!-- 用户信息 -->
        <UserDropdown :user="userInfo" @logout="handleLogout" />
      </div>
    </header>
    <!-- 主内容区域 -->
    <div class="main-wrapper">
      <!-- 侧边栏 -->
      <aside class="sidebar" :class="{ collapsed: sidebarCollapsed }">
        <div class="sidebar-header">
          <div class="logo">
            <img src="@/assets/logo.png" alt="Logo" v-if="!sidebarCollapsed" />
            <span class="logo-text" v-if="!sidebarCollapsed">校园新闻</span>
          </div>
        </div>

        <!-- 菜单导航 -->
        <nav class="sidebar-nav">
          <MenuSidebar
            :menus="menuTree"
            :collapsed="sidebarCollapsed"
            @menu-click="handleMenuClick"
          />
        </nav>
      </aside>
      <!-- 页面内容 -->
      <main class="content">
        <router-view />
      </main>

      <!-- 页脚 -->
      <footer class="footer">
        <div class="footer-content">
          © 2025 校园新闻管理系统. All rights reserved.
        </div>
      </footer>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import type { SysMenu } from "@/types";
import { getMenuPath } from "@/utils/route-generator";
import { MenuSidebar, Breadcrumb, UserDropdown } from "@/components/base";

// 响应式状态
const sidebarCollapsed = ref(false);

// Composition API
const route = useRoute();
const router = useRouter();
const store = useStore();

// 计算属性
const menuTree = computed(() => store.getters["auth/menuTree"]);
const userInfo = computed(() => store.getters["auth/userInfo"]);

const breadcrumbItems = computed(() => {
  if (!route.meta?.menuId) return [];

  const menuPath = getMenuPath(menuTree.value, route.meta.menuId as string);
  return menuPath.map((menu) => ({
    title: menu.name || "",
    path: menu.url || "",
  }));
});

// 方法 - 使用 function 声明
function toggleSidebar() {
  sidebarCollapsed.value = !sidebarCollapsed.value;
  // 保存到本地存储
  localStorage.setItem("sidebarCollapsed", String(sidebarCollapsed.value));
}

function handleMenuClick(menu: SysMenu) {
  if (menu.url && menu.url !== route.path) {
    router.push(menu.url);
  }
}

function handleLogout() {
  store.dispatch("auth/logout");
}

// 监听路由变化，自动展开对应菜单
watch(
  () => route.path,
  () => {
    // 可以在这里实现菜单自动展开逻辑
  }
);

// 组件挂载时恢复侧边栏状态
onMounted(() => {
  const savedState = localStorage.getItem("sidebarCollapsed");
  if (savedState !== null) {
    sidebarCollapsed.value = savedState === "true";
  }
});
</script>

<style lang="scss" scoped>
.basic-layout {
  display: flex;
  height: 100vh;
  background-color: #f5f5f5;
}

.sidebar {
  width: 260px;
  background: #001529;
  transition: width 0.3s ease;
  flex-shrink: 0;

  &.collapsed {
    width: 80px;
  }
}

.sidebar-header {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  background: #002140;

  .logo {
    display: flex;
    align-items: center;
    color: white;

    img {
      width: 32px;
      height: 32px;
      margin-right: 12px;
    }

    .logo-text {
      font-size: 18px;
      font-weight: 600;
    }
  }
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
}

.main-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.header {
  height: 64px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  z-index: 10;
}

.header-left {
  display: flex;
  align-items: center;

  .sidebar-toggle {
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    margin-right: 16px;

    &:hover {
      background: #f5f5f5;
    }

    .icon-menu {
      font-size: 18px;
      color: #666;
    }
  }
}

.header-right {
  display: flex;
  align-items: center;
}

.content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  background: white;
  margin: 16px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.footer {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-top: 1px solid #e8e8e8;
  margin: 0 16px 16px 16px;
  border-radius: 0 0 4px 4px;

  .footer-content {
    color: #666;
    font-size: 14px;
  }
}

/* 图标字体类（这里使用简单的CSS，实际项目中可以使用图标库） */
.icon-menu::before {
  content: "☰";
}
</style>
