<template>
  <CommonPage show-footer :title="$route.title">
    <div flex>
      <div flex>
        <div>游戏状态：</div>
        <n-switch
          v-model:value="val1"
          :checked-value="1"
          :unchecked-value="2"
          @update:value="handleUpdateValue1"
        />
      </div>
      <div ml-20 flex>
        <div>点杀状态：</div>
        <n-switch
          v-model:value="val"
          :checked-value="1"
          :unchecked-value="2"
          @update:value="handleUpdateValue"
        />
      </div>
    </div>

    <div flex>
      <div>
        预开期数：
        <span text-25>{{ list[0]?.periods || 0 }}</span>
      </div>
      <div ml-20>
        剩余开奖时间：
        <span text-25>{{ time || 0 }}</span>
      </div>
    </div>

    <div flex flex-wrap justify-between>
      <n-card
        v-for="item in list"
        :key="item.ID"
        class="mb-10 mt-10 w-300 flex-shrink-0 cursor-pointer"
        :title="item.name"
      >
        <p text-25 op-60 :style="{ color: item.count === 0 ? 'green' : 'red' }">{{ item.count }}</p>
      </n-card>
      <div h-0 w-300></div>
      <div h-0 w-300></div>
    </div>
  </CommonPage>
</template>

<script setup>
import api from '../api'
const ws = new WebSocket(`wss://${import.meta.env.VITE_WS_URL}`)

const ws1 = new WebSocket(`wss://${import.meta.env.VITE_WS1_URL}`)

const list = ref([])

const val1 = ref(null)
const val = ref(null)

const time = ref(null)

ws.onopen = () => {
  console.log('1连接成功')
}

ws.onmessage = (msg) => {
  const res = JSON.parse(msg.data)
  list.value = res
}

ws1.onopen = () => {
  console.log('2连接成功')
}

ws1.onmessage = (msg) => {
  const res = JSON.parse(msg.data)
  switch (res.code) {
    case 200:
      // let num = res.data
      time.value = res.data
      break
    case 301:
      $message.error(res.msg)
      break
  }
}

onMounted(() => {
  get_data()
  get_data1()
})

const get_data = async () => {
  const res = await api.getDS()
  val.value = res.data.diceStatus
}
const get_data1 = async () => {
  const res = await api.getData()
  val1.value = res.data.diceStart
}

onBeforeUnmount(() => {
  ws.close()
})

const handleUpdateValue = async (e) => {
  const res = await api.setDS({
    status: e,
  })
  $message.success(res.msg)
  get_data()
}

const handleUpdateValue1 = async (e) => {
  const res = await api.setStatus({
    start: e,
  })
  $message.success(res.msg)
  get_data1()
}
</script>

<style lang="scss" scoped></style>
