<script setup>
import {reactive, ref} from "vue";

const cardSwiperItem=reactive([
  {
    src:'/src/assets/img/工地.png'
  },
  {
    src:'/src/assets/img/企业.png'
  },
  {
    src:'/src/assets/img/政务会议室.png'
  },
])
const carouselRef = ref()
let hoverTimer = null

const onCardMouseEnter = (index) => {
  // 清除之前的定时器
  if (hoverTimer) {
    clearTimeout(hoverTimer)
  }

  // 延迟切换，避免鼠标快速划过时频繁切换
  hoverTimer = setTimeout(() => {
    if (carouselRef.value) {
      carouselRef.value.setActiveItem(index)
    }
  }, 200) // 200ms 延迟，提升体验
}
</script>

<template>
  <div class="solution">
    <div class="title">解决方案</div>
    <div class="card-swiper">
      <el-carousel ref="carouselRef" trigger="click" :interval="4000" type="card" height="524px"  :arrow="'never'" :autoplay="true" :pause-on-hover="true" indicator-position="none">
        <el-carousel-item v-for="(item,index) in cardSwiperItem" :key="item" @mouseenter="onCardMouseEnter(index)" >
          <img :src=item.src alt="">
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<style scoped lang="less">
.solution{
  margin: auto ;
  padding:109.79px 0;
  .title{
    text-align: center;
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 80px;
  }
  .card-swiper{
    width: 100%;
    height: 524px;
    .el-carousel__container{
      .el-carousel__item{
        height: 524px;
      }
    }
    img{
      width: 100%;
      height: 100%;
      object-fit: fill;
    }
  }
}
</style>
