<template>
  <view class="page">
    <block v-if="activity">
      <!--      <navigation-bar
              :title="activity.name"
              :color="'#fff'"
              :placeholder="false"
              :background="'#fff'"
            ></navigation-bar>-->
      <image
          v-if="activity.activityDescPage"
          style="width: 100%"
          mode="widthFix"
          :src="activity.activityDescPage"
      ></image>
    </block>
    <view class="desc" v-if="desc&&desc.length>0">
      <view class="flex mb-40" v-for="(item, index) in desc" :key="index">
        <view
            class="width-40 height-40 br-round fs-28 color-fff flex-center flex-shrink mr-20"
            style="
            shadow: 0px 1px 1px rgba(0, 0, 0, 0.25));
            background: linear-gradient(180deg, #9767f8 0%, #564eed 100%);
          "
        >{{ index + 1 }}
        </view
        >
        <view class="fs-28 lh-40 flex-grow" style="color: rgba(8, 0, 61, 0.8)">{{ item }}</view>
      </view>
    </view>
    <view class="desc">
      <view v-html="activity && activity.activityDesc"></view>
    </view>
  </view>
</template>

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

const desc = ref<string[]>([]);
const activity = ref();

onLoad((options: any) => {
  uni.showLoading({
    title: "加载中",
  });
  fetchProfile().then((res) => {
    //TODO 改为活动接口查询
    const a = res.activityList.find((item: any) => item.id == options.id);
    // desc.value = a?.activityDesc?.split("\n");
    activity.value = a;
    if (a && a.name) {
      uni.setNavigationBarTitle({
        title: a.name
      });
    }
    uni.hideLoading();
  });
});
</script>

<style lang="scss">
page {
  //background-color: #716ffc;
}

.page {
  position: relative;

  .desc {
    position: absolute;
    width: 100%;
    left: 0;
    //top: 650rpx;
    box-sizing: border-box;
    padding: 40rpx;

    img {
      max-width: 95%;
    }
  }
}
</style>
