<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '',
  },
}
</route>

<template>
  <image src="@/static/images/production/bg.jpg" class="w-full h-full absolute z-[-10]"></image>
  <view class="star-container absolute top-0 left-0 w-full h-full overflow-hidden z-[-9]">
    <image
      v-for="star in visibleStars"
      :key="star.id"
      :src="'/static/images/play/star.png'"
      class="star-image absolute"
      :style="{
        top: star.top,
        left: star.left,
        width: star.size,
        height: star.size,
        '--opacity': star.opacity,
        '--duration': `${star.duration}s`,
        '--delay': `${star.delay}s`,
        '--rotate': `${star.rotate}deg`,
        '--scale': star.scale,
      }"
    />
  </view>
  <view class="w-full min-h-screen flex flex-col items-center z-10">
    <view class="w-full h-60rpx flex items-center justify-end mt-20rpx">
      <view class="flex items-center">
        <view
          class="w-60rpx h-60rpx flex items-center justify-center rounded-52rpx bg-#1f2029 mr-20rpx"
          @click="show = true"
        >
          <image
            :src="getAssetsImages('production', value1)"
            class="w-38rpx h-38rpx rounded-38rpx"
          ></image>
        </view>
        <view
          class="min-w-150rpx h-60rpx flex items-center justify-center mr-20rpx bg-#1f2029 rounded-52rpx"
          @click="goPage('/pages/purse/index')"
        >
          <image
            src="@/static/images/production/wallet.png"
            class="w-32rpx h-32rpx ml-20rpx mr-7rpx"
          ></image>
          <text class="mr-20rpx text-[24rpx] text-white font-400">
            {{ $t('production.purse') }}
          </text>
        </view>
      </view>
    </view>
    <view class="w-690rpx mt-15rpx h-90rpx w-full flex items-center justify-center text-white">
      <image src="@/static/images/trophy/jinbi.png" class="w-60rpx h-60rpx mr-10rpx"></image>
      <count-up
        ref="goldCoinEl"
        class="text-[60rpx] font-700 mr-10rpx"
        :end-val="currentLibaoData.currentValue || 0"
        :duration="1"
        :options="options"
      />
      <text class="text-24rpx font-400 pt-20rpx">BHCoin</text>
    </view>
    <view
      id="lottieContainer"
      class="w-690rpx flex items-center justify-center mt-30rpx h-557rpx"
      @click="tishiShow = true"
    ></view>
    <view class="w-full flex items-center justify-center mt-20rpx relative">
      <view class="custrom-bg w-650rpx flex text-white items-center">
        <wd-progress :percentage="percentage" hide-text :duration="0.1" />
      </view>
      <view
        @click.stop="goPage('/pages/play/index')"
        class="absolute right-50rpx bottom-100rpx libao-scale flex flex-col items-center z-10"
      >
        <image src="@/static/images/production/maozhuao.png" class="w-100rpx h-100rpx"></image>
        <text class="text-28rpx font-700 text-white">game</text>
      </view>
    </view>
    <view class="w-650rpx flex items-center justify-between mt-20rpx">
      <view class="flex items-center">
        <image src="@/static/images/production/time.png" class="w-30rpx h-30rpx mr-10rpx"></image>
        <text class="text-white text-26rpx font-700 mr-5rpx">{{ $t('index.Countdown') }}</text>
        <text class="text-primary text-26rpx font-400">{{ displayTime }}</text>
      </view>
      <view class="flex items-center justify-center">
        <image src="@/static/images/trophy/jinbi.png" class="w-30rpx h-30rpx mr-10rpx"></image>
        <text class="text-26rpx font-400 text-white">+{{ currentLibaoData.currentRate }}/s</text>
      </view>
    </view>
    <view class="w-650rpx flex items-center mt-20rpx justify-between">
      <view
        @click="startGame"
        class="w-310rpx h-80rpx flex items-center justify-center relative bg-#111 rounded-20rpx"
      >
        <image src="@/static/images/production/btn.png" class="w-310rpx h-80rpx absolute"></image>
        <image src="@/static/images/production/liwu.png" class="w-36rpx h-36rpx mr-10rpx"></image>
        <text class="text-white text-28rpx font-700" :class="{ 'libao-scale': isAnimating }">
          Play
        </text>
      </view>
      <view
        @click="shengji"
        class="w-310rpx h-80rpx flex items-center justify-center relative bg-#111 rounded-20rpx"
      >
        <image src="@/static/images/production/btn.png" class="w-310rpx h-80rpx absolute"></image>
        <image
          src="@/static/images/production/shengji.png"
          class="w-36rpx h-36rpx mr-10rpx"
        ></image>
        <text class="text-white text-28rpx font-700">Boots</text>
      </view>
    </view>
    <view class="w-650rpx flex items-center mt-20rpx relative">
      <image
        src="@/static/images/production/playbg.png"
        class="w-243rpx h-44rpx absolute left-36rpx"
      ></image>
      <view class="w-full flex items-center justify-start z-1 ml-55rpx mt-10rpx">
        <image
          src="@/static/images/production/shangsheng.png"
          class="w-14rpx h-19rpx mr-10rpx"
        ></image>
        <text class="text-18rpx font-400 text-white">
          {{ gamePlayTime }}(+{{
            playData.temporaryRate
              ? (playData.temporaryRate ? playData.temporaryRate / 100 : 0).toFixed(2)
              : 0
          }}/s)
        </text>
      </view>
    </view>
  </view>
  <!-- 语言 -->
  <wd-popup v-model="show" position="top">
    <view
      class="bg-cardlight w-full h-750rpx flex items-center flex-col justify-between p-x-30rpx p-y-50rpx box-border"
    >
      <view
        v-for="item in languages"
        :key="item.label"
        class="w-690rpx flex items-center h-80rpx rounded-10rpx justify-between text-white text-28rpx langboder"
        @click="changeLocale(item)"
        :class="value1 === item.value ? 'bg-ac-yy' : ''"
      >
        <view class="ml-30rpx">
          <image
            :src="getAssetsImages('production', item.value)"
            class="w-60rpx h-60rpx mr-30rpx rounded-38rpx"
          ></image>
          <text :class="value1 === item.value ? 'text-primary' : 'text-white'">
            {{ item.label }}
          </text>
        </view>
        <image
          v-if="value1 === item.value"
          src="@/static/images/production/gou.png"
          class="w-30rpx h-30rpx mr-30rpx"
        ></image>
      </view>
    </view>
  </wd-popup>
  <Dialog
    v-model:show-value="shengjiShow"
    position="bottom"
    width="690rpx"
    :height="uprule.status !== 1 ? '672rpx' : '400rpx'"
  >
    <view class="w-full flex flex-col items-center" v-if="uprule.status !== 1">
      <text class="text-white mt-90rpx text-36rpx font-700">Speed up the process!</text>
      <view
        class="w-650rpx h-150rpx flex bg-cards rounded-20rpx items-center justify-between mt-30rpx"
      >
        <view class="flex flex-col text-primary ml-20rpx">
          <text class="text-42rpx font-700 h-63rpx">BH {{ uprule.list[0].level }}</text>
          <text class="font-400 text-24rpx mt-10rpx">
            {{ uprule.list[0].numericalValueHour }} HB Coin/H
          </text>
        </view>
        <image
          src="@/static/images/production/maozhuao.png"
          class="w-90rpx h-90rpx mr-20rpx"
        ></image>
      </view>
      <view
        class="w-650rpx h-280rpx flex flex-col bg-cards rounded-20rpx items-center justify-around mt-30rpx"
      >
        <view class="flex items-center justify-between text-white w-full">
          <text class="text-42rpx font-700 ml-20rpx">BH {{ uprule.list[1].level }}</text>
          <text class="text-24rpx font-400 mr-20rpx">
            {{ uprule.list[1].numericalValueHour }} HB Coin/H
          </text>
        </view>
        <view class="w-full flex items-center justify-around">
          <view
            class="w-285rpx h-156rpx rounded-20rpx bg-cardlight flex flex-col items-center justify-around"
          >
            <view class="flex items-center w-full justify-start ml-30rpx">
              <image src="@/static/images/purse/u.png" class="w-30rpx h-30rpx mr-10rpx"></image>
              <text class="text-24rpx font-400 text-white">{{ uprule.list[1].realMoney }}</text>
            </view>
            <view class="w-245rpx h-60rpx bg-gray rounded-20rpx flex items-center justify-center">
              <text class="text-26rpx font-700 text-textc">Upgrade</text>
            </view>
          </view>
          <view
            class="w-285rpx h-156rpx rounded-20rpx bg-cardlight flex flex-col items-center justify-around"
          >
            <view class="flex items-center w-full justify-start ml-30rpx">
              <image
                src="@/static/images/trophy/jinbi.png"
                class="w-30rpx h-30rpx mr-10rpx"
              ></image>
              <text class="text-24rpx font-400 text-white">
                {{ uprule.list[1].consumeGoldCoin }}
              </text>
            </view>
            <view
              @click="upRules('coin')"
              class="w-245rpx h-60rpx bg-primary rounded-20rpx flex items-center justify-center"
            >
              <text class="text-26rpx font-700 text-textc">Upgrade</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-else class="w-full flex flex-col items-center justify-center">
      <text class="text-white mt-90rpx text-36rpx font-700">level is top!</text>
      <view
        class="w-650rpx h-200rpx flex bg-cards rounded-20rpx items-center justify-between mt-30rpx"
      >
        <view class="flex flex-col text-primary ml-20rpx">
          <text class="text-42rpx font-700 h-63rpx">BH {{ uprule.list[0].level }}</text>
          <text class="font-400 text-24rpx mt-10rpx">
            {{ uprule.list[0].numericalValueHour }} HB Coin/H
          </text>
        </view>
        <image
          src="@/static/images/production/maozhuao.png"
          class="w-90rpx h-90rpx mr-20rpx"
        ></image>
      </view>
    </view>
  </Dialog>
  <Dialog v-model:show-value="tishiShow" width="690rpx" height="577rpx">
    <view class="w-full flex flex-col items-center">
      <image src="@/static/images/production/time.png" class="w-90rpx h-90rpx mt-90rpx"></image>
      <view class="w-630rpx flex items-center">
        <text class="text-white font-700 text-36rpx text-center mt-30rpx">
          You can collect GT coins every 12 hours
        </text>
      </view>
      <view class="w-630rpx flex items-center justify-center mt-30rpx">
        <text class="text-26rpx font-400 text-primary text-center">{{ displayTime }}</text>
      </view>
      <view
        @click="tishiShow = false"
        class="w-630rpx bg-primary h-100rpx flex items-center justify-center rounded-20rpx mt-30rpx"
      >
        <text class="text-28rpx font-700 text-textc">Got it</text>
      </view>
    </view>
    <view class="w-full flex flex-col items-center">
      <image src="@/static/images/production/time.png" class="w-90rpx h-90rpx mt-90rpx"></image>
      <view class="w-630rpx flex items-center">
        <text class="text-white font-700 text-36rpx text-center mt-30rpx">
          You can collect GT coins every 12 hours
        </text>
      </view>
      <view class="w-630rpx flex items-center justify-center mt-30rpx">
        <text class="text-26rpx font-400 text-primary text-center">10h 13m 26s</text>
      </view>
      <view
        class="w-630rpx bg-primary h-100rpx flex items-center justify-center rounded-20rpx mt-30rpx"
      >
        <text class="text-28rpx font-700 text-textc">Got it</text>
      </view>
    </view>
  </Dialog>
  <Dialog v-model:show-value="lingquShow" width="690rpx" height="577rpx">
    <view class="w-full flex flex-col items-center">
      <image src="@/static/images/trophy/jinbi.png" class="w-90rpx h-90rpx mt-90rpx"></image>
      <view class="w-630rpx flex items-center">
        <text class="text-white font-700 text-36rpx text-center mt-30rpx">
          The result of the last automatic collection
        </text>
      </view>
      <view class="w-630rpx flex items-center justify-center mt-30rpx">
        <text class="text-26rpx font-400 text-primary text-center">
          + {{ currentLibaoData.currentValue }}
        </text>
      </view>
      <view
        @click="lingqu"
        class="w-630rpx bg-primary h-100rpx flex items-center justify-center rounded-20rpx mt-30rpx"
      >
        <text class="text-28rpx font-700 text-textc">Got it</text>
      </view>
    </view>
    <view class="w-full flex flex-col items-center">
      <image src="@/static/images/production/time.png" class="w-90rpx h-90rpx mt-90rpx"></image>
      <view class="w-630rpx flex items-center">
        <text class="text-white font-700 text-36rpx text-center mt-30rpx">
          You can collect GT coins every 12 hours
        </text>
      </view>
      <view class="w-630rpx flex items-center justify-center mt-30rpx">
        <text class="text-26rpx font-400 text-primary text-center">10h 13m 26s</text>
      </view>
      <view
        class="w-630rpx bg-primary h-100rpx flex items-center justify-center rounded-20rpx mt-30rpx"
      >
        <text class="text-28rpx font-700 text-textc">Got it</text>
      </view>
    </view>
  </Dialog>
  <tabbar currentTab="pages/index/index"></tabbar>
</template>
<script setup lang="ts">
import i18n, { t } from '@/locale/index'
import { useLaunchParams } from '@telegram-apps/sdk-vue'
import lottie from 'lottie-web'
import animationData from '@/static/data.json'
import Dialog from '@/components/common/Dialog/index.vue'
import { useUserStore } from '@/store/user'
import tabbar from '@/components/TabBar/index.vue'
import { useNotify } from 'wot-design-uni'
import { useImgPath } from '@/hooks/useImgPath'
import { useGameTimer } from '@/hooks/useGameTimer'
import {
  getRateUpgradesRules,
  ProductionIncreaseInterface,
  stageCoinAdd,
  updateGoldCoinProductRate,
} from '@/service/index/foo'
import CountUp from 'vue-countup-v3'

const {
  currentLibaoData,
  displayTime,
  percentage,
  isAnimating,
  libaoShow,
  refreshGameState,
  restartGame,
  stopTimers,
  gamePlayTime,
  playData,
} = useGameTimer()
const { getAssetsImages } = useImgPath()
const { showNotify } = useNotify()
const options = ref({
  decimalPlaces: 0, // 保留小数位数
  useEasing: true, // 是否使用缓动效果
  separator: ',',
  useGrouping: true,
})
// 用户信息
const pl = useLaunchParams()
const useStore = useUserStore()
const initUser = async (user: any, shareCode: string) => {
  await useStore.setUserInfo(user, shareCode)
}
// 开始游戏
const startGame = async () => {
  if (currentLibaoData.value.status === 2) {
    lingquShow.value = true
  } else if (currentLibaoData.value.status === 1) {
    tishiShow.value = true
  } else {
    stopTimers()
    try {
      await restartGame()
    } catch (error) {
      console.error('Failed to start game:', error)
      setTimeout(() => startGame(), 5000)
    }
  }
}
const lingqu = async () => {
  const { code, msg } = await stageCoinAdd()
  if (code === 1) {
    showNotify({ type: 'success', message: msg })
  } else {
    showNotify({ type: 'warning', message: msg })
  }
  lingquShow.value = false
  await restartGame()
}

watch(
  () => isAnimating.value,
  (newStatus) => {
    nextTick(() => {
      if (!newStatus) {
        lottie.play()
      } else {
        lottie.pause()
      }
    })
  },
)
// Lott
const initLott = () => {
  const query = uni.createSelectorQuery()
  query
    .select('#lottieContainer')
    .boundingClientRect((rect) => {
      if (rect) {
        lottie.loadAnimation({
          container: document.getElementById('lottieContainer'),
          renderer: 'svg',
          loop: true,
          autoplay: false,
          animationData,
        })
        if (isAnimating.value) {
          lottie.pause()
        } else {
          lottie.play()
        }
      } else {
        console.error('Container element not found')
      }
    })
    .exec()
}

onShow(async () => {
  generateStars()
  addStarsGradually()
  await initUser(pl.initData.user, uni.getStorageSync('shareCode') || '')
  await refreshGameState()
  nextTick(() => {
    initLott()
  })
})
onHide(() => {
  if (addStarTimer) {
    clearInterval(addStarTimer)
  }
  stopTimers()
  lottie.destroy()
})

const goPage = async (url: string) => {
  await uni.navigateTo({
    url,
  })
}
// 语言
const value1 = ref('en')
const languages = [
  { value: 'en', label: 'English' },
  { value: 'vi', label: 'Tiếng Việt' },
  { value: 'th', label: 'ภาษาไทย' },
  { value: 'ru', label: 'Русский язык' },
  { value: 'ko', label: '한국어' },
  { value: 'ja', label: 'にほんご' },
  { value: 'zh-TW', label: '繁体中文' },
]
const changeLocale = async (item) => {
  // 请求存入语言
  uni.setLocale(item.value)
  i18n.global.locale = item.value
  uni.setStorageSync('lang', item.value)
  value1.value = item.value
  show.value = false
  // await postCheckLang(item.value)
}
const show = ref(false)
const shengjiShow = ref(false)
const tishiShow = ref(false)
const lingquShow = ref(false)

const uprule = ref<{
  status: number
  list: ProductionIncreaseInterface[]
}>(
  {} as {
    status: number
    list: ProductionIncreaseInterface[]
  },
)
const shengji = async () => {
  const { data } = await getRateUpgradesRules()
  uprule.value = data
  shengjiShow.value = true
  console.info('🚀 ~ file:index method:shengji line:442 -----', uprule.value)
}
const upRules = async (upgradeType: 'coin' | 'currency') => {
  const { code, msg } = await updateGoldCoinProductRate({
    ruleId: uprule.value.list[1].id,
    upgradeType,
  })
  if (code === 1) {
    showNotify({ type: 'success', message: msg })
  } else {
    showNotify({ type: 'warning', message: msg })
    return
  }
  shengjiShow.value = false
  await restartGame()
}
// 星星
const stars = ref([])
const visibleStars = ref([])
const totalStars = 50
const addInterval = 100 // 每100ms添加一颗星星
let addStarTimer = null

const generateStar = (index) => ({
  id: index,
  top: `${Math.random() * 100}%`,
  left: `${Math.random() * 100}%`,
  size: `${Math.random() * 20 + 5}rpx`,
  duration: Math.random() * 5 + 5,
  delay: Math.random() * 2,
  opacity: Math.random() * 0.5 + 0.3,
  rotate: Math.random() * 1440, // 0 to 4 full rotations
  scale: Math.random() * 0.5 + 0.5,
})

const generateStars = () => {
  stars.value = Array.from({ length: totalStars }, (_, i) => generateStar(i))
}

const addStarsGradually = () => {
  let index = 0
  addStarTimer = setInterval(() => {
    if (index < stars.value.length) {
      visibleStars.value.push(stars.value[index])
      index++
    } else {
      clearInterval(addStarTimer)
    }
  }, addInterval)
}
</script>

<style lang="scss" scoped>
.langboder {
  border: 1px solid #3d537c;
}

.bg-ac-yy {
  border: 1px solid #ffdc00;
}

.custrom-bg {
  :deep(.wd-progress__inner) {
    border-radius: 20px;
    background: linear-gradient(90deg, #fff199 0%, #ffdc00 100%) !important;
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 50%;
      height: 100%;
      background: linear-gradient(
        90deg,
        transparent,
        hsla(0, 100%, 50%, 0.5) 5%,
        hsla(15, 100%, 50%, 0.5) 10%,
        hsla(30, 100%, 50%, 0.5) 15%,
        hsla(45, 100%, 50%, 0.5) 20%,
        hsla(60, 100%, 50%, 0.5) 25%,
        hsla(90, 100%, 50%, 0.5) 35%,
        hsla(120, 100%, 50%, 0.5) 45%,
        hsla(180, 100%, 50%, 0.5) 55%,
        hsla(240, 100%, 50%, 0.5) 65%,
        hsla(270, 100%, 50%, 0.5) 75%,
        hsla(300, 100%, 50%, 0.5) 85%,
        hsla(330, 100%, 50%, 0.5) 90%,
        hsla(360, 100%, 50%, 0.5) 95%,
        transparent
      );
      animation: flow 1.5s linear infinite;
    }
  }

  :deep(.wd-progress__outer) {
    height: 24rpx;
    border-radius: 35rpx;
  }
}

@keyframes flow {
  0% {
    left: -50%;
  }
  100% {
    left: 100%;
  }
}

.star-container {
  perspective: 1000px;
  transform-style: preserve-3d;
}

.star-image {
  --opacity: 0;
  --duration: 5s;
  --delay: 0s;
  --rotate: 0deg;
  --scale: 1;
  animation:
    star-appear 0.5s ease-out forwards,
    star-fall var(--duration) linear infinite var(--delay);
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.7));
}

@keyframes star-appear {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: var(--opacity);
    transform: scale(var(--scale));
  }
}

@keyframes star-fall {
  0% {
    transform: translateZ(-100px) translateX(0) translateY(0) rotate(0deg) scale(var(--scale));
  }
  10% {
    transform: translateZ(0) translateX(-50px) translateY(50px) rotate(var(--rotate))
      scale(var(--scale));
  }
  90% {
    transform: translateZ(0) translateX(-150px) translateY(450px) rotate(var(--rotate))
      scale(var(--scale));
  }
  100% {
    transform: translateZ(100px) translateX(-200px) translateY(500px) rotate(var(--rotate))
      scale(var(--scale));
    opacity: 0;
  }
}

.libao-scale {
  transform-origin: center center;
  animation: libaoGuitar 1s ease-out infinite;
}

@keyframes libaoGuitar {
  0% {
    transform: scale(0.95);
  }
  50% {
    transform: scale(1.32);
  }
  100% {
    transform: scale(0.95);
  }
}
</style>
