<template>
  <div>
    <itemCenter
      style="min-height: 181.6vw"
      :imgUrl="webpUrl('TaurusLotteryBg')"
      :contentStyle="`flex-direction: column;justify-content: flex-start;gap: 5vw`"
    >
      <!-- 中奖历史按钮 -->
      <img
        v-smart-img
        :src="webpUrl('historyBt')"
        alt=""
        style="width: 8vw; position: absolute; top: 40vw; right: 4vw"
        @click="getDrawRecords"
      />

      <!-- 抽奖转盘 -->
      <div
        style="
          width: 100%;
          height: 71vw;
          align-self: stretch;

          margin: 68.5vw 0 0;
          padding: 0 15vw;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-template-rows: repeat(3, 1fr);

          direction: ltr;
        "
      >
        <div
          v-for="(prize, index) in activity.prizeList"
          style="
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            position: relative;
          "
          :style="[getGridPosition(index)]"
        >
          <img
            :src="prize.prizeImage || ''"
            :alt="prize.prizeName || ''"
            width="50%"
            style="display: block"
          />
          <div style="font-size: 0.8em; font-weight: 700; color: #ff3b76">
            {{ prize.prizeName }}
          </div>

          <!-- 转到的奖品项 -->
          <img
            v-show="activeIndex === index"
            v-smart-img
            :src="webpUrl('prizeActiveFrame')"
            alt=""
            style="
              display: block;
              width: 105%;

              position: absolute;
              transform: translate(-50%, -50%);
              top: 50%;
              left: 50%;
            "
          />
        </div>

        <!-- 水晶数量 -->
        <div
          style="
            grid-area: 2 / 2;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1vw;
          "
        >
          <img
            v-smart-img
            :src="webpUrl('crystal')"
            alt=""
            style="display: block; width: 8vw; object-fit: cover"
          />
          <div style="font-size: 1.5em; font-weight: 600; color: #fff">*{{ crystal }}</div>
        </div>
      </div>

      <!-- 抽奖按钮 -->
      <div
        style="height: 12vw; display: flex; justify-content: space-between; gap: 14vw"
        class="drawBts"
      >
        <!-- 单抽 -->
        <div style="width: 25vw; height: 100%" @click="sweepstakes(1)">
          <div
            v-if="crystal >= 1"
            style="
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              gap: 1vw;
            "
          >
            <img
              v-smart-img
              :src="webpUrl('crystal')"
              alt=""
              style="display: block; width: 3em; object-fit: cover"
            />
            <div
              style="color: #fff; font-size: 1.2em; font-weight: 600; text-shadow: 0 1px 0 #8b00d1"
            >
              *1
            </div>
          </div>

          <div
            v-else
            style="
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              gap: 1vw;
            "
          >
            <img
              v-smart-img
              src="/src/assets/icon/Aslan/coin.png"
              alt=""
              style="display: block; width: 3em; object-fit: cover"
            />
            <div
              style="color: #fff; font-size: 1.2em; font-weight: 600; text-shadow: 0 1px 0 #8b00d1"
            >
              *5000
            </div>
          </div>
        </div>

        <!-- 10连抽 -->
        <div style="width: 25vw; height: 100%" @click="sweepstakes(10)">
          <div
            v-if="crystal >= 10"
            style="
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              gap: 1vw;
            "
          >
            <img
              v-smart-img
              :src="webpUrl('crystal')"
              alt=""
              style="display: block; width: 3em; object-fit: cover"
            />
            <div
              style="color: #fff; font-size: 1.2em; font-weight: 600; text-shadow: 0 1px 0 #8b00d1"
            >
              *10
            </div>
          </div>

          <div
            v-else
            style="
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              gap: 1vw;
            "
          >
            <img
              v-smart-img
              src="/src/assets/icon/Aslan/coin.png"
              alt=""
              style="display: block; width: 3em; object-fit: cover"
            />
            <div
              style="color: #fff; font-size: 1.2em; font-weight: 600; text-shadow: 0 1px 0 #8b00d1"
            >
              *45000
            </div>
          </div>
        </div>
      </div>
    </itemCenter>
  </div>
</template>

<script setup>
import { computed, onMounted, onUnmounted, ref } 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 { viewUserInfo } from '@/utils/appBridge.js'
import { connectToApp } from '@/utils/appConnector.js'
import { preloadImages } from '@/utils/image/imagePreloader.js'
import { formatUTCCustom } from '@/utils/utcFormat.js'
import { showError, showSuccess } from '@/utils/toast.js'
import { handleAvatarImageError, handleRewardImageError } from '@/utils/image/imageHandler.js'
import { useCoupleStore } from '@/stores/couple'
import { storeToRefs } from 'pinia'

import {
  activityDetail, // 获取活动详情
  onceDraw, // 执行单次抽奖
  multiDraw, // 执行连抽
  drawRecords, // 获取抽奖记录
  apiGetMyLotteryTicketCount, // 获取我的剩余抽奖券数量
  apiGetUserFragmentBackpack, // 获取用户碎片背包
} from '@/api/couple.js'

import itemCenter from '@/components/itemCenter.vue'

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

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 {
  crystal, //水晶数量
  debris, //碎片数量
  resultShow, // 抽奖结果弹窗显示状态
  result, // 抽奖结果
  drawRecordShow, // 中奖历史弹窗显示状态
  myRecords, // 我的抽奖记录
} = storeToRefs(coupleStore)

const activity = ref({}) //活动详情和奖池

const isRolling = ref(false) //是否正在抽奖
const activeIndex = ref(0)

// 打开弹窗
const openPopup = (type) => {
  switch (type) {
    case 'result':
      resultShow.value = true
      break
    case 'history':
      drawRecordShow.value = true
      break
  }
}

//奖盘布局
const getGridPosition = (index) => {
  //顺时针位置
  const positions = [
    { gridArea: '1/1' }, //上左
    { gridArea: '1/2' }, //上中
    { gridArea: '1/3' }, //上右
    { gridArea: '2/3' }, //中右
    { gridArea: '3/3' }, //下右
    { gridArea: '3/2' }, //下中
    { gridArea: '3/1' }, //下左
    { gridArea: '2/1' }, //中左
  ]
  return positions[index]
}

// 抽奖动画
const startLottery = (resultIndex) => {
  console.log('开始抽奖动画')

  return new Promise((resolve) => {
    activeIndex.value = -1

    let speed = 200 // 初始速度
    let currentCycle = 0 // 当前圈数
    let constantSpeedCycle = 0 // 当前匀速圈数
    let totalCycles = 1 // 至少旋转2圈数

    const roll = () => {
      activeIndex.value = (activeIndex.value + 1) % activity.value.prizeList.length
      console.log('当前索引:', activeIndex.value)

      if (activeIndex.value === resultIndex && speed > 200) {
        setTimeout(() => {
          resolve() // 抽奖结束
        }, 500)
      } else {
        if (activeIndex.value === activity.value.prizeList.length - 1) {
          currentCycle++
        }
        // 加速旋转
        if (currentCycle < totalCycles) {
          speed -= 20
        } else {
          // 匀速旋转
          if (activeIndex.value === activity.value.prizeList.length - 1) {
            constantSpeedCycle++
          }
          if (constantSpeedCycle > 2) {
            // 最后减速效果
            speed += 20
          }
        }
        setTimeout(roll, speed)
      }
    }

    roll()
  })
}

// 连抽
const sweepstakes = async (consecutive = 1) => {
  if (isRolling.value) return // 防止重复点击
  isRolling.value = true
  let data = {
    activityId: '2004471533988167125',
    drawCount: consecutive,
    needCoins: consecutive > crystal.value,
  }
  try {
    // 单抽
    if (consecutive == 1) {
      const resOnceDraw = await onceDraw(data)
      if (resOnceDraw.status && resOnceDraw.body) {
        result.value = [resOnceDraw.body] // 中奖结果赋值

        const resItem = resOnceDraw.body //接口获取的抽奖结果（单抽为对象）
        //取抽奖结果的位置
        const index = activity.value.prizeList.findIndex(
          (prize) => prize.prizeName == resItem?.prize.prizeName,
        ) //转盘第几位停下
        console.log('index:', index)
        updateNumbers() // 更新水晶&碎片数量
        await startLottery(index)
      }
    }
    //连抽
    else {
      const resMultiDraw = await multiDraw(data)
      if (resMultiDraw.status && resMultiDraw.body) {
        result.value = resMultiDraw.body.results // 中奖结果赋值

        //取第一个抽奖结果的位置
        let index = activity.value.prizeList.findIndex(
          (prize) => prize.prizeName == result.value[0]?.prize.prizeName,
        )
        console.log('index:', index)

        updateNumbers() // 更新水晶&碎片数量
        await startLottery(index)
      }
    }
    openPopup('result') //打开中奖结果弹窗
    isRolling.value = false
  } catch (error) {
    showError(error.response.errorMsg)
    isRolling.value = false
  }
}

// 获取中奖记录，并打开弹窗
const getDrawRecords = async () => {
  const resDrawRecords = await drawRecords('67125')
  if (resDrawRecords.status && resDrawRecords.body) {
    myRecords.value = resDrawRecords.body?.records || []
    openPopup('history') // 打开中奖历史弹窗
  }
}

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

// 获取抽奖券
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 = async () => {
  await getMyLotteryTicketCount() // 获取抽奖券数量
  await getUserFragmentBackpack() // 获取碎片数量
}

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

// 预加载关键图片
const preloadCriticalImages = async () => {
  const criticalImages = []

  const criticalImages_ar = []

  if (currentLangType.value == 'en') {
    await preloadImages(criticalImages)
  } else if (currentLangType.value == 'ar') {
    await preloadImages(criticalImages_ar)
  }
}

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

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

onMounted(() => {
  connectToAppHandler()
})
</script>

<style lang="scss" scoped>
[dir='rtl'] .drawBts {
  flex-direction: row-reverse;
}
</style>
