<!-- layout/components/Sidebar/index.vue -->
<template>
  <div class="sidebar-container" :class="{ collapsed: isCollapse }">
    <el-menu
      :default-active="activeMenu"
      :collapse="isCollapse"
      background-color="#3c68cb"
      text-color="#ffffff"
      active-text-color="#ffffff"
      :collapse-transition="false"
      unique-opened
      class="sidebar-menu"
    >
      <template v-for="item in menuList" :key="item.path">
        <!-- 有子菜单的项 -->
        <el-sub-menu
          v-if="item.children && item.children.length > 0"
          :index="getFullPath(item.path)"
        >
          <template #title>
            <svg-icon v-if="item.meta?.icon" :icon-class="item.meta.icon" />
            <span>{{ item.meta?.title }}</span>
          </template>
          <!-- 二级菜单 -->
          <template v-for="child in item.children" :key="child.path">
            <el-sub-menu
              v-if="child.children && child.children.length > 0"
              :index="getFullPath(child.path, item.path)"
            >
              <template #title>
                <svg-icon
                  v-if="child.meta?.icon"
                  :icon-class="child.meta.icon"
                />
                <span>{{ child.meta?.title }}</span>
              </template>
              <!-- 三级菜单 -->
              <el-menu-item
                v-for="subChild in child.children"
                :key="subChild.path"
                :index="getFullPath(subChild.path, child.path, item.path)"
                @click="handleMenuClick(subChild, child, item)"
              >
                <svg-icon
                  v-if="subChild.meta?.icon"
                  :icon-class="subChild.meta.icon"
                />
                <span>{{ subChild.meta?.title }}</span>
              </el-menu-item>
            </el-sub-menu>
            <!-- 二级菜单（无子菜单） -->
            <el-menu-item
              v-else
              :index="getFullPath(child.path, item.path)"
              @click="handleMenuClick(child, item)"
            >
              <svg-icon v-if="child.meta?.icon" :icon-class="child.meta.icon" />
              <span>{{ child.meta?.title }}</span>
            </el-menu-item>
          </template>
        </el-sub-menu>

        <!-- 没有子菜单的一级菜单项 -->
        <el-menu-item
          v-else
          :index="getFullPath(item.path)"
          @click="handleMenuClick(item)"
        >
          <svg-icon v-if="item.meta?.icon" :icon-class="item.meta.icon" />
          <span>{{ item.meta?.title }}</span>
        </el-menu-item>
      </template>
    </el-menu>

    <div class="collapse-btn" @click="toggleCollapse">
      <span class="btn-text">{{ isCollapse ? "▶" : "◀" }}</span>
    </div>
  </div>
</template>

<script>
import { computed, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import useAppStore from "@/store/modules/app";
import usePermissionStore from "@/store/modules/permission";

export default {
  name: "Sidebar",
  setup() {
    const route = useRoute();
    const router = useRouter();
    const appStore = useAppStore();
    const permissionStore = usePermissionStore();

    const isCollapse = computed(() => appStore.sidebar.isCollapse);

    const activeMenu = computed(() => route.path);

    const menuList = computed(() => {
      const routes = permissionStore.sidebarRouters || [];
      const result = [];
      for (const item of routes) {
        if (item.hidden) continue;
        if (item.meta?.title) {
          const filtered = { ...item };
          if (filtered.children) {
            filtered.children = filtered.children.filter(c => !c.hidden);
          }
          result.push(filtered);
        } else if (item.children) {
          const visible = item.children.filter(c => !c.hidden && c.meta?.title);
          for (const child of visible) {
            result.push({
              ...child,
              path: child.path.startsWith('/') ? child.path : (item.path + '/' + child.path),
            });
          }
        }
      }
      return result;
    });

    const getFullPath = (path, parentPath, grandParentPath) => {
      if (path.startsWith("/")) return path;

      let parts = [];
      if (grandParentPath) parts.push(grandParentPath);
      if (parentPath) parts.push(parentPath);
      parts.push(path);

      const joined = parts.join("/");
      return joined.startsWith("/") ? joined : "/" + joined;
    };

    const handleMenuClick = (item, parentItem, grandParentItem) => {
      const path = getFullPath(
        item.path,
        parentItem?.path,
        grandParentItem?.path,
      );
      router.push(path);
    };

    const toggleCollapse = () => {
      appStore.sidebar.isCollapse = !appStore.sidebar.isCollapse;
    };

    return {
      menuList,
      isCollapse,
      activeMenu,
      getFullPath,
      handleMenuClick,
      toggleCollapse,
    };
  },
};
</script>

<style scoped>
.sidebar-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #3c68cb;
  border-right: 1px solid #3459b8;
}

.sidebar-menu {
  flex: 1;
  border: none;
  overflow-y: auto;
  overflow-x: hidden;
}

:deep(.el-menu) {
  border-right: none;
  background-color: #3c68cb;
}

:deep(.el-sub-menu__title) {
  color: #ffffff;
  background-color: #3c68cb;
}

:deep(.el-sub-menu__title .svg-icon) {
  margin-right: 10px;
}

:deep(.el-sub-menu__title:hover) {
  background-color: #3459b8 !important;
  color: #ffffff !important;
}

:deep(.el-menu-item) {
  color: #ffffff;
  background-color: #3c68cb;
}

:deep(.el-menu-item .svg-icon) {
  margin-right: 10px;
}

:deep(.el-menu-item:hover) {
  background-color: #3459b8 !important;
  color: #ffffff !important;
}

:deep(.el-menu-item.is-active) {
  background-color: #2d4fa3 !important;
  color: #ffffff !important;
}

.sidebar-container.collapsed :deep(.el-sub-menu__title span) {
  display: none;
}

.sidebar-container.collapsed :deep(.el-menu-item span) {
  display: none;
}

.collapse-btn {
  height: 44px;
  line-height: 44px;
  text-align: center;
  color: #ffffff;
  cursor: pointer;
  border-top: 1px solid #3459b8;
  background-color: #3c68cb;
}

.collapse-btn:hover {
  background-color: #3459b8;
  color: #ffffff;
}

.btn-text {
  font-size: 16px;
}
</style>
