<template>
  <aside class="admin-sidebar admin-sidebar-v2" :class="layoutMode">
    <div class="admin-sidebar__head">
      <div class="admin-sidebar__logo">萧</div>
      <div class="admin-sidebar__brand-copy">
        <strong>萧康云医</strong>
        <span>Clinic SaaS Console</span>
      </div>
      <button class="admin-sidebar__close" type="button" @click="$emit('close-mobile')">
        <i class="fas fa-times"></i>
      </button>
    </div>

    <div class="admin-sidebar__workspace">
      <span>当前空间</span>
      <strong>官网运营后台</strong>
    </div>

    <nav class="admin-sidebar__nav" aria-label="后台菜单">
      <div v-if="loading" class="admin-menu-skeleton">
        <i></i><i></i><i></i><i></i>
      </div>
      <template v-else>
        <template v-for="item in menus" :key="item.id">
          <router-link v-if="!item.children?.length" :to="adminPath(item.path)" class="admin-nav-item-v2" @click="$emit('close-mobile')">
            <i :class="iconClass(item.icon)"></i>
            <span>{{ item.title }}</span>
          </router-link>
          <section v-else class="admin-nav-group-v2">
            <div class="admin-nav-title-v2">
              <i :class="iconClass(item.icon)"></i>
              <span>{{ item.title }}</span>
            </div>
            <router-link v-for="child in item.children" :key="child.id" :to="adminPath(child.path)" class="admin-nav-child-v2" @click="$emit('close-mobile')">
              <i :class="iconClass(child.icon)"></i>
              <span>{{ child.title }}</span>
              <small>{{ child.permission }}</small>
            </router-link>
          </section>
        </template>
      </template>
    </nav>
  </aside>
</template>

<script setup>
defineProps({
  menus: { type: Array, default: () => [] },
  layoutMode: { type: String, default: 'double' },
  loading: { type: Boolean, default: false }
})
defineEmits(['close-mobile'])

const icons = {
  dashboard: 'fas fa-chart-pie',
  global: 'fas fa-globe-asia',
  blocks: 'fas fa-layer-group',
  message: 'fas fa-message',
  wallet: 'fas fa-wallet',
  package: 'fas fa-box-open',
  orders: 'fas fa-receipt',
  setting: 'fas fa-gear',
  user: 'fas fa-user-shield',
  safety: 'fas fa-shield-halved',
  menu: 'fas fa-bars-staggered',
  image: 'fas fa-image',
  briefcase: 'fas fa-briefcase'
}

// 后端菜单 path 是后台内部路径，这里统一挂载到 /admin 分组下。
const adminPath = (path) => {
  if (!path || path === '/dashboard') return '/admin/dashboard'
  return `/admin${path}`
}

const iconClass = (icon) => icons[icon] || 'fas fa-circle-dot'
</script>
