<template>
  <full-screen-container>
    <TheHeader title="卫星信息监控平台" />

    <div class="main-content flex flex-1">
      <div class="w-1/4 px-2 flex flex-col">
        <border-box-3>
          <ScrollBoardTable ref="BDScrollBoardTable" title="北　　斗" />
        </border-box-3>
        <border-box-3>
          <ScrollBoardTable ref="GLScrollBoardTable" title="GLONASS" />
        </border-box-3>
      </div>
      <div class="w-1/2 px-2">
        <border-box-3>
          <CenterCmp ref="centerCmp" />
        </border-box-3>
      </div>
      <div class="w-1/4 flex flex-col px-2">
        <border-box-3>
          <ScrollBoardTable ref="GPScrollBoardTable" title="G P S" />
        </border-box-3>
        <border-box-3>
          <ScrollBoardTable ref="GAScrollBoardTable" title="Galileo" />
        </border-box-3>
      </div>
    </div>
  </full-screen-container>
</template>

<script lang="ts" setup>
import FullScreenContainer from '../components/Layout/FullScreenContainer.vue'
import TheHeader from '../components/Layout/TheHeader.vue'
import BorderBox3 from '../components/Layout/BorderBox3.vue'
import CenterCmp from '../components/CenterCmp.vue'
import ScrollBoardTable from '../components/ScrollBoardTable.vue'

import { ref, onMounted } from 'vue'
import { getGSV } from '../api/util'

const BDScrollBoardTable = ref(null)
const GPScrollBoardTable = ref(null)
const GLScrollBoardTable = ref(null)
const GAScrollBoardTable = ref(null)
const centerCmp          = ref(null)
const update             = (nmeaStr: string) => {
  
  const data: any = getGSV(nmeaStr)
  if (!data) return

  const { bd, gp, gl, ga } = data
  BDScrollBoardTable.value.update(bd.GSVArr)
  GPScrollBoardTable.value.update(gp.GSVArr)
  GLScrollBoardTable.value.update(gl.GSVArr)
  GAScrollBoardTable.value.update(ga.GSVArr)

  const bd_satellite_count = getSatelliteCount(bd.GSVArr)
  const gp_satellite_count = getSatelliteCount(gp.GSVArr)
  const gl_satellite_count = getSatelliteCount(gl.GSVArr)
  const ga_satellite_count = getSatelliteCount(ga.GSVArr)
  
  centerCmp.value.update(bd_satellite_count, gp_satellite_count, gl_satellite_count, ga_satellite_count)
}
onMounted(() => {
  if ('ipcRenderer' in window) {
    ipcRenderer.receive('nmea', update)

    ipcRenderer.send('APP_MOUNTED')
  }
})

const getSatelliteCount = (GSVArr: Array<any>) => {
  if (!GSVArr) return
  
  const count = GSVArr.reduce((total, gsv) => {
    return total + gsv.satellites.length
  }, 0)

  return count
}
</script>
