<template>
  <div class="fullPage">
    <!-- 预加载状态 -->
    <div v-show="isLoading" class="loading-container">
      <!-- 页面背景 -->
      <BackgroundLayer :backgroundImages="[imageUrl('bg1'), imageUrl('bg2'), imageUrl('bg3')]" />

      <!-- 加载动画 -->
      <div class="loading-spinner"></div>
      <p>{{ $t('loading') }}...</p>
    </div>

    <!-- 主要内容 -->
    <div
      v-show="!isLoading"
      style="width: 100vw; min-height: 100vh; overflow: hidden; position: relative"
    >
      <!-- 页面背景 -->
      <BackgroundLayer
        :backgroundImages="[
          imageUrl('bg1'),
          imageUrl('bg2'),
          imageUrl('bg3'),
          imageUrl('bg4'),
          imageUrl('bg5'),
        ]"
      />

      <!-- 页面内容 -->
      <div style="position: relative; z-index: 2; margin-top: 150vw">
        <!-- 弹幕 -->
        <Barrage
          style="display: block; width: 100vw; height: 30vw"
          :barrageList="barrageList"
        ></Barrage>

        <!-- 情书模块按钮 -->
        <div
          style="min-height: 68.2vw; display: flex; justify-content: center; align-items: center"
        >
          <img
            v-smart-img
            :src="imageUrl(getImgName('letterBg'))"
            alt=""
            style="width: 90%"
            @click="myCoupleShow = true"
          />
        </div>

        <!-- 历史榜首 -->
        <itemCenter
          style="min-height: 104.83vw"
          :imgUrl="imageUrl(getImgName('historyTopBg'))"
          :contentStyle="`inset: 30vw 9vw 27vw;flex-direction: column;gap:2vw`"
        >
          <div
            style="width: 100%; height: 73%; min-width: 0; display: flex; overflow: hidden"
            class="scrollX"
          >
            <div
              class="topList"
              :style="{ left: listLeftPosition }"
              @touchstart="handleTouchStart"
              @touchmove="handleTouchMove"
              @touchend="handleTouchEnd"
            >
              <!-- 右占位 -->
              <div style="width: 9vw; min-width: 0; flex-shrink: 0"></div>

              <!-- top1情侣头像 -->
              <itemCenter
                v-for="(item, index) in seasonTop1List"
                style="z-index: 1; min-width: 0; flex-shrink: 0; transition: all 0.8s ease"
                :style="{ width: index === centerIndex ? '60vw' : '40vw' }"
                :imgUrl="twelveSigns[centerIndex]?.bgUrl"
                :contentStyle="``"
                @click="moveToCenter(index)"
              >
                <!-- 点击事件 -->
                <div
                  style="
                    position: absolute;
                    z-index: 9;
                    inset: 0;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  <!-- 情侣1 -->
                  <div
                    style="flex: 1; min-width: 0; align-self: stretch"
                    @click="viewUserInfo(item.userId)"
                  ></div>
                  <!-- 情侣2 -->
                  <div
                    style="flex: 1; min-width: 0; align-self: stretch"
                    @click="viewUserInfo(item.cpUserId)"
                  ></div>
                </div>

                <!-- 头像 -->
                <div style="position: relative; width: 100%; height: 100%">
                  <div
                    style="
                      position: relative;
                      z-index: -1;
                      top: 26%;
                      left: 0;
                      width: 100%;
                      height: 50%;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      gap: 16%;
                    "
                  >
                    <!-- 情侣1头像 -->
                    <img
                      :src="item?.userAvatar || ''"
                      alt=""
                      style="
                        display: block;
                        height: 100%;
                        object-fit: cover;
                        aspect-ratio: 1/1;
                        border-radius: 50%;
                      "
                      @error="handleAvatarImageError"
                    />
                    <!-- 情侣2头像 -->
                    <img
                      :src="item?.cpUserAvatar || ''"
                      alt=""
                      style="
                        display: block;
                        height: 100%;
                        object-fit: cover;
                        aspect-ratio: 1/1;
                        border-radius: 50%;
                      "
                      @error="handleAvatarImageError"
                    />
                  </div>
                </div>
              </itemCenter>

              <!-- 左占位 -->
              <div style="width: 9vw; min-width: 0; flex-shrink: 0"></div>
            </div>
          </div>

          <!-- 奖品说明 -->
          <div style="min-width: 0; display: flex; justify-content: center; align-items: center">
            <div
              style="
                border-radius: 12px;
                border: 1.325px solid #fff6e0;
                background: linear-gradient(270deg, #ffcc46 0.03%, #ffdb7b 99.97%);
                box-shadow:
                  0 -2.649px 3.974px 0 rgba(255, 241, 205, 0.48) inset,
                  0 5.298px 7.947px 0 #fff1cd inset;

                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                padding: 1vw 5vw;
              "
            >
              <div style="font-size: 1.2em; color: #fe649b; font-weight: 700">
                Season{{ centerIndex + 1 }}
              </div>
              <div style="font-size: 0.9em; color: #fe649b; font-weight: 700">
                {{ twelveSigns[centerIndex]?.time }}
              </div>
            </div>
          </div>
        </itemCenter>

        <!-- 栏目按钮 -->
        <div
          style="
            min-height: 31.18vw;
            width: 100vw;
            padding: 0 10vw;

            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10vw;
          "
        >
          <!-- 排行榜栏目按钮 -->
          <div style="flex: 1; min-width: 0" @click="changeTag('ranking')">
            <img
              v-show="RankingShow"
              v-smart-img
              :src="imageUrl(getImgName('rankingBtActive'))"
              alt=""
              style="width: 100%; display: block; object-fit: cover"
            />
            <img
              v-show="!RankingShow"
              v-smart-img
              :src="imageUrl(getImgName('rankingBt'))"
              alt=""
              style="width: 100%; display: block; object-fit: cover"
            />
          </div>

          <!-- 游戏栏目按钮 -->
          <div style="flex: 1; min-width: 0" @click="changeTag('gamePlay')">
            <img
              v-show="GamePlayShow"
              v-smart-img
              :src="imageUrl(getImgName('gamePlayBtActive'))"
              alt=""
              style="width: 100%; display: block; object-fit: cover"
            />
            <img
              v-show="!GamePlayShow"
              v-smart-img
              :src="imageUrl(getImgName('gamePlayBt'))"
              alt=""
              style="width: 100%; display: block; object-fit: cover"
            />
          </div>
        </div>

        <!-- 排行榜标签页 -->
        <Ranking v-show="RankingShow" />

        <!-- 游戏玩法标签页 -->
        <GamePlay v-show="GamePlayShow" />
      </div>

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

      <!-- 我的排名 -->
      <div v-show="RankingShow" style="width: 100vw; position: fixed; bottom: 0; z-index: 2">
        <!-- 有伴侣和排名 -->
        <itemCenter
          style="width: 100%"
          :flip="true"
          v-if="myRanking?.cpUserId"
          :imgUrl="imageUrl('myRankingBg')"
          :contentStyle="`padding: 0 5%;justify-content: flex-start;`"
        >
          <!-- 排名 -->
          <div style="width: 10vw; display: flex; justify-content: center; align-items: center">
            <img
              v-smart-img
              v-for="(digit, index) in getRankDigits(myRanking.rank || 999)"
              :src="getDigitImageUrl(digit)"
              style="display: block; width: 3vw; object-fit: cover"
            />
          </div>

          <!-- 头像 -->
          <div style="width: 36vw">
            <div
              style="
                width: 100%;
                padding: 3vw 5vw;
                height: 80%;
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
            >
              <!-- 情侣1头像 -->
              <img
                :src="myRanking.userAvatar || ''"
                alt=""
                style="
                  display: block;
                  min-width: 0;
                  width: 12vw;
                  object-fit: cover;
                  aspect-ratio: 1/1;
                  border-radius: 50%;
                  border: 1px solid #fefa9f;
                "
                @error="handleAvatarImageError"
              />
              <!-- 情侣2头像 -->
              <img
                :src="myRanking.cpUserAvatar || ''"
                alt=""
                style="
                  display: block;
                  min-width: 0;
                  width: 12vw;
                  object-fit: cover;
                  aspect-ratio: 1/1;
                  border-radius: 50%;
                  border: 1px solid #fefa9f;
                "
                @error="handleAvatarImageError"
              />
            </div>
          </div>

          <!-- 名称 -->
          <div
            style="
              flex: 1;
              min-width: 0;
              height: 100%;
              display: flex;
              flex-direction: column;
              justify-content: center;
              gap: 1vw;
            "
          >
            <div
              style="width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap"
            >
              {{ myRanking.userNickname || '' }}
            </div>
            <div
              style="width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap"
            >
              {{ myRanking.cpUserNickname || '' }}
            </div>
          </div>

          <!-- 贡献 -->
          <div style="width: auto; min-width: 0; display: flex; align-items: center">
            <img
              v-smart-img
              :src="imageUrl('distribution')"
              alt=""
              style="width: 10vw; display: block; object-fit: cover"
            />
            <div style="font-weight: 700">{{ myRanking.total || '0' }}</div>
          </div>
        </itemCenter>

        <!-- 无伴侣 -->
        <div
          v-else
          style="
            border-radius: 16px 16px 0 0;
            background:
              radial-gradient(
                171.8% 117.34% at 34.23% 104.78%,
                rgba(255, 188, 221, 0) 0%,
                #ffbcdd 100%
              ),
              linear-gradient(303deg, rgba(255, 255, 255, 0) 0%, #ff4656 91.85%),
              linear-gradient(292deg, #ff3bc4 0%, rgba(255, 255, 255, 0) 100.5%), #fff;

            padding: 24px 12px 24px 12px;

            display: flex;
            justify-content: center;
            align-items: center;
            gap: 2vw;
          "
        >
          <div style="font-size: 0.8em; font-weight: 700; color: #fff">
            {{ t('no_relationship') }}
          </div>
          <div
            style="
              font-size: 0.8em;
              color: #e14f69;
              font-weight: 700;
              box-sizing: border-box;
              border-bottom: 1px solid #e14f69;
            "
            @click="viewUserInfo(getUserId())"
          >
            {{ t('go_add_cp') }}
          </div>
        </div>
      </div>

      <!-- 弹窗遮罩层 -->
      <maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
        <!-- 我的伴侣弹窗 -->
        <div v-show="myCoupleShow" style="position: fixed; bottom: 0; width: 100%">
          <div
            style="
              border-radius: 16px 16px 0 0;
              background:
                radial-gradient(
                  171.8% 117.34% at 34.23% 104.78%,
                  rgba(255, 188, 221, 0) 0%,
                  #ffbcdd 100%
                ),
                linear-gradient(303deg, rgba(255, 255, 255, 0) 0%, #ff4656 91.85%),
                linear-gradient(292deg, #ff3bc4 0%, rgba(255, 255, 255, 0) 100.5%), #fff;
              max-height: 80vh;
              overflow: hidden;
              display: flex;
              flex-direction: column;
              align-items: center;
              gap: 10px;
              padding: 20px;
            "
            @click.stop
          >
            <div
              style="margin: 0; font-size: 1.2em; font-weight: 600; color: #fff; margin-bottom: 4vw"
            >
              {{ t('my_couple') }}
            </div>

            <!-- 有伴侣 -->
            <div
              v-if="myCouples.length > 0"
              style="display: flex; flex-direction: column; align-items: center; gap: 4vw"
            >
              <!-- 伴侣列表 -->
              <div
                v-for="(couple, index) in myCouples"
                :key="index"
                style="position: relative"
                @click="selectCouple(couple.cpUserProfile)"
              >
                <itemCenter
                  :imgUrl="imageUrl('coupleItem')"
                  :flip="true"
                  :contentStyle="`justify-content: space-between;`"
                >
                  <div class="couple-item-info">
                    <img
                      :src="couple?.cpUserProfile.userAvatar || ''"
                      alt=""
                      style="width: 3em; aspect-ratio: 1/1; border-radius: 50%"
                      @error="handleAvatarImageError"
                    />
                    <div style="flex: 1; min-width: 0">
                      <div
                        style="
                          font-size: 0.9em;
                          text-overflow: ellipsis;
                          overflow: hidden;
                          white-space: nowrap;
                        "
                      >
                        {{ couple?.cpUserProfile.userNickname }}
                      </div>
                      <div style="font-size: 0.8em; color: rgba(255, 255, 255, 0.6)">
                        ID：{{ couple?.cpUserProfile.account }}
                      </div>
                    </div>
                  </div>
                  <div
                    style="
                      width: 10.8%;
                      min-width: 0;
                      align-self: stretch;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                    "
                  >
                    <div
                      v-if="selectedCouple.account === couple?.cpUserProfile.account"
                      style="
                        width: 30%;
                        aspect-ratio: 1/1;
                        border-radius: 50%;
                        background: linear-gradient(152deg, #f5a8b7 7.01%, #d61f3f 92.99%);
                      "
                    ></div>
                  </div>
                </itemCenter>
              </div>

              <!-- 发送按钮 -->
              <button
                style="width: 80%; padding: 12px 16px; border: none; color: #fff; font-weight: 600"
                :style="
                  selectedCouple.account
                    ? 'border-radius: 200px;background: linear-gradient(180deg, #FFACBB 0%, rgba(255, 172, 187, 0.00) 58.38%), #FF4768;box-shadow: 0 1px 4.5px 0 rgba(0, 0, 0, 0.10), -1px 0 5px 0 rgba(255, 255, 255, 0.70) inset, -3.5px 0 7.5px 0 rgba(255, 255, 255, 0.20) inset, 1px 0 5px 0 rgba(255, 255, 255, 0.70) inset, 3.5px 0 7.5px 0 rgba(255, 255, 255, 0.20) inset;'
                    : 'border-radius: 32px;background: linear-gradient(135deg, rgba(162, 162, 162, 0.50) 2.82%, rgba(100, 100, 100, 0.50) 99.15%);'
                "
                :disabled="!selectedCouple.account"
                @click="showPopup('writeLetter')"
              >
                {{ t('send_love_letter') }}
              </button>
            </div>

            <!-- 无伴侣 -->
            <div
              v-else
              style="display: flex; flex-direction: column; align-items: center; gap: 4vw"
            >
              <img :src="imageUrl('noCoupleSign')" alt="" style="width: 50%; display: block" />
              <p style="color: rgba(0, 0, 0, 0.4); font-size: 1em; font-weight: 700">
                {{ t('no_couples') }}
              </p>
            </div>
          </div>
        </div>

        <!-- 居中弹窗 -->
        <div
          v-show="centerPopupShow"
          style="
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
          "
          @click="closedPopup"
        >
          <!-- 发送情书二次确认弹窗 -->
          <div
            v-show="confirmShow"
            style="
              width: 90%;
              border-radius: 12px;
              background:
                radial-gradient(
                  171.8% 117.34% at 34.23% 104.78%,
                  rgba(255, 188, 221, 0) 0%,
                  #ffbcdd 100%
                ),
                linear-gradient(303deg, rgba(255, 255, 255, 0) 0%, #ff4656 91.85%),
                linear-gradient(292deg, #ff3bc4 0%, rgba(255, 255, 255, 0) 100.5%), #fff;
              padding: 20px;

              display: flex;
              flex-direction: column;
              align-items: center;
              gap: 2vw;
            "
            @click.stop
          >
            <!-- 标题 -->
            <h3 style="font-size: 1.1em; font-weight: 700">
              {{ t('love_letter_title') }}
            </h3>

            <!-- 内容 -->
            <div style="font-size: 0.8em; font-weight: 500">
              {{ t('spend_5000_coins_confess') }}
            </div>

            <!-- 按钮 -->
            <div
              style="width: 100%; display: flex; justify-content: space-around; align-items: center"
            >
              <!-- 取消按钮 -->
              <div
                style="
                  padding: 12px 20px;
                  border-radius: 200px;
                  background:
                    linear-gradient(180deg, #ffacbb 0%, rgba(255, 172, 187, 0) 58.38%), #ff879c;

                  box-shadow:
                    -1px 0 5px 0 rgba(255, 255, 255, 0.7) inset,
                    -3.5px 0 7.5px 0 rgba(255, 255, 255, 0.2) inset,
                    1px 0 5px 0 rgba(255, 255, 255, 0.7) inset,
                    3.5px 0 7.5px 0 rgba(255, 255, 255, 0.2) inset;
                  backdrop-filter: blur(5000px);
                  font-weight: 800;
                "
                @click="cancelSend"
              >
                {{ t('cancel') }}
              </div>

              <!-- 发送按钮 -->
              <div
                style="
                  padding: 12px 20px;
                  border-radius: 200px;
                  background:
                    linear-gradient(180deg, #ffacbb 0%, rgba(255, 172, 187, 0) 58.38%), #ff4768;
                  box-shadow:
                    0 1px 4.5px 0 rgba(0, 0, 0, 0.1),
                    -1px 0 5px 0 rgba(255, 255, 255, 0.7) inset,
                    -3.5px 0 7.5px 0 rgba(255, 255, 255, 0.2) inset,
                    1px 0 5px 0 rgba(255, 255, 255, 0.7) inset,
                    3.5px 0 7.5px 0 rgba(255, 255, 255, 0.2) inset;
                  font-weight: 800;
                "
                @click="sendLoveLetter"
              >
                {{ t('confirm') }}
              </div>
            </div>
          </div>

          <!-- 金币不足提示 -->
          <div
            v-show="TipsShow"
            style="display: flex; justify-content: center; width: 100vw"
            @click.stop
          >
            <div
              style="
                width: 60vw;
                padding: 2vw;

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

                border-radius: 8px;
                background: rgba(255, 255, 255, 0.4);
                backdrop-filter: blur(32px);
              "
            >
              <div style="font-size: 0.8em; font-weight: 700; color: #fff">
                {{ t('insufficient_wallet_balance') }}
              </div>
              <div
                style="
                  font-size: 0.8em;
                  color: #e14f69;
                  font-weight: 700;
                  box-sizing: border-box;
                  border-bottom: 1px solid #e14f69;
                "
                @click="gotoRecharge"
              >
                {{ t('recharge_now') }}
              </div>
            </div>
          </div>

          <!-- 需要补签提示 -->
          <div
            v-show="needCheckInTipsShow"
            style="display: flex; justify-content: center; width: 100vw"
            @click.stop
          >
            <div
              style="
                width: 60vw;
                padding: 2vw;

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

                border-radius: 8px;
                background: rgba(255, 255, 255, 0.4);
                backdrop-filter: blur(32px);
              "
            >
              <div style="font-size: 0.8em; font-weight: 700; color: #fff">
                {{ t('consecutive_check_in_reward') }}
              </div>
            </div>
          </div>

          <!-- 签到成功提示 -->
          <div
            v-show="signInSuccessShow"
            style="display: flex; justify-content: center; width: 100vw"
            @click.stop
          >
            <div
              style="
                width: 60vw;
                padding: 2vw;

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

                border-radius: 8px;
                background: rgba(255, 255, 255, 0.4);
                backdrop-filter: blur(32px);
              "
            >
              <div style="font-size: 0.8em; font-weight: 700; color: #fff">
                {{ t('check_in_successful') }}
              </div>
            </div>
          </div>

          <!-- 我的最新情书 -->
          <itemCenter
            v-if="lastLetterShow"
            :imgUrl="imageUrl(getImgName('lastLetterBg'))"
            :contentStyle="`inset: 30vw 17vw 27vw;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
                gap:2vw`"
            @click.stop
          >
            <!-- 发送者 -->
            <div style="width: 100%; display: flex; align-items: center; gap: 2vw">
              <img
                :src="latestLoveLetter.senderAvatar"
                alt=""
                style="
                  display: block;
                  min-width: 0;
                  width: 4em;
                  aspect-ratio: 1/1;
                  border-radius: 50%;
                "
              />
              <div
                style="
                  flex: 1;
                  min-width: 0;
                  align-self: stretch;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  gap: 1vw;
                "
              >
                <div
                  style="
                    min-width: 0;
                    color: #ff79a1;
                    font-size: 0.9em;
                    font-weight: 700;

                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                  "
                >
                  {{ latestLoveLetter.senderNickname }}
                </div>
                <div style="font-size: 0.8em; font-weight: 500; color: #ff79a1">
                  ID：{{ latestLoveLetter.senderAccount }}
                </div>
              </div>
            </div>

            <!-- 情书内容(保留换行) -->
            <div
              class="scrollY"
              style="
                flex: 1;
                width: 100%;
                color: #ff79a1;
                font-weight: 600;
                white-space: pre-wrap;

                overflow-y: auto;
              "
            >
              {{ latestLoveLetter.content }}
            </div>
          </itemCenter>

          <!-- 抽奖结果 -->
          <div v-show="resultShow" style="position: relative; width: 90%" @click.stop>
            <itemCenter
              :imgUrl="imageUrl('resultBg')"
              :contentStyle="`inset: 37vw 15vw 16vw;
                flex-direction: column;
                justify-content: space-between;
                gap:2vw`"
            >
              <div
                style="
                  width: 100%;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                "
              >
                <!-- 上一个奖品 -->
                <div
                  style="
                    width: 8vw;
                    align-self: stretch;

                    display: flex;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  <img
                    class="flipImg"
                    v-show="result.length > 1 && resultShowIndex > 0"
                    :src="imageUrl('resultBack')"
                    alt=""
                    style="display: block; width: 80%; object-fit: cover"
                    @click="resultShowIndex--"
                  />
                </div>
                <!-- 奖品 -->
                <img
                  :src="result[resultShowIndex]?.prize?.prizeImage"
                  alt=""
                  width="45%"
                  style="display: block"
                />
                <!-- 下一个奖品 -->
                <div
                  style="
                    width: 8vw;
                    align-self: stretch;

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

              <!-- 奖品说明 -->
              <div
                style="
                  width: 100%;
                  height: 5vw;
                  text-align: center;
                  font-size: 0.9em;
                  font-weight: 590;

                  position: relative;
                  color: #ff79a1;
                "
              >
                {{ t('you_get') }} {{ result[resultShowIndex]?.prize?.prizeName }}
                <div v-if="result.length > 1" class="resultNum">
                  {{ resultShowIndex + 1 }} / {{ result.length }}
                </div>
              </div>

              <!-- 关闭弹窗按钮 -->
              <div style="width: 30vw; height: 10vw" @click="closedPopup"></div>
            </itemCenter>
          </div>

          <!-- 中奖历史 -->
          <div v-show="drawRecordShow" style="position: relative; width: 95%" @click.stop>
            <itemCenter
              :imgUrl="imageUrl(getImgName('recordBg'))"
              :contentStyle="`padding: 28vw 12vw 25vw;`"
            >
              <div
                style="
                  width: 100%;
                  height: 100%;
                  overflow-y: auto;
                  display: flex;
                  flex-direction: column;
                  gap: 8px;
                "
                class="scrollY"
              >
                <div
                  v-for="(record, index) in myRecords"
                  style="
                    border-radius: 12px;
                    border: 2px solid #fff;
                    background: linear-gradient(
                      264deg,
                      rgba(255, 220, 220, 0.4) 10.17%,
                      rgba(255, 151, 151, 0.4) 60.22%,
                      rgba(255, 220, 220, 0.4) 103.12%
                    );
                    box-shadow:
                      0 36.858px 13.981px 0 rgba(255, 106, 106, 0.02),
                      0 20.335px 12.71px 0 rgba(255, 106, 106, 0.08),
                      0 8.897px 8.897px 0 rgba(255, 106, 106, 0.13),
                      0 2.542px 5.084px 0 rgba(255, 106, 106, 0.15);
                    backdrop-filter: blur(4.5px);

                    display: flex;
                    padding: 12px;
                    justify-content: space-between;
                    align-items: center;
                  "
                >
                  <div style="display: flex; align-items: center; gap: 4px">
                    <img
                      :src="record?.prize?.prizeImage || ''"
                      alt=""
                      style="width: 10vw; min-width: 0; object-fit: cover; display: block"
                    />
                    <div
                      style="font-weight: 590; font-size: 0.9em; direction: ltr; text-align: left"
                    >
                      {{ record?.prize?.prizeName }}
                    </div>
                  </div>
                  <div style="font-weight: 510; font-size: 0.8em; direction: ltr; text-align: left">
                    {{ formatUTCCustom(record.drawTime) }}
                  </div>
                </div>
              </div>
            </itemCenter>
          </div>

          <!-- 领取历史(水晶&碎片) -->
          <div v-show="receiveRecordShow" style="position: relative; width: 95%" @click.stop>
            <itemCenter
              :imgUrl="imageUrl('myPropsLogBg')"
              :contentStyle="`padding: 28vw 12vw 25vw;`"
            >
              <div
                style="
                  width: 100%;
                  height: 100%;
                  overflow-y: auto;
                  display: flex;
                  flex-direction: column;
                  gap: 8px;
                "
                class="scrollY"
              >
                <div
                  v-for="(record, index) in receiveRecord"
                  style="
                    border-radius: 12px;
                    border: 2px solid #fff;
                    background: linear-gradient(
                      264deg,
                      rgba(255, 220, 220, 0.4) 10.17%,
                      rgba(255, 151, 151, 0.4) 60.22%,
                      rgba(255, 220, 220, 0.4) 103.12%
                    );
                    box-shadow:
                      0 36.858px 13.981px 0 rgba(255, 106, 106, 0.02),
                      0 20.335px 12.71px 0 rgba(255, 106, 106, 0.08),
                      0 8.897px 8.897px 0 rgba(255, 106, 106, 0.13),
                      0 2.542px 5.084px 0 rgba(255, 106, 106, 0.15);
                    backdrop-filter: blur(4.5px);

                    display: flex;
                    padding: 12px;
                    justify-content: space-between;
                    align-items: center;
                  "
                >
                  <div style="min-width: 0; display: flex; align-items: center; gap: 4px">
                    <img
                      v-if="record.itemType == 'cp_fragment'"
                      :src="imageUrl('debris')"
                      alt=""
                      style="
                        width: 10vw;
                        min-width: 0;

                        object-fit: cover;
                        display: block;
                      "
                    />
                    <img
                      v-else-if="record.itemType == 'lottery_ticket'"
                      :src="imageUrl('crystal')"
                      alt=""
                      style="
                        width: 10vw;
                        min-width: 0;

                        object-fit: cover;
                        display: block;
                      "
                    />
                    <div
                      style="
                        min-width: 0;
                        font-weight: 590;
                        font-size: 0.9em;
                        direction: ltr;
                        text-align: left;
                      "
                    >
                      {{ record.changeType == 2 ? '-' : '+' }}{{ record.changeAmount }}
                    </div>
                  </div>
                  <div
                    style="
                      min-width: 0;
                      font-weight: 510;
                      font-size: 0.8em;
                      direction: ltr;
                      text-align: left;
                    "
                  >
                    {{ formatUTCCustom(record.createdAt) }}
                  </div>
                </div>
              </div>
            </itemCenter>
          </div>

          <!-- 兑换奖品确认弹窗 -->
          <div
            v-show="exchangeConfirmShow"
            style="
              border-radius: 12px;
              background: #fff;
              padding: 20px;

              display: flex;
              flex-direction: column;
              align-items: center;
              gap: 2vw;
            "
            @click.stop
          >
            <!-- 内容 -->
            <div style="color: rgba(0, 0, 0, 0.4); font-size: 0.8em; font-weight: 500">
              {{ t('confirm_item_exchange') }}
            </div>

            <!-- 按钮 -->
            <div
              style="width: 100%; display: flex; justify-content: space-around; align-items: center"
            >
              <!-- 取消按钮 -->
              <div
                style="
                  padding: 12px 20px;
                  border-radius: 24px;
                  border: 1px solid #e6e6e6;
                  color: rgba(0, 0, 0, 0.4);
                  font-weight: 800;
                "
                @click="cancelSend"
              >
                {{ t('cancel') }}
              </div>

              <!-- 发送按钮 -->
              <div
                style="
                  padding: 12px 20px;
                  border-radius: 24px;
                  background:
                    linear-gradient(180deg, #ffacbb 0%, rgba(255, 172, 187, 0) 58.38%), #ff4768;
                  box-shadow:
                    0 1px 4.5px 0 rgba(0, 0, 0, 0.1),
                    -1px 0 5px 0 rgba(255, 255, 255, 0.7) inset,
                    -3.5px 0 7.5px 0 rgba(255, 255, 255, 0.2) inset,
                    1px 0 5px 0 rgba(255, 255, 255, 0.7) inset,
                    3.5px 0 7.5px 0 rgba(255, 255, 255, 0.2) inset;
                  color: rgba(255, 255, 255, 0.8);
                  font-weight: 800;
                "
                @click="exchangeGoods"
              >
                {{ t('confirm') }}
              </div>
            </div>
          </div>

          <!-- 前三名奖励展示 -->
          <div
            v-show="topRewardShow"
            style="
              width: 90%;
              position: relative;

              border-radius: 12px;
              background:
                radial-gradient(
                  171.8% 117.34% at 34.23% 104.78%,
                  rgba(255, 188, 221, 0) 0%,
                  #ffbcdd 100%
                ),
                linear-gradient(303deg, rgba(255, 255, 255, 0) 0%, #ff4656 91.85%),
                linear-gradient(292deg, #ff3bc4 0%, rgba(255, 255, 255, 0) 100.5%), #fff;
              padding: 20px;

              display: flex;
              flex-direction: column;
              align-items: center;
              gap: 2vw;
            "
            @click.stop
          >
            <!-- 关闭按钮 -->
            <div
              style="position: absolute; top: 2vw; right: 5vw; color: #ff4668; font-size: 3em"
              @click="closedPopup"
            >
              x
            </div>

            <!-- 奖品展示 -->
            <img
              v-smart-img
              :src="topReward.cover"
              alt=""
              style="width: 60%; display: block; object-fit: cover"
            />

            <!-- 时长或数量 -->
            <div
              style="
                font-size: 2em;
                font-weight: 700;
                background: linear-gradient(
                  180deg,
                  #ffdf6b 31.61%,
                  #ffe562 36.73%,
                  #fff 52.37%,
                  #ffe562 58.67%,
                  #ffa615 72.2%
                );
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              "
            >
              {{ formatRewardDisplay(topReward.type, topReward) }}
            </div>
          </div>

          <!-- help弹窗 -->
          <div v-show="helpShow" @click.stop>
            <itemCenter
              :imgUrl="imageUrl(getImgName('helpBg'))"
              :contentStyle="`inset: 30vw 18vw 28vw;overflow-y: auto;display:block;`"
            >
              <img
                v-smart-img
                :src="imageUrl(getImgName('helpInfoNew'))"
                alt=""
                style="display: block; width: 100%; object-fit: cover; margin-bottom: 6vw"
              />
            </itemCenter>
          </div>

          <!-- 碎片不足提示 -->
          <div
            v-show="fragmentNotEnoughShow"
            style="display: flex; justify-content: center; width: 100vw"
            @click.stop
          >
            <div
              style="
                width: 60vw;
                padding: 2vw;

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

                border-radius: 8px;
                background: rgba(255, 255, 255, 0.4);
                backdrop-filter: blur(32px);
              "
            >
              <div style="font-size: 0.8em; font-weight: 700; color: #fff">
                {{ t('not_enough_pieces') }}
              </div>
            </div>
          </div>

          <!-- 编写情书弹窗 -->
          <div
            v-show="writeLetterShow"
            style="
              width: 90%;

              border-radius: 12px;
              background: #fff;
              padding: 20px;

              display: flex;
              flex-direction: column;
              align-items: center;
              gap: 2vw;
            "
            @click.stop
          >
            <!-- 标题 -->
            <h3 style="color: rgba(0, 0, 0, 0.8); font-size: 1.1em; font-weight: 700">Tips</h3>

            <!-- 情书输入框 -->
            <div style="position: relative; width: 100%">
              <textarea
                v-model="writeLetterText"
                @input="updateLetterText"
                :placeholder="t('love_letter_placeholder')"
                maxlength="80"
                style="
                  width: 100%;
                  min-height: 10vh;
                  border-radius: 8px;
                  border: 1px solid #e6e6e6;
                  padding: 2vw 2vw 18px;

                  color: black;

                  outline: none;
                  resize: vertical;
                "
              ></textarea>
              <div
                style="
                  position: absolute;
                  bottom: 8px;
                  right: 12px;
                  font-size: 0.8em;
                  color: rgba(0, 0, 0, 0.4);
                  font-weight: 500;
                  background: transparent;
                  z-index: 1;
                "
              >
                {{ letterTextLength }}/80
              </div>
            </div>

            <!-- 是否公开 -->
            <div style="width: 100%; display: flex; align-items: center; gap: 1vw">
              <!-- 按钮 -->
              <div
                style="
                  width: 1.5em;
                  aspect-ratio: 1/1;
                  border-radius: 50%;

                  border: 2px solid rgba(0, 0, 0, 0.4);

                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
                @click="isPublic = !isPublic"
              >
                <div
                  v-if="isPublic"
                  style="
                    width: 0.8em;
                    aspect-ratio: 1/1;
                    border-radius: 50%;
                    background: linear-gradient(152deg, #f5a8b7 7.01%, #d61f3f 92.99%);
                  "
                ></div>
              </div>

              <!-- 说明文本 -->
              <div
                style="
                  flex: 1;
                  min-width: 0;
                  color: rgba(0, 0, 0, 0.4);
                  font-size: 0.8em;
                  font-weight: 500;
                "
              >
                {{ t('publish_love_letter') }}
              </div>
            </div>

            <!-- 按钮 -->
            <div
              style="width: 100%; display: flex; justify-content: space-around; align-items: center"
            >
              <!-- 取消按钮 -->
              <div
                style="
                  padding: 12px 20px;
                  border-radius: 24px;
                  border: 1px solid #e6e6e6;
                  color: rgba(0, 0, 0, 0.4);
                  font-weight: 800;
                "
                @click="cancelSend"
              >
                {{ t('cancel') }}
              </div>

              <!-- 发送按钮 -->
              <div
                style="
                  padding: 12px 20px;
                  border-radius: 24px;
                  background:
                    linear-gradient(180deg, #ffacbb 0%, rgba(255, 172, 187, 0) 58.38%), #ff4768;
                  box-shadow:
                    0 1px 4.5px 0 rgba(0, 0, 0, 0.1),
                    -1px 0 5px 0 rgba(255, 255, 255, 0.7) inset,
                    -3.5px 0 7.5px 0 rgba(255, 255, 255, 0.2) inset,
                    1px 0 5px 0 rgba(255, 255, 255, 0.7) inset,
                    3.5px 0 7.5px 0 rgba(255, 255, 255, 0.2) inset;
                  color: rgba(255, 255, 255, 0.8);
                  font-weight: 800;
                "
                @click="showPopup('confirm')"
              >
                {{ t('confirm') }}
              </div>
            </div>
          </div>
        </div>
      </maskLayer>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useLangStore } from '@/stores/lang'
import { useI18n } from 'vue-i18n'
import { getPngUrl } from '@/config/imagePaths.js'
import { getUserId, setUserInfo } from '@/utils/userStore.js'
import { viewUserInfo } from '@/utils/appBridge.js'
import { connectToApp } from '@/utils/appConnector.js'
import { preloadImages } from '@/utils/image/imagePreloader.js'
import { formatUTCCustom } from '@/utils/utcFormat.js'
import { showError, showSuccess } from '@/utils/toast.js'
import { handleAvatarImageError, handleRewardImageError } from '@/utils/image/imageHandler.js'
import { useCoupleStore } from '@/stores/couple'
import { storeToRefs } from 'pinia'
import { useThrottle, useDebounce } from '@/utils/useDebounce.js'
import { formatRewardDisplay } from '@/utils/rewardFormatter.js'
import { gotoAppPage } from '@/utils/appBridge.js'

import {
  apiGetMyLotteryTicketCount, // 获取我的剩余抽奖券数量
  apiGetUserFragmentBackpack, // 获取用户碎片背包
  exchangeGood, //用碎片兑换资源
  apiGetMyCpObject, // 获取我的-cp对象
  apiSendLoveLetter, // 发送CP告白信封
  apiGetLoveLetterWall, // 查询告白墙
  apiGetLatestLoveLetter, // 查询我收到的最新告白信封
  apiGetCpSeasonTop1List, // 查询赛季榜Top1列表
} from '@/api/couple.js'

import Ranking from './Ranking.vue'
import GamePlay from './GamePlay/Gameplay.vue'
import Barrage from './components/Barrage.vue'
import BackgroundLayer from '@/components/BackgroundLayer.vue'
import itemCenter from '@/components/itemCenter.vue'
import maskLayer from '@/components/MaskLayer.vue'
import { get } from '@/utils/http'

const { t } = useI18n()
const router = useRouter()
const route = useRoute()
const coupleStore = useCoupleStore()

const {
  fragmentNotEnoughShow, // 碎片不足提示

  helpShow, // 帮助弹窗

  topRewardShow, // 前三名奖励展示
  topReward, // 前三名奖励项

  myRanking, // 我的排名

  crystal, // 水晶数量
  debris, // 碎片数量

  TipsShow, // 提示弹窗
  needCheckInTipsShow, // 需要补签提示
  signInSuccessShow, // 签到成功提示

  rewardShow, // 奖励弹窗
  reward, // 奖励
  resultShow, // 抽奖结果弹窗
  result, // 抽奖结果
  drawRecordShow, // 中奖历史弹窗
  myRecords, // 我的抽奖记录
  receiveRecordShow, // 领取水晶&碎片历史弹窗
  receiveRecord, // 领取水晶&碎片记录

  exchangeConfirmShow, // 兑换确认弹窗
  exchangeItem, // 当前兑换的物品
} = storeToRefs(coupleStore)

const langStore = useLangStore()
// 当前语言类型
const currentLangType = computed(() => {
  return langStore.selectedLang?.type || 'en'
})

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

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

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

// 获取排名数字的各个位数
const getRankDigits = (rank) => {
  return String(rank).split('')
}

// 获取数字图片URL
const getDigitImageUrl = (digit) => {
  if (/^[0-9]$/.test(digit)) {
    return imageUrl(`num${digit}`) // 假设数字图片在相同目录下
  }
  return ''
}

const barrageList = ref([]) // 弹幕数据

const RankingShow = ref(true) // 排行榜模块展示
const GamePlayShow = ref(false) // 游戏玩法模块展示

// 栏目切换
const changeTag = (module) => {
  switch (module) {
    case 'ranking':
      RankingShow.value = true
      GamePlayShow.value = false
      break
    case 'gamePlay':
      RankingShow.value = false
      GamePlayShow.value = true
      break
  }
}

const latestLoveLetter = ref({}) // 最新的一封情书
const myCouples = ref([]) // 伴侣列表
const selectedCouple = ref({}) // 选中的情书对象
const writeLetterText = ref('') // 情书内容
const letterTextLength = ref(0) // 情书内容字数

const resultShowIndex = ref(0) // 抽奖结果索引

const seasonTop1List = ref([]) // 赛季榜Top1列表
const listLeftPosition = ref('0') //top历史榜单
const centerIndex = ref(0) // 默认中间项的索引为1
// 添加触摸滑动相关变量
const touchStartX = ref(0)
const touchEndX = ref(0)

const twelveSigns = ref([
  { name: 'Aquarius', time: '2026.1.20-2.18', bgUrl: imageUrl('AquariusCoupleFrame') }, // 水瓶座
  { name: 'Pisces', time: '2026.2.19-3.20', bgUrl: imageUrl('PiscesCoupleFrame') }, // 双鱼座
  { name: 'Aries', time: '2026.3.21-4.19', bgUrl: imageUrl('AriesCoupleFrame') }, // 白羊座
  { name: 'Taurus', time: '2026.4.20-5.20', bgUrl: imageUrl('') }, // 金牛座
  { name: 'Gemini', time: '2026.5.21-6.21', bgUrl: imageUrl('') }, // 双子座
  { name: 'Cancer', time: '2026.6.22-7.22', bgUrl: imageUrl('') }, // 巨蟹座
  { name: 'Leo', time: '2026.7.23-8.22', bgUrl: imageUrl('') }, // 狮子座
  { name: 'Virgo', time: '2026.8.23-9.22', bgUrl: imageUrl('') }, // 处女座
  { name: 'Libra', time: '2026.9.23-10.22', bgUrl: imageUrl('') }, // 天秤座
  { name: 'Scorpio', time: '2026.10.23-11.21', bgUrl: imageUrl('') }, // 天蝎座
  { name: 'Sagittarius', time: '2026.11.22-12.21', bgUrl: imageUrl('') }, // 天蝎座
  { name: 'Capricorn', time: '2026.12.22-1.19', bgUrl: imageUrl('') }, // 摩羯座
]) // 十二星座

// 计算移动到中心位置的函数
const moveToCenter = (targetIndex) => {
  if (centerIndex.value == targetIndex) return // 如果当前索引和目标索引相同，则不需要移动

  centerIndex.value = targetIndex
  updatePosition() // 更新位置
}

// 触发触摸开始事件
const handleTouchStart = (event) => {
  touchStartX.value = event.touches[0].clientX
}

// 触发触摸移动事件
const handleTouchMove = (event) => {
  touchEndX.value = event.touches[0].clientX
}

// 触发触摸结束事件
const handleTouchEnd = () => {
  if (!touchStartX.value) return

  let minSwipeDistance = 50 //x轴最小滑动距离
  let distance = touchEndX.value - touchStartX.value // 左滑<0 右滑>0
  let isLeftSwipe = distance < -minSwipeDistance // 满足左滑
  let isRightSwipe = distance > minSwipeDistance // 满足右滑

  if (isLeftSwipe) {
    // 左滑
    if (centerIndex.value > 0) {
      moveToCenter(centerIndex.value - 1)
    }
  } else if (isRightSwipe) {
    // 右滑
    if (centerIndex.value < seasonTop1List.value.length - 1) {
      moveToCenter(centerIndex.value + 1)
    }
  }

  // 重置触摸变量
  touchStartX.value = 0
  touchEndX.value = 0
}

// 更新位置
const updatePosition = () => {
  const itemWidth = 40 // vw，根据您的代码中每个项目宽度
  const itemSpacing = 2 // vw，根据您的代码中项目间距
  const targetOffset = (itemWidth + itemSpacing) * centerIndex.value
  listLeftPosition.value = targetOffset + 'vw'
}

// 选中伴侣
const selectCouple = (couple) => {
  if (selectedCouple.value.account === couple.account) {
    // 如果已经选中伴侣，则取消选中
    selectedCouple.value = {}
  } else {
    selectedCouple.value = couple
  }
}

// 更新情书内容
const updateLetterText = () => {
  // 情书内容不能为空
  if (!writeLetterText.value.trim()) {
    letterTextLength.value = 0
    return
  }

  // 情书内容字数不得高于80字
  if (writeLetterText.value.length > 80) {
    writeLetterText.value = writeLetterText.value.slice(0, 80)
  }
  letterTextLength.value = writeLetterText.value.length
}

// 遮罩层
const lastLetterShow = ref(false) // 最新情书弹窗
const myCoupleShow = ref(false) // 我的伴侣弹窗
const writeLetterShow = ref(false) // 写信模块弹窗
const isPublic = ref(false) // 是否公开
const confirmShow = ref(false) // 二次确认发送弹窗
const maskLayerShow = computed(() => {
  return (
    fragmentNotEnoughShow.value ||
    helpShow.value ||
    topRewardShow.value ||
    lastLetterShow.value ||
    myCoupleShow.value ||
    writeLetterShow.value ||
    TipsShow.value ||
    confirmShow.value ||
    needCheckInTipsShow.value ||
    signInSuccessShow.value ||
    rewardShow.value ||
    resultShow.value ||
    drawRecordShow.value ||
    receiveRecordShow.value ||
    exchangeConfirmShow.value
  )
})
const centerPopupShow = computed(() => {
  return (
    fragmentNotEnoughShow.value ||
    helpShow.value ||
    topRewardShow.value ||
    lastLetterShow.value ||
    writeLetterShow.value ||
    TipsShow.value ||
    confirmShow.value ||
    needCheckInTipsShow.value ||
    signInSuccessShow.value ||
    rewardShow.value ||
    resultShow.value ||
    drawRecordShow.value ||
    receiveRecordShow.value ||
    exchangeConfirmShow.value
  )
})

// 打开遮罩层
const showPopup = (type) => {
  switch (type) {
    case 'myCouple':
      closedPopup() // 关闭弹窗
      myCoupleShow.value = true
      break
    case 'writeLetter':
      closedPopup() // 关闭弹窗
      writeLetterShow.value = true
      break
    case 'confirm':
      if (!writeLetterText.value.trim()) return
      closedPopup() // 关闭弹窗
      confirmShow.value = true
      break
    case 'tips':
      cancelSend() // 取消发送
      TipsShow.value = true
      break

    default:
      closedPopup() // 关闭弹窗
      break
  }
}

// 关闭弹窗
const closedPopup = () => {
  fragmentNotEnoughShow.value = false
  helpShow.value = false
  topRewardShow.value = false
  lastLetterShow.value = false
  myCoupleShow.value = false
  writeLetterShow.value = false
  TipsShow.value = false
  confirmShow.value = false
  needCheckInTipsShow.value = false
  signInSuccessShow.value = false
  resultShow.value = false
  drawRecordShow.value = false
  receiveRecordShow.value = false
  exchangeConfirmShow.value = false
}

// 创建定时器引用
const tipsTimer = ref(null)
const signInSuccessTimer = ref(null)

// 监听 needCheckInTipsShow 的变化
watch(
  () => needCheckInTipsShow.value,
  (newValue) => {
    if (newValue) {
      // 如果当前是 true，启动定时器
      if (tipsTimer.value) {
        clearTimeout(tipsTimer.value)
      }
      tipsTimer.value = setTimeout(() => {
        needCheckInTipsShow.value = false
      }, 1500) // 1.5秒后自动隐藏
    }
  },
)

// 监听 signInSuccessShow 的变化
watch(
  () => signInSuccessShow.value,
  (newValue) => {
    if (newValue) {
      // 如果当前是 true，启动定时器
      if (signInSuccessTimer.value) {
        clearTimeout(signInSuccessTimer.value)
      }
      signInSuccessTimer.value = setTimeout(() => {
        signInSuccessShow.value = false
      }, 1500) // 1.5秒后自动隐藏
    }
  },
)

// 取消发送
const cancelSend = () => {
  closedPopup()
  selectedCouple.value = {}
  writeLetterText.value = ''
  letterTextLength.value = 0
  isPublic.value = false
}

// 发送情书
const sendLoveLetter = useDebounce(() => {
  sendLetter() //发送信件
}, 1000)

const sendLetter = async () => {
  if (!selectedCouple.value.account) return
  try {
    await apiSendLoveLetter({
      receiverId: selectedCouple.value.id,
      content: writeLetterText.value,
      isPublic: isPublic.value ? 1 : 0,
    })

    cancelSend()
  } catch (error) {
    // 余额不足
    if (error.response.errorCode == 5000) {
      cancelSend()
      showPopup('tips')
    }
  }
}

// 跳转到充值页面
const gotoRecharge = () => {
  router.push('/recharge')
}

// 查询告白墙信息列表
const getLoveLetterWall = async () => {
  const resLoveLetterWall = await apiGetLoveLetterWall()
  if (resLoveLetterWall.status && resLoveLetterWall.body) {
    barrageList.value = resLoveLetterWall.body
  }
}

// 查询赛季榜Top1列表
const getCpSeasonTop1List = async () => {
  const resCpSeasonTop1List = await apiGetCpSeasonTop1List()
  if (resCpSeasonTop1List.status && resCpSeasonTop1List.body) {
    if (Array.isArray(resCpSeasonTop1List.body) && resCpSeasonTop1List.body.length > 0) {
      seasonTop1List.value = resCpSeasonTop1List.body
    } else {
      seasonTop1List.value = [{}]
    }
  }
}

// 查询我收到的最新告白信封
const getLatestLoveLetter = async () => {
  const resLatestLoveLetter = await apiGetLatestLoveLetter()
  if (resLatestLoveLetter.status && resLatestLoveLetter.body) {
    latestLoveLetter.value = resLatestLoveLetter.body
    if (latestLoveLetter.value.id) {
      lastLetterShow.value = true
    }
  }
}

// 查询我的CP对象
const getMyCpObject = async () => {
  const resMyCpObject = await apiGetMyCpObject()
  if (resMyCpObject.status && resMyCpObject.body) {
    myCouples.value = resMyCpObject.body
    // myCouples.value = Array.from({ length: 4 }, () => {
    //   return { ...resMyCpObject.body[0] }
    // })
  }
}

// 获取抽奖券
const getMyLotteryTicketCount = async () => {
  try {
    const response = await apiGetMyLotteryTicketCount('2004471533988167125')
    if (response.status) {
      crystal.value = response.body || 0
    }
  } catch (error) {
    showError(error.response.errorMsg)
  }
}

// 获取用户碎片背包
const getUserFragmentBackpack = async () => {
  try {
    const response = await apiGetUserFragmentBackpack({
      userId: getUserId(),
      // userId: '1957345312961527809',
      fragmentsIds: ['2011710323414081538'],
    })
    if (response.status) {
      debris.value = response.body?.[0]?.quantity || 0
    }
  } catch (error) {
    showError(error.response.errorMsg)
  }
}

// 更新数据
const updateNumbers = () => {
  getMyLotteryTicketCount() // 获取抽奖券数量
  getUserFragmentBackpack() // 获取碎片数量
}

// 用碎片兑换资源
const exchangeGoods = async () => {
  try {
    const resExchangeGood = await exchangeGood(exchangeItem.value)
    if (resExchangeGood.status) {
      updateNumbers() // 更新数据
      exchangeItem.value = null // 清空当前兑换的物品
      exchangeConfirmShow.value = false // 关闭兑换确认弹窗
    }
  } catch (error) {
    console.log('error:', error)
    // 信息提示id有误
    showWarning(error.response.errorMsg)
  }
}

// 页面初始化数据
const initData = async () => {
  await Promise.all([
    getLoveLetterWall(), // 查询告白墙信息列表
    getLatestLoveLetter(), // 查询我收到的最新告白信封
    getMyCpObject(), // 查询我的CP对象
    getCpSeasonTop1List(), // 查询赛季榜Top1列表
  ])
}

// 预加载关键图片
const preloadCriticalImages = async () => {
  const criticalImages = [
    // 背景
    imageUrl('bg1'),
    imageUrl('bg2'),
    imageUrl('bg3'),
    imageUrl('bg4'),
    imageUrl('bg5'),

    // 弹幕
    imageUrl('coupleSign'),

    // 情书
    imageUrl(getImgName('letterBg')),

    // 历史榜首
    imageUrl(getImgName('historyTopBg')),
    // imageUrl('topCoupleFrame'),
    imageUrl('AquariusCoupleFrame'),
    imageUrl('PiscesCoupleFrame'),

    // 按钮
    imageUrl(getImgName('rankingBtActive')),
    imageUrl(getImgName('rankingBt')),
    imageUrl(getImgName('gamePlayBtActive')),
    imageUrl(getImgName('gamePlayBt')),
    imageUrl(getImgName('rankingWeeklyBtActive')),
    imageUrl(getImgName('rankingWeeklyBt')),
    imageUrl(getImgName('rankingSeasonBtActive')),
    imageUrl(getImgName('rankingSeasonBt')),
    imageUrl(getImgName('gameLotteryBtActive')),
    imageUrl(getImgName('gameLotteryBt')),
    imageUrl(getImgName('gameSignInBtActive')),
    imageUrl(getImgName('gameSignInBt')),
    imageUrl(getImgName('gameExchangeBtActive')),
    imageUrl(getImgName('gameExchangeBt')),

    // 排行榜
    imageUrl(`timeBg`),
    imageUrl('helpBt'),
    imageUrl(`top1`),
    imageUrl(`top2-3`),
    imageUrl(`top2RankingBg`),
    imageUrl(`top2Frame`),
    imageUrl(`top3RankingBg`),
    imageUrl(`top3Frame`),
    imageUrl(`rankingCoupleSign`),
    imageUrl(`rankingItemBg`),
    imageUrl('distribution'),
    imageUrl(`num0`),
    imageUrl(`num1`),
    imageUrl(`num2`),
    imageUrl(`num3`),
    imageUrl(`num4`),
    imageUrl(`num5`),
    imageUrl(`num6`),
    imageUrl(`num7`),
    imageUrl(`num8`),
    imageUrl(`num9`),
    imageUrl('myRankingBg'),
    imageUrl('distribution'),
    imageUrl(getImgName('lastLetterBg')),
  ]

  await preloadImages(criticalImages)
}

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

// 预加载其他图片
const preloadOtherImages = async () => {
  const criticalImages = []

  await preloadImages(criticalImages)
}

// 使用工具函数连接APP
const connectToAppHandler = async () => {
  await connectToApp(() => {
    // 连接成功回调
    completePreloading() // 完成预加载
  })
}

// 组件挂载时检测环境
onMounted(() => {
  connectToAppHandler()
  preloadOtherImages() // 预加载其他图片
})

onUnmounted(() => {
  if (tipsTimer.value) {
    clearTimeout(tipsTimer.value)
  }
  if (signInSuccessTimer.value) {
    clearTimeout(signInSuccessTimer.value)
  }
})
</script>

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

.fullPage {
  width: 100vw;
  min-height: 100vh;
  background: #ff79a1;
  position: relative;
}

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

  overflow: hidden;
  position: relative;
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #f59e0b;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 12px;
}

.scrollX::-webkit-scrollbar {
  display: none;
}

.topList {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 2vw;
  width: 100%;
  position: relative;
  transition: all 0.8s ease; // 添加平滑过渡效果
  left: 0;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

textarea::placeholder {
  font-size: 0.8em;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.4);
}

.scrollY::-webkit-scrollbar {
  display: none;
}

.resultNum {
  position: absolute;
  z-index: 9999;
  inset: 0;

  padding-right: 8%;
  display: flex;
  justify-content: flex-end;
  align-items: center;

  font-size: 0.8em;
  font-weight: 590;
  color: #ff79a1;
}

.couple-item-info {
  flex: 1;
  min-width: 0;
  padding-left: 4vw;
  display: flex;
  align-items: center;
  gap: 4vw;
}

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

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

[dir='rtl'] .resultNum {
  direction: ltr;
  justify-content: flex-start;
}

[dir='rtl'] .couple-item-info {
  padding-left: 0;
  padding-right: 4vw;
}
</style>
