<template>
  <swiper
    class="w-full h-[184rpx] my-[32rpx]"
    circular
    :indicator-dots="true"
    :autoplay="true"
    :interval="3000"
    :duration="200"
  >
    <swiper-item v-for="(item, index) in bannerList" :key="index">
      <view class="h-[184rpx] rounded-[20rpx] px-[32rpx]">
        <image
          :src="item.img"
          mode="scaleToFill"
          class="w-full rounded-[20rpx]"
          @click.stop="handleRouter(item)"
        />
      </view>
    </swiper-item>
  </swiper>
</template>

<script lang="ts" setup>
import { getADBanner } from '@/service/index/api'

const bannerList = ref<any[]>([])

getADBanner().then((resp) => {
  if (resp.code === 200) {
    bannerList.value = resp.result as unknown as { url: string; img: string }[]
  }
})

const handleRouter = (item: { url: string; img: string }) => {
  if (item.url === '复读生') {
    uni.navigateTo({
      url: `/pages-sub/home/adPoster/index`,
    })
  } else if (item.url === '留学') {
    uni.navigateTo({
      url: `/pages-sub/home/adPoster/studyAboard`,
    })
  } else if (item.url === '夏令营') {
    uni.navigateTo({
      url: `/pages-sub/home/adPoster/summerCamp`,
    })
  }
}
</script>
