<script setup lang="ts">
import { ref } from 'vue'
import Taro from '@tarojs/taro'
import utils from '@/utils'

const val = ref('')

const timeStr = ref('0')

const betVal = ref(100)

const count = ref(1)

const zoom = ref(1)

const isBalloon = ref(true)

const ws = new WebSocket(
  `${process.env.TARO_APP_BALLOON_WS}?uid=${Taro.getStorageSync('uid')}&game_id=${
    Taro.getStorageSync('gameItem').ID
  }`
)

ws.onopen = () => {
  Taro.showToast({
    title: '连接游戏服务器成功',
    mask: true,
    icon: 'none',
  })
}

ws.onmessage = (message) => {
  const res = JSON.parse(message.data)
  switch (res.code) {
    case 200:
      timeStr.value = res.data
      break
    case 5:
      Taro.showToast({
        title: res.msg,
        icon: 'none',
      })
      break
    case 400:
      Taro.showToast({
        title: res.msg,
        icon: 'none',
      })
      break
    case 100:
      Taro.showToast({
        title: res.msg,
        icon: 'none',
      })
      break
    default:
      startFun(res.name)
      break
  }
}

const changeBet = () => {
  switch (betVal.value) {
    case 100:
      betVal.value = 1000
      break
    case 1000:
      betVal.value = 10000
      break
    case 10000:
      betVal.value = 100
      break
  }
}

const startBet = () => {
  if (!val.value)
    return Taro.showToast({
      title: '请输入秒数',
      icon: 'none',
    })
  if (Number(val.value) > 13) {
    val.value = '13'
    Taro.showToast({
      title: '秒数不能超过13',
      icon: 'none',
    })
  }
  ws.send(
    JSON.stringify({
      type: 1,
      data: {
        number: betVal.value * count.value,
        second: Number(val.value),
      },
    })
  )
  setTimeout(() => {
    getUserInfo()
  }, 1000)
}

const clear = () => {
  count.value = 1
  val.value = ''
}

const startFun = (num: number) => {
  let count = 1
  for (let i = 0; i < num; i++) {
    setTimeout(() => {
      count++
      zoom.value += 0.1
      if (count === num) {
        isBalloon.value = false
        setTimeout(() => {
          isBalloon.value = true
          zoom.value = 1
        }, 1000)
      }
    }, 1000 * i)
  }
}

Taro.useDidShow(() => {
  getUserInfo()
})

const douzi = ref(0)

const getUserInfo = async () => {
  Taro.request({
    url: `${process.env.TARO_APP_BALLOON_API}/userBalloonInfo?uid=${Taro.getStorageSync('uid')}`,
    method: 'GET',
    success: ({ data: res }) => {
      douzi.value = res.data.data.pulse
    },
  })
}

const toPage = (type: number) => {
  Taro.navigateTo({
    url: `/pages/balloon/records/index?type=${type}`,
  })
}
</script>

<template>
  <view class="container">
    <view class="header">
      <view>豆子:{{ douzi }}</view>
      <view @click="utils.vibrateShort(() => toPage(1))">开奖记录</view>
      <view @click="utils.vibrateShort(() => toPage(2))">投注记录</view>
    </view>
    <view class="time">开奖倒计时：{{ timeStr }}</view>
    <view
      v-if="isBalloon"
      class="balloon-box"
      :style="{
        transform: `scale(${zoom})`,
        transition: 'transform 0.5s',
      }"
    ></view>
    <view v-else>气球爆炸了！</view>
    <view class="bottom-box">
      <input class="input" type="number" v-model="val" placeholder="请输入秒数,秒数不能超过13" />
      <view class="box">
        <button class="btn" type="primary" @click="count++">X{{ count }}</button>
        <button class="btn" type="primary" @click="changeBet">X{{ betVal }}</button>
      </view>
      <view class="box">
        <button class="btn" type="primary" @click="clear">重置</button>
        <button class="btn" type="primary" @click="startBet">吹</button>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
