<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const activeIndex = ref(0)

const navItems = [
  { name: '首  页', route: '/' },
  { name: '产品技术', route: '/products' },
  { name: '客户名录', route: '/customers' },
  { name: '新闻资讯', route: '/news' },
  { name: '加入我们', route: '/join' },
  { name: '关于我们', route: '/about' }
]

const navigateTo = (route, index) => {
  activeIndex.value = index
  router.push(route)
}

onMounted(() => {
  // Initialize Swiper
  const script = document.createElement('script')
  script.src = '@/js/swiper.min.js'
  script.onload = () => {
    new window.Swiper('.swiper-container', {
      loop: true,
      navigation: {
        nextEl: '.left',
        prevEl: '.right',
      },
      autoplay: {
        delay: 5000,
        disableOnInteraction: false
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true
      }
    })
  }
  document.head.appendChild(script)
})
</script>

<template>
  <div class="header">
    <div class="center-width header-top">
      <i class="logo"></i>
      <ul class="navigation">
        <li 
          v-for="(item, index) in navItems" 
          :key="index" 
          :class="{ active: activeIndex === index }"
          @click="navigateTo(item.route, index)"
        >
          {{ item.name }}
        </li>
      </ul>
      <div style="clear: both;"></div>
    </div>
    <div class="swiper-container use-swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="@/assets/images/banner_one.png" alt="">
        </div>
        <div class="swiper-slide">
          <img src="@/assets/images/banner_one.png" alt="">
        </div>
      </div>
      <!-- 分页器 -->
      <div class="swiper-pagination"></div>
      <div class="center-width btns">
        <div class="btn right"></div>
        <div class="cut"></div>
        <div class="btn left"></div>
        <div style="clear: both;"></div>
      </div>
    </div>
  </div>
</template> 