<template>
  <header class="header">
    <div class="container">
      <div class="header-content">
        <!-- Logo -->
        <div class="logo">
          <router-link to="/" class="logo-link">
            <img src="/logo.png" alt="智慧校园" class="logo-img" />
            <!-- <span class="logo-text">智慧校园平台</span> -->
          </router-link>
        </div>

        <!-- 导航菜单 -->
        <nav class="nav" ref="navRef">
          <ul class="nav-list">
            <li class="nav-item">
              <router-link to="/" class="nav-link" :class="{ active: $route.path === '/' }"
                @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
                首页
              </router-link>
            </li>
            <li class="nav-item">
              <router-link to="/products" class="nav-link" :class="{ active: $route.path.startsWith('/products') }"
                @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
                产品中心
              </router-link>
            </li>
            <li class="nav-item">
              <router-link to="/cases" class="nav-link" :class="{ active: $route.path.startsWith('/cases') }"
                @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
                行业案例
              </router-link>
            </li>
            <li class="nav-item">
              <router-link to="/about" class="nav-link" :class="{ active: $route.path.startsWith('/about') }"
                @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
                企业介绍
              </router-link>
            </li>
            <li class="nav-item">
              <router-link to="/contact" class="nav-link" :class="{ active: $route.path.startsWith('/contact') }"
                @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
                联系我们
              </router-link>
            </li>
          </ul>
          <!-- 动态横线 -->
          <div class="nav-indicator" ref="indicatorRef"></div>
        </nav>

        <!-- 移动端菜单按钮 -->
        <div class="mobile-menu-btn" @click="toggleMobileMenu">
          <span class="hamburger" :class="{ active: mobileMenuOpen }"></span>
        </div>
      </div>

      <!-- 移动端菜单 -->
      <div class="mobile-menu" :class="{ open: mobileMenuOpen }">
        <ul class="mobile-nav-list">
          <li class="mobile-nav-item">
            <router-link to="/" class="mobile-nav-link" @click="closeMobileMenu">首页</router-link>
          </li>
          <li class="mobile-nav-item">
            <router-link to="/products" class="mobile-nav-link" @click="closeMobileMenu">产品中心</router-link>
          </li>
          <li class="mobile-nav-item">
            <router-link to="/cases" class="mobile-nav-link" @click="closeMobileMenu">行业案例</router-link>
          </li>
          <li class="mobile-nav-item">
            <router-link to="/about" class="mobile-nav-link" @click="closeMobileMenu">企业介绍</router-link>
          </li>
          <li class="mobile-nav-item">
            <router-link to="/contact" class="mobile-nav-link" @click="closeMobileMenu">联系我们</router-link>
          </li>
        </ul>
      </div>
    </div>
  </header>
</template>

<script>
import { ref, onMounted, nextTick } from 'vue'
import { useRoute } from 'vue-router'

export default {
  name: 'Header',
  setup() {
    const mobileMenuOpen = ref(false)
    const navRef = ref(null)
    const indicatorRef = ref(null)
    const route = useRoute()

    const toggleMobileMenu = () => {
      mobileMenuOpen.value = !mobileMenuOpen.value
    }

    const closeMobileMenu = () => {
      mobileMenuOpen.value = false
    }

    // 设置横线位置
    const setIndicatorPosition = (element) => {
      if (!indicatorRef.value || !element) return

      const rect = element.getBoundingClientRect()
      const navRect = navRef.value.getBoundingClientRect()

      // 计算相对于nav容器的位置
      const left = rect.left - navRect.left
      const width = rect.width * 0.6 // 横线宽度为文字宽度的60%
      const centerOffset = (rect.width - width) / 2 // 居中偏移

      indicatorRef.value.style.left = `${left + centerOffset}px`
      indicatorRef.value.style.width = `${width}px`
      indicatorRef.value.style.opacity = '1'
    }

    // 初始化横线位置到当前激活项
    const initIndicator = () => {
      nextTick(() => {
        const activeLink = navRef.value?.querySelector('.nav-link.active')
        if (activeLink) {
          setIndicatorPosition(activeLink)
        }
      })
    }

    // 鼠标进入导航项
    const handleMouseEnter = (event) => {
      setIndicatorPosition(event.target)
    }

    // 鼠标离开导航项，回到激活项
    const handleMouseLeave = () => {
      const activeLink = navRef.value?.querySelector('.nav-link.active')
      if (activeLink) {
        setIndicatorPosition(activeLink)
      } else {
        // 如果没有激活项，隐藏横线
        if (indicatorRef.value) {
          indicatorRef.value.style.opacity = '0'
        }
      }
    }

    onMounted(() => {
      initIndicator()
      // 监听路由变化，重新设置横线位置
      nextTick(() => {
        initIndicator()
      })
    })

    return {
      mobileMenuOpen,
      navRef,
      indicatorRef,
      toggleMobileMenu,
      closeMobileMenu,
      handleMouseEnter,
      handleMouseLeave
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: all 0.3s ease;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px;
}

.logo {
  .logo-link {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .logo-img {
    height: 30px;
    width: auto;
  }

  .logo-text {
    font-size: 20px;
    font-weight: 600;
    color: $text-primary;
  }
}

.nav {
  position: relative;

  .nav-list {
    display: flex;
    align-items: center;
    gap: 80px;
  }

  .nav-link {
    font-size: 26px;
    font-weight: 500;
    color: $text-primary;
    padding: 8px 0;
    position: relative;
    transition: color 0.3s ease;
    display: block;
    height: 100px;
    line-height: 100px;

    &:hover,
    &.active {
      color: $primary-color;
    }
  }

  .nav-indicator {
    position: absolute;
    bottom: 0;
    height: 2px;
    background: $primary-color;
    border-radius: 1px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    pointer-events: none;
  }
}

.mobile-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  width: 30px;
  height: 30px;
  cursor: pointer;

  .hamburger {
    width: 100%;
    height: 2px;
    background: $text-primary;
    transition: all 0.3s ease;
    position: relative;

    &::before,
    &::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 2px;
      background: $text-primary;
      transition: all 0.3s ease;
    }

    &::before {
      top: -8px;
    }

    &::after {
      bottom: -8px;
    }

    &.active {
      background: transparent;

      &::before {
        top: 0;
        transform: rotate(45deg);
      }

      &::after {
        bottom: 0;
        transform: rotate(-45deg);
      }
    }
  }
}

.mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;

  &.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .mobile-nav-list {
    padding: 20px 0;
  }

  .mobile-nav-item {
    border-bottom: 1px solid $border-color;

    &:last-child {
      border-bottom: none;
    }
  }

  .mobile-nav-link {
    display: block;
    padding: 15px 20px;
    font-size: 16px;
    color: $text-primary;
    transition: all 0.3s ease;

    &:hover {
      background: $bg-light;
      color: $primary-color;
    }
  }
}

@media (max-width: 768px) {
  .nav {
    display: none;
  }

  .mobile-menu-btn {
    display: flex;
  }

  .mobile-menu {
    display: block;
  }

  .logo-text {
    font-size: 18px;
  }
}
</style>