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

    <!-- 帮助按钮 -->
    <img
      :src="images.help"
      alt=""
      style="width: 10%; position: absolute; top: 48px; right: 8px; z-index: 4"
      @click="helpInfoShow = true"
    />

    <!-- history按钮 -->
    <img
      :src="images.history"
      alt=""
      style="width: 20%; margin-top: 20px"
      @click="historyShow = true"
    />

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

    <!-- 倒计时 -->
    <div style="display: flex; justify-content: center; margin-top: -10%">
      <div style="width: 15%">
        <itemCenter :imgUrl="images.dayBg">
          <div class="timeText">{{ Days }}D</div>
        </itemCenter>
      </div>
      <div class="timeText timeGap" style="width: 6px"></div>
      <div style="width: 15%">
        <itemCenter :imgUrl="images.hourAndMinBg">
          <div class="timeText">{{ Hours }}</div>
        </itemCenter>
      </div>
      <div class="timeText timeGap">:</div>
      <div style="width: 15%">
        <itemCenter :imgUrl="images.hourAndMinBg">
          <div class="timeText">{{ Minutes }}</div>
        </itemCenter>
      </div>
      <div class="timeText timeGap">:</div>
      <div style="width: 15%">
        <itemCenter :imgUrl="images.secBg">
          <div class="timeText">{{ Second }}</div>
        </itemCenter>
      </div>
    </div>

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

    <!-- 展示内容 -->
    <div>
      <!-- Ranking -->
      <div
        v-show="rankingShow"
        style="position: relative; width: 90%; left: 50%; transform: translateX(-50%)"
      >
        <!-- 背景板 -->
        <div>
          <img :src="images.RankingMain" alt="" width="100%" style="display: block" />
          <img
            :src="images.RankingItem"
            alt=""
            width="100%"
            style="display: block; margin-top: -2px"
            v-for="value in showRanking.length - 1"
            v-if="showRanking.length > 1"
          />
          <img
            :src="images.RankingBottomBorder"
            alt=""
            width="100%"
            style="display: block; margin-top: -12%"
          />
        </div>

        <!-- 主体内容 -->
        <div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 30% 8% 13%">
          <!-- 前3名 -->
          <div style="margin-top: 3%">
            <!-- 第一 -->
            <div style="display: flex; justify-content: center">
              <TopUser
                :BorderImgUrl="images.topOne"
                :avatarUrl="RankingHasTop3[0].userAvatar"
                :name="RankingHasTop3[0].userNickname"
                :distributionValue="RankingHasTop3[0].quantity"
                style="width: 70%"
              />
            </div>
            <!-- 第二三 -->
            <div style="display: flex; justify-content: space-between; margin-top: -20%">
              <TopUser
                :isTopOne="false"
                :BorderImgUrl="images.topTwo"
                :avatarUrl="RankingHasTop3[1].userAvatar"
                :name="RankingHasTop3[1].userNickname"
                :distributionValue="RankingHasTop3[1].quantity"
                style="width: 35%"
              />
              <TopUser
                :isTopOne="false"
                :BorderImgUrl="images.topThree"
                :avatarUrl="RankingHasTop3[2].userAvatar"
                :name="RankingHasTop3[2].userNickname"
                :distributionValue="RankingHasTop3[2].quantity"
                style="width: 35%"
              />
            </div>
          </div>

          <!-- 第四名开始 -->
          <div v-for="listItem in showRanking" style="margin-top: 2%; position: relative">
            <img :src="images.itemUser" alt="" width="100%;" style="display: block" />
            <div
              style="
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                display: flex;
                align-items: center;
                padding: 0 5%;
              "
            >
              <div style="width: 100%; display: flex; align-items: center">
                <div style="color: #edb247; font-weight: 700; width: 28px">
                  {{ listItem.rank }}
                </div>
                <img
                  src="/src/assets/icon/coin.png"
                  alt=""
                  style="
                    width: 28%;
                    margin: 0 8px;
                    aspect-ratio: 1/1;
                    border-radius: 50%;
                    object-fit: cover;
                  "
                />

                <div style="width: calc(72% - 28px - 26px); display: flex; flex-direction: column">
                  <div
                    style="
                      color: #fff;
                      font-weight: 860;
                      overflow: hidden;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                      width: 100%;
                    "
                    class="topUserNickname"
                  >
                    {{ listItem.userNickname }}
                  </div>
                  <div style="color: #fff; font-weight: 590">ID:{{ listItem.account }}</div>
                </div>
              </div>

              <div style="display: flex; width: 30%; display: flex; align-items: center">
                <img src="/src/assets/icon/coin.png" alt="" style="width: 20%; height: 20%" />
                <div style="color: #edb247; font-weight: 700">
                  {{ listItem.quantity }}
                </div>
              </div>
            </div>
          </div>
          <!-- 触发加载功能 -->
          <div ref="RankingLoadmore" v-show="showRankingLoading && rankingShow"></div>
        </div>
      </div>

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

      <!-- Exchange -->
      <div v-show="exchargeShow" style="display: flex; justify-content: center">
        <div style="position: relative; width: 90%">
          <!-- 背景图 -->
          <img :src="images.longBg" alt="" style="width: 100%; display: block" />
          <!-- 标题 -->
          <div
            style="
              position: absolute;
              top: 6%;
              left: 25%;
              right: 25%;
              height: 11%;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #fff;
              font-weight: 860;
            "
            class="topTitle"
          >
            Props
          </div>
          <div
            style="
              position: absolute;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
              padding: 30% 7% 13%;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
            "
          >
            <!-- 碎片 -->
            <div style="display: flex; align-items: center">
              <img
                :src="images.debris"
                alt=""
                style="width: 15%; display: block; margin-right: 5px"
              />
              <div style="font-weight: 590; font-size: 1.3em">:{{ myFragment.quantity || 0 }}</div>
            </div>

            <!-- 礼品 -->
            <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px">
              <div
                v-for="(goods, goodsIndex) in exchangeGoodsList"
                :key="goodsIndex"
                style="display: flex; flex-direction: column; align-items: center"
              >
                <div
                  style="
                    position: relative;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  <img :src="images.giftItemBg" alt="" style="width: 100%; display: block" />
                  <div
                    style="
                      position: absolute;
                      top: 0;
                      bottom: 0;
                      left: 0;
                      right: 0;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                    "
                  >
                    <!-- gift图 -->
                    <img
                      :src="goods.propsGroup.activityRewardProps[0].cover"
                      alt=""
                      style="width: 50%; display: block"
                    />
                  </div>
                </div>
                <div class="needDebris">
                  Permanent/{{ JSON.parse(goods.rule.jsonData).need_fragments }} Star
                </div>
                <div style="position: relative; width: 75%" @click="selectGood(goods)">
                  <img :src="images.btBg" alt="" width="100%" style="display: block" />
                  <div
                    style="
                      position: absolute;
                      top: 0;
                      bottom: 8%;
                      left: 0;
                      right: 0;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      font-weight: 700;
                    "
                    class="needDebris"
                  >
                    Redeem
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 我的排名 -->
    <div
      style="
        position: sticky;
        bottom: 0;
        left: 0;
        widows: 100vw;
        background-color: #311300;
        display: flex;
        justify-content: center;
        margin-top: 10px;
        z-index: 999;
      "
    >
      <img :src="images.myRankingBg" alt="" style="width: calc(100% - 1px); display: block" />

      <div
        style="
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 8%;
        "
      >
        <div style="width: 70%; display: flex; justify-content: space-around; align-items: center">
          <!-- 排名 -->
          <div style="color: #edb247; font-weight: 700">{{ myRanking.rank || 999 }}</div>
          <!-- 头像 -->
          <img
            :src="myRanking.userAvatar || ''"
            alt=""
            style="
              width: 30%;
              aspect-ratio: 1/1;
              border-radius: 50%;
              object-fit: cover;
              margin: 0 12px;
            "
            @error="defaultAvatarUrl"
          />
          <!-- 名称 -->
          <div style="display: flex; flex-direction: column; width: calc(70% - 24px - 20%)">
            <div
              style="
                color: #fff;
                font-weight: 860;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ myRanking.userNickname }}
            </div>
          </div>
        </div>

        <!-- 贡献值 -->
        <div style="width: 30%; display: flex; justify-content: center; align-items: center">
          <img src="/src/assets/icon/coin.png" alt="" style="width: 20%; height: 20%" />
          <div style="color: #edb247; font-weight: 700; margin-left: 8px">
            {{ myRanking.quantity || 0 }}
          </div>
        </div>
      </div>
    </div>

    <!-- 弹窗遮罩层 -->
    <maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
      <!-- help弹窗 -->
      <div v-if="helpInfoShow" style="margin: 20% 0" @click.stop>
        <img :src="images.helpInfo" alt="" style="width: 100%" />
      </div>

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

          <!-- 名字 -->
          <div style="position: relative; width: 25%">
            <!-- 背景图 -->
            <img :src="images.nameBg" alt="" style="width: 100%; display: block" />
            <div
              style="
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                padding-bottom: 1%;
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <div
                style="
                  width: 90%;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  text-align: center;
                "
                class="history-name"
              >
                {{ showTopOne.userNickname }}
              </div>
            </div>
          </div>

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

      <!-- gifts弹窗 -->
      <div v-if="giftsShow" style="position: relative; margin: 20% 0" @click.stop>
        <!-- 背景图 -->
        <img :src="images.giftsBg" alt="" style="width: 100%; display: block" />
        <!-- 内容 -->
        <div
          style="
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 30% 5% 12%;
            display: flex;
            justify-content: space-between;
          "
        >
          <!-- 礼物单元 -->
          <div style="width: 30%" v-for="gift in gifts" :key="gift.id">
            <!-- 礼物背景 -->
            <div style="position: relative">
              <img :src="images.giftItemBg" alt="" style="width: 100%; display: block" />
              <div
                style="
                  position: absolute;
                  top: 0;
                  bottom: 0;
                  left: 0;
                  right: 0;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                <!-- 礼物 -->
                <img
                  :src="gift.giftPhoto"
                  alt=""
                  style="width: 50%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
                />
              </div>
            </div>

            <!-- 礼物价值 -->
            <div style="display: flex; justify-content: center">
              <img
                src="/src/assets/icon/coin.png"
                alt=""
                style="width: 20%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
              />
              <div style="color: #fff; font-weight: 590; margin-left: 2px">
                {{ gift.giftCandy }}
              </div>
            </div>
          </div>
        </div>
      </div>

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

<script setup>
import { isInApp } from '../../utils/appBridge.js'
import { computed, onMounted, onUnmounted, ref } from 'vue'
import itemCenter from '@/components/WeeklyStar/itemCenter.vue'
import TopUser from '@/components/WeeklyStar/topUser.vue'
import maskLayer from '../../components/MaskLayer.vue'
import { useDebounce, useThrottle } from '@/utils/useDebounce'
import { getMemberProfile } from '@/api/wallet'
import { showError, showWarning, showInfo, showSuccess } from '@/utils/toast.js'
import {
  getWeekStarRanking,
  getWeekRewards,
  getWeekGifts,
  getHistoryTopOne,
  getMyWeekStarRanking,
  getMyFragment,
  getExchangeGoods,
  exchangeGood,
} from '@/api/weeklyStar.js'
//vite动态批量导入图片
const imageModules = import.meta.glob('@/assets/images/WeeklyStar/*.{png,jpg,svg}', { eager: true })
// 生成文件名映射对象（自动移除路径和扩展名）
const images = Object.fromEntries(
  Object.entries(imageModules).map(([Path2D, module]) => {
    const fileName = Path2D.split('/').pop().split('.')[0]
    return [fileName, module.default]
  })
)

const appConnected = ref(false)
const headerInfo = ref({})

/**
 * 连接APP并获取认证信息（优化版 - 仅专注连接）
 */
const connectToApp = async () => {
  console.group('🔗 APP Connection Process')
  console.debug('🚀 Starting APP connection...')

  try {
    // 检查是否在APP环境中
    if (!isInApp()) {
      console.debug('🌐 Browser environment detected')
      appConnected.value = true
      console.groupEnd()

      // 触发连接成功回调
      getUserInfo()

      return { success: true, environment: 'browser' }
    }

    // 检查是否已经连接且未过期
    if (isAppConnected()) {
      console.debug('✅ APP already connected and valid')
      appConnected.value = true

      // 使用缓存的头部信息
      const cachedHeaderInfo = getAppHeaderInfo()
      if (cachedHeaderInfo) {
        headerInfo.value = cachedHeaderInfo
        console.debug('🔧 Using cached HTTP headers')
      }

      console.groupEnd()

      // 触发连接成功回调
      getUserInfo()

      return { success: true, environment: 'app', fromCache: true }
    }

    // 检查是否有正在进行的连接
    if (appConnectionManager.isConnecting()) {
      console.debug('⏳ Connection already in progress, waiting...')
      await appConnectionManager.getConnectionPromise()
      appConnected.value = true
      console.debug('✅ Connected via existing process')
      console.groupEnd()

      // 触发连接成功回调
      getUserInfo()

      return { success: true, environment: 'app', fromCache: true }
    }

    // 建立新的APP连接
    console.debug('📱 Establishing new APP connection...')

    const connectionResult = await new Promise((resolve, reject) => {
      const connectionPromise = new Promise((connectResolve, connectReject) => {
        connectApplication(async (access) => {
          try {
            const result = parseAccessOrigin(access)

            if (result.success) {
              // 解析头部信息
              headerInfo.value = parseHeader(result.data)

              // 设置HTTP请求头
              console.debug('🔧 Setting HTTP headers...')
              await setHttpHeaders(headerInfo.value)

              // 标记连接成功
              appConnected.value = true
              appConnectionManager.setConnected(headerInfo.value)

              console.debug('🎉 APP connection established successfully')
              connectResolve({ success: true, environment: 'app', fromCache: false })
            } else {
              console.error('❌ Failed to parse access origin:', result.error)
              appConnectionManager.reset()
              connectReject(new Error(result.error))
            }
          } catch (error) {
            console.error('❌ Connection process failed:', error)
            appConnectionManager.reset()
            connectReject(error)
          }
        })
      })

      // 设置连接状态
      appConnectionManager.setConnecting(connectionPromise)

      connectionPromise.then(resolve).catch(reject)
    })

    console.debug('✅ Connection completed successfully')
    console.groupEnd()

    // 触发连接成功回调
    getUserInfo()

    return connectionResult
  } catch (error) {
    console.error('❌ Connection failed:', error)
    appConnected.value = false
    console.groupEnd()

    // 触发连接失败回调
    // if (onConnectionFailed) {
    //   onConnectionFailed(error)
    // }

    // 连接失败的特殊处理
    if (error.message && error.message.includes('parse access')) {
      router.push({ path: '/not_app', query: { message: error.message } })
    }

    return { success: false, error: error.message }
  }
}

const userInfo = ref({})

const isInAppEnvironment = ref(false) // 检测是否在APP环境中
const helpInfoShow = ref(false) //帮助模块
const historyShow = ref(false) //历史模块
const giftsShow = ref(false) //礼物模块
const exchargeGoodsShow = ref(false) //交易弹窗

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

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

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

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

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

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

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

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

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

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

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

// 奖励图片资源出错处理
const handleImageError = (e, type) => {
  console.log('图片资源出错')
  e.target.onerror = null //防止循环
  if ((type = 'GOLD')) {
    e.target.src = new URL('/src/assets/icon/coin.png', import.meta.url).href
  }
}

// 头像资源出错处理
const defaultAvatarUrl = (e) => {
  console.log('头像资源出错')
  e.target.onerror = null //防止循环
  e.target.src = new URL('/src/assets/images/WeeklyStar/defaultAvatar.png', import.meta.url).href
}

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

const exchangeSelectedGood = async (propsGroupId) => {
  try {
    let data = {
      propsGroupId,
      fragmentsId: '1968948330210508801',
    }
    const resExchangeGood = await exchangeGood(data)

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

// 关闭弹窗
const closedPopup = () => {
  helpInfoShow.value = false
  historyShow.value = false
  giftsShow.value = false
  exchargeGoodsShow.value = false
  selectedGood.value = {} //选中商品置空
}

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

// 获取沙特下周一早上六点的时间戳
const getNextMondayInSaudi = () => {
  const now = new Date()
  const utcDay = now.getUTCDay() //获取UTC星期几，0(周日)-6(周六)

  // 计算到下周一的所需天数
  const daysToAdd = utcDay === 1 ? 7 : (1 + 7 - utcDay) % 7
  const nextMondayUTC = new Date(now) //以当前UTC时间为基准，而不是重新获取

  nextMondayUTC.setUTCDate(now.getUTCDate() + daysToAdd) //增加到下周一那天
  nextMondayUTC.setUTCHours(3, 0, 0, 0) // 设置为沙特下周一当天早上6点（北京时间3点）
  return nextMondayUTC.getTime() //得到下周一00:00:00.000的时间戳
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

// 刷新页面数据
const updatePageData = () => {
  getThisWeekRanking() // 获取本周排名
  getHistoryRankingTop1() // 获取历史top1

  getThisWeekRewards() // 获取本周奖励
  getThisWeekGifts() // 获取本周礼物
  getThisWeekExchangeGoods() // 获取本周可兑换商品
}

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

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

// 组件挂载时检测环境
onMounted(() => {
  connectToApp()
  isInAppEnvironment.value = isInApp()

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

  updatePageData() // 刷新页面数据

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

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

<style lang="scss" scoped>
* {
  color: #fff;
  font-family: 'SF Pro';
}

.fullPage {
  width: 100vw;
  min-height: 100vh;
  background-color: #311300;
  background-image: url('@/assets/images/WeeklyStar/bg.png');
  background-size: 100% auto;
  background-repeat: no-repeat;
  position: relative;
}

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

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

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

.topTitle {
  font-size: 1.5em;
}

.needDebris {
  font-size: 0.6em;
}

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

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

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

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

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

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