<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"
        v-show="!RankingShow"
        :backgroundImages="[
          imageUrl('bg1'),
          imageUrl('bg2'),
          imageUrl('bg3'),
          imageUrl('bg4'),
          imageUrl('bg5'),
          imageUrl('bg6'),
        ]"
      />
      <!-- 排行榜页面背景 -->
      <BackgroundLayer
        :useCanvas="true"
        v-show="RankingShow"
        :backgroundImages="[imageUrl('bg1'), imageUrl('bg2-2')]"
      />
      <!-- 重复的背景图层 -->
      <div
        v-show="RankingShow"
        class="sf-x1"
        :style="{ '--bg3-2-url': toCssBackgroundImage(imageUrl('bg3-2')) }"
      ></div>

      <!-- 页面内容 -->
      <div
        style="
          position: relative;
          z-index: 1;

          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 4vw;
        "
      >
        <!-- 头部动画 -->
        <img v-smart-img :src="webpUrl('pageTop')" alt="" width="100%" style="display: block" />

        <!-- 倒计时 -->
        <itemCenter
          style="min-height: 35.45vw; width: 95%; min-width: 0; margin-top: -52vw"
          :imgUrl="imageUrl('TimeBg')"
          contentStyle="padding:0 14.5vw 6vw 13.5vw;"
          ><!-- 倒计时 -->
          <div class="timeBox">
            <div class="timeBoxItem">
              <div class="timeText" style="">{{ Days }}D</div>
            </div>
            <div class="timeBoxItem">
              <div class="timeText" style="">{{ Hours }}</div>
            </div>
            <div class="timeBoxItem">
              <div class="timeText" style="">{{ Minutes }}</div>
            </div>
            <div class="timeBoxItem">
              <div class="timeText" style="">{{ Seconds }}</div>
            </div>
          </div>
        </itemCenter>

        <!-- 标签页按钮 -->
        <div
          style="
            width: 90vw;
            min-height: 22.38vw;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10vw;
          "
        >
          <!-- 游戏栏目按钮 -->
          <div style="flex: 1; min-width: 0" @click="changeTag('gamePlay')">
            <img
              v-smart-img
              :src="imageUrl(getImgName('TagGameBt'))"
              alt=""
              :class="{
                'grayscale-container': !GamePlayShow,
              }"
              style="width: 100%; display: block; object-fit: cover"
            />
          </div>

          <!-- 充值栏目按钮 -->
          <div style="flex: 1; min-width: 0" @click="changeTag('recharge')">
            <img
              v-smart-img
              :src="imageUrl(getImgName('TagRechargeBt'))"
              alt=""
              :class="{
                'grayscale-container': !RechargeShow,
              }"
              style="width: 100%; display: block; object-fit: cover"
            />
          </div>
        </div>

        <!-- 游戏标签页 -->
        <div
          v-show="GamePlayShow"
          style="display: flex; flex-direction: column; align-items: center; gap: 4vw"
        >
          <!-- 模块按钮 -->
          <div
            style="
              width: 100vw;
              min-height: 12.65vw;
              display: flex;
              justify-content: space-around;
              align-items: center;
            "
          >
            <!-- 任务模块按钮 -->
            <div style="width: 30vw; min-width: 0" @click="changeModule('task')">
              <img
                v-smart-img
                :src="imageUrl(getImgName('MTaskBt'))"
                alt=""
                :class="{
                  'grayscale-container': !TaskShow,
                }"
                style="width: 100%; display: block; object-fit: cover"
              />
            </div>

            <!-- 抽奖排名模块按钮 -->
            <div style="width: 30vw; min-width: 0" @click="changeModule('lotteryRanking')">
              <img
                v-smart-img
                :src="imageUrl(getImgName('MRankingBt'))"
                alt=""
                :class="{
                  'grayscale-container': !lotteryRankingShow,
                }"
                style="width: 100%; display: block; object-fit: cover"
              />
            </div>

            <!-- 抽奖奖励模块按钮 -->
            <div style="width: 30vw; min-width: 0" @click="changeModule('lotteryReward')">
              <img
                v-smart-img
                :src="imageUrl(getImgName('MRewardBt'))"
                alt=""
                :class="{
                  'grayscale-container': !lotteryRewardShow,
                }"
                style="width: 100%; display: block; object-fit: cover"
              />
            </div>
          </div>

          <!-- 任务模块 -->
          <Task v-if="TaskShow" :activity="lotteryRewards" />
          <!-- 抽奖排名模块 -->
          <Ranking v-if="lotteryRankingShow" rankingType="lottery" />
          <!-- 抽奖奖励模块 -->
          <RankingReward v-if="lotteryRewardShow" />
        </div>

        <!-- 充值标签页 -->
        <div
          v-show="RechargeShow"
          style="display: flex; flex-direction: column; align-items: center; gap: 4vw"
        >
          <!-- 模块按钮 -->
          <div
            style="
              width: 100vw;
              min-height: 12.65vw;
              display: flex;
              justify-content: space-around;
              align-items: center;
            "
          >
            <!-- 任务模块按钮 -->
            <div style="width: 30vw; min-width: 0" @click="changeModule('rechargeRanking')">
              <img
                v-smart-img
                :src="imageUrl(getImgName('MRankingBt'))"
                alt=""
                :class="{
                  'grayscale-container': !rechargeRankingShow,
                }"
                style="width: 100%; display: block; object-fit: cover"
              />
            </div>

            <!-- 抽奖排名模块按钮 -->
            <div style="width: 30vw; min-width: 0" @click="changeModule('rechargeReward')">
              <img
                v-smart-img
                :src="imageUrl(getImgName('MRewardBt'))"
                alt=""
                :class="{
                  'grayscale-container': !rechargeRewardShow,
                }"
                style="width: 100%; display: block; object-fit: cover"
              />
            </div>
          </div>

          <!-- 充值排名模块 -->
          <Ranking v-if="RechargeShow && rechargeRankingShow" rankingType="recharge" />
          <!-- 充值奖励模块 -->
          <RechargeReward v-if="RechargeShow && rechargeRewardShow" />
        </div>
      </div>

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

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

      <!-- 我的排名 -->
      <itemCenter
        v-show="RankingShow"
        style="min-height: 36.66vw; position: fixed; bottom: 0; z-index: 2"
        :imgUrl="imageUrl('myRankingBg')"
        :contentStyle="`padding: 0 5vw`"
      >
        <!-- 基本信息 -->
        <div
          style="
            flex: 1;
            min-width: 0;

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

            gap: 8px;
          "
        >
          <!-- 排名 -->
          <itemCenter
            style="width: 10vw"
            :imgUrl="imageUrl('rankingNumBg')"
            :contentStyle="`bottom: 0.5vw;`"
            @click="viewUserInfo(listItem.userId)"
          >
            <div style="color: #ffe601; font-weight: 700">{{ myRanking?.rank || 999 }}</div>
          </itemCenter>

          <!-- 头像 -->
          <itemCenter
            style="width: 20vw; z-index: 1"
            :imgUrl="imageUrl('userFrame')"
            :contentStyle="`top:2vw`"
          >
            <img
              :src="myRanking?.userAvatar || ''"
              alt=""
              style="
                position: relative;
                z-index: -1;
                display: block;
                width: 13vw;
                aspect-ratio: 1/1;
                border-radius: 50%;
                object-fit: cover;
              "
              @error="handleAvatarImageError"
            />
          </itemCenter>

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

            <!-- ID -->
            <div style="color: #fff; font-weight: 590" class="Textlittle">
              {{ $t('user_id_prefix') }}
              {{ myRanking?.specialAccount || myRanking?.account }}
            </div>
          </div>
        </div>

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

            display: flex;
            align-items: center;
          "
        >
          <div
            v-if="GamePlayShow && lotteryRankingShow"
            style="display: flex; justify-content: center; align-items: center"
          >
            <img
              v-smart-img
              src="/src/assets/icon/Aslan/coin.png"
              alt=""
              style="display: block; width: 1.5em; aspect-ratio: 1/1; object-fit: cover"
            />
            <div style="color: #ffe601; font-weight: 700" class="Textlittle">
              {{ myRanking?.amount || 0 }}
            </div>
          </div>

          <div v-if="RechargeShow && rechargeRankingShow" style="color: #fff; font-weight: 700">
            ${{ myRanking?.amount || 0 }}
          </div>
        </div>
      </itemCenter>

      <!-- 弹窗遮罩层 -->
      <maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
        <!-- 居中弹窗 -->
        <div
          v-show="centerPopupShow"
          style="
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
          "
          @click="closedPopup"
        >
          <!-- 抽奖结果 -->
          <div v-show="resultShow" style="position: relative; width: 100%" @click.stop>
            <itemCenter
              style="min-height: 100.53vw"
              :imgUrl="imageUrl('resultBg')"
              :contentStyle="`inset: 30vw 7vw 6vw;
                flex-direction: column;
                justify-content: space-between;
                gap:2vw`"
            >
              <!-- 奖品图展示 -->
              <div
                style="
                  width: 100%;
                  flex: 1;
                  min-height: 0;
                  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
                    v-smart-img
                    class="sf-x3"
                    v-show="result.length > 1 && resultShowIndex > 0"
                    :src="imageUrl('resultBack')"
                    alt=""
                    style="display: block; width: 80%; object-fit: cover"
                    @click="resultShowIndex--"
                  />
                </div>
                <!-- 奖品 -->
                <img
                  :src="result[resultShowIndex]?.prize?.prizeImage"
                  alt=""
                  style="display: block; width: 40vw"
                />
                <!-- 下一个奖品 -->
                <div
                  style="
                    width: 8vw;
                    align-self: stretch;

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

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

                  position: relative;

                  background: linear-gradient(0deg, #f3b700 0%, #ffeec6 100%);
                  background-clip: text;
                  -webkit-background-clip: text;
                  -webkit-text-fill-color: transparent;
                "
              >
                {{ 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: 12vw" @click="closedPopup"></div>
            </itemCenter>
          </div>

          <!-- 中奖历史 -->
          <div v-show="drawRecordShow" style="position: relative; width: 95%" @click.stop>
            <itemCenter
              style="min-height: 91.33vw"
              :imgUrl="imageUrl('recordBg')"
              :contentStyle="`padding: 22vw 7vw 8vw;`"
            >
              <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>

          <!-- 任务列表 -->
          <itemCenter
            style="min-height: 74vw"
            v-show="taskListShow"
            :imgUrl="imageUrl('taskListBg')"
            :contentStyle="`padding: 20vw 10vw 12vw;flex-direction: column;justify-content: space-between;`"
            @click.stop
          >
            <itemCenter
              style="min-height: 19.6vw"
              v-for="task in taskList"
              :imgUrl="imageUrl('taskItemBg')"
              :contentStyle="`padding: 4vw 5.5vw;justify-content: space-between;`"
              @click.stop
            >
              <!-- 图标 -->
              <div style="width: 15%">
                <img
                  v-if="task.taskType == 2"
                  v-smart-img
                  :src="imageUrl('taskTypeGift')"
                  alt=""
                  width="100%"
                  style="display: block"
                />
                <img
                  v-if="task.taskType == 4"
                  v-smart-img
                  :src="imageUrl('taskTypeGame')"
                  alt=""
                  width="100%"
                  style="display: block"
                />
              </div>

              <!-- 内容 -->
              <div style="width: 60%">
                <!-- 任务进度 -->
                <div style="color: #fff; font-weight: 590; font-size: 0.75em">
                  {{ showTarget(task) }}
                </div>

                <!-- 任务奖励 -->
                <div style="display: flex; align-items: center; gap: 1vw">
                  <div style="color: #fff; font-weight: 590; font-size: 0.9em">
                    {{ t('coins_per_get') }}
                  </div>
                  <img
                    v-smart-img
                    :src="imageUrl('ticket')"
                    :alt="t('ticket')"
                    width="15%"
                    style="display: block"
                  />
                  <div style="color: #fff; font-weight: 590; font-size: 0.9em">*1</div>
                </div>
              </div>

              <!-- 按钮 -->
              <div style="width: 20%">
                <!-- 前往任务 -->
                <itemCenter v-if="task.taskStatus == 0" :imgUrl="imageUrl('taskBtGo')">
                  <div style="font-size: 1em; font-weight: 600">{{ t('task_go') }}</div>
                </itemCenter>

                <!-- 领取抽奖券 -->
                <itemCenter
                  v-else-if="task.taskStatus === 1"
                  :imgUrl="imageUrl('taskBtReceive')"
                  @click="receiveTaskReward(task.taskCode)"
                >
                  <div style="font-size: 1em; font-weight: 600">{{ t('task_receive') }}</div>
                </itemCenter>

                <!-- 已完成 -->
                <itemCenter v-else :imgUrl="imageUrl('taskBtReceived')">
                  <div style="font-size: 0.9em; font-weight: 600">{{ t('task_received') }}</div>
                </itemCenter>
              </div>
            </itemCenter>
          </itemCenter>

          <!-- 收益help弹窗 -->
          <img
            v-smart-img
            v-show="earningsHelpShow"
            :src="imageUrl(getImgName('earningsHelpInfo'))"
            alt=""
            style="display: block; width: 100%; object-fit: cover; margin-bottom: 6vw"
            @click.stop
          />

          <!-- 充值help弹窗 -->
          <img
            v-smart-img
            v-show="rechargeHelpShow"
            :src="imageUrl(getImgName('rechargeHelpInfo'))"
            alt=""
            style="display: block; width: 100%; object-fit: cover; margin-bottom: 6vw"
            @click.stop
          />
        </div>
      </maskLayer>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useLangStore } from '@/stores/lang'
import { useI18n } from 'vue-i18n'
import { getPngUrl, getWebpUrl } from '@/config/imagePaths.js'
import { toCssBackgroundImage } from '@/utils/protectedAssets.js'
import { getUserId, setUserInfo } from '@/utils/userStore.js'
import { 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 { useSpringFestival } from '@/stores/springFestival'
import { storeToRefs } from 'pinia'
import { getSelectedPayee, clearSelectedPayee } from '@/utils/payeeStore.js'
import { useThrottle, useDebounce } from '@/utils/useDebounce.js'
import { formatRewardDisplay } from '@/utils/rewardFormatter.js'
import { gotoAppPage } from '@/utils/appBridge.js'

import { getMemberProfile, getUserIdentity } from '@/api/wallet'
import {
  myTickets, // 获取剩余中奖券
  activityDetail, // 获取活动详情
  ranklist, //获取排行榜
  activityRewardConfigs, // 获取活动奖励配置列表
  winnerHistory, //获取历史中奖用户
  withdrawableAmount, //获取可提现金额
  myRecharge, // 获取充值记录
} from '@/api/lottery'

import {
  apiGetActivityResource, // 获取礼物排行榜奖励列表.
} from '@/api/activity.js'

import Task from './Task.vue'
import Ranking from './Ranking.vue'
import RankingReward from './RankingReward.vue'
import RechargeReward from './RechargeReward.vue'
import BackgroundLayer from '@/components/BackgroundLayer.vue'
import itemCenter from '@/components/itemCenter.vue'
import maskLayer from '@/components/MaskLayer.vue'

const { t } = useI18n()
const router = useRouter()
const route = useRoute()
const springFestivalStore = useSpringFestival()

const {
  // 抽奖模块
  lotteryRewards, // 抽奖奖池
  tickets, // 抽奖券数量
  luckyUsers, // 中奖用户列表
  userInfo, // 用户信息
  userIdentity, // 用户身份
  currentEarnings, // 当前收益
  selectedPayee, // 选择的收款人
  taskList, // 任务列表

  // 抽奖排名模块
  lotteryPageNo, // 抽奖排名页码
  lotteryRanking, // 抽奖排名
  addLotteryRanking, // 补充的抽奖排名
  myLotteryRanking, // 我的抽奖排名

  // 排行榜奖励模块
  rankingRewards, // 排名奖池

  // 充值排名模块
  rechargePageNo, // 充值排名页码
  rechargeRanking, // 充值排名
  addRechargeRanking, // 补充的充值排名
  myRechargeRanking, // 我的充值排名

  // 充值奖池模块
  myRechargeRecode, // 我的充值记录
  RechargeRewards, // 充值奖池

  resultShow,
  result, // 抽奖结果

  drawRecordShow,
  myRecords, // 我的抽奖记录

  receiveRecordShow,
  receiveRecord, // 领取抽奖券记录

  taskListShow, // 任务列表展示
  checkDate, // 对应周几
  checkStatus, // 是否已看过

  earningsHelpShow, // 收益help展示
  rechargeHelpShow, // 充值help展示
} = storeToRefs(springFestivalStore)

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

const isLoading = ref(true) // 预加载状态
const timeoutId = ref(null) // 超时定时器 ID

// 获取OSS图片URL的函数
const imageUrl = (filename) => getPngUrl('Activities/SpringFestival/', filename)
const webpUrl = (filename) => getWebpUrl('Activities/SpringFestival/', filename)

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

// 栏目切换状态
const GamePlayShow = ref(true) // 游戏标签页展示
const RechargeShow = ref(false) // 充值标签页展示

// 模块切换状态
const TaskShow = ref(true) // 任务模块展示
const lotteryRankingShow = ref(false) // 抽奖排名模块展示
const lotteryRewardShow = ref(false) // 抽奖奖励模块展示
const rechargeRankingShow = ref(true) // 充值排名模块展示
const rechargeRewardShow = ref(false) // 充值奖励模块展示

const RankingShow = computed(() => {
  return (
    (GamePlayShow.value && lotteryRankingShow.value) ||
    (RechargeShow.value && rechargeRankingShow.value)
  )
})

// 我的排名
const myRanking = computed(() => {
  if (RankingShow.value) {
    if (GamePlayShow.value) {
      return myLotteryRanking.value
    } else {
      return myRechargeRanking.value
    }
  }
})

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

// 模块切换
const changeModule = (module) => {
  switch (module) {
    case 'task':
      TaskShow.value = true
      lotteryRankingShow.value = false
      lotteryRewardShow.value = false
      break
    case 'lotteryRanking':
      TaskShow.value = false
      lotteryRankingShow.value = true
      lotteryRewardShow.value = false
      break
    case 'lotteryReward':
      TaskShow.value = false
      lotteryRankingShow.value = false
      lotteryRewardShow.value = true
      break
    case 'rechargeRanking':
      rechargeRankingShow.value = true
      rechargeRewardShow.value = false
      break
    case 'rechargeReward':
      rechargeRankingShow.value = false
      rechargeRewardShow.value = true
      break
  }
}

// 倒计时相关数据
const Days = ref(0)
const Hours = ref(0)
const Minutes = ref(0)
const Seconds = ref(0)
let countdownTimer = null

// 获取目标时间（2026年3月14日上午5点，北京时间）
const getTargetTime = () => {
  const target = new Date(2026, 2, 14, 5, 0, 0) // 月份从0开始，10代表11月
  return target.getTime()
}

// 计算倒计时
const calculateCountdown = () => {
  const now = Date.now()
  const targetTime = getTargetTime()
  let diff = targetTime - now

  // 如果已过期，清零并停止计时器
  if (diff <= 0) {
    Days.value = 0
    Hours.value = '00'
    Minutes.value = '00'
    Seconds.value = '00'

    if (countdownTimer) {
      clearInterval(countdownTimer)
      countdownTimer = null
    }
    return
  }

  // 计算天、小时、分钟、秒
  const totalSeconds = Math.floor(diff / 1000)
  Days.value = Math.floor(totalSeconds / (24 * 3600))
  Hours.value = String(Math.floor((totalSeconds % (24 * 3600)) / 3600)).padStart(2, '0')
  Minutes.value = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, '0')
  Seconds.value = String(Math.floor(totalSeconds % 60)).padStart(2, '0')
}

// 启动倒计时
const startCountdown = () => {
  calculateCountdown() // 立即执行一次
  countdownTimer = setInterval(calculateCountdown, 1000)
}

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

// 遮罩层
const maskLayerShow = computed(() => {
  return (
    resultShow.value ||
    drawRecordShow.value ||
    receiveRecordShow.value ||
    taskListShow.value ||
    earningsHelpShow.value ||
    rechargeHelpShow.value
  )
})

// 居中弹窗
const centerPopupShow = computed(() => {
  return (
    resultShow.value ||
    drawRecordShow.value ||
    receiveRecordShow.value ||
    taskListShow.value ||
    earningsHelpShow.value ||
    rechargeHelpShow.value
  )
})

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

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

// 打开遮罩层
const openPopup = (type) => {
  switch (type) {
    case 'result':
      closedPopup() // 关闭弹窗
      resultShow.value = true
      break
    case 'drawRecord':
      closedPopup() // 关闭弹窗
      drawRecordShow.value = true
      break
    case 'receiveRecord':
      closedPopup() // 关闭弹窗
      receiveRecordShow.value = true
      break
    case 'earningsHelp':
      closedPopup() // 关闭弹窗
      earningsHelpShow.value = true
      break
    case 'rechargeHelp':
      closedPopup() // 关闭弹窗
      rechargeHelpShow.value = true
      break
    case 'taskList':
      closedPopup() // 关闭弹窗
      taskListShow.value = true
      break

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

// 关闭弹窗
const closedPopup = () => {
  if (taskListShow.value) {
    checkStatus.value = true
  }

  resultShow.value = false
  drawRecordShow.value = false
  receiveRecordShow.value = false
  earningsHelpShow.value = false
  rechargeHelpShow.value = false
  taskListShow.value = false
}

// 展示任务目标
const showTarget = (task) => {
  if (task.targetType == 'SEND_GIFT') {
    if (task.taskCode == 'SPINS_SEND_GIFT') {
      return t('lucky_and_magical_gifts_win_gold_coins')
    }
  } else if (task.targetType == 'WIN_COINS') {
    if (task.taskCode == 'SPINS_WIN_100000') {
      return t('win_coins_in_the_game')
    }
  }
}

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

//获取奖池
const getActivityDetail = async () => {
  const resDetail = await activityDetail('04877')
  if (resDetail.status && resDetail.body) {
    lotteryRewards.value = resDetail.body
  } else {
    lotteryRewards.value = {}
  }
}

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

//获取中奖用户列表
const getWinners = async () => {
  const resWinners = await winnerHistory('2007771533988204877')
  if (resWinners.status && resWinners.body) {
    luckyUsers.value = resWinners.body
  }
}

//获取任务列表
const getTaskList = async () => {
  taskList.value = [
    {
      taskId: 1,
      taskCode: 'SPINS_WIN_100000',
      taskName: 'Win 100000 coins in the game',
      taskType: 4,
      taskDesc: '游戏内获得100000金币',
      targetType: 'WIN_COINS',
      targetValue: 100000,
      targetUnit: 'COINS',
      currentValue: 0,
      progressRate: 0,
      taskStatus: 0,
      rewardType: 1,
      rewardValue: 1,
    },
    {
      taskId: 2,
      taskCode: 'SPINS_SEND_GIFT',
      taskName: 'Lucky and magical gifts win 100000 gold coins',
      taskType: 2,
      taskDesc: '送出幸运礼物或魔法礼物赢取100000金币',
      targetType: 'SEND_GIFT',
      targetValue: 100000,
      targetUnit: 'COINS',
      currentValue: 0,
      progressRate: 0,
      taskStatus: 0,
      rewardType: 1,
      rewardValue: 1,
    },
  ]
}

//获取用户信息
const getUserInfo = async () => {
  if (Object.keys(userInfo.value).length === 0) {
    const resUserInfo = await getMemberProfile()
    if (resUserInfo.status && resUserInfo.body) {
      setUserInfo(resUserInfo.body, null)
      userInfo.value = resUserInfo.body
    }
  }
  const resIdentity = await getUserIdentity()
  if (resIdentity.status && resIdentity.body) {
    userIdentity.value = resIdentity.body
  }
}

//可提现金额
const getDrawableAmount = async () => {
  const resDrawableAmount = await withdrawableAmount('2007771533988204877')
  if (resDrawableAmount.status && resDrawableAmount.body) {
    currentEarnings.value = resDrawableAmount.body?.availableAmount || 0
  }
}

// 初始化收款人信息
const initializePayee = () => {
  const savedPayee = getSelectedPayee()
  if (savedPayee) {
    Object.assign(selectedPayee.value, savedPayee)
  }
}

// 清除当前选中的收款人
const clearPayee = () => {
  Object.assign(selectedPayee.value, {
    id: null,
    account: '',
    name: '',
    avatar: '',
    type: '',
    isHost: false,
    isAgency: false,
    hasSalary: false,
  })
  clearSelectedPayee()
}

//获取排行榜
const getRanking = async (rankingType = 'lottery') => {
  if (lotteryPageNo.value == 0) {
    lotteryPageNo.value = 1
  }
  if (rechargePageNo.value == 0) {
    rechargePageNo.value = 1
  }
  let data = {
    activityId: rankingType == 'lottery' ? '2007771533988204877' : '2007771533988204888',
    pageNo: rankingType == 'lottery' ? lotteryPageNo.value : rechargePageNo.value,
    pageSize: 20,
  }
  const resRanking = await ranklist(data)
  if (resRanking.status && resRanking.body) {
    if (rankingType == 'lottery') {
      myLotteryRanking.value = resRanking.body?.currentUser // 我的抽奖排名
    } else if (rankingType == 'recharge') {
      myRechargeRanking.value = resRanking.body?.currentUser // 我的充值排名
    }

    if (resRanking.body.topList.length > 0) {
      if (resRanking.body.topList.length == 20) {
        if (rankingType == 'lottery') {
          addLotteryRanking.value = []
          lotteryRanking.value.push(...resRanking.body?.topList)
          lotteryPageNo.value++
        } else if (rankingType == 'recharge') {
          addRechargeRanking.value = []
          rechargeRanking.value.push(...resRanking.body?.topList)
          rechargePageNo.value++
        }
      } else {
        if (rankingType == 'lottery') {
          addLotteryRanking.value = resRanking.body?.topList
        } else if (rankingType == 'recharge') {
          addRechargeRanking.value = resRanking.body?.topList
        }
      }
    }
  } else {
    if (rankingType == 'lottery') {
      myLotteryRanking.value = {}
      lotteryRanking.value = []
      addLotteryRanking.value = []
      lotteryPageNo.value = 1
    } else if (rankingType == 'recharge') {
      myRechargeRanking.value = {}
      rechargeRanking.value = []
      addRechargeRanking.value = []
      rechargePageNo.value = 1
    }
  }
}

//获取游戏奖励列表
const getGameReward = async () => {
  const resActivityReward = await apiGetActivityResource('LUCKY_GIFT_REWARD')
  if (resActivityReward.status && resActivityReward.body) {
    rankingRewards.value = resActivityReward.body.map((rewards) => {
      let addReward = []
      if (rewards.rule.sort == 1) {
        addReward = [
          {
            type: 'DOLLARS',
            cover: '',
            content: 100,
          },
          {
            type: 'GIFT',
            cover: imageUrl('IDReward'),
            content: 'ID: XXXX',
          },
        ]
      } else if (rewards.rule.sort == 2) {
        addReward = [
          {
            type: 'DOLLARS',
            cover: '',
            content: 50,
          },
        ]
      } else if (rewards.rule.sort == 3) {
        addReward = [
          {
            type: 'DOLLARS',
            cover: '',
            content: 30,
          },
        ]
      } else if (rewards.rule.sort == 4) {
        addReward = [
          {
            type: 'DOLLARS',
            cover: '',
            content: 10,
          },
        ]
      }

      rewards.propsGroup.activityRewardProps.push(...addReward) //补充奖励项

      rewards = {
        ...rewards,
      }
      return rewards
    })
  } else {
    rankingRewards.value = []
  }
}

//获取充值奖励列表
const getRechargeReward = async () => {
  let data = {
    activityType: 'CONSUMPTION_ACTIVITY',
    activityId: '2007771533988204888',
  }
  const resActivityReward = await activityRewardConfigs(data)
  if (resActivityReward.status && resActivityReward.body) {
    RechargeRewards.value = resActivityReward.body.map((rewards) => {
      let jsonData = JSON.parse(rewards.jsonData)
      let addReward = []

      if (rewards.sort == 1) {
        addReward = []
      } else if (rewards.sort == 2) {
        addReward = []
      } else if (rewards.sort == 3) {
        addReward = []
      } else if (rewards.sort == 4) {
        addReward = [
          {
            type: 'GIFT',
            cover: imageUrl('reward_gift'),
            content: 1,
          },
        ]
      } else if (rewards.sort == 5) {
        addReward = [
          {
            type: 'GIFT',
            cover: imageUrl('reward_gift'),
            content: 1,
          },
        ]
      } else if (rewards.sort == 6) {
        addReward = [
          {
            type: 'GIFT',
            cover: imageUrl('reward_gift'),
            content: 1,
          },
          {
            type: 'PROPS',
            detailType: 'AVATAR_FRAME',
            cover: imageUrl('reward_frame'),
            quantity: 365,
          },
          {
            type: 'PROPS',
            detailType: 'RIDE',
            cover: imageUrl('reward_ride'),
            quantity: 60,
          },
        ]
      }

      rewards.rewardProps.push(...addReward) //补充奖励项

      rewards = {
        ...rewards,
        ...jsonData,
      }
      return rewards
    })
  } else {
    RechargeRewards.value = []
  }
}

//获取充值记录
const getMyRecharge = async () => {
  const resMyRecharge = await myRecharge('2007771533988204888')
  if (resMyRecharge.status && resMyRecharge.body) {
    myRechargeRecode.value = resMyRecharge.body
  } else {
    myRechargeRecode.value = {}
  }
}

// 页面初始化数据
const initData = async () => {
  await Promise.all([
    getActivityDetail(), //获取奖池
    getMyLotteryTicketCount(), //获取抽奖券

    getWinners(), //获取历史中奖用户

    getTaskList(), //获取任务列表

    getUserInfo(), //获取用户信息
    getDrawableAmount(), //获取可提现金额
    initializePayee(), //获取收款人信息

    getRanking('lottery'), // 获取抽奖排行榜
    getRanking('recharge'), // 获取充值排行榜

    getGameReward(), // 获取游戏奖励列表
    getRechargeReward(), // 获取充值奖励列表
    getMyRecharge(), //获取充值记录
  ])
}

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

    // 排行榜背景
    imageUrl('bg1'),
    imageUrl('bg2-2'),

    //  倒计时
    imageUrl('TimeBg'),

    //  按钮
    imageUrl(getImgName('TagGameBt')),
    imageUrl(getImgName('TagRechargeBt')),
    imageUrl(getImgName('MTaskBt')),
    imageUrl(getImgName('MRankingBt')),
    imageUrl(getImgName('MRewardBt')),

    // 任务列表
    imageUrl('taskListBg'),
    imageUrl('taskItemBg'),
    imageUrl('taskTypeGift'),
    imageUrl('taskTypeGame'),
    imageUrl('ticket'),
    imageUrl('taskBtGo'),
    imageUrl('taskBtReceive'),
    imageUrl('taskBtReceived'),
  ]

  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 = [
    // 我的排名
    imageUrl('myRankingBg'),
    imageUrl('rankingNumBg'),
    imageUrl('userFrame'),

    // 抽奖结果
    imageUrl('resultBg'),
    imageUrl('resultBack'),
    imageUrl('resultNext'),

    // 中奖历史
    imageUrl('recordBg'),

    // help弹窗
    imageUrl(getImgName('earningsHelpInfo')), // 收益help
    imageUrl(getImgName('rechargeHelpInfo')), // 充值help

    // 抽奖组件
    imageUrl('lotteryBg'),
    imageUrl('historyBt'),
    imageUrl('prizeActiveFrame'),
    imageUrl('ticket'),
    imageUrl('earningInfoBg'),

    // 排行榜组件
    imageUrl('top1Bg'),
    imageUrl('top2Bg'),
    imageUrl('top3Bg'),
    imageUrl('rankingNumBg'),
    imageUrl('rankingItemBg'),

    // 排行榜奖励组件
    imageUrl('rankingRewardTop1Bg'),
    imageUrl('rankingRewardTop2Bg'),
    imageUrl('rankingRewardTop3Bg'),
    imageUrl('rankingRewardTop4Bg'),

    // 充值奖励组件
    imageUrl(getImgName('receiveBt')),
    imageUrl(getImgName('receivedBt')),
    imageUrl(getImgName('rechargeReward100')),
    imageUrl(getImgName('rechargeReward500')),
    imageUrl(getImgName('rechargeReward1000')),
    imageUrl(getImgName('rechargeReward3000')),
    imageUrl(getImgName('rechargeReward5000')),
    imageUrl(getImgName('rechargeReward10000')),
  ]

  await preloadImagesIdle(criticalImages)
}

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

// 设置超时刷新逻辑
const startTimeoutCheck = () => {
  timeoutId.value = setTimeout(() => {
    if (isLoading.value) {
      console.warn('⏰ 预加载超时，正在刷新页面...')
      window.location.reload() // 刷新页面
    }
  }, 20000) // 20 秒超时
}

// 清理定时器
const clearTimeoutCheck = () => {
  if (timeoutId.value) {
    clearTimeout(timeoutId.value)
    timeoutId.value = null
  }
}

// 组件挂载时检测环境
onMounted(async () => {
  springFestivalStore.clear()

  checkShow() // 检查是否展示每日弹窗

  console.log('route.query.activeAction:', route.query.activeAction)
  if (route.query.activeAction == 'TaskShow') {
    changeTag('gamePlay')
    changeModule('task')
  } else {
    changeTag('gamePlay')
    changeModule('task')
  }

  // 启动超时检测
  startTimeoutCheck()

  await connectToAppHandler()
  initData()
  preloadOtherImages() // 预加载其他图片
  startCountdown() //开启倒计时
})

onUnmounted(() => {
  springFestivalStore.clear()

  if (countdownTimer) {
    clearInterval(countdownTimer)
    countdownTimer = null
  }

  clearTimeoutCheck() // 清理超时检测定时器
  clearPayee() // 清空收款人信息
})
</script>

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

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

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

.sf-x1 {
  position: absolute;
  inset: 410vw 0 0;
  background-image: var(--bg3-2-url);
  background-repeat: repeat-y;
  background-position: top center;
  background-size: 100% auto;
  z-index: 0; /* 确保在.bg之下 */
}

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

  overflow: hidden;
  position: relative;
}

.timeBox {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.timeBoxItem {
  flex: 1;
  display: flex;
  justify-content: center;
}

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

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

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

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

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

  background: linear-gradient(0deg, #f3b700 0%, #ffeec6 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@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'] .timeBox {
  flex-direction: row-reverse;
}

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

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