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

    <!-- 主要内容 -->
    <div v-else>
      <!-- 新增的背景图层 -->
      <img
        v-smart-img
        :src="webpUrl('bg2')"
        alt=""
        style="display: block; width: 100%; position: absolute; inset: 80vw 0 0; z-index: 0"
      />

      <div class="bg">
        <itemCenter
          :imgUrl="webpUrl('bg')"
          style="min-height: 100vw; position: absolute; z-index: 0"
        >
          <img
            v-smart-img
            :src="webpUrl('bgVideo')"
            alt=""
            style="min-height: 100vw; display: block; width: 100%; object-fit: cover"
          />
        </itemCenter>

        <!-- 状态栏占位区域（仅在APP中显示） -->
        <div style="height: 30px"></div>

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

        <!-- 第一名 -->
        <div style="display: flex; justify-content: center; margin-top: 11vw">
          <TopUser
            ranking="1"
            :BorderImgUrl="webpUrl('top1')"
            :avatarUrl="RankingHasTop10[0].avatar"
            :name="RankingHasTop10[0].nickname"
            :distributionValue="RankingHasTop10[0].quantity || ''"
            style="width: 55%"
            @click="viewUserInfo(RankingHasTop10[0].userId)"
          />
        </div>

        <!-- 按钮 -->
        <div style="margin-top: 6vw; display: flex; justify-content: flex-end; align-items: center">
          <!-- 帮助按钮 -->
          <img
            v-smart-img
            :src="webpUrl('helpBt')"
            alt=""
            style="display: block; position: relative; width: 8vw; margin-right: 4vw"
            @click="openPopup('help')"
          />
        </div>

        <!-- 倒计时 -->
        <div class="timeBox">
          <div style="width: 20%">
            <itemCenter :imgUrl="webpUrl('timeBg')">
              <div class="timeText" style="">{{ Days }}D</div>
            </itemCenter>
          </div>
          <div class="timeText timeGap"></div>
          <div style="width: 20%">
            <itemCenter :imgUrl="webpUrl('timeBg')">
              <div class="timeText" style="">{{ Hours }}</div>
            </itemCenter>
          </div>
          <div class="timeText timeGap">:</div>
          <div style="width: 20%">
            <itemCenter :imgUrl="webpUrl('timeBg')">
              <div class="timeText" style="">{{ Minutes }}</div>
            </itemCenter>
          </div>
          <div class="timeText timeGap">:</div>
          <div style="width: 20%">
            <itemCenter :imgUrl="webpUrl('timeBg')">
              <div class="timeText" style="">{{ Second }}</div>
            </itemCenter>
          </div>
        </div>

        <!-- 切换按钮 -->
        <div>
          <div style="display: flex; justify-content: space-around; margin-top: 2vw">
            <!-- 历史模块按钮 -->
            <div style="width: 30%; position: relative" @click="changeModule('history')">
              <img
                v-smart-img
                :src="webpUrl(getImgName('historyBtActive'))"
                alt=""
                :class="{
                  'grayscale-container': !historyShow,
                }"
                style="display: block; width: 100%"
              />
            </div>

            <!-- 排行榜模块按钮 -->
            <div style="width: 30%; position: relative" @click="changeModule('ranking')">
              <img
                v-smart-img
                :src="webpUrl(getImgName('rankingBtActive'))"
                alt=""
                :class="{
                  'grayscale-container': !rankingShow,
                }"
                style="display: block; width: 100%"
              />
            </div>

            <!-- 奖励模块按钮 -->
            <div style="width: 30%; position: relative" @click="changeModule('rewards')">
              <img
                v-smart-img
                :src="webpUrl(getImgName('rewardBtActive'))"
                alt=""
                :class="{
                  'grayscale-container': !rewardsShow,
                }"
                style="display: block; width: 100%"
              />
            </div>
          </div>
        </div>

        <!-- 模块 -->
        <div>
          <!-- history -->
          <div
            v-show="historyShow"
            style="display: flex; flex-direction: column; align-items: center"
          >
            <!-- 历史榜首 -->
            <itemCenter
              style="min-height: 110.3vw"
              :imgUrl="webpUrl(getImgName('historyTopBg'))"
              :contentStyle="`inset: 25vw 5vw 4vw;
                flex-direction: column;
                justify-content: center;
                gap:2vw`"
            >
              <!-- 主要内容 -->
              <div
                style="
                  width: 100%;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;

                  gap: 2vw;
                "
              >
                <!-- 上一周榜首按钮 -->
                <div
                  style="
                    width: 8vw;
                    align-self: stretch;

                    display: flex;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  <img
                    v-smart-img
                    v-show="historyTopList.length > 1 && historyTopIndex > 0"
                    :src="webpUrl('topBackBt')"
                    alt=""
                    class="flipImg"
                    style="display: block; width: 100%; object-fit: cover"
                    @click="historyTopIndex--"
                  />
                </div>

                <!-- 榜首 -->
                <TopUser
                  :BorderImgUrl="webpUrl('historyTopFrame')"
                  :avatarUrl="historyTopList[historyTopIndex].topUser.avatar"
                  :name="historyTopList[historyTopIndex].topUser.nickname"
                  :distributionValue="historyTopList[historyTopIndex].topUser.quantity || ''"
                  style="flex: 1; min-width: 0"
                  @click="viewUserInfo(historyTopList[historyTopIndex].topUser.userId)"
                />

                <!-- 下一周榜首按钮 -->
                <div
                  style="
                    width: 8vw;
                    align-self: stretch;

                    display: flex;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  <img
                    v-smart-img
                    v-show="
                      historyTopList.length > 1 && historyTopIndex + 1 < historyTopList.length
                    "
                    :src="webpUrl('topNextBt')"
                    alt=""
                    class="flipImg"
                    style="display: block; width: 100%; object-fit: cover"
                    @click="historyTopIndex++"
                  />
                </div>
              </div>

              <!-- 结算时间 -->
              <div
                style="
                  font-size: 1.3em;
                  font-weight: 590;
                  background-image: -webkit-linear-gradient(
                    top,
                    rgb(243, 183, 0),
                    rgb(255, 238, 198)
                  );
                  background-clip: text;
                  -webkit-text-fill-color: transparent;
                "
              >
                {{ historyTopList[historyTopIndex].cycleDisplay }}
              </div>
            </itemCenter>

            <!-- 特殊奖励 -->
            <img
              v-smart-img
              :src="webpUrl(specialRewardsImageName)"
              alt=""
              style="display: block; width: 100%; object-fit: cover"
            />
          </div>

          <!-- Ranking -->
          <div v-show="rankingShow">
            <!-- 切换按钮 -->
            <div style="display: flex; justify-content: space-around; margin-top: 2vw">
              <!-- 周榜模块按钮 -->
              <div style="width: 40%; position: relative" @click="changeRanking('week')">
                <itemCenter
                  style="min-height: 8vw"
                  :imgUrl="webpUrl('BtBg')"
                  :contentStyle="`padding-top: 1vw;`"
                  :class="{
                    'grayscale-container': !weekShow,
                  }"
                >
                  <div style="font-weight: 700; font-size: 1.3em">{{ t('weekly_rank') }}</div>
                </itemCenter>
              </div>

              <!-- 日榜模块按钮 -->
              <div style="width: 40%; position: relative" @click="changeRanking('daily')">
                <itemCenter
                  style="min-height: 8vw"
                  :imgUrl="webpUrl('BtBg')"
                  :contentStyle="`padding-top: 1vw;`"
                  :class="{
                    'grayscale-container': !dailyShow,
                  }"
                >
                  <div style="font-weight: 700; font-size: 1.3em">{{ t('daily_rank') }}</div>
                </itemCenter>
              </div>
            </div>

            <!-- 周榜 -->
            <div v-show="weekShow" style="position: relative; width: 100%; margin: 4px 0 10px">
              <div style="position: relative; z-index: 1">
                <!-- 第2-4名 -->
                <itemCenter
                  style="min-height: 132.2vw"
                  :imgUrl="webpUrl(getImgName('RankingMain'))"
                  :contentStyle="`padding: 25% 4% 0;flex-direction: column;`"
                >
                  <div>
                    <!-- 第2名 -->
                    <div style="display: flex; justify-content: center">
                      <TopUser
                        ranking="2"
                        :BorderImgUrl="webpUrl('top2')"
                        :avatarUrl="RankingHasTop10[1].avatar"
                        :name="RankingHasTop10[1].nickname"
                        :distributionValue="RankingHasTop10[1].quantity || ''"
                        style="width: 40%"
                        @click="viewUserInfo(RankingHasTop10[1].userId)"
                      />
                    </div>
                    <!-- 第3-4名 -->
                    <div style="display: flex; justify-content: space-between; margin-top: -5vw">
                      <TopUser
                        ranking="3"
                        :BorderImgUrl="webpUrl('top3')"
                        :avatarUrl="RankingHasTop10[2].avatar"
                        :name="RankingHasTop10[2].nickname"
                        :distributionValue="RankingHasTop10[2].quantity || ''"
                        style="width: 38%"
                        @click="viewUserInfo(RankingHasTop10[2].userId)"
                      />
                      <TopUser
                        ranking="4"
                        :BorderImgUrl="webpUrl('top4')"
                        :avatarUrl="RankingHasTop10[3].avatar"
                        :name="RankingHasTop10[3].nickname"
                        :distributionValue="RankingHasTop10[3].quantity || ''"
                        style="width: 38%"
                        @click="viewUserInfo(RankingHasTop10[3].userId)"
                      />
                    </div>
                  </div>
                </itemCenter>

                <!-- 第5-10名 -->
                <itemCenter
                  style="min-height: 90.13vw"
                  :imgUrl="webpUrl('RankingCenterBg')"
                  :contentStyle="`padding: 0 5%;flex-direction: column;justify-content: space-around;`"
                >
                  <!-- 5-7 -->
                  <div style="width: 100%; display: flex; justify-content: space-between">
                    <TopUser
                      v-for="topUser in RankingHasTop10.slice(4, 7)"
                      :key="topUser.userId"
                      ranking="5-7"
                      :BorderImgUrl="webpUrl('top5_7')"
                      :avatarUrl="topUser.avatar"
                      :name="topUser.nickname"
                      :distributionValue="topUser.quantity || ''"
                      style="width: 30%"
                      @click="viewUserInfo(topUser.userId)"
                    />
                  </div>

                  <!-- 8-10 -->
                  <div style="width: 100%; display: flex; justify-content: space-between">
                    <TopUser
                      v-for="topUser in RankingHasTop10.slice(7, 10)"
                      :key="topUser.userId"
                      ranking="8-10"
                      :BorderImgUrl="webpUrl('top8_10')"
                      :avatarUrl="topUser.avatar"
                      :name="topUser.nickname"
                      :distributionValue="topUser.quantity || ''"
                      style="width: 30%"
                      @click="viewUserInfo(topUser.userId)"
                    />
                  </div>
                </itemCenter>

                <!-- 第11名开始 -->
                <div v-if="showRanking.length > 0" style="position: relative; z-index: 2">
                  <itemCenter
                    style="min-height: 26.4vw"
                    v-for="(listItem, index) in showRanking"
                    :key="listItem.userId"
                    :imgUrl="webpUrl('RankingItem')"
                    :contentStyle="`padding: 0 10%`"
                    :lazy="true"
                    :immediate="index < 2"
                    @click="viewUserInfo(listItem.userId)"
                  >
                    <!-- 基本信息 -->
                    <div
                      style="
                        flex: 1;
                        min-width: 0;

                        display: flex;
                        justify-content: space-around;
                        align-items: center;

                        gap: 8px;
                      "
                    >
                      <!-- 排名 -->
                      <div style="color: #ffe601; font-weight: 700">
                        {{ listItem?.rank }}
                      </div>

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

                      <!-- 名称、id -->
                      <div
                        style="
                          flex: 1;
                          min-width: 0;
                          align-self: stretch;

                          display: flex;
                          flex-direction: column;
                          justify-content: space-around;
                        "
                      >
                        <div
                          style="
                            color: #fff;
                            font-weight: 860;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                          "
                          class="UserNickname"
                        >
                          {{ listItem?.nickname }}
                        </div>
                        <div style="color: #fff; font-weight: 590" class="UserNickname">
                          {{ $t('user_id_prefix') }} {{ listItem?.account }}
                        </div>
                      </div>
                    </div>

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

                        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; object-fit: cover"
                      />
                      <div style="color: #ffe601; font-weight: 700" class="UserNickname">
                        {{ listItem?.quantity }}
                      </div>
                    </div>
                  </itemCenter>
                </div>

                <!-- 底框 -->
                <img
                  v-smart-img
                  :src="webpUrl('RankingBottomBorder')"
                  alt=""
                  width="100%"
                  style="display: block; margin-top: -6vw; position: relative; z-index: 2"
                />
              </div>
            </div>

            <!-- 日榜 -->
            <div v-show="dailyShow" style="position: relative; width: 100%; margin: 4px 0 10px">
              <div style="position: relative; z-index: 1">
                <!-- 头部 -->
                <itemCenter
                  style="min-height: 132.2vw"
                  :imgUrl="webpUrl(getImgName('RankingMain'))"
                  :contentStyle="`padding: 25% 0 0;flex-direction: column;`"
                >
                  <!-- 前3名 -->
                  <itemCenter
                    style="z-index: 0"
                    :imgUrl="webpUrl('top1-3FrameDaily')"
                    :contentStyle="`flex-direction: column;padding: 17vw 9.5vw 7vw 10.2vw;justify-content: space-between;`"
                  >
                    <!-- 第1名 -->
                    <div style="display: flex; justify-content: center; width: 100%">
                      <TopUserDaily
                        ranking="1"
                        :avatarUrl="RankingDailyHasTop3[0].avatar"
                        :name="RankingDailyHasTop3[0].nickname"
                        :distributionValue="RankingDailyHasTop3[0].quantity || ''"
                        style="width: 45%"
                        @click="viewUserInfo(RankingDailyHasTop3[0].userId)"
                      />
                    </div>
                    <!-- 第2-3名 -->
                    <div style="margin-top: -5vw" class="top2-3">
                      <TopUserDaily
                        ranking="2"
                        :avatarUrl="RankingDailyHasTop3[1].avatar"
                        :name="RankingDailyHasTop3[1].nickname"
                        :distributionValue="RankingDailyHasTop3[1].quantity || ''"
                        style="width: 38%"
                        @click="viewUserInfo(RankingDailyHasTop3[1].userId)"
                      />
                      <TopUserDaily
                        ranking="3"
                        :avatarUrl="RankingDailyHasTop3[2].avatar"
                        :name="RankingDailyHasTop3[2].nickname"
                        :distributionValue="RankingDailyHasTop3[2].quantity || ''"
                        style="width: 38%"
                        @click="viewUserInfo(RankingDailyHasTop3[2].userId)"
                      />
                    </div>
                  </itemCenter>
                </itemCenter>

                <!-- 第4名开始 -->
                <div
                  v-if="showRankingDaily.length > 0"
                  style="margin-top: -2vw; position: relative; z-index: -1"
                >
                  <itemCenter
                    style="min-height: 26.4vw"
                    v-for="(listItem, index) in showRankingDaily"
                    :key="listItem.userId"
                    :imgUrl="webpUrl('RankingItem')"
                    :contentStyle="`padding: 0 10%`"
                    :lazy="true"
                    :immediate="index < 2"
                    @click="viewUserInfo(listItem.userId)"
                  >
                    <!-- 基本信息 -->
                    <div
                      style="
                        flex: 1;
                        min-width: 0;

                        display: flex;
                        justify-content: space-around;
                        align-items: center;

                        gap: 8px;
                      "
                    >
                      <!-- 排名 -->
                      <div style="color: #ffe601; font-weight: 700">
                        {{ listItem?.rank }}
                      </div>

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

                      <!-- 名称、id -->
                      <div
                        style="
                          flex: 1;
                          min-width: 0;
                          align-self: stretch;

                          display: flex;
                          flex-direction: column;
                          justify-content: space-around;
                        "
                      >
                        <div
                          style="
                            color: #fff;
                            font-weight: 860;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                          "
                          class="UserNickname"
                        >
                          {{ listItem?.nickname }}
                        </div>
                        <div style="color: #fff; font-weight: 590" class="UserNickname">
                          {{ $t('user_id_prefix') }} {{ listItem?.account }}
                        </div>
                      </div>
                    </div>

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

                        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; object-fit: cover"
                      />
                      <div style="color: #ffe601; font-weight: 700" class="UserNickname">
                        {{ listItem?.quantity }}
                      </div>
                    </div>
                  </itemCenter>
                </div>

                <!-- 底框 -->
                <img
                  v-smart-img
                  :src="webpUrl('RankingBottomBorder')"
                  alt=""
                  width="100%"
                  style="display: block; margin-top: -6vw; position: relative; z-index: 2"
                />
              </div>
            </div>
          </div>

          <!-- Rewards -->
          <div
            v-show="rewardsShow"
            style="display: flex; flex-direction: column; align-items: center"
          >
            <!-- 切换按钮 -->
            <div style="display: flex; justify-content: space-around; margin-top: 2vw">
              <!-- 周榜奖励模块按钮 -->
              <div style="width: 40%; position: relative" @click="changeRanking('week')">
                <itemCenter
                  style="min-height: 8vw"
                  :imgUrl="webpUrl('BtBg')"
                  :contentStyle="`padding-top: 1vw;`"
                  :class="{
                    'grayscale-container': !weekShow,
                  }"
                >
                  <div style="font-weight: 700; font-size: 1.3em">{{ t('weekly_rewards') }}</div>
                </itemCenter>
              </div>

              <!-- 日榜奖励模块按钮 -->
              <div style="width: 40%; position: relative" @click="changeRanking('daily')">
                <itemCenter
                  style="min-height: 8vw"
                  :imgUrl="webpUrl('BtBg')"
                  :contentStyle="`padding-top: 1vw;`"
                  :class="{
                    'grayscale-container': !dailyShow,
                  }"
                >
                  <div style="font-weight: 700; font-size: 1.3em">{{ t('daily_rewards') }}</div>
                </itemCenter>
              </div>
            </div>

            <!-- 周榜奖励模块 -->
            <div
              v-show="weekShow"
              v-for="(rewardsTop, top) in rewardsList"
              :key="top"
              style="position: relative; width: 100%; margin: 4px 0 10px"
            >
              <!-- 第一名奖励 -->
              <itemCenter
                style="min-height: 110.3vw"
                v-if="top == 0"
                :imgUrl="topImg[0]"
                :contentStyle="`display: grid;grid-template-columns: repeat(2, 1fr);gap: 2vw;padding: 28vw 4vw 8vw 37vw;`"
              >
                <div
                  v-for="(reward, rewardIndex) in rewardsTop.rewards"
                  :key="rewardIndex"
                  style="
                    width: 100%;
                    min-width: 0;
                    align-self: stretch;

                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    align-items: center;
                  "
                >
                  <div
                    style="
                      width: 100%;
                      aspect-ratio: 1/1;

                      display: flex;
                      justify-content: center;
                      align-items: center;
                    "
                  >
                    <!-- 奖励图片 -->
                    <img
                      :src="reward.cover || ''"
                      alt=""
                      style="display: block; width: 70%; object-fit: cover"
                      @error="(e) => handleRewardImageError(e, reward.type)"
                    />
                  </div>

                  <!-- 数值 -->
                  <div
                    style="
                      width: 100%;

                      display: flex;
                      justify-content: center;
                      align-items: center;
                    "
                  >
                    <div
                      style="
                        min-width: 0;
                        color: #f9e447;
                        text-align: center;
                        font-size: 1.2em;
                        font-weight: 900;
                      "
                    >
                      {{ showDetail(reward.type, reward) }}
                    </div>
                  </div>
                </div>

                <!-- 启动时间 -->
                <div
                  style="
                    position: absolute;
                    left: 3.5vw;
                    bottom: 10vw;
                    width: 28vw;

                    display: flex;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  <div
                    style="color: #f9e447; text-align: center; font-size: 1.2em; font-weight: 900"
                  >
                    7Days
                  </div>
                </div>
              </itemCenter>

              <!-- 第2-4、5-7、8-10名奖励 -->
              <itemCenter
                v-else
                style="min-height: 110.3vw"
                :imgUrl="topImg[Number(rewardsTop.rankRange) - 1]"
                :contentStyle="`display: grid;grid-template-columns: repeat(3, 1fr);gap: 4vw;padding: 28vw 3vw 10vw;`"
              >
                <div
                  v-for="(reward, rewardIndex) in rewardsTop.rewards"
                  :key="rewardIndex"
                  style="width: 100%"
                  :style="rewardIndex == 3 ? `grid-row: 2;grid-column: 2;` : ''"
                >
                  <div
                    style="
                      width: 100%;
                      aspect-ratio: 1/1;

                      display: flex;
                      justify-content: center;
                      align-items: center;
                    "
                  >
                    <!-- 奖励图片 -->
                    <img
                      :src="reward.cover || ''"
                      alt=""
                      style="display: block; width: 70%; object-fit: cover"
                      @error="(e) => handleRewardImageError(e, reward.type)"
                    />
                  </div>

                  <!-- 数值 -->
                  <div
                    style="
                      width: 100%;

                      display: flex;
                      justify-content: center;
                      align-items: center;
                    "
                  >
                    <div
                      style="
                        min-width: 0;
                        color: #f9e447;
                        text-align: center;
                        font-size: 1.2em;
                        font-weight: 900;
                      "
                    >
                      {{ showDetail(reward.type, reward) }}
                    </div>
                  </div>
                </div>
              </itemCenter>
            </div>

            <!-- 日榜奖励模块 -->
            <img
              v-show="dailyShow"
              v-for="(value, index) in 3"
              :src="webpUrl(`top${index + 1}RewardDaily`)"
              alt=""
              style="width: 100%; margin: 4px 0 10px"
            />
          </div>
        </div>

        <!-- 我的排名占位 -->
        <div v-if="rankingShow" style="height: 22vw"></div>

        <!-- 我的排名 -->
        <itemCenter
          v-if="rankingShow"
          style="min-height: 24.33vw; position: fixed; bottom: 0; z-index: 3"
          :imgUrl="webpUrl('myRankingBg')"
          :contentStyle="`padding: 0 8%`"
        >
          <!-- 基本信息 -->
          <div
            style="
              flex: 1;
              min-width: 0;

              display: flex;
              justify-content: space-around;
              align-items: center;

              gap: 8px;
            "
          >
            <!-- 排名 -->
            <div style="color: #ffe601; font-weight: 700">
              {{ myRanking.rank || 999 }}
            </div>

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

            <!-- 名称 -->
            <div style="flex: 1; min-width: 0; display: flex; flex-direction: column">
              <div
                style="
                  color: #fff;
                  font-weight: 860;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                "
                class="UserNickname"
              >
                {{ myRanking.nickname }}
              </div>
            </div>
          </div>

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

              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; object-fit: cover"
            />
            <div style="color: #ffe601; font-weight: 700">
              {{ myRanking.quantity || 0 }}
            </div>
          </div>
        </itemCenter>

        <!-- 弹窗遮罩层 -->
        <maskLayer class="ranking-popup-mask" :maskLayerShow="maskLayerShow">
          <!-- 居中弹窗 -->
          <div
            style="
              width: 100vw;
              height: 100vh;
              display: flex;
              justify-content: center;
              align-items: center;
            "
            @click.self="closedPopup"
          >
            <!-- help弹窗 -->
            <div v-show="helpShow" @click.stop>
              <itemCenter
                style="min-height: 156.33vw"
                :imgUrl="webpUrl(getImgName('helpBg'))"
                :contentStyle="`inset: 15% 8% 3%;overflow-y: auto;display:block;`"
              >
                <img
                  v-smart-img
                  :src="webpUrl(getImgName('helpInfo'))"
                  alt=""
                  style="display: block; width: 100%; object-fit: cover; margin-bottom: 6vw"
                />
              </itemCenter>
            </div>

            <!-- 每日弹窗 -->
            <div v-show="dailyPopUpShow" @click.stop>
              <itemCenter
                style="min-height: 147.2vw"
                :imgUrl="webpUrl(dailyPopUpImageName)"
                :contentStyle="`z-index: 0;`"
              >
                <!-- 关闭按钮 -->
                <div
                  style="
                    display: block;
                    position: absolute;
                    z-index: 9;
                    width: 8vw;
                    top: 3vw;
                    right: 2vw;

                    cursor: pointer;
                    -webkit-tap-highlight-color: transparent;
                    -webkit-touch-callout: none;
                    user-select: none;
                    touch-action: manipulation;
                  "
                  @click.stop.prevent="closedPopup"
                  @touchend.stop.prevent="closedPopup"
                >
                  <img
                    v-smart-img
                    :src="webpUrl('closeBt')"
                    alt=""
                    style="display: block; width: 100%; pointer-events: none"
                  />
                </div>
              </itemCenter>
            </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 { useLangStore } from '@/stores/lang'
import { getPngUrl, getWebpUrl } from '@/config/imagePaths.js'
import { preloadImages, preloadImagesIdle } from '@/utils/image/imagePreloader.js'
import { handleAvatarImageError, handleRewardImageError } from '@/utils/image/imageHandler.js'
import { useGamesKingStore } from '@/stores/gamesKing'
import { storeToRefs } from 'pinia'
import { useI18n } from 'vue-i18n'

import {
  getThisWeekRewardsAndGifts, // 获取本周奖励和礼物
  getRankingListAndMyRanking, // 获取排行榜和我的排名
  getHistoryTopOne, // 获取历史榜首
} from '@/api/activity.js'

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

const gamesKingStore = useGamesKingStore()

// 预加载状态
const isLoading = ref(true)

const { t, locale } = useI18n()
const langStore = useLangStore()
const backIcon = new URL('../../../assets/icon/Aslan/arrowBack.png', import.meta.url).href
// 当前语言类型
const currentLangType = computed(() => {
  return langStore.selectedLang?.type || 'en'
})

// 获取OSS图片URL的函数
const imageUrl = (filename) => getPngUrl('Ranking/GamesKingWebp/', filename)
const webpUrl = (filename) => getWebpUrl('Ranking/GamesKing/webp/', filename)

// 根据语言获取图片名
const getImgName = (filename) => {
  return currentLangType.value === 'ar' ? `${filename}_ar` : filename
}

const dailyPopUpImageName = computed(() => {
  return getImgName('dailyPopUp_20260602')
})
const specialRewardsImageName = computed(() => {
  return getImgName('specialRewards_20260608')
})

const {
  checkDate, // 对应周几
  checkStatus, // 是否已看过
} = storeToRefs(gamesKingStore)

const helpShow = ref(false) //帮助模块
const dailyPopUpShow = ref(false)
const maskLayerShow = computed(() => {
  return helpShow.value || dailyPopUpShow.value
})
const pageBackHidden = computed(() => {
  return maskLayerShow.value || !checkStatus.value
})
const POPUP_CLOSE_CLICK_GUARD_MS = 400
const lastPopupClosedAt = ref(0)

const handlePageBack = () => {
  console.log('点击退出页面')

  if (Date.now() - lastPopupClosedAt.value < POPUP_CLOSE_CLICK_GUARD_MS) return
  if (pageBackHidden.value) return
  console.log('home back')
  closePage()
}

// 打开弹窗
const openPopup = (type) => {
  closedPopup() //先关闭其他弹窗
  switch (type) {
    case 'help':
      helpShow.value = true
      break
    case 'dailyPopUp':
      dailyPopUpShow.value = true
      break
    default:
      break
  }
}

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

  lastPopupClosedAt.value = Date.now()
  console.log('点击关闭弹窗')

  // 此时打开的是每日弹窗，设置为已看过
  if (dailyPopUpShow.value) {
    checkStatus.value = true
  }

  // 关闭所有弹窗
  helpShow.value = false
  dailyPopUpShow.value = false
}

// 检查今日是否已看过
const checkShow = () => {
  const now = new Date()
  const dailyDate = now.getMonth() + '-' + now.getDate()

  if (dailyDate != checkDate.value) {
    checkDate.value = dailyDate // 更新周几
    checkStatus.value = false // 更新今日状态
    openPopup('dailyPopUp')
  } else if (!checkStatus.value) {
    openPopup('dailyPopUp')
  }
}

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

// 模块切换展示
const historyShow = ref(false) //历史榜首
const rankingShow = ref(true) //排行榜
const rewardsShow = ref(false) //奖励模块
const changeModule = (module) => {
  switch (module) {
    case 'history':
      historyShow.value = true
      rankingShow.value = false
      rewardsShow.value = false
      break
    case 'ranking':
      historyShow.value = false
      rankingShow.value = true
      rewardsShow.value = false
      break
    case 'rewards':
      historyShow.value = false
      rankingShow.value = false
      rewardsShow.value = true
  }
}

const historyTopList = ref([]) // 历史榜首
const historyTopIndex = ref(0)

const weekShow = ref(true) // 周榜展示
const dailyShow = ref(false) // 日榜展示
const RankingWeek = ref([]) // 周榜
const RankingDaily = ref([]) // 日榜
const myWeekRanking = ref({}) // 我的周排名
const myDailyRanking = ref({}) // 我的日排名
const rewardsList = ref([]) // 奖励列表
const myRanking = computed(() => {
  if (weekShow.value) {
    return myWeekRanking.value
  }
  return myDailyRanking.value
}) // 我的排名

// 榜单切换
const changeRanking = (type) => {
  switch (type) {
    case 'week':
      weekShow.value = true
      dailyShow.value = false
      break
    case 'daily':
      weekShow.value = false
      dailyShow.value = true
      break
  }
}

const topImg = ref([
  webpUrl('top1RewardBg_20260515'),
  webpUrl('top2_4RewardBg'),
  webpUrl('top5_7RewardBg'),
  webpUrl('top8_10RewardBg'),
]) // top奖励背景

// 处理周榜小于10人时的情况
const RankingHasTop10 = computed(() => {
  let RankingShow = [...RankingWeek.value]
  if (RankingWeek.value.length < 10) {
    let addNullUser = Array.from({ length: 10 - RankingWeek.value.length }, () => ({
      avatar: '',
      nickname: '',
      quantity: '',
    }))
    RankingShow.push(...addNullUser)
  }
  return RankingShow
})

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

// 处理日榜小于3人时的情况
const RankingDailyHasTop3 = computed(() => {
  let RankingShow = [...RankingDaily.value]
  if (RankingDaily.value.length < 3) {
    let addNullUser = Array.from({ length: 3 - RankingDaily.value.length }, () => ({
      avatar: '',
      nickname: '',
      quantity: '',
    }))
    RankingShow.push(...addNullUser)
  }
  return RankingShow
})

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

// 获取对应的时间戳
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) {
    // 初始化数据
    initData()

    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 showDetail = (type, reward) => {
  let showamount = ['GOLD', 'DIAMOND', 'GIFT', 'FRAGMENTS']
  if (showamount.includes(type)) {
    return reward.content
  } else if (type === 'DOLLARS') {
    return `$${reward.content}`
  } else {
    return `${reward.quantity}Days`
  }
}

// 获取历史榜首
const getAllTopOne = async () => {
  const resHistoryTopOne = await getHistoryTopOne('10')
  if (resHistoryTopOne.status && resHistoryTopOne.body) {
    historyTopList.value = resHistoryTopOne.body?.historicalList
  }
}

// 获取周排行榜和我的排名
const getWeekListAndMy = async () => {
  let data = {
    activityType: 10,
  }
  const resMyWeekStarRanking = await getRankingListAndMyRanking(data)
  console.log('resMyWeekStarRanking:', resMyWeekStarRanking)
  if (resMyWeekStarRanking.status && resMyWeekStarRanking.body) {
    myWeekRanking.value = resMyWeekStarRanking.body.currentUserRank
    RankingWeek.value = resMyWeekStarRanking.body.rankingList
  }
}

// 获取日排行榜和我的排名
const getDailyListAndMy = async () => {
  let data = {
    activityType: 15,
    cycleType: 1,
  }
  const resDailyListAndMy = await getRankingListAndMyRanking(data)
  console.log('resDailyListAndMy:', resDailyListAndMy)
  if (resDailyListAndMy.status && resDailyListAndMy.body) {
    myDailyRanking.value = resDailyListAndMy.body.currentUserRank
    RankingDaily.value = resDailyListAndMy.body.rankingList
  }
}

// 获取每周奖励列表
const getRewardsAndGifts = async () => {
  const resRewardsAndGifts = await getThisWeekRewardsAndGifts('2001207026499137537')
  if (resRewardsAndGifts.status && resRewardsAndGifts.body) {
    rewardsList.value = resRewardsAndGifts.body.butOneRewards
  }
}

// 刷新页面数据
const initData = async () => {
  await Promise.all([
    getAllTopOne(), // 获取历史榜首
    getWeekListAndMy(), // 获取周榜和我的排名
    getDailyListAndMy(), // 获取日榜和我的排名
    getRewardsAndGifts(), // 获取本周的礼物和奖励列表
  ])
}

// 预加载关键图片
const preloadCriticalImages = async () => {
  const criticalImages = [
    webpUrl('bg'),
    webpUrl('bg2'),
    webpUrl('closeBt'),
    webpUrl(dailyPopUpImageName.value),
    webpUrl('helpBt'),
    webpUrl(getImgName('helpInfo')),
    webpUrl(getImgName('historyBtActive')),
    webpUrl('myRankingBg'),
    webpUrl(getImgName('rankingBtActive')),
    webpUrl(getImgName('rewardBtActive')),

    webpUrl('RankingBottomBorder'),
    webpUrl('RankingCenterBg'),
    webpUrl('RankingItem'),
    webpUrl(getImgName('RankingMain')),

    webpUrl('BtBg'),
    webpUrl('top1RewardDaily'),
    webpUrl('top2RewardDaily'),
    webpUrl('top3RewardDaily'),
    webpUrl('timeBg'),
    webpUrl('topBackBt'),
    webpUrl('topNextBt'),
    webpUrl('top1'),
    webpUrl('top2'),
    webpUrl('top3'),
    webpUrl('top4'),
    webpUrl('top5_7'),
    webpUrl('top8_10'),
    webpUrl('top1-3FrameDaily'),
  ]

  await preloadImages(criticalImages)
}

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

// 预加载其他图片
const preloadOtherImages = async () => {
  const criticalImages = [
    webpUrl(getImgName('historyTopBg')),
    webpUrl('historyTopFrame'),
    webpUrl(specialRewardsImageName.value),
    webpUrl('top1RewardBg_20260515'),
    webpUrl('top2_4RewardBg'),
    webpUrl('top5_7RewardBg'),
    webpUrl('top8_10RewardBg'),
  ]

  await preloadImagesIdle(criticalImages)
}

// 使用工具函数连接APP
const connectToAppHandler = async () => {
  await connectToApp(async () => {
    await completePreloading()
    preloadOtherImages()
    checkShow()
  })
}

// 组件挂载时检测环境
onMounted(async () => {
  connectToAppHandler()
  getCountdown()
  timer = setInterval(getCountdown, 1000) //倒计时每秒更新
})

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

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

.fullPage {
  position: relative;
  background: #5d0c00;
}

.bg {
  width: 100vw;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

.timeText {
  color: #fff;
  font-weight: 590;
  font-size: 1.5em;
}

.timeGap {
  width: 6px;
  align-self: stretch;

  display: flex;
  justify-content: center;
  align-items: center;
}

.grayscale-container {
  filter: grayscale(100%) brightness(100%);
}

.top2-3 {
  display: flex;
  justify-content: space-between;
}

[dir='rtl'] .top2-3 {
  flex-direction: row-reverse;
}

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

.topTitle {
  font-size: 1.5em;
}

.history-name {
  font-size: 0.8em;
}

.history-time {
  font-size: 0.8em;
}

.UserNickname {
  font-size: 0.8em;
}

.timeBox {
  min-height: 20.27vw;
  display: flex;
  justify-content: center;
  margin-top: 10vw;
}

/* 添加加载动画样式 */
.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;
}

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

.loading-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #666;

  overflow: hidden;
  position: relative;
  z-index: 0;
}

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

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

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

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

[dir='rtl'] .timeBox {
  flex-direction: row-reverse;
}

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