<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import Swiper from 'swiper'
import { Navigation, Pagination, Autoplay } from 'swiper/modules'
import 'swiper/css'
import 'swiper/css/pagination'
import 'swiper/css/navigation'

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

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

const handleNavClick = (path: string) => {
  return
  router.push(path)
}

onMounted(() => {
  new Swiper('#swiper-container', {
    modules: [Navigation, Pagination, Autoplay],
    loop: true,
    navigation: {
      nextEl: '.left',
      prevEl: '.right',
    },
    autoplay: {
      delay: 5000,
      disableOnInteraction: false
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true
    }
  })
})
</script>

<template>
  <div class="header">
    <div class="center-width header-top">
      <i class="logo"></i>
      <ul class="navigation">
        <li v-for="item in navItems" :key="item.path" :class="{ active: route.path === item.path }"
          @click="handleNavClick(item.path)">
          {{ item.name }}
        </li>
      </ul>
      <div style="clear: both;"></div>
    </div>
    <div id="swiper-container" class="swiper-container use-swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <!-- <img src="../assets/images/banner_one.png" alt=""> -->
          <img src="../assets/images/banner_3.png" alt="">
        </div>
        <div class="swiper-slide">
          <!-- <img src="../assets/images/banner_one.png" alt=""> -->
          <img src="../assets/images/banner_4.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>

<style scoped>
.header {
  width: 100%;
  overflow: hidden;
}

.navigation li {
  cursor: pointer;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

.navigation li:hover {
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

.navigation li.active {
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}
</style>