<!-- 波形图和瀑布图组合，服务端使用 java 版本的websocket -->
<template>
  <el-card class="mb-20px relative" shadow="hover">
    <div class="absolute right-2 top-2 text-xs text-gray-500 z-10">
      数据: {{ lineInfo.size }} 条 | FPS: {{ lineInfo.fps }}
    </div>
    <el-skeleton :loading="loading" :rows="4" animated>
      <Echart :height="350" :options="lineOptionsData" />
    </el-skeleton>
  </el-card>

  <el-card class="mb-20px px-[40px] relative" shadow="hover">
    <div class="absolute right-2 top-2 text-xs text-gray-500 z-10">
      大小: {{ waterfallInfo.size }} | FPS: {{ waterfallInfo.fps }}
    </div>
    <el-skeleton :loading="loading" :rows="4" animated>
      <div class="flex justify-center font-700 text-[18px] mb-2">瀑布图</div>
      <img id="waterfall" :src="waterfallImg" alt="waterfall" class="w-full h-[200px]" />
    </el-skeleton>
  </el-card>
</template>

<script lang="ts" setup>
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import 'echarts/lib/component/dataZoom'
import { lineOptions } from './echarts-data'

defineOptions({ name: 'Home2' })

const { t } = useI18n()
const loading = ref(true)

const lineOptionsData = reactive<EChartsOption>(lineOptions) as EChartsOption
let data: any[] = [] // 波形图数据
const waterfallImg = ref('') // 瀑布图图片

// 左上角显示用的数据
const lineInfo = ref({ size: 0, fps: 0 })
const waterfallInfo = ref({ size: '0 KB', fps: 0 })

// FPS 统计
let lineFrameCount = 0
let waterfallFrameCount = 0
setInterval(() => {
  lineInfo.value.fps = lineFrameCount
  waterfallInfo.value.fps = waterfallFrameCount
  lineFrameCount = 0
  waterfallFrameCount = 0
}, 1000)

// 初始数据
const getLineData = async () => {
  set(
    lineOptionsData,
    'xAxis.data',
    data.map((v) => t(v.name))
  )
  set(lineOptionsData, 'series', [
    {
      name: 'data1',
      smooth: false,
      type: 'line',
      showSymbol: false,
      progressive: 1000,
      progressiveThreshold: 5000,
      lineStyle: {
        width: 1
      },
      sampling: 'lttb',
      animation: false,
      animationDuration: 1000,
      animationEasing: 'linear',
      data: data.map((v) => v.data1)
    }
  ])
}

const connect = () => {
  const socket = new WebSocket('ws://localhost:8025/ws/combined')
  // const socket = new WebSocket('ws://localhost:8080')

  socket.addEventListener('open', () => {
    console.log('WebSocket 连接成功')
  })

  socket.addEventListener('message', (event) => {
    const parsed = JSON.parse(event.data)
    const newData = parsed.lineData

    // 更新瀑布图
    waterfallImg.value = `data:image/png;base64,${parsed.waterfallImg}`

    // ---- 更新波形图信息 ----
    lineInfo.value.size = newData.length
    lineFrameCount++

    // ---- 更新瀑布图信息 (计算 base64 大小) ----
    const base64Str = parsed.waterfallImg
    const strLen = base64Str.length
    const fileSizeKB = (strLen * 3 / 4 / 1024).toFixed(2)
    waterfallInfo.value.size = `${fileSizeKB} KB`
    waterfallFrameCount++

    // 更新图表数据
    const newXAxisData = newData.map((item) => item.frequency)
    set(lineOptionsData, 'xAxis.data', newXAxisData)
    set(lineOptionsData, 'series', [
      {
        name: 'data1',
        smooth: false,
        type: 'line',
        progressive: 1000,
        progressiveThreshold: 5000,
        showSymbol: false,
        lineStyle: {
          width: 0.5
        },
        sampling: 'lttb',
        animation: false,
        animationDuration: 1000,
        animationEasing: 'linear',
        data: [...newData.map((item) => item.value)]
      }
    ])
  })
}

const getAllApi = async () => {
  await getLineData()
  loading.value = false
  connect()
}

getAllApi()
</script>

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