<template>
  <div class="pointCloudMap">
    <RadarPointCloud
      :data="radarData"
      :loadingText="loadingText"
      :isLoading="isLoading"
    ></RadarPointCloud>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'

defineOptions({
  name: 'PointCloudMap',
})

// 类型定义
interface RadarDataPayload {
  RawPoints: [number, number, number, number][] // 原始点数据[x, y, z, 强度]
  timestamp: string // 时间戳
}

interface RadarData {
  ID: string // 数据ID
  Payload: RadarDataPayload // 数据负载
  Type: string // 数据类型
}

let ws: WebSocket | null = null // WebSocket连接
const radarData = ref<RadarData | null>(null) // 存储雷达数据
const isLoading = ref<boolean>(true) // 加载状态
const loadingText = ref<string>('正在加载雷达点云数据...') // 加载提示文本
/**
 * 连接WebSocket获取实时数据
 */
function connectWebSocket() {
  // 关闭现有连接
  if (ws) {
    ws.close()
    ws = null
  }

  // 创建新连接
  ws = new WebSocket('ws://localhost:8080')

  // 连接成功回调
  ws.onopen = () => {
    console.log('WebSocket已连接')
    loadingText.value = '已连接，接收点云数据中...'
  }

  // 接收消息回调
  ws.onmessage = (msg) => {
    try {
      // 解析雷达数据
      radarData.value = JSON.parse(msg.data)
      isLoading.value = false
    } catch (e) {
      console.error('解析雷达数据失败', e)
    }
  }

  // 连接关闭回调
  ws.onclose = () => {
    console.log('WebSocket已断开，尝试重连...')
    loadingText.value = '连接断开，尝试重连...'
    isLoading.value = true
    setTimeout(connectWebSocket, 3000)
  }

  // 错误处理回调
  ws.onerror = (error) => {
    console.error('WebSocket错误:', error)
  }
}

// 组件挂载时初始化
onMounted(() => {
  connectWebSocket()
})

// 组件卸载时清理
onUnmounted(() => {
  if (ws) {
    ws.close()
    ws = null
  }
})
</script>

<style scoped lang="less">
.pointCloudMap {
  width: 100vw;
  height: 100vh;
}
</style>
