<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {LinkType, MdConfig} from "../types"
import {useMD} from "../use-md"
import {jump} from '@/utils'

export interface ImageSwiperItem {
  image: string
  link?: LinkType
}

const props = defineProps<{
  properties?: {
    autoplay?: boolean
    interval?: number
    duration?: number
    circular?: boolean
    indicatorDots?: boolean
    items: ImageSwiperItem[]
  }
  style?: Record<string, any>
}>()

const mds = ref([])

onMounted(() => {
  mds.value = props.properties.items.map(item => {
    const md = useMD(item.mdConfig || {}, false)
    md.logExposure()
    return md
  })
})

function onClickItem(item: ImageSwiperItem, index: number) {
  if (item.link) {
    jump(item.link)
  }
  mds.value[index].logClick()
}
</script>

<template>
  <swiper class="comp-swiper"
          :style="style"
          :indicator-dots="properties.indicatorDots"
          :autoplay="properties.autoplay"
          :circular="properties.circular"
          :interval="properties.interval"
          :duration="500">
    <swiper-item v-for="(item, index) in properties.items" :key="index" @click="onClickItem(item, index)">
      <image class="comp-swiper-item" :src="item.image" mode="aspectFill"></image>
    </swiper-item>
  </swiper>
</template>

<style scoped lang="less">
.comp-swiper {

  &-item {
    width: 100%;
    height: 100%;
  }
}
</style>