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

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

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

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

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

        <!-- 历史榜首 -->
        <itemCenter
          style="min-height: 104.83vw"
          :imgUrl="webpUrl(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="cpl-x1"
              :style="{ left: listLeftPosition }"
              @touchstart="handleTouchStart"
              @touchmove="handleTouchMove"
              @touchend="handleTouchEnd"
              style="touch-action: pan-x"
            >
              <!-- 右占位 -->
              <div style="width: 9vw; min-width: 0; flex-shrink: 0"></div>

              <!-- top1情侣头像 -->
              <itemCenter
                v-for="(item, index) in seasonTop1DisplayList"
                :key="`couple-${item.userId || index}`"
                style="z-index: 1; min-width: 0; flex-shrink: 0; transition: all 0.8s ease"
                :style="{
                  width: index === centerIndex ? '60vw' : '40vw',
                  zIndex: index === centerIndex ? 20 : 1,
                }"
                :imgUrl="item.bgUrl"
                :contentStyle="``"
              >
                <!-- 非居中时显示遮罩层用于移动 -->
                <div
                  v-if="index !== centerIndex"
                  style="position: absolute; inset: 0; z-index: 9; pointer-events: auto"
                  @click.stop="moveToCenter(index)"
                ></div>

                <!-- 点击事件 -->
                <div
                  v-if="index === centerIndex"
                  style="
                    position: absolute;
                    inset: 0;
                    z-index: 20;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    pointer-events: none;
                  "
                >
                  <!-- 情侣1 -->
                  <div
                    style="flex: 1; min-width: 0; align-self: stretch; pointer-events: auto"
                    @click.stop="handleAvatarClick(item.userId)"
                  ></div>
                  <!-- 情侣2 -->
                  <div
                    style="flex: 1; min-width: 0; align-self: stretch; pointer-events: auto"
                    @click.stop="handleAvatarClick(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{{ currentSeasonTop1?.seasonNumber || '' }}
              </div>
              <div style="font-size: 0.9em; color: #fe649b; font-weight: 700">
                {{ currentSeasonTop1?.seasonTime || '' }}
              </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="webpUrl(getImgName('rankingBtActive'))"
              alt=""
              style="width: 100%; display: block; object-fit: cover"
            />
            <img
              v-show="!RankingShow"
              v-smart-img
              :src="webpUrl(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="webpUrl(getImgName('gamePlayBtActive'))"
              alt=""
              style="width: 100%; display: block; object-fit: cover"
            />
            <img
              v-show="!GamePlayShow"
              v-smart-img
              :src="webpUrl(getImgName('gamePlayBt'))"
              alt=""
              style="width: 100%; display: block; object-fit: cover"
            />
          </div>
        </div>

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

        <!-- 游戏玩法标签页 -->
        <GamePlay v-if="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="webpUrl('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="webpUrl('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 class="couple-popup-mask" :maskLayerShow="maskLayerShow" :lockScroll="false">
        <div class="couple-popup-content" @click.self="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="webpUrl('coupleItem')"
                    :flip="true"
                    :contentStyle="`justify-content: space-between;`"
                  >
                    <div class="cpl-x2">
                      <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="webpUrl('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.self="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="webpUrl(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="webpUrl('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="webpUrl('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="webpUrl('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.stop.prevent="closedPopup"
                  @touchend.stop.prevent="closedPopup"
                ></div>
              </itemCenter>
            </div>

            <!-- 中奖历史 -->
            <div v-show="drawRecordShow" style="position: relative; width: 95%" @click.stop>
              <itemCenter
                :imgUrl="webpUrl(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="webpUrl('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="webpUrl('debris')"
                        alt=""
                        style="
                          width: 10vw;
                          min-width: 0;

                          object-fit: cover;
                          display: block;
                        "
                      />
                      <img
                        v-else-if="record.itemType == 'lottery_ticket'"
                        :src="webpUrl('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.stop.prevent="closedPopup"
                @touchend.stop.prevent="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="webpUrl(getImgName('helpBg'))"
                :contentStyle="`inset: 30vw 18vw 28vw;overflow-y: auto;display:block;`"
              >
                <img
                  v-smart-img
                  :src="webpUrl(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>
        </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 { getWebpUrl } from '@/config/imagePaths.js'
import { getUserId, setUserInfo } from '@/utils/userStore.js'
import { closePage, gotoAppPage, viewUserInfo } from '@/utils/appBridge.js'
import { connectToApp } from '@/utils/appConnector.js'
import { preloadImages, preloadImagesIdle } 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 {
  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 backIcon = new URL('../../../assets/icon/Aslan/arrowBack.png', import.meta.url).href

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 webpUrl = (filename) => getWebpUrl('Ranking/Couple/webp/', 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 webpUrl(`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 isSwipe = ref(false) // ✅ 新增：标记是否为滑动
const isMoving = ref(false)
const lastClickTime = ref(0) // ✅ 新增：记录上次点击时间
const clickLock = ref(false) // ✅ 新增：点击锁，防止同一事件多次触发

const zodiacBaseYear = 2026
const twelveSigns = ref([
  {
    name: 'Aquarius',
    startMonthDay: '1.20',
    endMonthDay: '2.18',
    endYearOffset: 0,
    bgUrl: webpUrl('AquariusCoupleFrame'),
  }, // 水瓶座
  {
    name: 'Pisces',
    startMonthDay: '2.19',
    endMonthDay: '3.20',
    endYearOffset: 0,
    bgUrl: webpUrl('PiscesCoupleFrame'),
  }, // 双鱼座
  {
    name: 'Aries',
    startMonthDay: '3.21',
    endMonthDay: '4.19',
    endYearOffset: 0,
    bgUrl: webpUrl('AriesCoupleFrame'),
  }, // 白羊座
  {
    name: 'Taurus',
    startMonthDay: '4.20',
    endMonthDay: '5.20',
    endYearOffset: 0,
    bgUrl: webpUrl('TaurusCoupleFrame'),
  }, // 金牛座
  {
    name: 'Gemini',
    startMonthDay: '5.21',
    endMonthDay: '6.21',
    endYearOffset: 0,
    bgUrl: webpUrl('GeminiCoupleFrame'),
  }, // 双子座
  {
    name: 'Cancer',
    startMonthDay: '6.22',
    endMonthDay: '7.22',
    endYearOffset: 0,
    bgUrl: webpUrl(''),
  }, // 巨蟹座
  {
    name: 'Leo',
    startMonthDay: '7.23',
    endMonthDay: '8.22',
    endYearOffset: 0,
    bgUrl: webpUrl(''),
  }, // 狮子座
  {
    name: 'Virgo',
    startMonthDay: '8.23',
    endMonthDay: '9.22',
    endYearOffset: 0,
    bgUrl: webpUrl(''),
  }, // 处女座
  {
    name: 'Libra',
    startMonthDay: '9.23',
    endMonthDay: '10.22',
    endYearOffset: 0,
    bgUrl: webpUrl(''),
  }, // 天秤座
  {
    name: 'Scorpio',
    startMonthDay: '10.23',
    endMonthDay: '11.21',
    endYearOffset: 0,
    bgUrl: webpUrl(''),
  }, // 天蝎座
  {
    name: 'Sagittarius',
    startMonthDay: '11.22',
    endMonthDay: '12.21',
    endYearOffset: 0,
    bgUrl: webpUrl(''),
  }, // 射手座
  {
    name: 'Capricorn',
    startMonthDay: '12.22',
    endMonthDay: '1.19',
    endYearOffset: 1,
    bgUrl: webpUrl(''),
  }, // 摩羯座
]) // 十二星座

const getSeasonTimeByIndex = (index) => {
  const signCount = twelveSigns.value.length
  const signIndex = index % signCount
  const cycleIndex = Math.floor(index / signCount)
  const sign = twelveSigns.value[signIndex]
  const startYear = zodiacBaseYear + cycleIndex
  const endYear = startYear + (sign.endYearOffset || 0)

  return endYear === startYear
    ? `${startYear}.${sign.startMonthDay}-${sign.endMonthDay}`
    : `${startYear}.${sign.startMonthDay}-${endYear}.${sign.endMonthDay}`
}

const seasonTop1DisplayList = computed(() => {
  return seasonTop1List.value
    .map((item, index) => {
      const signCount = twelveSigns.value.length
      const sign = twelveSigns.value[index % signCount] || {}

      return {
        ...item,
        seasonIndex: index,
        seasonNumber: index + 1,
        seasonName: sign.name || '',
        seasonTime: getSeasonTimeByIndex(index),
        bgUrl: sign.bgUrl || '',
      }
    })
    .reverse()
})

const currentSeasonTop1 = computed(() => {
  return seasonTop1DisplayList.value[centerIndex.value] || {}
})
const POPUP_CLOSE_CLICK_GUARD_MS = 400
const lastPopupClosedAt = ref(0)

const handlePageBack = () => {
  if (Date.now() - lastPopupClosedAt.value < POPUP_CLOSE_CLICK_GUARD_MS) return
  if (maskLayerShow.value) return
  console.log('home back')
  closePage()
}

// 点击居中项头像
const handleAvatarClick = (userId, event) => {
  const now = Date.now()

  // 滑动中不触发点击（防止滑动时误触）
  if (isSwipe.value) {
    event?.stopPropagation() // 滑动中阻止点击
    return
  }

  // 移动动画中不触发点击
  if (isMoving.value) {
    event?.stopPropagation()
    return
  }

  // 点击锁检查（防止重复触发）
  if (clickLock.value) {
    event?.stopPropagation()
    return
  }

  // 防抖：100ms 内重复点击忽略
  if (now - lastClickTime.value < 100) {
    event?.stopPropagation()
    return
  }

  if (!userId) {
    event?.stopPropagation()
    return
  }

  clickLock.value = true
  lastClickTime.value = now
  viewUserInfo(userId)

  // 50ms 后释放点击锁
  setTimeout(() => {
    clickLock.value = false
  }, 50)

  event?.stopPropagation()
}

// 移动到中心位置
const moveToCenter = (targetIndex, event) => {
  const now = Date.now()

  // 点击锁检查
  if (clickLock.value) {
    event?.stopPropagation()
    return
  }

  // 目标已是中心或正在移动中
  if (centerIndex.value == targetIndex || isMoving.value) {
    event?.stopPropagation()
    return
  }

  // 防抖：100ms 内重复调用忽略
  if (now - lastClickTime.value < 100) {
    event?.stopPropagation()
    return
  }

  clickLock.value = true
  isMoving.value = true
  centerIndex.value = targetIndex
  lastClickTime.value = now

  updatePosition()

  // 800ms 后释放锁（与 CSS transition 时间一致）
  setTimeout(() => {
    isMoving.value = false
    clickLock.value = false
  }, 800)

  event?.stopPropagation()
}

// 触摸开始
const handleTouchStart = (event) => {
  touchStartX.value = event.touches[0].clientX
  isSwipe.value = false // 每次触摸开始重置滑动标记
}

// 触摸移动
const handleTouchMove = (event) => {
  if (!event.touches || event.touches.length === 0) return

  touchEndX.value = event.touches[0].clientX
  const distance = touchEndX.value - touchStartX.value

  // 滑动距离超过 10px 标记为滑动
  if (Math.abs(distance) > 10) {
    isSwipe.value = true
  }
}

// 触摸结束
const handleTouchEnd = (event) => {
  if (!touchStartX.value) {
    isSwipe.value = false
    return
  }

  if (event.changedTouches && event.changedTouches.length > 0) {
    touchEndX.value = event.changedTouches[0].clientX
  }

  const minSwipeDistance = 50
  const distance = touchEndX.value - touchStartX.value
  const isLeftSwipe = distance < -minSwipeDistance
  const isRightSwipe = distance > minSwipeDistance

  // 先执行移动（此时 isSwipe 仍为 true）
  if (isLeftSwipe && centerIndex.value > 0) {
    moveToCenter(centerIndex.value - 1)
  } else if (isRightSwipe && centerIndex.value < seasonTop1DisplayList.value.length - 1) {
    moveToCenter(centerIndex.value + 1)
  }

  // 最后重置触摸变量
  touchStartX.value = 0
  touchEndX.value = 0
  isSwipe.value = false
}

// 更新位置
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 = () => {
  if (!maskLayerShow.value) return

  lastPopupClosedAt.value = Date.now()
  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 = [{}]
    }

    centerIndex.value = 0
    updatePosition()
  }
}

// 查询我收到的最新告白信封
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 = [
    // 背景
    webpUrl('GeminiBg1'),
    webpUrl('GeminiBg2'),
    webpUrl('GeminiBg3'),
    webpUrl('GeminiBg4'),
    webpUrl('GeminiBg5'),

    // 弹幕
    webpUrl('GeminiCoupleSign'),

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

    // 历史榜首
    webpUrl(getImgName('historyTopBg')),

    // webpUrl('topCoupleFrame'),
    webpUrl('AquariusCoupleFrame'), // 水瓶座
    webpUrl('PiscesCoupleFrame'), // 双鱼座
    webpUrl('AriesCoupleFrame'), // 白羊座
    webpUrl('TaurusCoupleFrame'), // 金牛座
    webpUrl('GeminiCoupleFrame'), // 双子座

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

    // 排行榜
    webpUrl(`timeBg`),
    webpUrl('helpBt'),
    webpUrl(`top1`),
    webpUrl(`top2-3`),
    webpUrl(`top2RankingBg`),
    webpUrl(`top2Frame`),
    webpUrl(`top3RankingBg`),
    webpUrl(`top3Frame`),
    webpUrl(`rankingCoupleSign`),
    webpUrl(`rankingItemBg`),
    webpUrl('distribution'),
    webpUrl(`num0`),
    webpUrl(`num1`),
    webpUrl(`num2`),
    webpUrl(`num3`),
    webpUrl(`num4`),
    webpUrl(`num5`),
    webpUrl(`num6`),
    webpUrl(`num7`),
    webpUrl(`num8`),
    webpUrl(`num9`),
    webpUrl('myRankingBg'),
    webpUrl('distribution'),
    webpUrl(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 preloadImagesIdle(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;
}

.couple-back-btn {
  position: fixed;
  z-index: 30;
  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;
}

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

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

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

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

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

[dir='rtl'] .couple-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;
}

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

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

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

.cpl-x2 {
  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'] .cpl-x2 {
  padding-left: 0;
  padding-right: 4vw;
}
</style>
