<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 searchText = 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="230" 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 px-4">
          <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 ml-2 d-inline-block">
              <p class="text-body-1 font-weight-bold mb-0 text-white">{{ tititleName }}</p>
              <span class="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="d-flex justify-center mt-2">
          <v-text-field
            v-model="searchText"
            class="search-bar"
            placeholder="请输入事项名称、政策名称或机构名称"
            variant="solo"
            density="compact"
            hide-details
            flat
            prepend-inner-icon="mdi-magnify"
          >
          </v-text-field>
        </div>

        <!-- 第三行：白色导航卡片 -->
        <div class="nav-card mt-2">
          <!-- 左侧：用户信息 -->
          <div class="user-info d-flex align-center">
            <v-avatar size="44" color="grey-lighten-3">
              <v-icon icon="mdi-account-outline" size="26" color="grey-darken-1" />
            </v-avatar>
            <div class="ml-3">
              <div class="user-login-text">登录账号</div>
              <div class="user-sub-text">登录后查看个性化<br>推荐服务</div>
            </div>
          </div>

          <v-divider vertical class="mx-4 my-3" style="height: 86px;" />

          <!-- 右侧：导航图标项 -->
          <div class="nav-icon-list">
            <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="8" transition="slide-y-transition" open-on-hover>
                <template #activator="{ props }">
                  <div v-bind="props" class="nav-icon-item" :class="{ 'nav-icon-item--active': isMenuActive(index) }"
                    @mouseenter="!recentlyClosedMenus[index] && (menuOpenStates[index] = true)"
                    @mouseleave="menuOpenStates[index] = false">
                    <div class="nav-icon-wrap">
                      <v-icon :icon="menu.icon || 'mdi-apps'" size="40" />
                    </div>
                    <span class="nav-icon-label">{{ menu.title }}</span>
                  </div>
                </template>
                <v-list class="nav-dropdown-menu" min-width="180"
                  @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="36" />
                    </template>
                    <v-list-item-title>{{ child.title }}</v-list-item-title>
                  </v-list-item>
                </v-list>
              </v-menu>

              <RouterLink v-else :to="menu.to" class="nav-icon-item"
                :class="{ 'nav-icon-item--active': isMenuActive(index) }"
                @click="handleMenuClick(index)">
                <div class="nav-icon-wrap">
                  <v-icon :icon="menu.icon || 'mdi-apps'" size="36" />
                </div>
                <span class="nav-icon-label">{{ menu.title }}</span>
              </RouterLink>
            </template>
          </div>
        </div>

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

    <!-- 主要内容区域 -->
    <v-main class="main-content">
      <v-container class="pa-0 px-4" 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 {
  height: 180px;
  background: url('@/assets/img/banner-aid.png') no-repeat center center;
  background-size: cover;
}

/* 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; }
  }
}

/* 搜索栏 */
.search-bar {
  width: 100%;
  max-width: 560px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.search-btn {
  letter-spacing: 0;
  font-size: 0.875rem;
}

/* 白色导航卡片 */
.nav-card {
  background: rgb(var(--v-theme-surface));
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 110px;
  flex-shrink: 0;
  margin: 0 16px;
  box-shadow: 0 2px 8px 0 rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-md-opacity)) !important;
}

/* 用户信息 */
.user-info {
  flex-shrink: 0;

  .user-login-text {
    font-size: 1rem;
    font-weight: 600;
    color: rgb(var(--v-theme-primary));
    line-height: 1.3;
  }
  .user-sub-text {
    padding-top: 4px;
    font-size: 0.75rem;
    color: rgba(var(--v-theme-on-surface), 0.5);
    line-height: 1.3;
  }
}

/* 导航图标列表 */
.nav-icon-list {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  overflow-x: auto;
}

.nav-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 14px;
  cursor: pointer;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s ease;

  &:hover {
    background: rgba(21, 101, 192, 0.06);
    .nav-icon-wrap { background: rgba(21, 101, 192, 0.15); }
    .nav-icon-label { color: #1565c0; }
  }

  &.nav-icon-item--active {
    .nav-icon-wrap {
      background: rgba(229, 57, 53, 0.12);
      .v-icon { color: #e53935; }
    }
    .nav-icon-label { color: #e53935; font-weight: 600; }
  }
}

.nav-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: rgba(21, 101, 192, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;

  :deep(.v-icon) {
    color: #1565c0;
    transition: color 0.15s ease;
  }
}

.nav-icon-label {
  font-size: 0.9rem;
  color: rgba(var(--v-theme-on-surface), 0.75);
  white-space: nowrap;
  line-height: 1;
  transition: color 0.15s ease;
  padding-top: 4px;
}

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

  .nav-dropdown-item {
    border-radius: 8px;
    margin-inline: 0.5rem;
    margin-block: 0.25rem;
    min-block-size: 40px;
    &:hover { background-color: rgba(var(--v-theme-primary), 0.08); }
  }
}

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

/* 移动端下拉导航 */
.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;
      .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-icon-list { display: none; }
  .nav-card { border-radius: 8px; }
}
</style>
