<template>
  <div class="header-nav-container" :class="{ 'nav-scrolled': isScrolled }" @scroll="handleScroll">
    <div class="header-nav flex-row justify-between">
      <!-- Logo -->
      <router-link to="/" class="logo-link">
        <div></div>
        <img class="logo" :src="logoUrl" alt="自愈舱官网"/>
      </router-link>

      <!-- 导航菜单 -->
      <nav class="nav-menu flex-row">
        <router-link to="/" class="nav-link" :class="{ 'active': currentRoute === '/' }">
          首页
        </router-link>
        <router-link to="/brand" class="nav-link" :class="{ 'active': currentRoute === '/brand' }">
          品牌介绍
        </router-link>

        <!-- 自愈舱下拉菜单 -->
        <div class="dropdown-container" @mouseenter="showDropdown = true" @mouseleave="showDropdown = false">
          <div class="nav-link dropdown-trigger" :class="{ 'active': isServeRouteActive }">
            自愈舱
          </div>
          <div class="dropdown-menu" :class="{ 'show': showDropdown }">
            <router-link to="/Product" class="dropdown-item" @click="hideDropdown">产品介绍</router-link>
            <router-link to="/case" class="dropdown-item" @click="hideDropdown">用户案例</router-link>
            <router-link to="/serve" class="dropdown-item" @click="hideDropdown">增值服务</router-link>
          </div>
        </div>

        <router-link to="/cooperation" class="nav-link" :class="{ 'active': currentRoute === '/cooperation' }">
          合作优势
        </router-link>
        <router-link to="/certification" class="nav-link"
                     :class="{ 'active': currentRoute === '/certification' }">
          企业资质
        </router-link>
        <router-link to="/contact-us" class="nav-link" :class="{ 'active': currentRoute === '/contact-us' }">
          联系我们
        </router-link>
      </nav>
    </div>
  </div>
</template>

<script>
import whiteLogo from '@/assets/common/whiteLogo.png'
import colorLogo from '@/assets/common/Logo.png'

export default {
  name: 'HeaderNav',
  data() {
    return {
      isScrolled: false,
      currentRoute: '/',
      showDropdown: false,
      logoUrl: whiteLogo,
      whiteLogo: whiteLogo,
      colorLogo: colorLogo
    }
  },

  computed: {
    // 检查是否在自愈舱相关路由
    isServeRouteActive() {
      const serveRoutes = ['/serve', '/case', '/agent', '/operator', '/lease']
      return serveRoutes.includes(this.currentRoute)
    }
  },

  mounted() {
    // 监听窗口滚动事件
    window.addEventListener('scroll', this.handleScroll)
    // 初始化当前路由
    this.currentRoute = this.$route.path

    // 监听路由变化
    this.$watch('$route', (to) => {
      this.currentRoute = to.path
    })
  },

  beforeUnmount() {
    // 清理事件监听器
    window.removeEventListener('scroll', this.handleScroll)
  },

  methods: {
    // 处理滚动事件
    handleScroll() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop
      // 降低阈值，让白色背景更早出现
      this.isScrolled = scrollTop > 20

      // 根据滚动状态切换logo
      if (this.isScrolled) {
        this.logoUrl = this.colorLogo
      } else {
        this.logoUrl = this.whiteLogo
      }
    },

    // 隐藏下拉菜单
    hideDropdown() {
      this.showDropdown = false
    },
  }
}
</script>

<style scoped>
.header-nav-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: all 0.3s ease;
  /* 默认状态：完全透明，无背景，不占用布局空间 */
  background-color: transparent;
  /* 确保不占用布局空间 */
  pointer-events: auto;
}

.nav-scrolled {
  /* 滚动状态：显示白色半透明背景 */
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

.header-nav {
  width: 94.8vw;
  height: 4.95vw;
  margin: 0 auto;
  align-items: center;
  position: relative;
  /* 确保HeaderNav本身也是透明的 */
  background-color: transparent;
}

.logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.logo {
  width: 6vw;
  height: 4vw;
  margin: auto;
  object-fit: contain;
}

.nav-menu {
  flex: 1;
  gap: 2.5vw;
  list-style: none;
  margin-left: 4vw;
  padding: 0;
}

.nav-link {
  text-decoration: none;
  color: rgba(255, 255, 255, 1);
  font-size: 1.04vw;
  font-family: OPPOSans-M;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.3s ease;
  position: relative;
  /* 添加文字阴影增强在透明背景下的可见性 */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.nav-link:hover {
  color: rgba(0, 82, 217, 1);
}

.nav-link.active {
  color: rgba(0, 82, 217, 1);
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -0.5vw;
  left: 50%;
  transform: translateX(-50%);
  width: 1.5vw;
  height: 0.15vw;
  background-color: rgba(0, 82, 217, 1);
  border-radius: 0.075vw;
}

/* 滚动时的样式变化 */
.nav-scrolled .nav-link {
  color: rgba(51, 51, 51, 1);
  /* 在白色背景下移除文字阴影 */
  text-shadow: none;
}

.nav-scrolled .nav-link:hover,
.nav-scrolled .nav-link.active {
  color: rgba(0, 82, 217, 1);
}

/* 下拉菜单样式 */
.dropdown-container {
  position: relative;
  display: inline-block;
}

.dropdown-trigger {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.3vw;
}

.dropdown-arrow {
  font-size: 0.8vw;
  transition: transform 0.3s ease;
}

.dropdown-container:hover .dropdown-arrow {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 215%;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  border-top-right-radius: 0;
  border-top-left: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  min-width: 8vw;
  opacity: 0;
  visibility: hidden;
  padding: 10px 0;
  transform: translateX(-50%) translateY(-10px);
  transition: all 0.3s ease;
  z-index: 1001;
}

.dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.dropdown-item {
  display: block;
  padding: 0.8vw 1.5vw;
  color: rgba(51, 51, 51, 1);
  text-decoration: none;
  font-size: 0.9vw;
  font-family: OPPOSans-M;
  font-weight: 500;
  transition: all 0.3s ease;
  border-radius: 4px;
  margin: 0 0.5vw;
}

.dropdown-item:hover {
  background-color: rgba(0, 82, 217, 0.1);
  color: rgba(0, 82, 217, 1);
}

.dropdown-item.router-link-active {
  background-color: rgba(0, 82, 217, 0.1);
  color: rgba(0, 82, 217, 1);
}

/* 滚动时下拉菜单样式 */
.nav-scrolled .dropdown-menu {
  background-color: rgba(255, 255, 255, 0.98);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-nav {
    width: 100vw;
    height: 60px;
    padding: 0 15px;
  }

  .logo {
    width: 40px;
    height: 30px;
  }

  .nav-menu {
    gap: 15px;
    display: flex;
    /* 移动端显示导航菜单 */
  }

  .nav-link {
    font-size: 12px;
  }

  .dropdown-menu {
    min-width: 120px;
  }

  .dropdown-item {
    padding: 8px 12px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .header-nav {
    height: 50px;
    padding: 0 10px;
  }

  .logo {
    width: 35px;
    height: 25px;
  }

  .nav-menu {
    gap: 10px;
  }

  .nav-link {
    font-size: 12px;
  }
}
</style>