<template>
  <div class="swiper-box">
    <van-swipe
      v-if="imgSrc instanceof Array && imgSrc.length > 0"
      class="swiper"
      circular
      :duration="300"
      :autoplay="3000"
      indicator-dots
      indicator-color="#FFF78C"
      indicator-active-color="#FFF78C"
    >
      <van-swipe-item v-for="item in imgSrc" :key="item">
        <div style="height: 100%; width: 100%">
          <img mode="aspectFit" :src="item" />
        </div>
      </van-swipe-item>
    </van-swipe>
    <div v-else-if="imgSrc.length > 0" class="image-box">
      <img mode="aspectFit" :src="imgSrc" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{
  swiperList: any
}>()
const imgSrc = computed(() => {
  if (props.swiperList.includes(',')) {
    return props.swiperList.split(',')
  }
  return props.swiperList
})
</script>

<style scoped lang="scss">
.swiper-box {
  width: 720px;
  height: 36vh;
  border: 0.33vh solid #d9d163;
  border-radius: 1.33vh;
  margin: 1.67vh auto 0;
  overflow: hidden;
  .swiper {
    width: 100%;
    height: 100%;
    :deep(.van-swipe__indicators) {
      display: flex;
      align-items: center;
      .van-swipe__indicator {
        box-sizing: border-box;
        height: 1vh;
        width: 12px;
        border: 0.17vh solid #d9d163;
      }
      .van-swipe__indicator--active {
        height: 1.5vh;
        width: 18px;
      }
    }
  }
  .swiper-item {
    width: 716px;
    height: 35.67vh;
  }
}
.image-box {
  height: 100%;
  width: 100%;
}
img {
  width: 100%;
  max-height: 100%;
  object-fit: contain;
}
</style>
