<script lang="ts" setup>
import HotActivityItem from './hot-activity-item.vue'

withDefaults(defineProps<{ items?: any[] }>(), { items: () => [] })
const swiperList = [{}]
const item = ref()

const current = ref(0)
onMounted(() => {
  console.log('mounted')
  nextTick(() => {
    console.log('nextTick')
    console.log(item.value)
  })
})
</script>
<template>
  <swiper class="h-60" @change="(e) => (current = e.detail.current)">
    <template v-for="it of items" :key="it.id">
      <swiper-item class="h-60">
        <HotActivityItem ref="item" :options="it.data" :type="it.type"></HotActivityItem>
        <div class="absolute top-5 right-4 flex gap-1">
          <template v-for="(it, i) in items" :key="i">
            <div
              class="w-1 h-1 rounded-full"
              :class="`${current === i ? 'bg-white' : 'bg-white/40'}`"
            ></div>
          </template>
        </div>
      </swiper-item>
    </template>
  </swiper>
  <!-- <wd-swiper :list="swiperList" autoplay>
    <template #default="{ item }">
      <wd-swiper-item>
        <hot-activity-item></hot-activity-item>
      </wd-swiper-item>
    </template>
  </wd-swiper> -->
</template>
