<template>
  <view class="page pl-32 pr-32 pt-32">
    <swiper
      class="swiper"
      circular
      :indicator-dots="true"
      :autoplay="banner.length > 1"
      :interval="3000"
    >
      <swiper-item
        class="full-percent"
        v-for="(item, index) in banner"
        :key="index"
      >
        <view
          class="full-percent"
          :style="{
            backgroundImage: `url(${item.bannerUrl})`,
          }"
        ></view>
      </swiper-item>
    </swiper>
    <view class="fs-32 fw-500 color-000 pt-40">活动说明</view>
    <view class="mt-32">
      <view
        class="mt-24 fs-28 color-666"
        v-for="(item, index) in desc"
        :key="index"
        >{{ item }}</view
      >
    </view>
    <style-bottom-view>
      <view class="pl-40 pr-40 pb-30 pt-30" style="background-color: #fff">
        <style-button
          type="primary"
          @click="to('/pages-user/wallet-recharge/wallet-recharge')"
          >去充值</style-button
        >
      </view>
    </style-bottom-view>
  </view>
</template>

<script setup lang="ts">
import { fetchProfile } from "../..//api/user";
import { to } from "../../utils/navigate";
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";

const desc = ref([]);
const banner = ref<any[]>([]);

onLoad((options: any) => {
  uni.showLoading({
    title: "加载中",
  });
  fetchProfile().then((res) => {
    const activity = res.activityList.find(
      (item: any) => item.id === options.id
    );
    uni.setNavigationBarTitle({
      title: activity.name,
    });
    desc.value = activity.activityDesc.split("\n");
    banner.value = activity.bannerList;
    uni.hideLoading();
  });
});
</script>

<style lang="scss">
.page {
  min-height: 100vh;
  background-color: #fff;
  .swiper {
    height: 176rpx;
    width: 100%;
    border-radius: 16rpx;
    overflow: hidden;
    view {
      background-position: center;
      background-repeat: no-repeat;
      background-size: 100% auto;
    }
  }
}
</style>
