<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="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>
      <text class="text-[60rpx] font-700 mr-10rpx" ref="goldCoinEl">111</text>
      <text class="text-24rpx font-400 pt-20rpx">BHCoin</text>
    </view>
    <view class="w-690rpx flex items-center justify-center mt-30rpx" @click="tishishow = true">
      <image src="@/static/images/production/cat.png" class="w-250rpx h-557rpx"></image>
    </view>
    <view class="w-full flex items-center justify-center mt-20rpx">
      <view class="custrom-bg w-650rpx flex text-white items-center">
        <wd-progress :percentage="10" hide-text :duration="0.1" />
      </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">+0.1/s</text>
      </view>
    </view>
    <view class="w-650rpx flex items-center mt-20rpx justify-between">
      <view
        @click="goPage('/pages/play/index')"
        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">Play</text>
      </view>
      <view
        @click="shengjishow = true"
        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="flex items-center justify-center z-1 ml-77rpx 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">08:01:11(+0.02/s)</text>
      </view>
    </view>
    <!--    <view id="lottieContainer" class="box"></view>-->
    <!--    <button @click="show = !show">Solana Wallet</button>-->
    <!--    <Dialog v-model:show-value="show" position="top" width="100%"></Dialog>-->
    <!--    <button>1</button>-->
  </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="672rpx">
    <view class="w-full flex flex-col items-center">
      <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 0</text>
          <text class="font-400 text-24rpx mt-10rpx">360 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 1</text>
          <text class="text-24rpx font-400 mr-20rpx">720 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">100</text>
            </view>
            <view
              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
            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">100</text>
            </view>
            <view
              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>
  </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">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>
    <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">+ 12000</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>
    <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/Animation.json'
import Dialog from '@/components/common/Dialog/index.vue'
import { useUserStore } from '@/store/user'
import { getShareCode } from '@/service/team'
import tabbar from '@/components/TabBar/index.vue'
import { useNotify } from 'wot-design-uni'
import { useImgPath } from '@/hooks/useImgPath'

const { getAssetsImages } = useImgPath()
const { showNotify } = useNotify()

const pl = useLaunchParams()
const useStore = useUserStore()

const initUser = async (user: any, shareCode: string) => {
  const data = await useStore.setUserInfo(user, shareCode)
}
const value1 = ref('en')
onShow(async () => {
  await initUser(pl.initData.user, uni.getStorageSync('shareCode') || '')
  const { data } = await getShareCode()
  nextTick(() => {
    const query = uni.createSelectorQuery()
    query
      .select('#lottieContainer')
      .boundingClientRect((rect) => {
        if (rect) {
          lottie.loadAnimation({
            container: document.getElementById('lottieContainer'),
            renderer: 'svg',
            loop: true,
            autoplay: true,
            animationData,
          })
        } else {
          console.error('Container element not found')
        }
      })
      .exec()
  })
})
const goPage = async (url: string) => {
  await uni.navigateTo({
    url,
  })
}
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 displayTime = ref('00h 00m 00s')

const shengjishow = ref(false)
const tishishow = ref(false)
const lingqushow = ref(false)
</script>

<style lang="scss" scoped>
.box {
  width: 690rpx;
  height: 500rpx;
  overflow: hidden; /* 如果动画超出容器大小，确保它不会溢出 */
}

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

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