<template>
  <swiper 
    class="image-swiper" 
    circular
    :indicator-dots="true"
    :autoplay="true"
    :interval="2000"
    :duration="1000"
  >
    <swiper-item v-for="(item, key) in images" :key="key">
      <view class="item">
        <ImageWrapper
          :src="item"
          mode="aspectFill"
          width="750rpx"
          radius="20rpx"
          @click="onPreviewImage(key)"
        />
      </view>
    </swiper-item>
  </swiper>
</template>

<script setup lang="ts">
import ImageWrapper from '@/common/components/ImageWrapper.vue';
import { useSwiperImagePreview } from '@/common/composeabe/SwiperImagePreview';
import type { PropType } from 'vue';

const props = defineProps({
  images: {
    type: Array as PropType<string[]>,
    default: () => [],
  },
})

const { onPreviewImage } = useSwiperImagePreview(() => props.images || [])

</script>

<style lang="scss">
.image-swiper {
  height: 400rpx;

  image {
    border-radius: 20rpx;
  }
}
</style>