<template>
  <SubTitleView :title="'星位视图'" />
  <div @dblclick="close" class="h-4/5">
    <v-chart :option="option" />
  </div>
</template>

<script lang="ts" setup>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { ScatterChart } from "echarts/charts";
import { PolarComponent } from "echarts/components";
import VChart from "vue-echarts";
import { reactive } from "vue";
import SubTitleView from './SubTitleView.vue'
import { getPlanisphereOption } from '../api/util'

use([
  CanvasRenderer,
  ScatterChart,
  PolarComponent
]);

const LOCATED_COLOR   = '#e5323e'
const UNLOCATED_COLOR = '#9ca3af'


const option = reactive({
  polar: {},
  radiusAxis: {
    inverse: true,
    min: 0,
    max: 90,
    axisLabel: {
      rotate: -25,
      showMinLabel: false,
      showMaxLabel: false,
      verticalAlign: 'bottom'
    }
  },
  angleAxis: {
    type: 'value',
    min: 0,
    max: 360,
    axisTick: {show: false},
    axisLabel: {
      formatter: function (value) {
        switch (value)
        {
          case 0	 : return 'N';
          case 90	 : return 'E';
          case 180 : return 'S';
          case 270 : return 'W';
        }
      },
    }
  },
  series: [{
    coordinateSystem: 'polar',
    type: 'scatter',
    symbolSize: 32,
    label: {
      show: true,
      formatter: '{@[2]}'
    },
    itemStyle: {
      color: ({ value }) => {
        return value[3] ? LOCATED_COLOR : UNLOCATED_COLOR
      }
    }
  }]
})

const update = (nmea) => {
  const newOption = getPlanisphereOption(nmea)
  if (!newOption) return
  
  Object.assign(option, newOption)
}

const close = () => {
  window.ipcRenderer.send('CLOSE')
}

defineExpose({ update })
</script>