<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Autoplay, FreeMode } from 'swiper/modules'

import 'swiper/css'
import 'swiper/css/free-mode'
const modules = [Autoplay, FreeMode]
const swiperInstance = ref(null)
const autoplayPaused = ref(false)
function onSwiper(swiper) {
  swiperInstance.value = swiper
}
function handleMouseEnter() {
  if (swiperInstance.value && !autoplayPaused.value) {
    swiperInstance.value.autoplay.pause()
    autoplayPaused.value = true
  }
}

function handleMouseLeave() {
  if (swiperInstance.value && autoplayPaused.value) {
    swiperInstance.value.autoplay.start()
    autoplayPaused.value = false
  }
}
// let autoplayTimer = null
// function handleNext(type) {
//   const swiper = swiperInstance.value
//   swiper.autoplay.stop()
//   if (type === 'prev') {
//     swiper.slideToLoop(swiper.realIndex <= 1 ? 7 : swiper.realIndex - 1, 500)
//   }
//   else {
//     swiper.slideToLoop(swiper.realIndex >= 7 ? 0 : swiper.realIndex + 1, 500)
//   }
//   clearInterval(autoplayTimer)
//   autoplayTimer = setTimeout(() => {
//     swiper.autoplay.start()
//   }, 2000)
// }
function getImg(name) {
  return new URL(`../../assets/img/logos/${name}.png`, import.meta.url).href
}
// const imgList = ref(['../../assets/school/hngc.png', '../../assets/school/sqsf.png', '../../assets/school/hngc.png', '../../assets/school/sqsf.png', '../../assets/school/hngc.png', '../../assets/school/sqsf.png'])
</script>

<template>
  <div>
    <Swiper :slides-per-view="'auto'" loop :autoplay="{ delay: 4000, pauseOnMouseEnter: true, }" @swiper="onSwiper"
      :speed="1000" :modules="modules" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
      <SwiperSlide v-for="item in ['zzdx', 'sqsf', 'zzhk', 'xynl', 'zykj', 'zzdx', 'sqsf', 'zzhk', 'xynl', 'zykj']"
        :key="item" class="bg-blueGray">
        <img :src="getImg(item)" alt="">
      </SwiperSlide>
    </Swiper>
    <!-- <el-button @click="handleNext('prev')">
      上一条
    </el-button>
    <el-button @click="handleNext('next')">
      下一条
    </el-button> -->
  </div>
</template>

<style lang="less" scoped>
.swiper-free-mode .swiper-wrapper {
  transition-timing-function: linear;
}

.swiper {
  width: 100%;
  background: #fff;

  .swiper-slide {
    width: fit-content;
    text-align: center;
    margin-right: 4.375rem !important;
    height: 57px;

    img {
      height: 100%;
    }
  }
}
</style>