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

    <div class="main-content flex-1 grid grid-cols-2 grid-rows-2">
      <div>
        <SNRView ref="BDSNRView" title="北斗" />
      </div>
      <div>
        <SNRView ref="GPSNRView" title="GPS" />
      </div>
      <div>
        <SNRView ref="GLSNRView" title="格洛纳斯" />
      </div>
      <div>
        <SNRView ref="GASNRView" title="伽利略" />
      </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 SNRView from '../components/SNRView.vue'

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

const BDSNRView = ref(null)
const GPSNRView = ref(null)
const GLSNRView = ref(null)
const GASNRView = ref(null)
const update = (nmeaStr: string) => {
  const data: any = getMonitoringData(nmeaStr)
  if (!data) return

  const { bd, gp, gl, ga } = data
  
  // TODO: 找到bdgsv语句有7条的原因以及gsa语句配置talker_id为各个卫星导航系统自己的名字
  BDSNRView.value.update(bd.GSVArr, bd.GSAArr)
  GPSNRView.value.update(gp.GSVArr, gp.GSAArr)
  GLSNRView.value.update(gl.GSVArr, gl.GSAArr)
  GASNRView.value.update(ga.GSVArr, ga.GSAArr)
}

onMounted(() => {
  if ('ipcRenderer' in window) {
    ipcRenderer.receive('nmea', update)

    ipcRenderer.send('APP_MOUNTED')
  }
})

const getMonitoringData = (nmeaStr: string) => {
  const nmeaObj: any = getNMEAObj(nmeaStr)
  console.log(nmeaObj, '================')
  if (!nmeaObj || !nmeaObj.GSV || !nmeaObj.GSA) return null

  const { GSV, GSA } = nmeaObj
  const bd = {
    GSVArr: GSV.filter((gsv: any) => gsv.talker_id === 'BD'),
    GSAArr: GSA.filter((gsa: any) => gsa.talker_id === 'BD')
  }
  const gp = {
    GSVArr: GSV.filter((gsv: any) => gsv.talker_id === 'GP'),
    GSAArr: GSA.filter((gsa: any) => gsa.talker_id === 'GP')
  }
  const gl = {
    GSVArr: GSV.filter((gsv: any) => gsv.talker_id === 'GL'),
    GSAArr: GSA.filter((gsa: any) => gsa.talker_id === 'GL')
  }
  const ga = {
    GSVArr: GSV.filter((gsv: any) => gsv.talker_id === 'GA'),
    GSAArr: GSA.filter((gsa: any) => gsa.talker_id === 'GA')
  }

  return { bd, gp, gl, ga }
}
</script>
