<template>
  <div class="custom-home-swiper">
    <div class="swiper-button-prev swiper-button-white prev-next">
      <img :src="imgs.prev" alt="" />
    </div>
    <!-- 
       -->
    <Swiper
      class="swiper-no-swiping"
      :slidesPerView="4"
      :loop="true"
      :centeredSlides="false"
      :loopAdditionalSlides="2"
      :preventClicksPropagation="true"
      :loopFillGroupWithBlank="true"
      :modules="modules"
      :navigation="{
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }"
      :autoplay="{
        delay: 2000,
        stopOnLastSlide: false,
        disableOnInteraction: false,
      }"
    >
      <!-- @click="goDetail(item)" -->
      <SwiperSlide v-for="(item, index) in ScrollList.list" :key="index">
        <CustomCardTwo
          @click="goDetail(item)"
          :img="item.image"
          :title="item.title"
          :content="item.description"
        ></CustomCardTwo>
      </SwiperSlide>
    </Swiper>
    <div class="swiper-button-next swiper-button-white prev-next">
      <img :src="imgs.next" alt="" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onBeforeMount, reactive, ref } from 'vue';
import './index.less';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Navigation, Autoplay } from 'swiper';
import 'swiper/css';
import 'swiper/css/pagination';
import CustomCardTwo from '@/components/card2.vue';
import { useRouter } from 'vue-router';
import { getScenesList } from '@/utils/api/scenes';
const router = useRouter();
/**
 * spaceBetween 每个swiper-slide的间隔距离
 */
const imgs = {
  prev: new URL('../../../../assets/svg/home/swiper_prev.svg', import.meta.url)
    .href,
  next: new URL('../../../../assets/svg/home/swiper_next.svg', import.meta.url)
    .href,
};
const modules = ref([Navigation, Autoplay]);
const ScrollList = reactive({
  list: [] as any[],
});
const getSwiperList = async () => {
  try {
    let res: any = await getScenesList();
    if (res.code == 0 && res.data.length) {
      if (res.data.length < 8) {
        let list = JSON.parse(JSON.stringify(res.data));
        // 复制item
        for (let i = 0; i < 8; i++) {
          if (res.data.length >= 8) {
            break;
          }
          res.data = res.data.concat(list);
        }
      }
      ScrollList.list = res.data;
    }
  } catch (e) {
    console.log(e);
  }
};
onBeforeMount(async () => {
  // 获取轮播图列表
  await getSwiperList();
});
const goDetail = (item: any) => {
  console.log(item);
  const url = router.resolve({
    path: 'Detail',
    query: {
      id: item.id,
    },
  });
  window.open(url.href);
};
</script>

<style lang="less" scoped></style>
