<template>
  <aside class="w-60 bg-base-100 border-r border-base-200">
    <div class="flex items-center p-4 outline-none select-none">
      <div class="w-12 h-12 rounded-full">
        <img src='@/assets/logo.svg' class="">
      </div>
      <div class="p-0 text-2xl font-bold text-center">OpenTeam</div>
    </div>


    <ul class="menu p-4 w-60 min-h-full bg-base-100 text-base-content">
      <li v-for="item in menuItems" :key="item.label">
        <template v-if="item.type === 'link'">
          <router-link :to="item.to" :class="{ 'active': isActive(item.to) }">
            <component :is="item.icon" class="w-4" />
            {{ item.label }}

          </router-link>
        </template>
        <template v-else-if="item.type === 'title'">
          <span class="menu-title">
            <span>{{ item.label }}</span>
          </span>
        </template>
        <template v-else-if="item.type === 'submenu'">
          <details :open="item.open">
            <summary>
              <component :is="item.icon" class="w-4" />
              {{ item.label }}
              <div v-if="item.badge" class="badge badge-sm">{{ item.badge }}</div>
            </summary>
            <ul>
              <li v-for="subItem in item.children" :key="subItem.label">
                <router-link :to="subItem.to" :class="{ 'active': isActive(subItem.to) }">
                  <component :is="subItem.icon" class="w-4" />
                  {{ subItem.label }}
                </router-link>
              </li>
            </ul>
          </details>
        </template>
      </li>
    </ul>
  </aside>
</template>

<script setup>
import {
  LayoutDashboardIcon,
  ShieldPlus,
  UsersRoundIcon,
  KeyRoundIcon,
  MessageSquareIcon,
  SettingsIcon,
  UserIcon,
  CommandIcon,
  BracesIcon,
} from 'lucide-vue-next'
import { ref, reactive, onMounted ,computed} from 'vue';
import { useRoute, useRouter } from 'vue-router';
import {routes,generateMenuItemsFromRoutes}from '@/utils/router_menu.js'
import { useAuthStore } from '@/stores/auth.js';

const authStore = useAuthStore();
const userrole = computed(() => {
  const user = authStore.user;
  return user ? user.role : 0;
});

const route = useRoute();
const router = useRouter();
// 判断当前路由是否激活菜单项
const isActive = (path) => {
  return route.path === path;
  // return router.currentRoute.value.fullPath.startsWith(path);
};

let menuItems = reactive([
  { type: 'link', label: 'Overview', to: '/dashboard/overview', icon: LayoutDashboardIcon },
  { type: 'title', label: 'Apps' },
  { type: 'link', label: 'Tokens', to: '/dashboard/tokens', icon: BracesIcon },
  {
    type: 'submenu', label: 'Manager', icon: CommandIcon, open: true, badge: 'Admin',
    children: [
      { label: 'Users', to: '/dashboard/manager/users', icon: UsersRoundIcon },
      { label: 'ApiKeys', to: '/dashboard/manager/keys', icon: KeyRoundIcon },
    ],
  },
  {
    type: 'submenu', label: 'Settings',  icon: SettingsIcon,open: false,
    children: [
      { label: 'Profile', to: '/dashboard/settings/profile', icon: UserIcon },
    ]
  },
]);
menuItems = computed(() => generateMenuItemsFromRoutes(routes, userrole.value));

</script>