<!-- src/views/Ranking/WeeklyStar/WeeklyStar.vue -->
<template>
  <div class="fullPage">
    <!-- 预加载状态 -->
    <div v-if="isLoading" class="loading-container">
      <LoadingContent>{{ $t('loading') }}...</LoadingContent>
    </div>

    <!-- 主要内容 -->
    <div v-else style="width: 100vw; min-height: 100vh; overflow: hidden; position: relative">
      <!-- 页面背景 -->
      <BackgroundLayer :useCanvas="true" :backgroundImages="[webpUrl('bg')]" />

      <div style="width: 100vw; position: relative">
        <!-- 状态栏占位区域 -->
        <div style="height: 30px"></div>

        <button v-show="!maskLayerShow" class="ranking-back-btn" @click="handlePageBack">
          <img v-smart-img class="flipImg" :src="backIcon" alt="" />
        </button>

        <!-- 帮助按钮 -->
        <img
          v-smart-img
          src="../../../assets/icon/Aslan/helpAct.png"
          alt=""
          style="
            width: 10%;
            position: absolute;
            top: calc(env(safe-area-inset-top, 0px) + 30px + 14vw);
            right: 8px;
            z-index: 4;
          "
          @click="helpInfoShow = true"
        />

        <!-- history按钮 -->
        <img
          v-smart-img
          :src="webpUrl('history')"
          alt=""
          style="min-height: 20.66vw; width: 20%; margin-top: 14vw"
          @click="historyShow = true"
        />

        <!-- gifts -->
        <div
          style="min-height: 20.66vw; display: flex; justify-content: flex-end; width: 100%"
          :style="{
            marginTop: 'calc(65vw - 30px - 10vw - 10vw - 20px)',
          }"
        >
          <img
            v-smart-img
            :src="webpUrl('gifts')"
            alt=""
            style="width: 20%"
            @click="giftsShow = true"
          />
        </div>

        <!-- 倒计时 -->
        <div style="min-height: 20.37vw; display: flex; justify-content: center; margin-top: 0%">
          <div style="width: 20%">
            <itemCenter style="min-height: 20.37vw" :imgUrl="webpUrl('dayBg')">
              <div class="timeText">{{ Days }}D</div>
            </itemCenter>
          </div>
          <div class="timeText timeGap" style="width: 6px"></div>
          <div style="width: 20%">
            <itemCenter style="min-height: 20.37vw" :imgUrl="webpUrl('hourAndMinBg')">
              <div class="timeText">{{ Hours }}</div>
            </itemCenter>
          </div>
          <div class="timeText timeGap">:</div>
          <div style="width: 20%">
            <itemCenter style="min-height: 20.37vw" :imgUrl="webpUrl('hourAndMinBg')">
              <div class="timeText">{{ Minutes }}</div>
            </itemCenter>
          </div>
          <div class="timeText timeGap">:</div>
          <div style="width: 20%">
            <itemCenter style="min-height: 20.37vw" :imgUrl="webpUrl('secBg')">
              <div class="timeText">{{ Second }}</div>
            </itemCenter>
          </div>
        </div>

        <!-- 切换按钮 -->
        <div
          style="
            min-height: 15.96vw;
            margin: 10% 0 8% 0;
            display: flex;
            justify-content: space-around;
          "
        >
          <div style="width: 30%" @click="handleBt('Ranking')">
            <itemCenter :imgUrl="rankingShow ? webpUrl('btActive') : webpUrl('btNoActive')">
              <div class="btTitle">Ranking</div>
            </itemCenter>
          </div>
          <div style="width: 30%" @click="handleBt('Rewards')">
            <itemCenter :imgUrl="rewardShow ? webpUrl('btActive') : webpUrl('btNoActive')">
              <div class="btTitle">Rewards</div>
            </itemCenter>
          </div>
          <div style="width: 30%" @click="handleBt('Exchange')">
            <itemCenter :imgUrl="exchargeShow ? webpUrl('btActive') : webpUrl('btNoActive')">
              <div class="btTitle">Exchange</div>
            </itemCenter>
          </div>
        </div>

        <!-- 展示内容 -->
        <div>
          <!-- Ranking -->
          <div
            v-show="rankingShow"
            style="position: relative; width: 100%; left: 50%; transform: translateX(-50%)"
          >
            <!-- 背景板 -->
            <div>
              <!-- 头部背景 -->
              <img
                v-smart-img
                :src="webpUrl('RankingMain')"
                alt=""
                width="100%"
                style="min-height: 149.66vw; display: block"
              />
              <!-- 用户项 -->
              <img
                v-smart-img
                :src="webpUrl('RankingItem')"
                alt=""
                width="100%"
                style="min-height: 25.33vw; display: block; margin-top: -2px"
                v-for="value in showRanking.length - 1"
                v-if="showRanking.length > 1"
              />
              <!-- 底框 -->
              <img
                v-smart-img
                :src="webpUrl('RankingBottomBorder')"
                alt=""
                width="100%"
                style="min-height: 20.66vw; display: block; margin-top: -9%"
              />
            </div>

            <!-- 主体内容 -->
            <div
              style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 30% 8% 13%"
            >
              <!-- 前3名 -->
              <div style="margin-top: 3%">
                <!-- 第一 -->
                <div style="display: flex; justify-content: center">
                  <TopUser
                    :BorderImgUrl="webpUrl('topOne')"
                    :avatarUrl="RankingHasTop3[0].userAvatar"
                    :name="RankingHasTop3[0].userNickname"
                    :distributionValue="RankingHasTop3[0].quantity"
                    style="width: 70%"
                    @click="viewUserInfo(RankingHasTop3[0].userId)"
                  />
                </div>
                <!-- 第二三 -->
                <div
                  style="
                    position: relative;
                    z-index: 3;

                    display: flex;
                    justify-content: space-between;
                    margin-top: -20%;
                    pointer-events: none;
                  "
                >
                  <div
                    style="pointer-events: auto; width: 35%"
                    @click.stop="viewUserInfo(RankingHasTop3[1].userId)"
                  >
                    <TopUser
                      :isTopOne="false"
                      :BorderImgUrl="webpUrl('topTwo')"
                      :avatarUrl="RankingHasTop3[1].userAvatar"
                      :name="RankingHasTop3[1].userNickname"
                      :distributionValue="RankingHasTop3[1].quantity"
                      style="width: 100%"
                    />
                  </div>

                  <div
                    style="pointer-events: auto; width: 35%"
                    @click.stop="viewUserInfo(RankingHasTop3[2].userId)"
                  >
                    <TopUser
                      :isTopOne="false"
                      :BorderImgUrl="webpUrl('topThree')"
                      :avatarUrl="RankingHasTop3[2].userAvatar"
                      :name="RankingHasTop3[2].userNickname"
                      :distributionValue="RankingHasTop3[2].quantity"
                      style="width: 100%"
                    />
                  </div>
                </div>
              </div>

              <!-- 第四名开始 -->
              <itemCenter
                v-for="listItem in showRanking"
                style="min-height: 21.41vw; margin-top: 3.3vw; position: relative"
                @click="viewUserInfo(listItem.userId)"
                :imgUrl="webpUrl('itemUser')"
                :contentStyle="`justify-content: flex-start;padding: 0 3%;gap: 8px;`"
              >
                <!-- 基本信息 -->
                <div
                  style="
                    flex: 1;
                    min-width: 0;
                    align-self: stretch;

                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    gap: 4px;
                  "
                >
                  <!-- 排名 -->
                  <div
                    style="
                      width: auto;
                      min-width: 0;
                      align-self: stretch;

                      display: flex;
                      justify-content: center;
                      align-items: center;
                    "
                  >
                    <div style="color: #edb247; font-weight: 700">{{ listItem.rank }}</div>
                  </div>

                  <!-- 头像 -->
                  <img
                    :src="listItem.userAvatar || ''"
                    alt=""
                    style="
                      display: block;
                      width: 3em;

                      aspect-ratio: 1/1;
                      border-radius: 50%;
                      object-fit: cover;
                    "
                    @error="handleAvatarImageError"
                  />

                  <!-- 名称、id -->
                  <div
                    style="
                      flex: 1;
                      min-width: 0;
                      padding: 0 2px;

                      display: flex;
                      flex-direction: column;
                    "
                  >
                    <div
                      style="
                        color: #fff;
                        font-weight: 860;

                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                      "
                    >
                      {{ listItem.userNickname }}
                    </div>
                    <div style="color: #fff; font-weight: 590">
                      {{ $t('user_id_prefix') }} {{ listItem.account }}
                    </div>
                  </div>
                </div>

                <!-- 贡献值 -->
                <div
                  style="
                    width: auto;
                    min-width: 0;
                    align-self: stretch;

                    display: flex;
                    align-items: center;
                  "
                >
                  <img
                    v-smart-img
                    src="/src/assets/icon/Aslan/coin.png"
                    alt=""
                    style="display: block; width: 1.3em; aspect-ratio: 1/1"
                  />
                  <div style="color: #edb247; font-weight: 700">
                    {{ listItem.quantity }}
                  </div>
                </div>
              </itemCenter>
              <!-- 触发加载功能 -->
              <div ref="RankingLoadmore" v-show="showRankingLoading && rankingShow"></div>
            </div>
          </div>

          <!-- Rewards -->
          <div
            v-show="rewardShow"
            style="display: flex; flex-direction: column; align-items: center; gap: 20px"
          >
            <!-- top模块 -->
            <div
              v-for="(topItem, topIndex) in rewardsList"
              style="min-height: 158.66vw; position: relative; width: 100%"
            >
              <!-- top背景图 -->
              <img v-smart-img :src="webpUrl('topBg')" alt="" style="width: 100%; display: block" />
              <!-- 标题 -->
              <div
                style="
                  position: absolute;
                  top: 7%;
                  left: 25%;
                  right: 25%;
                  height: 8.5%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  color: #fff;
                  font-weight: 860;
                "
                class="wks-x1"
              >
                TOP{{ topItem.rule.sort }}
              </div>
              <!-- 主体内容 -->
              <div
                style="
                  position: absolute;
                  inset: 0;
                  padding: 30% 6% 13%;
                  display: grid;
                  grid-template-columns: repeat(2, 1fr);
                "
              >
                <div
                  v-for="gift in topItem.propsGroup.activityRewardProps"
                  style="display: flex; flex-direction: column; align-items: center"
                >
                  <itemCenter
                    :imgUrl="webpUrl('giftItemBg')"
                    style="min-height: 39.6vw; width: 90%; margin-bottom: 3px"
                  >
                    <!-- gift图 -->
                    <img
                      :src="gift.cover || ''"
                      alt=""
                      style="width: 50%; display: block"
                      @error="(e) => handleRewardImageError(e, gift.type)"
                    />
                  </itemCenter>

                  <itemCenter :imgUrl="webpUrl('btBg')" style="min-height: 12.58vw; width: 75%">
                    <div style="font-weight: 700">
                      {{ showDetail(gift.type, gift.quantity) }}
                    </div>
                  </itemCenter>
                </div>
              </div>
            </div>
          </div>

          <!-- Exchange -->
          <div v-show="exchargeShow" style="display: flex; justify-content: center">
            <div style="min-height: 153.66vw; position: relative; width: 100%">
              <!-- 背景图 -->
              <img
                v-smart-img
                :src="webpUrl('longBg')"
                alt=""
                style="width: 100%; display: block"
              />

              <!-- 标题 -->
              <div
                style="
                  position: absolute;
                  top: 6%;
                  left: 25%;
                  right: 25%;
                  height: 11%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  color: #fff;
                  font-weight: 860;
                "
                class="wks-x1"
              >
                Props
              </div>

              <!-- 内容 -->
              <div
                style="
                  position: absolute;
                  top: 0;
                  bottom: 0;
                  left: 0;
                  right: 0;
                  padding: 30% 7% 13%;
                  display: flex;
                  flex-direction: column;
                  justify-content: space-around;
                "
              >
                <!-- 碎片 -->
                <div style="min-height: 12.89vw; display: flex; align-items: center">
                  <img
                    v-smart-img
                    :src="webpUrl('debris')"
                    alt=""
                    style="width: 15%; display: block; margin-right: 5px"
                  />
                  <div style="font-weight: 590; font-size: 1.3em">
                    :{{ myFragment.quantity || 0 }}
                  </div>
                </div>

                <!-- 礼品 -->
                <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px">
                  <div
                    v-for="(goods, goodsIndex) in exchangeGoodsList"
                    :key="goodsIndex"
                    style="display: flex; flex-direction: column; align-items: center"
                  >
                    <itemCenter style="min-height: 26.44vw" :imgUrl="webpUrl('giftItemBg')">
                      <!-- gift图 -->
                      <img
                        :src="goods.propsGroup.activityRewardProps[0].cover"
                        alt=""
                        style="width: 68%; display: block; margin-bottom: 7%"
                      />
                    </itemCenter>
                    <div class="needDebris">
                      Permanent/{{ JSON.parse(goods.rule.jsonData).need_fragments }} Star
                    </div>

                    <itemCenter
                      style="min-height: 7.55vw; width: 75%"
                      @click="selectGood(goods)"
                      :imgUrl="webpUrl('btBg')"
                    >
                      <div style="font-weight: 700" class="needDebris">Redeem</div>
                    </itemCenter>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 我的排名占位 -->
        <div style="height: 25vw"></div>

        <!-- 我的排名 -->
        <itemCenter
          style="
            min-height: 23.66vw;
            width: 100vw;
            background-color: #311300;
            margin-top: 10px;

            position: fixed;
            bottom: 0;
            z-index: 999;
          "
          :imgUrl="webpUrl('myRankingBg')"
          :contentStyle="`padding: 4vw;gap: 8px;`"
        >
          <!-- 基本信息 -->
          <div
            style="
              flex: 1;
              min-width: 0;
              align-self: stretch;

              display: flex;
              justify-content: space-around;
              align-items: center;
              gap: 8px;
            "
          >
            <!-- 排名 -->
            <div
              style="
                width: auto;
                min-width: 0;
                align-self: stretch;

                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <div style="color: #edb247; font-size: 1.1em; font-weight: 700">
                {{ myRanking.rank || 999 }}
              </div>
            </div>

            <!-- 头像 -->
            <img
              :src="myRanking.userAvatar || ''"
              alt=""
              style="
                display: block;
                width: 20%;
                aspect-ratio: 1/1;
                border-radius: 50%;
                object-fit: cover;
              "
              @error="handleAvatarImageError"
            />

            <!-- 名称 -->
            <div
              style="
                flex: 1;
                min-width: 0;

                color: #fff;
                font-size: 1.1em;
                font-weight: 860;
                padding: 0 4px;

                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ myRanking.userNickname || '' }}
            </div>
          </div>

          <!-- 贡献值 -->
          <div
            style="
              width: auto;
              min-width: 0;
              align-self: stretch;

              display: flex;
              align-items: center;
            "
          >
            <img
              v-smart-img
              src="/src/assets/icon/Aslan/coin.png"
              alt=""
              style="display: block; width: 1.5em; aspect-ratio: 1/1"
            />
            <div style="color: #edb247; font-size: 1.1em; font-weight: 700">
              {{ myRanking.quantity || 0 }}
            </div>
          </div>
        </itemCenter>

        <!-- 弹窗遮罩层 -->
        <maskLayer class="ranking-popup-mask" :maskLayerShow="maskLayerShow">
          <div class="ranking-popup-content" @click.self="closedPopup">
            <!-- help弹窗 -->
            <div v-show="helpInfoShow" class="popup-center" @click.self="closedPopup">
              <div class="popup-panel" @click.stop>
                <itemCenter
                  style="min-height: 91vw"
                  :imgUrl="webpUrl('helpInfoBg')"
                  :contentStyle="`inset: 20vw 10vw 10vw; overflow-y: auto; display: block;`"
                >
                  <div class="helpInfo">
                    <p>{{ $t('weekly_star_help_rule_1') }}</p>
                    <p>{{ $t('weekly_star_help_rule_2') }}</p>
                    <p>{{ $t('weekly_star_help_rule_3') }}</p>
                    <p>{{ $t('weekly_star_help_rule_4') }}</p>
                    <p>{{ $t('weekly_star_help_rule_5') }}</p>
                  </div>
                </itemCenter>
              </div>
            </div>

            <!-- history弹窗 -->
            <div
              v-show="historyShow"
              style="min-height: 107.97vw; position: relative; margin: 20% 0"
              @click.stop
            >
              <!-- 背景图 -->
              <img
                v-smart-img
                :src="webpUrl('mediumBg')"
                alt=""
                style="width: 100%; display: block"
              />
              <!-- 标题 -->
              <div
                style="
                  position: absolute;
                  top: 10%;
                  left: 25%;
                  right: 25%;
                  height: 13%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  color: #fff;
                  font-weight: 860;
                "
                class="wks-x1"
              >
                History
              </div>
              <!-- 内容 -->
              <div
                style="
                  position: absolute;
                  top: 0;
                  bottom: 0;
                  left: 0;
                  right: 0;
                  padding: 31% 7% 15%;
                  display: flex;
                  flex-direction: column;
                  justify-content: space-between;
                  align-items: center;
                "
              >
                <!-- 头像 -->
                <div style="min-height: 43.93vw; position: relative; width: 75%">
                  <!-- 头像框 -->
                  <img
                    v-smart-img
                    :src="webpUrl('topOneHistory')"
                    alt=""
                    style="width: 100%; display: block; position: relative; z-index: 1"
                  />
                  <div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0">
                    <div
                      style="
                        height: 100%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                      "
                    >
                      <img
                        :src="showTopOne.userAvatar || ''"
                        alt=""
                        style="
                          width: 50%;
                          display: block;
                          border-radius: 50%;
                          aspect-ratio: 1/1;
                          object-fit: cover;
                        "
                        @error="handleAvatarImageError"
                      />
                    </div>
                  </div>
                </div>

                <!-- 名字 -->
                <div style="min-height: 7.16vw; position: relative; width: 25%">
                  <!-- 背景图 -->
                  <img
                    v-smart-img
                    :src="webpUrl('nameBg')"
                    alt=""
                    style="width: 100%; display: block"
                  />
                  <div
                    style="
                      position: absolute;
                      top: 0;
                      bottom: 0;
                      left: 0;
                      right: 0;
                      padding-bottom: 1%;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                    "
                  >
                    <div
                      style="
                        width: 90%;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        text-align: center;
                      "
                      class="wks-x2"
                    >
                      {{ showTopOne.userNickname }}
                    </div>
                  </div>
                </div>

                <!-- 历史时间 -->
                <div
                  style="
                    width: 50%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                  "
                >
                  <img
                    v-smart-img
                    :src="webpUrl('timeBack')"
                    alt=""
                    width="13%"
                    @click="changeHistoryIndex(1)"
                  />
                  <div
                    style="
                      flex: 1;
                      text-align: center;
                      font-weight: 590;
                      background-image: -webkit-linear-gradient(
                        top,
                        rgba(243, 183, 0, 1),
                        rgba(255, 238, 198, 1)
                      );
                      background-clip: text;
                      -webkit-background-clip: text;
                      -webkit-text-fill-color: transparent;
                    "
                    class="wks-x3"
                  >
                    {{ showTopOne.group }}
                  </div>
                  <img
                    v-smart-img
                    :src="webpUrl('timeNext')"
                    alt=""
                    width="13%"
                    @click="changeHistoryIndex(-1)"
                  />
                </div>
              </div>
            </div>

            <!-- gifts弹窗 -->
            <itemCenter
              v-show="giftsShow"
              style="min-height: 76.66vw; margin: 20% 0"
              @click.stop
              :imgUrl="webpUrl('giftsBg')"
              :contentStyle="`padding: 30% 5% 12%;display: flex;justify-content: space-between;`"
            >
              <!-- 礼物单元 -->
              <div style="width: 30%" v-for="gift in gifts" :key="gift.id">
                <!-- 礼物背景 -->
                <itemCenter style="min-height: 27vw" :imgUrl="webpUrl('giftItemBg')">
                  <!-- 礼物 -->
                  <img
                    :src="gift.giftPhoto"
                    alt=""
                    style="width: 50%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
                  />
                </itemCenter>

                <!-- 礼物价值 -->
                <div style="display: flex; justify-content: center; align-items: center; gap: 2px">
                  <img
                    v-smart-img
                    src="/src/assets/icon/Aslan/coin.png"
                    alt=""
                    style="display: block; width: 1.3em; aspect-ratio: 1/1; object-fit: cover"
                  />
                  <div style="color: #fff; font-weight: 590">
                    {{ gift.giftCandy }}
                  </div>
                </div>
              </div>
            </itemCenter>

            <!-- 交易商品弹窗 -->
            <div
              v-if="exchargeGoodsShow"
              style="min-height: 108vw; position: relative; margin: 20% 0"
              @click.stop
            >
              <!-- 背景图 -->
              <img
                v-smart-img
                :src="webpUrl('mediumBg')"
                alt=""
                style="width: 100%; display: block"
              />
              <!-- 标题 -->
              <div
                style="
                  position: absolute;
                  top: 10%;
                  left: 25%;
                  right: 25%;
                  height: 13%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  color: #fff;
                  font-weight: 860;
                "
                class="wks-x1"
              >
                Exchange
              </div>
              <!-- 内容 -->
              <div
                style="
                  position: absolute;
                  top: 0;
                  bottom: 0;
                  left: 0;
                  right: 0;
                  padding: 30% 7% 15%;
                  display: flex;
                  flex-direction: column;
                  justify-content: space-between;
                  align-items: center;
                "
              >
                <img
                  :src="selectedGood.propsGroup.activityRewardProps[0].cover"
                  alt=""
                  style="width: 50%; display: block"
                />
                <div>Permanent/{{ JSON.parse(selectedGood.rule.jsonData).need_fragments }} Star</div>
                <img
                  v-smart-img
                  :src="webpUrl('ConfirmBt')"
                  alt=""
                  style="width: 30%; display: block"
                  @click="exchangeSelectedGood(selectedGood.rule.id)"
                />
              </div>
            </div>
          </div>
        </maskLayer>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted, onUnmounted, ref } from 'vue'
import { closePage, viewUserInfo } from '@/utils/appBridge.js'
import { connectToApp } from '@/utils/appConnector.js'
import { useThrottle } from '@/utils/useDebounce'
import { showWarning } from '@/utils/toast.js'
import { getWebpUrl } from '@/config/imagePaths.js'
import { preloadImages } from '@/utils/image/imagePreloader.js'
import { handleAvatarImageError, handleRewardImageError } from '@/utils/image/imageHandler.js'

import { getMemberProfile } from '@/api/wallet'
import {
  getWeekStarRanking,
  getWeekRewards,
  getWeekGifts,
  getHistoryTopOne,
  getMyWeekStarRanking,
  getMyFragment,
  getExchangeGoods,
  exchangeGood,
} from '@/api/weeklyStar.js'

import BackgroundLayer from '@/components/BackgroundLayer.vue'
import itemCenter from '@/components/itemCenter.vue'
import maskLayer from '@/components/MaskLayer.vue'
import TopUser from './components/topUser.vue'

const backIcon = new URL('../../../assets/icon/Aslan/arrowBack.png', import.meta.url).href
// 预加载状态
const isLoading = ref(true)

// 获取OSS图片URL的函数
const webpUrl = (filename) => getWebpUrl('Ranking/WeeklyStar/webp/', filename)
const POPUP_CLOSE_CLICK_GUARD_MS = 400
const lastPopupClosedAt = ref(0)

// 使用工具函数连接APP
const handlePageBack = () => {
  if (Date.now() - lastPopupClosedAt.value < POPUP_CLOSE_CLICK_GUARD_MS) return
  if (maskLayerShow.value) return
  console.log('home back')
  closePage()
}

const connectToAppHandler = async () => {
  await connectToApp(() => {
    // 连接成功回调
    completePreloading() // 完成预加载
  })
}

const userInfo = ref({})

const helpInfoShow = ref(false) //帮助模块
const historyShow = ref(false) //历史模块
const giftsShow = ref(false) //礼物模块
const exchargeGoodsShow = ref(false) //交易弹窗

// 展示遮罩层
const maskLayerShow = computed(() => {
  return helpInfoShow.value || historyShow.value || giftsShow.value || exchargeGoodsShow.value
})

// 倒计时
const Days = ref(0)
const Hours = ref(0)
const Minutes = ref(0)
const Second = ref(0)
let timer = null

// 模块切换展示
const rankingShow = ref(true) //排行榜
const rewardShow = ref(false) //奖励
const exchargeShow = ref(false) //交易

const current = ref(1) //排行榜第几页
const RankingLoadmore = ref(null) //触底模块
const showRankingLoading = ref(true) //触底加载功能
const Ranking = ref([]) // 排行榜

const RankingLoadParams = computed(() => {
  return {
    type: 'THIS_WEEK',
    current: current.value,
    size: 10,
  }
})

const myRanking = ref([]) // 我的排名
const rewardsList = ref([]) // 奖励列表
const gifts = ref([]) // 本周礼物

const historyRankingTop1 = ref([]) // 历史榜首
const historyIndex = ref(0)
const showTopOne = computed(() => {
  return historyRankingTop1.value[historyIndex.value] || {}
})

const exchangeGoodsList = ref([])
const myFragment = ref({})
const selectedGood = ref({})

const changeHistoryIndex = (num) => {
  let targetIndex = historyIndex.value + num
  let length = historyRankingTop1.value.length
  if (targetIndex >= 0 && targetIndex < length) {
    historyIndex.value = targetIndex
  }
}

// 处理排行榜小于3人时的情况
const RankingHasTop3 = computed(() => {
  let RankingShow = [...Ranking.value]
  if (Ranking.value.length < 3) {
    let addNullUser = Array.from({ length: 3 - Ranking.value.length }, () => ({
      userAvatar: '',
      userNickname: '',
      quantity: '',
    }))
    RankingShow.push(...addNullUser)
  }
  return RankingShow
})

// 展示用的榜单
const showRanking = computed(() => {
  return Ranking.value.filter((_, index) => index >= 3)
  // return []
})

// 选中要兑换的商品
const selectGood = (good) => {
  exchargeGoodsShow.value = true
  selectedGood.value = good
}

// 兑换商品
const exchangeSelectedGood = async (propsGroupId) => {
  try {
    let data = {
      propsGroupId,
      fragmentsId: '1968948330210508801',
      userId: userInfo.value.id,
    }
    const resExchangeGood = await exchangeGood(data)

    if (resExchangeGood.status) {
      closedPopup() // 关闭弹窗
      getThisWeekMyFragment() //刷新我的碎片
    }
  } catch (error) {
    console.log('error:', error)
    // 信息提示id有误
    showWarning(error.response.errorMsg)
  }
}

// 关闭弹窗
const closedPopup = () => {
  if (!maskLayerShow.value) return

  lastPopupClosedAt.value = Date.now()
  helpInfoShow.value = false
  historyShow.value = false
  giftsShow.value = false
  exchargeGoodsShow.value = false
  selectedGood.value = {} //选中商品置空
}

// 点击展示主体内容
const handleBt = (type) => {
  rankingShow.value = type == 'Ranking' ? true : false
  rewardShow.value = type == 'Rewards' ? true : false
  exchargeShow.value = type == 'Exchange' ? true : false
}

// 获取对应的时间戳
const getNextMondayInBeijing = () => {
  const now = new Date()
  const targetDate = new Date(now.getTime()) // 创建一个基于当前时间的新日期对象

  // 转换为北京时间来判断星期几
  const utcTime = now.getTime() + now.getTimezoneOffset() * 60000
  const beijingTime = new Date(utcTime + 8 * 3600000) // UTC+8

  const beijingDay = beijingTime.getDay() // 0=周日, 1=周一, ..., 6=周六
  const beijingHour = beijingTime.getHours()

  // 转换为 0=周一, 1=周二, ..., 6=周日
  const normalizedDay = beijingDay === 0 ? 6 : beijingDay - 1

  let daysToAdd
  if (normalizedDay === 0) {
    // 今天是周一
    if (beijingHour >= 5) {
      daysToAdd = 7 // 超过5点，计算到下周一的所需时间
    } else {
      daysToAdd = 0 // 今天
    }
  } else {
    daysToAdd = 7 - normalizedDay // 到下周一的天数
  }

  // 正确地添加天数
  targetDate.setDate(targetDate.getDate() + daysToAdd) // 添加天数到下周一的当前时间
  targetDate.setHours(5, 0, 0, 0) // 将时间重新设置为早上5点，作为目标时间戳

  return targetDate.getTime()
}

const targetTime = ref(getNextMondayInBeijing()) // 闭包保存目标时间 (核心修正)

// 格式化时间
const formatTime = (value) => {
  return value < 10 ? `0${value}` : value
}

// 倒计时
const getCountdown = () => {
  const now = Date.now()
  let diff = targetTime.value - now

  if (diff <= 0) {
    // 初始化数据
    getUserInfo()
    resetPage()
    targetTime.value += 7 * 86400000 // +7天 (更新闭包变量)
    diff = targetTime.value - now
  }

  const totalSeconds = Math.floor(diff / 1000)
  Days.value = Math.floor(totalSeconds / (24 * 3600))
  Hours.value = formatTime(Math.floor((totalSeconds % (24 * 3600)) / 3600))
  Minutes.value = formatTime(Math.floor((totalSeconds % 3600) / 60))
  Second.value = formatTime(Math.floor(totalSeconds % 60))
}

// 重置数据
const resetPage = () => {
  current.value = 1 //排行榜第几页
  showRankingLoading.value = true //触底加载功能
  Ranking.value = [] // 排行榜

  historyIndex.value = 0 //历史榜首重置展示当前

  updatePageData() // 刷新页面数据
}

// 格式化奖励的展示信息
const showDetail = (type, quantity) => {
  let showamount = ['GOLD', 'DIAMOND', 'GIFT', 'FRAGMENTS']
  if (showamount.includes(type)) {
    return quantity
  } else {
    return `${quantity}Days`
  }
}

//获取用户信息
const getUserInfo = async () => {
  if (Object.keys(userInfo.value).length === 0) {
    const resUserInfo = await getMemberProfile()
    if (resUserInfo.status && resUserInfo.body) {
      userInfo.value = resUserInfo.body
    }
  }
  getMyThisWeekRanking() // 获取本周我的排名
  getThisWeekMyFragment() // 获取本周我的碎片
}

// 获取本周排名
const getThisWeekRanking = async () => {
  const resWeekStarRanking = await getWeekStarRanking(RankingLoadParams.value)
  console.log('resWeekStarRanking:', resWeekStarRanking)
  if (
    resWeekStarRanking.status &&
    resWeekStarRanking.body &&
    resWeekStarRanking.body.rankUsers?.records
  ) {
    let rankUsers = resWeekStarRanking.body.rankUsers
    Ranking.value.push(...rankUsers.records)
    if (current.value * rankUsers.size >= rankUsers.total) {
      showRankingLoading.value = false
    }
  }
}

// 获取历史榜首
const getHistoryRankingTop1 = async () => {
  const resHistoryTopOne = await getHistoryTopOne()
  console.log('resHistoryTopOne:', resHistoryTopOne)
  if (resHistoryTopOne.status && resHistoryTopOne.body) {
    historyRankingTop1.value = resHistoryTopOne.body
  }
}

// 获取本周我的排名
const getMyThisWeekRanking = async () => {
  let data = {
    userId: userInfo.value.id,
    type: 'THIS_WEEK',
  }
  const resMyWeekStarRanking = await getMyWeekStarRanking(data)
  console.log('resMyWeekStarRanking:', resMyWeekStarRanking)
  if (resMyWeekStarRanking.status && resMyWeekStarRanking.body) {
    myRanking.value = resMyWeekStarRanking.body
  }
}

// 获取本周礼物
const getThisWeekGifts = async () => {
  const resThisWeekGifts = await getWeekGifts('THIS_WEEK')
  console.log('resThisWeekGifts:', resThisWeekGifts)
  if (resThisWeekGifts.status && resThisWeekGifts.body) {
    gifts.value = resThisWeekGifts.body
  }
}

// 获取本周奖励
const getThisWeekRewards = async () => {
  const resThisWeekRewards = await getWeekRewards()
  console.log('resThisWeekRewards:', resThisWeekRewards)
  if (resThisWeekRewards.status && resThisWeekRewards.body) {
    rewardsList.value = resThisWeekRewards.body
  }
}

// 获取本周可兑换商品
const getThisWeekExchangeGoods = async () => {
  let data = {
    sysOrigin: 'LIKEI',
    activityType: 'STAR_EXCHANGE',
  }
  const resExchangeGoods = await getExchangeGoods(data)
  console.log('resExchangeGoods:', resExchangeGoods)
  if (resExchangeGoods.status && resExchangeGoods.body) {
    exchangeGoodsList.value = resExchangeGoods.body
  }
}

// 获取本周我拥有的碎片
const getThisWeekMyFragment = async () => {
  let data = {
    userId: userInfo.value.id,
    fragmentsIds: ['1968948330210508801'],
  }

  const resMyFragment = await getMyFragment(data)
  console.log('resMyFragment:', resMyFragment)
  if (resMyFragment.status && resMyFragment.body) {
    myFragment.value =
      resMyFragment.body.find((item) => item.fragmentsId == '1968948330210508801') || {}
  }
}

// 刷新页面数据
const updatePageData = async () => {
  await Promise.all([
    getThisWeekRanking(), // 获取本周排名
    getHistoryRankingTop1(), // 获取历史top1
    getThisWeekRewards(), // 获取本周奖励
    getThisWeekGifts(), // 获取本周礼物
    getThisWeekExchangeGoods(), // 获取本周可兑换商品
  ])
}

// 预加载关键图片
const preloadCriticalImages = async () => {
  const criticalImages = [
    webpUrl('bg'),
    webpUrl('history'),
    webpUrl('gifts'),
    webpUrl('dayBg'),
    webpUrl('hourAndMinBg'),
    webpUrl('secBg'),
    webpUrl('btActive'),
    webpUrl('btNoActive'),
    webpUrl('RankingMain'),
    webpUrl('RankingItem'),
    webpUrl('RankingBottomBorder'),
    webpUrl('topOne'),
    webpUrl('topTwo'),
    webpUrl('topThree'),
    webpUrl('itemUser'),
    webpUrl('topBg'),
    webpUrl('giftItemBg'),
    webpUrl('btBg'),
    webpUrl('longBg'),
    webpUrl('debris'),
    webpUrl('myRankingBg'),
    webpUrl('helpInfoBg'),
    webpUrl('mediumBg'),
    webpUrl('topOneHistory'),
    webpUrl('nameBg'),
    webpUrl('giftsBg'),
    webpUrl('ConfirmBt'),
    webpUrl('timeBack'),
    webpUrl('timeNext'),
  ]

  await preloadImages(criticalImages)
}

const debouceGetThisWeekRanking = useThrottle(() => {
  getThisWeekRanking()
}, 1000)

// IntersectionObserver配置
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.intersectionRatio > 0 && Ranking.value.length != 0) {
      console.log('触发RankingLoadmore加载')
      current.value++
      debouceGetThisWeekRanking()
    }
  })
})

// 完成预加载
const completePreloading = async () => {
  try {
    // 执行所有初始化操作
    await Promise.all([getUserInfo(), updatePageData(), preloadCriticalImages()])
  } catch (error) {
    console.error('预加载过程中发生错误:', error)
  } finally {
    // 无论成功或失败都结束加载状态
    isLoading.value = false
  }
}

// 组件挂载时检测环境
onMounted(() => {
  connectToAppHandler()

  getCountdown()
  timer = setInterval(getCountdown, 1000) //每秒更新

  // 监听加载模块
  if (RankingLoadmore.value) {
    observer.observe(RankingLoadmore.value)
  }
})

onUnmounted(() => {
  clearInterval(timer) //摧毁计时器
})
</script>

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

.fullPage {
  width: 100vw;
  min-height: 100vh;
  background-color: #311300;
  position: relative;
  direction: ltr;
}

.ranking-back-btn {
  position: fixed;
  z-index: 9999;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 4vw;
  width: 12vw;
  height: 12vw;
  padding: 1.8vw;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.ranking-back-btn:active {
  transform: scale(0.9);
}

.ranking-back-btn img {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
}

.ranking-popup-mask {
  z-index: 10000 !important;
}

.ranking-popup-content {
  width: 100%;
  min-height: 100%;
}

.popup-center {
  min-height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-panel {
  width: 100vw;
  min-height: 0;
}

.helpInfo {
  display: flex;
  flex-direction: column;
  gap: 1vw;
}

.helpInfo > p {
  color: #fff;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
}

[dir='rtl'] .ranking-back-btn {
  left: auto;
  right: 4vw;
}

[dir='rtl'] .flipImg {
  transform: scaleX(-1);
}

.timeText {
  color: #fff;
  font-size: 1.3em;
  font-weight: 860;
}

.timeGap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.btTitle {
  color: #fff;
  font-weight: 700;
}

.wks-x1 {
  font-size: 1.5em;
}

.needDebris {
  font-size: 0.6em;
}

.wks-x2 {
  font-size: 0.8em;
}

.wks-x3 {
  font-size: 0.8em;
}

/* 添加加载动画样式 */
.loading-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #666;

  overflow: hidden;
  position: relative;
}

@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>
