<template>
  <v-navigation-drawer
    :model-value="modelValue"
    @update:model-value="emit('update:modelValue', $event)"
    app
    width="250"
    :mobile-breakpoint="960"
    :temporary="!lgAndUp"
    :scrim="true"
  >
    <v-list-item :title="$t('navigation.welcome.title')" :subtitle="$t('navigation.welcome.subtitle')"></v-list-item>
    <v-divider></v-divider>

    <v-list v-model:opened="opened" nav>
      <template v-for="item in filteredMenu" :key="item.path || item.nameKey">
        <!-- 分组（有 children）：点击父项仅用于展开，不路由 -->
        <v-list-group
          v-if="item.children && item.children.length"
          :value="item.path"
          :prepend-icon="item.mdiIcon"
          slim
        >
          <template #activator="{ props }">
            <v-list-item
              v-bind="props"
              :ripple="true"
              :disabled="false"
              nav
              density="comfortable"
            >
              <v-list-item-title class="text-body-1">{{ $t(item.nameKey) }}</v-list-item-title>
            </v-list-item>
          </template>

          <v-list-item
            v-for="child in item.children"
            :key="child.path || child.nameKey"
            :prepend-icon="child.mdiIcon"
            :to="child.hasRouter ? child.path : undefined"
            :ripple="child.hasRouter"
            :disabled="!child.hasRouter"
            nav
            density="compact"
          >
            <v-list-item-title class="text-body-1">{{ $t(child.nameKey) }}</v-list-item-title>
          </v-list-item>
        </v-list-group>

        <!-- 非分组（无 children） -->
        <v-list-item
          v-else
          :prepend-icon="item.mdiIcon"
          :to="item.hasRouter ? item.path : undefined"
          :ripple="item.hasRouter"
          :disabled="false"
          @click="!item.hasRouter ? noop() : undefined"
          nav
          density="comfortable"
        >
          <v-list-item-title class="text-body-1">{{ $t(item.nameKey) }}</v-list-item-title>
        </v-list-item>
      </template>
    </v-list>
  </v-navigation-drawer>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useDisplay } from 'vuetify'
import { GLOBAL_MENU_ITEMS } from './constants/menuItems'

// 使用i18n的全局实例
useI18n()

defineProps({
  modelValue: Boolean
})
const emit = defineEmits(['update:modelValue'])

const { lgAndUp } = useDisplay()

const route = useRoute()

// 预留权限/可见性过滤钩子（当前直接返回所有项）
const filteredMenu = computed(() => {
  // TODO: 可根据角色/权限在此过滤 GLOBAL_MENU_ITEMS
  return GLOBAL_MENU_ITEMS
})

// 控制 v-list-group 展开
const opened = ref([])

// 初始化和根据当前路由自动展开相关分组
const ensureOpenedByRoute = (currentPath) => {
  const groupsToOpen = []
  for (const item of filteredMenu.value) {
    if (item && item.children && item.children.length) {
      const hit = item.children.some(child => !!child.path && currentPath.startsWith(child.path))
      if (hit && item.path) {
        groupsToOpen.push(item.path)
      }
    }
  }
  opened.value = groupsToOpen
}

onMounted(() => {
  ensureOpenedByRoute(route.path)
})

watch(() => route.path, (p) => {
  ensureOpenedByRoute(p)
})

// 无操作占位（用于非路由点击）
const noop = () => {}
</script>

<style scoped>
/* 使用Vuetify的类来确保一致的外观 */
.v-list-group--activator .v-list-item {
  /* 确保分组标题与普通列表项有相同的密度设置 */
  --v-list-item-density: -1;
}
</style>
