<!-- src/views/Activities/Reward/RechargeReward.vue -->
<template>
  <div>
    <!-- Rewards0.png 使用相对定位容器 -->
    <div style="position: relative">
      <img v-smart-img :src="imageUrl('Rewards0')" alt="" style="width: 100%; display: block" />
      <!-- 帮助按钮 -->
      <img
        v-smart-img
        :src="imageUrl('help')"
        alt=""
        style="
          position: absolute;
          top: 2%;
          right: 4%;
          display: block;
          width: 10vw;
          aspect-ratio: 1/1;
          object-fit: cover;
        "
        @click="maskLayerShow = true"
      />

      <!-- 用户信息、累积充值金额 -->
      <div
        style="
          position: absolute;
          inset: 28.5% 22%;
          height: 15%;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;
        "
      >
        <div style="display: grid; grid-template-columns: 4fr 6fr">
          <div style="width: 100%; aspect-ratio: 1/1; position: relative">
            <img
              v-smart-img
              :src="imageUrl('frame')"
              alt=""
              style="width: 100%; display: block; aspect-ratio: 1/1; position: relative; z-index: 1"
            />
            <div
              style="
                position: absolute;
                inset: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 0;
              "
            >
              <img
                :src="userInfo.userAvatar || ''"
                alt=""
                style="
                  display: block;
                  width: 60%;
                  border-radius: 50%;
                  aspect-ratio: 1/1;
                  object-fit: cover;
                "
                @error="handleAvatarImageError"
              />
            </div>
          </div>
          <div
            style="
              width: 100%;
              min-width: 0; /* 关键：允许在 flex 容器中正确截断 */
              display: flex;
              flex-direction: column;
              justify-content: center;

              gap: 4px;
            "
          >
            <div
              style="
                font-weight: 700;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              "
            >
              {{ userInfo.userNickname }}
            </div>
            <div
              style="
                font-weight: 700;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              "
            >
              {{ $t('user_id_prefix') }} {{ userInfo.account }}
            </div>
          </div>
        </div>
        <div class="textGold" style="font-size: 0.8em; font-weight: 700">
          Accumulated recharge:${{ userInfo.recharge }}
        </div>
        <div class="textGold" style="font-size: 0.7em; font-weight: 700">
          *Each user can only claim the reward for this event once.
        </div>
        <div class="textGold" style="font-size: 0.7em; font-weight: 900">
          *يمكن لكل مستخدم المطالبة بالمكافأة لهذا الحدث مرة واحدة فقط.
        </div>
      </div>
    </div>

    <!-- 其他图片直接引入 -->
    <img v-smart-img :src="imageUrl('Rewards1')" alt="" style="width: 100%; display: block" />
    <img v-smart-img :src="imageUrl('Rewards2')" alt="" style="width: 100%; display: block" />
    <img v-smart-img :src="imageUrl('Rewards3')" alt="" style="width: 100%; display: block" />
    <img v-smart-img :src="imageUrl('Rewards4')" alt="" style="width: 100%; display: block" />
    <img v-smart-img :src="imageUrl('Rewards5')" alt="" style="width: 100%; display: block" />

    <!-- 弹窗遮罩层 -->
    <maskLayer :maskLayerShow="maskLayerShow" @click="maskLayerShow = false">
      <!-- help弹窗 -->
      <div style="margin: 20% 0" @click.stop>
        <img v-smart-img :src="imageUrl('helpInfo')" alt="" style="display: block; width: 100%" />
      </div>
    </maskLayer>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { connectToApp } from '@/utils/appConnector.js'
import { getPngUrl } from '@/config/imagePaths.js'
import { preloadImages } from '@/utils/image/imagePreloader.js'
import { handleAvatarImageError } from '@/utils/image/imageHandler.js'

import { getMemberProfile, getTotalRecharge } from '@/api/wallet'

import maskLayer from '@/components/MaskLayer.vue'

// 获取OSS图片URL的函数
const imageUrl = (filename) => getPngUrl('Activities/RechargeReward/', filename)

const maskLayerShow = ref(false) //帮助模块

//个人信息
const userInfo = ref({
  account: '',
  userNickname: '',
  userAvatar: '',
  recharge: '',
})

//获取累积充值信息
const getTotalRechargeInfo = async () => {
  // 连接成功回调
  const resUserInfo = await getMemberProfile()
  if (resUserInfo.status && resUserInfo.body) {
    const res = await getTotalRecharge(resUserInfo.body.id)
    if (res.status) {
      console.log('resUserInfo:', resUserInfo.body)

      userInfo.value = {
        account: resUserInfo.body.account,
        userNickname: resUserInfo.body.userNickname,
        userAvatar: resUserInfo.body.userAvatar,
        recharge: res.body,
      }
    }
  }
}

// 预加载关键图片
const preloadCriticalImages = () => {
  const criticalImages = [
    imageUrl('Rewards0'),
    imageUrl('Rewards1'),
    imageUrl('Rewards2'),
    imageUrl('Rewards3'),
    imageUrl('Rewards4'),
    imageUrl('Rewards5'),
    imageUrl('help'),
    imageUrl('helpInfo'),
    imageUrl('frame'),
  ]

  preloadImages(criticalImages)
}

// 使用工具函数连接APP
const connectToAppHandler = () => {
  connectToApp(async () => {
    await getTotalRechargeInfo() //获取累积充值信息
    console.log('页面所需数据获取完成')

    await preloadCriticalImages() //预加载关键图片
    console.log('关键图片预加载完成')
  })
}

onMounted(() => {
  connectToAppHandler()
})
</script>

<style lang="scss" scoped>
* {
  color: white;
}

.textGold {
  background: linear-gradient(
    255deg,
    #b77c44 28.08%,
    #fee5bb 46.5%,
    #bf854a 67.95%,
    #fcdfb3 85.67%,
    #c0864b 102.89%,
    #fbe8d4 122.57%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media screen and (max-width: 360px) {
  * {
    font-size: 10px;
  }
}

@media screen and (min-width: 360px) {
  * {
    font-size: 12px;
  }
}

@media screen and (min-width: 768px) {
  * {
    font-size: 24px;
  }
}

@media screen and (min-width: 1024px) {
  * {
    font-size: 32px;
  }
}
</style>
