<template>
  <view class="banner-carousel" @click.stop>
    <swiper 
      class="banner-swiper" 
      :autoplay="true" 
      :interval="4000" 
      :duration="400" 
      :circular="true"
      :indicator-dots="false"
    >
      <swiper-item @click.stop="$emit('top3Click')">
        <BannerTop3 />
      </swiper-item>
      <swiper-item 
        v-for="item in bannerActivities" 
        :key="item.id" 
        @click.stop="$emit('activityClick', item)"
      >
        <image 
          class="banner-activity-img" 
          :src="item.cover_image || '/static/avatar/1.jpeg'"
          mode="aspectFill"
        />
      </swiper-item>
    </swiper>
  </view>
</template>

<script setup>
import BannerTop3 from '../../components/BannerTop3.vue'

defineProps({
  bannerActivities: {
    type: Array,
    default: () => []
  }
})

defineEmits(['activityClick', 'top3Click'])
</script>

<style scoped>
.banner-carousel {
  position: fixed;
  top: 216rpx;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  padding: 0 8rpx;
  box-sizing: border-box;
}

.banner-swiper {
  width: 100%;
  height: 312rpx;
  border-radius: 24rpx;
  overflow: hidden;
}

.banner-activity-img {
  width: 100%;
  height: 100%;
  display: block;
}

:deep(.uni-swiper-slide) {
  overflow: hidden;
}
</style>
