<script setup>
import { ref, computed, watch } from 'vue'
import { useRoute } from 'vue-router'
import logo from '@/assets/icon/logo.svg'
import { navMenus as importedNavMenus } from './_nav-menus.js'
import Footer from '../admin/_footer.vue'
import NavBtn from './_nav-btn.vue'

const props = defineProps({
  themeCustomizerRef: { type: Object, default: null }
})

const tititleName = "杭州数智残联-协同端"
const route = useRoute()
const navMenus = ref(importedNavMenus)
const mobileDrawer = ref(false)
const activeMenuIndex = ref(0)
const menuOpenStates = ref({})
const recentlyClosedMenus = ref({})

const isMenuActive = computed(() => index => index === activeMenuIndex.value)

const updateActiveMenu = () => {
  const currentPath = route.path
  for (let i = 0; i < navMenus.value.length; i++) {
    const menu = navMenus.value[i]
    if (menu.children) {
      for (const child of menu.children) {
        if (child.to && currentPath.startsWith(child.to)) {
          activeMenuIndex.value = i
          return
        }
      }
    }
    if (menu.to && currentPath.startsWith(menu.to)) {
      activeMenuIndex.value = i
      return
    }
  }
}

const handleMenuClick = index => {
  activeMenuIndex.value = index
  menuOpenStates.value[index] = false
  recentlyClosedMenus.value[index] = true
  setTimeout(() => { recentlyClosedMenus.value[index] = false }, 300)
}

const toggleMobileDrawer = () => {
  mobileDrawer.value = !mobileDrawer.value
}

watch(() => route.path, () => {
  updateActiveMenu()
  menuOpenStates.value = {}
}, { immediate: true })
</script>

<template>
  <v-layout>
    <!-- 顶部一体化头部 -->
    <v-app-bar elevation="0" height="180" class="header-bar px-4">
      <v-container class="pa-0 d-flex flex-column h-100 py-3">
        <!-- 第一行：Logo + 右侧工具按钮 -->
        <div class="d-flex align-center w-100 mb-2">
          <RouterLink to="/" class="app-logo d-flex align-center text-decoration-none">
            <v-img class="logo-icon" :src="logo" alt="Logo" />
            <div class="logo-title-wrap mr-2 d-inline-block">
              <p class="text-body-1 font-weight-bold mb-0 ml-2 text-white">{{ tititleName }}</p>
              <span class="ml-2 text-white" style="font-size: 10px; opacity: 0.8;">Intelligent Management Platform</span>
            </div>
          </RouterLink>
          <v-spacer />
          <NavBtn :theme-customizer-ref="props.themeCustomizerRef" @toggle-mobile-drawer="toggleMobileDrawer" />
        </div>

        <!-- 第二行：导航菜单 -->
        <div class="nav-row d-flex align-center mt-10">
          <template v-for="(menu, index) in navMenus" :key="index">
            <v-menu v-if="menu.children" v-model="menuOpenStates[index]" :close-on-content-click="true"
              offset="12" transition="slide-y-transition" open-on-hover>
              <template #activator="{ props }">
                <v-btn v-bind="props" variant="text" class="nav-menu-btn px-3"
                  :class="{ 'nav-menu-btn--active': isMenuActive(index) }" height="36"
                  @mouseenter="!recentlyClosedMenus[index] && (menuOpenStates[index] = true)"
                  @mouseleave="menuOpenStates[index] = false">
                  <span>{{ menu.title }}</span>
                  <v-badge v-if="menu.badge" :content="menu.badge" color="error" inline class="ms-1" />
                  <v-icon icon="ri-arrow-down-s-line" size="16" />
                </v-btn>
              </template>
              <v-list class="nav-dropdown-menu" min-width="220"
                @mouseenter="menuOpenStates[index] = true"
                @mouseleave="menuOpenStates[index] = false">
                <v-list-item v-for="(child, childIndex) in menu.children" :key="childIndex"
                  :to="child.to" :href="child.href" :target="child.target"
                  class="nav-dropdown-item" @click="handleMenuClick(index)">
                  <template #prepend>
                    <v-icon :icon="child.icon" size="20" />
                  </template>
                  <v-list-item-title>{{ child.title }}</v-list-item-title>
                </v-list-item>
              </v-list>
            </v-menu>

            <v-btn v-else :to="menu.to" variant="text" class="nav-menu-btn px-3"
              :class="{ 'nav-menu-btn--active': isMenuActive(index) }" height="36"
              @click="handleMenuClick(index)">
              <span>{{ menu.title }}</span>
            </v-btn>
          </template>
        </div>

      </v-container>
    </v-app-bar>

    <!-- 主要内容区域 -->
    <v-main class="main-content">
      <v-container class="pa-0" style="height: 100%;">
        <slot />
      </v-container>
    </v-main>

    <!-- 移动端下拉导航 -->
    <transition name="mobile-nav">
      <div v-if="mobileDrawer" class="mobile-nav-overlay" @click="mobileDrawer = false">
        <div class="mobile-nav-panel" @click.stop>
          <v-list class="pa-0">
            <template v-for="(menu, index) in navMenus" :key="index">
              <v-list-group v-if="menu.children">
                <template #activator="{ props }">
                  <v-list-item v-bind="props" class="drawer-item"
                    :class="{ 'drawer-item--active': isMenuActive(index) }">
                    <v-list-item-title>{{ menu.title }}</v-list-item-title>
                  </v-list-item>
                </template>
                <v-list-item v-for="(child, childIndex) in menu.children" :key="childIndex"
                  :to="child.to" :href="child.href" :target="child.target"
                  class="drawer-item drawer-child-item"
                  @click="mobileDrawer = false">
                  <v-list-item-title>{{ child.title }}</v-list-item-title>
                </v-list-item>
              </v-list-group>

              <v-list-item v-else :to="menu.to" class="drawer-item"
                :class="{ 'drawer-item--active': isMenuActive(index) }"
                @click="handleMenuClick(index); mobileDrawer = false">
                <v-list-item-title>{{ menu.title }}</v-list-item-title>
              </v-list-item>
              <v-divider />
            </template>
          </v-list>
        </div>
      </div>
    </transition>

    <Footer />
  </v-layout>
</template>

<style lang="scss" scoped>

/* 头部一体化背景 */
.header-bar {
  // background: linear-gradient(135deg, #1565c0 0%, #42a5f5 50%, #90caf9 100%) !important;
  height: 180px;
  background: url('@/assets/img/banner-wit.png') no-repeat center center;
  background-size: cover;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 50%, rgba(100, 181, 246, 0.2) 0%, transparent 60%);
    pointer-events: none;
  }
}


/* Logo */
.app-logo {
  .logo-icon {
    inline-size: 32px;
    block-size: 32px;
  }

  .logo-title-wrap {
    line-height: 1.2;

    p { margin-bottom: 0.1rem !important; }
    span { display: block; margin-top: 0.1rem; }
  }
}

/* 导航菜单行 */
.nav-row {
  gap: 0.25rem;

  .nav-menu-btn {
    font-size: 1.0rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    background: transparent !important;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s ease;

    :deep(.v-btn__content),
    :deep(.v-icon),
    :deep(span) {
      // color: rgba(255, 255, 255, 1);
      color: #3d1c00;
    }

    :deep(.v-btn__content) {
      gap: 0.4rem;
      display: flex;
      align-items: center;
    }

    :deep(span) { line-height: 1; }

    :deep(.v-btn__overlay) { opacity: 0 !important; }

    &:hover {
      border-bottom-color: rgba(var(--v-theme-primary), 0.6);

      :deep(.v-btn__content),
      :deep(.v-icon),
      :deep(span) {
        color: rgb(var(--v-theme-primary));
      }
    }

    &.nav-menu-btn--active {
      border-bottom-color: rgb(var(--v-theme-primary));

      :deep(.v-btn__content),
      :deep(.v-icon),
      :deep(span) {
        color: rgb(var(--v-theme-primary)) !important;
        font-weight: 700;
      }
    }
  }
}

/* 下拉菜单 */
.nav-dropdown-menu {
  border-radius: 10px;
  padding-block: 0.5rem;
  box-shadow: 0 4px 20px rgba(var(--v-shadow-key-umbra-opacity), 0.15);
  background-color: rgb(var(--v-theme-surface));

  .nav-dropdown-item {
    border-radius: 8px;
    margin-inline: 0.5rem;
    margin-block: 0.25rem;
    padding-inline: 1rem;
    min-block-size: 44px;
    transition: all 0.2s ease;

    &:hover {
      background-color: rgba(var(--v-theme-primary), 0.08);

      :deep(.v-list-item-title),
      :deep(.v-icon) {
        color: rgb(var(--v-theme-primary));
      }
    }

    :deep(.v-list-item-title) {
      font-size: 0.9375rem;
      font-weight: 500;
      transition: color 0.2s ease;
    }
  }
}

/* 主内容区域 */
.main-content {
  background-color: rgb(var(--v-theme-background));
  min-height: calc(100vh - 260px);
}

/* 移动端下拉导航 */
.mobile-nav-overlay {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1100;
}

.mobile-nav-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);

  :deep(.v-list) {
    background: #fff !important;

    .v-list-item {
      border-radius: 0;
      margin-block: 0;
      min-height: 52px;
      padding-inline: 20px;

      /* 禁用 Vuetify 内置 hover overlay */
      .v-list-item__overlay { display: none !important; }

      .v-list-item-title {
        font-size: 0.9375rem;
        color: #222 !important;
        transition: color 0.15s ease;
      }

      &:hover .v-list-item-title { color: #1565c0 !important; }

      &.v-list-item--active,
      &.drawer-item--active {
        background: transparent !important;
        .v-list-item-title { color: #1565c0 !important; font-weight: 600; }
      }
    }

    .drawer-child-item {
      padding-inline-start: 36px !important;
      .v-list-item-title { font-size: 0.875rem; color: #444 !important; }
      &:hover .v-list-item-title { color: #1565c0 !important; }
    }
  }
}

/* 下拉动画 */
.mobile-nav-enter-active,
.mobile-nav-leave-active {
  transition: opacity 0.2s ease;
  .mobile-nav-panel { transition: transform 0.25s ease; }
}
.mobile-nav-enter-from,
.mobile-nav-leave-to {
  opacity: 0;
  .mobile-nav-panel { transform: translateY(-8px); }
}

/* 响应式 */
@media (max-width: 800px) {
  .nav-row { display: none !important; }
}

@media (max-width: 600px) {
  .header-bar {
    :deep(.v-container) { padding-inline: 1rem; }
  }
}
</style>
