<!-- layout/index.vue -->
<template>
  <div
    class="app-wrapper"
    :style="{
      '--current-color': theme,
      '--current-color-light': theme + '1a',
      '--current-color-dark-bg': theme + '33',
    }"
  >
    <!-- 顶部一级菜单栏 -->
    <top-navbar
      v-if="!sidebar.hide"
      :active-menu="activeTopMenu"
      @menu-click="handleTopMenuClick"
      @setLayout="openSettings"
    />

    <!-- 下方区域：左右结构 -->
    <div class="main-layout">
      <!-- 左侧二三级菜单 -->
      <div class="sidebar-wrapper" :class="{ collapsed: isCollapse }">
        <sidebar v-if="!sidebar.hide" :top-menu-key="activeTopMenu" />
      </div>

      <!-- 右侧内容区域 -->
      <div class="content-wrapper">
        <app-main />
        <settings ref="settingRef" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, watch, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import TopNavbar from "./components/TopNavbar/index.vue";
import Sidebar from "./components/Sidebar/index.vue";
import { AppMain, Settings } from "./components";
import useAppStore from "@/store/modules/app";
import useSettingsStore from "@/store/modules/settings";
import usePermissionStore from "@/store/modules/permission";

const settingsStore = useSettingsStore();
const permissionStore = usePermissionStore();
const appStore = useAppStore();
const route = useRoute();
const router = useRouter();

// 首页路径
const HOME_PATH = "/index";

// 计算属性
const theme = computed(() => settingsStore.theme);
const sidebar = computed(() => appStore.sidebar);
const isCollapse = computed(() => appStore.sidebar.isCollapse);

// 当前选中的顶级菜单
const activeTopMenu = ref("");

// 获取当前选中的顶级菜单
const getCurrentTopMenu = () => {
  const currentPath = route.path;

  // 首页统一映射到业务根菜单，使侧边栏固定显示业务模块
  if (currentPath === HOME_PATH) {
    return "/slgc";
  }

  try {
    const routes = permissionStore.topbarRouters || [];
    const firstLevel = "/" + currentPath.split("/")[1];
    const matched = routes.find((r) => r.path === firstLevel);
    return matched?.path || "/slgc";
  } catch (error) {
    return "/slgc";
  }
};

// 处理顶级菜单点击
function handleTopMenuClick(menuPath) {
  activeTopMenu.value = menuPath;

  // 跳转到第一个子路由
  const routes = permissionStore.topbarRouters || [];
  const targetRoute = routes.find((r) => r.path === menuPath);
  if (targetRoute && targetRoute.children && targetRoute.children.length > 0) {
    const firstChild = targetRoute.children.find((child) => !child.hidden);
    if (firstChild) {
      let fullPath = firstChild.path;
      if (!fullPath.startsWith("/")) {
        fullPath = menuPath + "/" + fullPath;
      }
      router.push(fullPath);
    }
  }
}

// 打开设置面板
const settingRef = ref(null);
function openSettings() {
  if (settingRef.value) {
    settingRef.value.openSetting();
  }
}

// 监听路由变化，更新选中的顶级菜单
watch(
  () => route.path,
  () => {
    activeTopMenu.value = getCurrentTopMenu();
  },
  { immediate: true },
);

onMounted(() => {
  // 如果当前是根路径，跳转到首页
  if (route.path === "/") {
    router.push(HOME_PATH);
  }
  activeTopMenu.value = getCurrentTopMenu();
});
</script>

<style scoped>
.app-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.main-layout {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.sidebar-wrapper {
  width: 210px;
  transition: width 0.3s;
  flex-shrink: 0;
}

.sidebar-wrapper.collapsed {
  width: 64px;
}

.content-wrapper {
  flex: 1;
  overflow: auto;
  background: #f0f2f6;
}
</style>
