<template>
  <nav
    ref="navRef"
    :class="[
      'home-nav fixed top-0 left-0 right-0 z-50 transition-all duration-300',
      isScrolled ? 'bg-white/40 backdrop-blur-lg shadow-sm  border-white/20' : 'bg-transparent'
    ]"
  >
    <div class="container mx-auto px-6 py-4 flex justify-between items-center">

      <div class="text-xl font-bold" :class="isScrolled ? 'text-blue-600' : 'text-white'">ZW多人语音合成</div>

      <ul class="flex items-center space-x-6">
        <li :class="[
          'transition cursor-pointer', 
          isScrolled ? 'text-gray-800 hover:text-blue-500' : 'text-white/90 hover:text-white'
        ]">
          产品列表
        </li>

        <li :class="[
          'transition cursor-pointer', 
          isScrolled ? 'text-gray-800 hover:text-blue-500' : 'text-white/90 hover:text-white'
        ]">
          关于我们
        </li>

        <el-button type="primary" @click="handleLoginClick">登录</el-button>
      </ul>
    </div>
  </nav>
</template>
<script lang="ts" setup>
 
import { ref, onMounted, onUnmounted } from 'vue';

defineOptions({
  name: 'HomeNav',
});

const emit = defineEmits(['login']);

const navRef = ref<HTMLElement | null>(null);
const isScrolled = ref(false);
const scrollThreshold = 60; // 滚动阈值，超过60px后改变样式

// 监听滚动事件
const handleScroll = () => {
  isScrolled.value = window.scrollY > scrollThreshold;
};

// 登录按钮点击事件
const handleLoginClick = () => {
  emit('login');
};

onMounted(() => {
  // 监听滚动事件
  window.addEventListener('scroll', handleScroll);
  // 初始检查
  handleScroll();
});

onUnmounted(() => {
  // 移除滚动监听
  window.removeEventListener('scroll', handleScroll);
});
</script>
<style lang="scss" scoped>
.home-nav {
  transition: all 0.3s ease;
}
</style>
