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

<template>
  <view class="w-full min-h-screen bg-bgc flex flex-col items-center">
    <view class="w-full flex flex-col items-center">
      <view class="w-full min-h-screen flex flex-col items-center">
        <view class="w-full flex flex-col items-center z-1">
          <view
            class="pa-[10rpx] flex items-center justify-center rounded-30rpx bg-cardlight fw-540 mt-30rpx"
          >
            <view
              v-for="(vale, index) in classList"
              :key="index"
              :style="{ color: activeTab === vale.type ? '#0E0E0E' : '#fff' }"
              class="w-220rpx h-80rpx rounded-20rpx flex items-center justify-center text-26rpx"
              :class="activeTab === vale.type ? 'bg-primary' : ''"
              @click="changeActiveTab(vale.type, vale.time, vale.correct, index)"
            >
              {{ vale.title }}
            </view>
          </view>
          <image
            src="@/static/images/play/fengmian.png"
            class="w-690rpx h-371rpx rounded-20rpx mt-30rpx"
          ></image>
          <view class="w-690rpx rounded-20rpx bg-cardlight mt-30rpx flex flex-col items-center">
            <text
              class="w-616rpx mt-32rpx text-white flex items-center justify-center title-custom h-140rpx"
            >
              <view class="w-616rpx flex justify-between items-center mb-20rpx">
                <text class="text-26rpx">{{ $t('play.Duration') }}:</text>
                <text class="text-24rpx">{{ secondsToTime(timeData) }}</text>
              </view>
              <view class="w-616rpx flex justify-between items-center mb-20rpx">
                <text class="text-26rpx">{{ $t('play.Click') }}:</text>
                <text class="text-24rpx">{{ musicBlockData }}</text>
              </view>
            </text>
            <text class="text-white text-26rpx mt-35rpx">{{ $t('play.Increase') }}</text>
            <view class="mt-50rpx border-box rounded-20rpx mb-50rpx flex flex-col justify-center">
              <view
                class="w-630rpx h-70rpx rounded-10rpx mb-10rpx flex items-center justify-between box-border p-x-30rpx"
                v-for="(vale, index) in awardList"
                :key="index"
              >
                <view v-if="index == 0">
                  <image src="@/static/images/play/star.png" class="w-38rpx h-38rpx"></image>
                </view>
                <view v-else-if="index == 1">
                  <image src="@/static/images/play/star.png" class="w-38rpx h-38rpx mr-1"></image>
                  <image src="@/static/images/play/star.png" class="w-38rpx h-38rpx mr-1"></image>
                </view>

                <view v-else-if="index == 2">
                  <image src="@/static/images/play/star.png" class="w-38rpx h-38rpx mr-1"></image>
                  <image src="@/static/images/play/star.png" class="w-38rpx h-38rpx mr-1"></image>
                  <image src="@/static/images/play/star.png" class="w-38rpx h-38rpx mr-1"></image>
                </view>

                <view class="w-130rpx flex items-center text-white justify-between">
                  <image src="@/static/images/play/shalou.png" class="w-40rpx h-40rpx"></image>
                  <text class="text-26rpx">X{{ vale.percentage }}%</text>
                </view>
              </view>
            </view>
          </view>

          <!-- 进入游戏按钮 -->
          <view
            @click="onConfirm"
            class="w-630rpx h-100rpx rounded-20rpx bg-primary flex items-center justify-center text-textc items-center mt-40rpx fw-700 text-28rpx mb-20rpx"
          >
            {{ $t('play.Go') }}
          </view>
          <!--          <view-->
          <!--            @click="onConfirm"-->
          <!--            class="w-630rpx h-100rpx rounded-20rpx bg-primary flex items-center justify-center text-textc items-center mt-40rpx fw-700 mb-20rpx text-28rpx"-->
          <!--          >-->
          <!--            <view class="flex items-center">-->
          <!--              <image src="@/static/images/purse/u.png" class="w-40rpx h-40rpx mr-10rpx"></image>-->
          <!--              <text>80</text>-->
          <!--            </view>-->
          <!--          </view>-->
          <!--          <view>-->
          <!--            <image src="@/static/images/play/desbg.png" class="w-40rpx h-40rpx mr-10rpx"></image>-->
          <!--          </view>-->
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import i18n from '@/locale/index'
import { useTelegramBackButton } from '@/hooks/useTelegramBackButton'

const { isVisible } = useTelegramBackButton(() => {
  uni.switchTab({
    url: '/pages/index/index',
  })
})

type Tab = string
const activeTab = ref<Tab>('one')
// 游戏时长(默认90秒第一难度)
const timeData = ref<number>(45)
// 点块数量
const musicBlockData = ref<number>(30)
const changeActiveTab = (tab: Tab, time: number, musicBlock: number, index: number) => {
  timeData.value = time
  musicBlockData.value = musicBlock
  activeTab.value = tab
  awardList.value = [
    {
      percentage: classList.value[index].grade1,
    },
    {
      percentage: classList.value[index].grade2,
    },
    { percentage: classList.value[index].grade3 },
  ]
}

// 当前等级
const classList = ref<
  Array<{
    title: string
    type: string
    correct: number
    time: number
    grade1: number
    grade2: number
    grade3: number
  }>
>([])
const updateLists = () => {
  classList.value = [
    {
      title: i18n.global.t('play.Relaxed'),
      type: 'one',
      correct: 30,
      time: 90,
      grade1: 5,
      grade2: 10,
      grade3: 15,
    },
    {
      title: i18n.global.t('play.Ordinary'),
      type: 'two',
      correct: 60,
      time: 90,
      grade1: 6,
      grade2: 11,
      grade3: 16,
    },
    {
      title: i18n.global.t('play.Nervousness'),
      type: 'three',
      correct: 90,
      time: 90,
      grade1: 7,
      grade2: 12,
      grade3: 17,
    },
  ]
}
// 时间换算器
const secondsToTime = (seconds: number) => {
  // 计算小时、分钟和剩余的秒数
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  const secs = seconds % 60

  // 格式化为 HH:MM:SS
  const formattedTime = [
    hours.toString().padStart(2, '0'),
    minutes.toString().padStart(2, '0'),
    secs.toString().padStart(2, '0'),
  ].join(':')

  return formattedTime
}

// 等级
const awardList = ref<any[]>([
  {
    percentage: 5,
  },
  {
    percentage: 10,
  },
  { percentage: 15 },
])

// 跳转开始游戏页面
const onConfirm = () => {
  uni.redirectTo({
    url: `/pages/play/game?correct=${musicBlockData.value}&activeTab=${activeTab.value}`,
  })
}
watch(() => i18n.global.locale, updateLists)

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

<style scoped>
.title-custom {
  background: transparent;
  border-bottom: 1px solid #636363;
}

.border-box {
  border: 2rpx #636363 solid;
}
</style>
