<template>
  <view
    class="banner"
    v-if="useModel?.bannerData?.value && useModel?.bannerData?.value?.banners?.length"
    :style="`padding-top:${capsuleRect.top + capsuleRect.height + 10}px;`"
  >
    <swiper autoplay>
      <template v-for="(i, index) in useModel?.bannerData?.value?.banners" :key="`banner_${index}`">
        <swiper-item>
          <image :src="i?.source[0]?.url" mode="aspectFill" @click="gotoEventToPage(i)" />
        </swiper-item>
      </template>
    </swiper>
  </view>
</template>
<script setup lang="ts">
import { onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'
const capsuleRect = ref<any>({})
import method from '../method'
import useModel from '../model'
import { gotoEventToPage } from '@/common/libraries/naviHelper'

onShow(() => {
  capsuleRect.value = uni.getMenuButtonBoundingClientRect()
  method.getBanner()
})
</script>

<style lang="scss" scoped>
.banner {
  padding: 20rpx 30rpx 0 30rpx;
  height: 260rpx;
  swiper {
    height: 260rpx;
    width: 100%;
    swiper-item {
      height: 260rpx;
    }
  }
  image {
    width: 100%;
    height: 100%;
    border-radius: 10rpx;
  }
}
</style>
