<template>
  <swiper id="swiper" :class="
 ( props?.Infinite ? 'isInfinite InfiniteRotation-box '
    : 'InfiniteRotation-box ') + (
        props?.openMargin ? 'isOpenMargin' : ''
    )
" ref="perRef" :initialSlide="0" :autoplay="{
    delay: props?.Infinite == true ? 0 : props.autoPlayDelay,
    stopOnLastSlide: false,//切换到最后一个slide时停止自动切换
    disableOnInteraction: false,
    reverseDirection: props.direction,
  }"
          :space-between="props['spaceBetween']"
          :speed="props.speed"
    :slidesPerView="props.slidesPerView" :loop="true" :modules="swiperModules">{{
    banner_list
  }}
    <swiper-slide v-for="item in banner_list">
      <div class="InfiniteRotation-carousel-items">
        <nuxt-link :to="getHerf(item.src)">
          <div class="image-container">
            <div class="img_div">
            <img alt="" :src="item.banner_img">
          </div>
          <div>
            {{ item.text }}
          </div>
      </div>
      </nuxt-link>
      </div>
    </swiper-slide>
  </swiper>
</template>
<script setup lang="ts">
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css'
import { Autoplay } from "swiper";

/**
 * Infinite:是否无限滚动
 * autoPlayDelay：自动播放延迟
 * slidesPerView：一次显示几张
 * bannerList:{
 *   {
 *     banner_img:图片路径,
 *     src:跳转路径
 *   }
 * }
 * openMargin:是否开启margin间距设置
 * 如果要改样式请去该组件下的index.scss或
 *media.scss进行修改
 */
const props = defineProps({
  speed: {
    default: 4000
  },
  Infinite: {
    type: Boolean,
    default: false
  },
  autoPlayDelay: {
    // type: Number,
    default: 1500,

  },
  direction: {
    default: false
  },
  slidesPerView: {
    type: Number,
    default: 3
  },
  bannerList: {
    type: Object,
    default: []
  },
  openMargin:{
    default:false
  }
})

const swiperModules = [Autoplay]
const banner_list = ref(props.bannerList)
console.log(props.openMargin)
// const direction=ref(props.direction)
</script>
<style src="./index.scss"></style>
<style src="./media.scss"></style>
