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

// Components
import Footer from '../admin/_footer.vue'
import NavBtn from './_nav-btn.vue'

// 接收父组件传递的 themeCustomizerRef
const props = defineProps({
  themeCustomizerRef: {
    type: Object,
    default: null,
  },
})


const tititleName = import.meta.env.VITE_APP_NAME

const route = useRoute()
const router = useRouter()

// 打开主题定制器
const openThemeCustomizer = () => {
  if (props.themeCustomizerRef?.openDrawer) {
    props.themeCustomizerRef.openDrawer()
  }
}

// 左侧导航菜单配置（使用统一的菜单数据）
const sideNavMenus = ref(importedNavMenus)

// 当前激活的菜单
const activeMenuItem = ref(0)

// 根据路由更新激活菜单
const updateActiveMenu = () => {
  const currentPath = route.path

  // 使用路径前缀匹配，支持详情页等子路由
  const index = sideNavMenus.value.findIndex(menu => menu.to && currentPath.startsWith(menu.to))

  if (index !== -1) {
    activeMenuItem.value = index
  }
}

// 监听路由变化
watch(() => route.path, updateActiveMenu, { immediate: true })

// 判断菜单是否激活
const isMenuActive = index => {
  return index === activeMenuItem.value
}

// 处理菜单点击
const handleMenuClick = (index, path) => {
  activeMenuItem.value = index
  router.push(path)
}


</script>

<template>
  <v-layout class="top-side-layout-wrapper">
    <!-- 左侧导航栏 -->
    <v-navigation-drawer permanent class="side-nav-drawer" width="64" v-if="sideNavMenus && sideNavMenus.length > 0">
      <div class="side-nav-content">
        <div v-for="(menu, index) in sideNavMenus" :key="index" class="side-nav-item"
          :class="{ 'side-nav-item--active': isMenuActive(index) }" @click="handleMenuClick(index, menu.to)">
          <v-icon :icon="menu.icon" size="24" class="side-nav-icon" />
          <span class="side-nav-text">{{ menu.title }}</span>
        </div>
      </div>
    </v-navigation-drawer>

    <!-- 顶部导航栏 -->
    <v-app-bar elevation="0" height="64" class="top-nav-bar">
      <v-container fluid class="px-6">
        <div class="d-flex align-center">
          <!-- Logo 和品牌名 -->
          <RouterLink to="/kudas/mban" class="app-logo d-flex align-center text-decoration-none">
            <v-img class="logo-icon" :src="logo" alt="Logo" />
            <div class="logo-title mr-2 d-inline-block logo-title-container">
              <p class="text-body-1 font-weight-bold mb-0 ml-2">
                {{ tititleName }}
              </p>
              <span class="font-weight-bold" style="font-size: 10px;margin-left: 9px;">Smart Disability Service Management Platform</span>
            </div>
            
          </RouterLink>

          <v-spacer />

          <!-- 右侧工具栏 -->
          <NavBtn 
            :theme-customizer-ref="props.themeCustomizerRef"
            @toggle-mobile-drawer="() => {}"
          />
        </div>
      </v-container>
    </v-app-bar>

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

    <!-- 页脚 -->
    <Footer />
  </v-layout>
</template>

<style lang="scss" scoped>
.top-side-layout-wrapper {
  min-height: 100vh;
  background-color: rgb(var(--v-theme-background));
}

// 顶部导航栏
.top-nav-bar {
  position: fixed !important;
  top: 0;
  left: 0 !important;
  right: 0;
  z-index: 1000;
  /* 确保在其他元素之上 */
  width: 100% !important;
  box-shadow: 0 4px 8px -4px rgba(var(--v-shadow-key-umbra-color), 42%) !important;

  background-color: rgb(var(--v-theme-surface)) !important;
  border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));

  :deep(.v-toolbar__content) {
    padding-inline: 0;
  }
}

// Logo 样式
.app-logo {
  display: flex;
  align-items: center;
  text-decoration: none;

  .logo-icon {
    inline-size: 32px;
    block-size: 32px;
    display: flex;
    align-items: center;

    :deep(svg) {
      inline-size: 100%;
      block-size: 100%;
    }
  }

  .logo-title {
    color: rgb(var(--v-theme-primary));
    letter-spacing: 0.5px;
  }
}

// 左侧导航栏
.side-nav-drawer {
  position: fixed !important;
  margin-top: 67px;
  border-right: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
  background-color: rgb(var(--v-theme-surface));

  :deep(.v-navigation-drawer__content) {
    overflow-y: auto;
  }
}

.side-nav-content {
  height: 100%;
  padding: 16px 0;
}

.side-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  padding: 8px 8px 8px 4px;
  margin: 4px 4px 4px 0;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: transparent;

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

    .side-nav-icon {
      color: rgb(var(--v-theme-primary));
      transform: scale(1.1);
    }

    .side-nav-text {
      color: rgb(var(--v-theme-primary));
    }
  }

  &--active {
    background: linear-gradient(135deg, rgb(var(--v-theme-primary)) 0%, #7c3aed 100%);
    box-shadow: 0 4px 12px rgba(var(--v-theme-primary), 0.3);

    .side-nav-icon {
      color: #ffffff !important;
    }

    .side-nav-text {
      color: #ffffff !important;
      font-weight: 600;
    }

    &:hover {
      background: linear-gradient(135deg, rgb(var(--v-theme-primary)) 0%, #7c3aed 100%);
      box-shadow: 0 6px 16px rgba(var(--v-theme-primary), 0.4);

      .side-nav-icon {
        color: #ffffff !important;
      }

      .side-nav-text {
        color: #ffffff !important;
      }
    }
  }
}

.side-nav-icon {
  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
  transition: all 0.3s ease;
}

.side-nav-text {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
  text-align: center;
  line-height: 1.2;
  transition: all 0.3s ease;
  white-space: nowrap;
}

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

// 暗黑模式优化
.v-theme--dark {
  .side-nav-drawer {
    border-right-color: rgba(var(--v-border-color), 0.2);
  }
}

.business-type-select {
  margin-left: 8px;
  :deep(.v-field__input) {
    // min-height: 32px;
    padding-bottom: 6px;
    padding-left: 12px;
    padding-right: 0;
    color: rgb(var(--v-theme-primary));
  }
}


.logo-title-container {
  line-height: 1.2;  // 减少行高
  
  p {
    margin-bottom: 0.1rem !important;  // 减少段落底部间距
  }
  
  span {
    display: block;
    margin-top: 0.1rem;  // 减少顶部间距
  }
}
</style>