<template>
  <div class="content_body">
    <swiper
      @swiper="onSwiper"
      :slidesPerView="1"
      :initialSlide="0"
      :slidesPerGroup="1"
      :autoplay="autoplayOptions"
      :loop="true"
      :modules="modules"
      :space-between="10"
      :pagination="{ clickable: true }"
    >
      <swiper-slide
        data-swiper-autoplay="3000"
        v-for="(item, index) in carouselData"
        :key="index"
        @click="openLink(item)"
      >
        <van-image :src="getImage(item.displayImg)" />
      </swiper-slide>
    </swiper>
  </div>
</template>
<script setup lang="ts">
import http from "@/https";
import { getImage } from "@/utils";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import "swiper/css/pagination";
import { ref, onMounted, toRaw } from "vue";
import { Autoplay, Pagination } from "swiper";
import { useRouter } from "vue-router";
import { useUserStore } from "@/stores/modules/user";
import storage, { actions } from "@/utils/storage";

const userStore = useUserStore();
const router = useRouter();
let swiperNew: any;
const props = defineProps({
  carouselData: {
    type: Array<any>,
    default: [],
    required: true,
  },
});
const autoplayOptions = {
  delay: 3000,
  disableOnInteraction: false,
  pauseOnMouseEnter: true,
  reverseDirection: false,
};
const modules = [Autoplay, Pagination];
const onSwiper = (swiper: any) => {
  swiperNew = toRaw(swiper);
};
onMounted(async () => {});
const openLink = (item: any) => {
  let reg = RegExp(/http/);
  if (reg.test(item.url)) {
    window.open(item.url);
  } else {
    console.log(item.url);
    const pattern = /adId=/;
    if (pattern.test(item.url)) {
      const startIndex = item.url.indexOf("adId=");
      const adIdValue = item.url.substring(startIndex + 5); //
      storage.setSessionStorage(actions.AD_ID,adIdValue);
      router.push("/details")
    } else {
      router.push(item.url)
    }
  }
};
</script>
<style lang="scss" scoped>
.content_body {
  padding: 0.1rem 0 0 0;
  :deep(.swiper-pagination-bullet) {
    width: 0.4rem;
    height: 0.15rem;
    border-radius: 1rem;
  }
  :deep(.swiper-pagination-bullet-active) {
    background: $other-color;
  }
  .van-image {
    width: 100%;
    height: 5rem;
  }
}
</style>
