<template>
  <swiper 
    class="image-swiper" 
    circular
    :indicator-dots="true"
    :autoplay="true"
    :interval="2000"
    :duration="1000"
    :style="{
      height: themeContext.resolveThemeSize(height),
      width: themeContext.resolveThemeSize(width),
      borderRadius: themeContext.resolveThemeSize(radius),
      ...innerStyle,
    }"
  >
    <swiper-item v-for="(item, key) in images" :key="key">
      <view 
        class="item"
        :style="{
          backgroundImage: `url(${item})`,
          backgroundSize: 'cover',
          height: themeContext.resolveThemeSize(height),
          width: themeContext.resolveThemeSize(width),
          borderRadius: themeContext.resolveThemeSize(radius),
        }"
      >
        <image
          :src="item"
          :style="{
            borderRadius: themeContext.resolveThemeSize(radius),
            height: themeContext.resolveThemeSize(height),
            width: themeContext.resolveThemeSize(width),
          }"
          mode="aspectFit"
          @click="onPreviewImage(key)"
        />
      </view>
    </swiper-item>
  </swiper>
</template>

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

const props = defineProps({
  images: {
    type: Array as PropType<string[]>,
    default: () => [],
  },
  height: {
    type:  [String, Number],
    default: undefined,
  },
  width: {
    type: [String, Number],
    default: 16,
  },
  radius: {
    type: [String, Number],
    default: 16,
  },
  innerStyle: {
    type: Object,
    default: () => ({}),
  },
})

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

</script>

<style lang="scss">
.image-swiper {
  image {
    border-radius: 20rpx;
  }
}
</style>