<template>
  <view class="page">
    <block v-if="activity">
      <navigation-bar
        :title="activity.name"
        :color="'#fff'"
        :placeholder="false"
        :background="'#3F3EC2'"
      ></navigation-bar>
      <image
        v-if="activity.activityDescPage"
        style="width: 100%"
        mode="widthFix"
        :src="activity.activityDescPage"
      ></image>
    </block>
    <view class="desc">
      <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>
</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) => {
    const a = res.activityList.find((item: any) => item.id === options.id);
    desc.value = a.activityDesc.split("\n");
    activity.value = a;
    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: 0 68rpx;
    padding-top: 100rpx;
  }
}
</style>
