<script setup lang="ts">
import {
  Binary,
  Code2,
  Crown,
  Image,
  LayoutGrid,
  Lightbulb,
  Maximize,
  User,
  Workflow,
} from 'lucide-vue-next'

const menuStore = useMenuStore()

// 路径到图标的映射
const iconMap: any = {
  '/model-square': LayoutGrid,
  '/works-inspire': Lightbulb,
  '/workspace': Lightbulb,
  '/web-ui': Image,
  '/comfy-ui': Workflow,
  '/training-lora': Binary,
  '/high-availability': Maximize,
  '/api-platform': Code2,
  '/creator-center': Code2,
  '/personal-center': User,
  '/member-center': Crown,
}
const route = useRoute()

// 监听路由变化
watch(
  () => route.path,
  (path) => {
    menuStore.setActiveMenu(path)
  },
  { immediate: true }, // 这样一进入页面就会执行一次
)

// 更新菜单项中的图标
menuStore.menuItems = menuStore.menuItems.map(item => ({
  ...item,
  LucideIcon: iconMap[item.path], // 添加 Lucide 图标组件
}))

function handleSide(event: Event, path: string) {
  if (path === '/member-center') {
    event.preventDefault() // 阻止默认行为
    event.stopPropagation() // 阻止事件冒泡
    const baseUrl = window.location.origin
    window.open(`${baseUrl}/member-center`, '_blank', 'noopener,noreferrer')
    // 确保当前路由不变
    // nextTick(() => {
    //   debugger
    //   if (route.path !== window.location.pathname) {
    //     navigateTo(route.path, { replace: true })
    //   }
    // })
  }
  else {
    menuStore.setActiveMenu(path)
  }
}
</script>

<template>
  <div class="flex h-screen flex-col bg-white dark:bg-dark-800">
    <!-- Header -->
    <Header />

    <!-- Main Content -->
    <div class="flex flex-1 overflow-hidden">
      <!-- Sidebar -->
      <nav class="w-[200px] border-r border-gray-100 bg-gray-50/50 py-2 dark:border-dark-700 dark:bg-dark-800/50">
        <div class="space-y-1 px-2">
          <NuxtLink
            v-for="item in menuStore.menuItems"
            :key="item.path"
            :to="item.path"
            class="flex items-center gap-3 rounded-lg px-4 py-2.5 text-[15px] font-medium no-underline transition-colors"
            :class="[
              menuStore.activeMenu === item.path
                ? 'bg-blue-500/8 text-blue-600 dark:bg-blue-500/10 dark:text-blue-400'
                : 'text-gray-600 hover:bg-gray-500/5 dark:text-gray-300 dark:hover:bg-dark-700/50',
            ]"
            @click="(event: Event) => handleSide(event, item.path)"
          >
            <!-- 只显示 Lucide 图标 -->
            <component
              :is="item.LucideIcon"
              class="h-[14px] w-[14px]"
              :class="menuStore.activeMenu === item.path
                ? 'text-blue-600 dark:text-blue-400'
                : 'text-gray-500 dark:text-gray-400'"
            />

            <span>{{ item.label }}</span>
          </NuxtLink>
        </div>
      </nav>

      <!-- Page Content -->
      <main class="flex-1 overflow-auto">
        <slot />
      </main>

      <!-- 登录框组件 -->
    </div>
  </div>
</template>

<style>
:root {
  --primary: rgb(59, 130, 246);
  --primary-hover: rgb(37, 99, 235);
}

::selection {
  background: var(--primary);
  color: white;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #e5e7eb;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #d1d5db;
}

.dark ::-webkit-scrollbar-thumb {
  background: #374151;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: #4b5563;
}
</style>
