<template>
  <v-chart ref="ring" :option="option" />
</template>

<script lang="ts" setup>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { LegendComponent } from "echarts/components";
import { PieChart } from "echarts/charts";

import VChart from "vue-echarts";
import { ref, reactive, onMounted } from "vue";

use([
  CanvasRenderer,
  LegendComponent,
  PieChart
]);

const option = reactive({
  legend: {
    bottom: '5%',
    left: 'center',
    selectedMode: false,
    itemGap: 15,
    itemWidth: 35,
    itemHeight: 20,
    textStyle: {
      color: 'white',
      fontSize: 16
    }
  },
  color: ['#FF801C', '#F5FF46', '#00FE65', '#00FEFF', '#ffa800', '#ff5b00', '#ff3000'],
  series: [
    {
      type: 'pie',
      radius: ['40%', '70%'],
      startAngle: 180,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        scaleSize: 25,
        label: {
          show: true,
          color: 'white',
          fontSize: '28',
          fontWeight: 'bold',
          formatter: '{c}\n\n{b}'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 0, name: '北  斗', },
        { value: 0, name: 'G P S' },
        { value: 0, name: '格洛纳斯' },
        { value: 0, name: '伽 利 略' }
      ]
    }
  ]
});

const ring = ref(null)
const COUNT = option.series[0].data.length
let highlightIndex = -1
const highlight = () => {
  ring.value.dispatchAction({
    type: 'downplay',
    dataIndex: highlightIndex
  })

  highlightIndex++
  if (highlightIndex >= COUNT) highlightIndex = 0
  
  ring.value.dispatchAction({
    type: 'highlight',
    dataIndex: highlightIndex
  })
}
onMounted(() => {
  setInterval(highlight, 3000)
})

const update = (bd_val: number, gp_val: number, gl_val: number, ga_val: number) => {
  option.series[0].data[0].value = bd_val
  option.series[0].data[1].value = gp_val
  option.series[0].data[2].value = gl_val
  option.series[0].data[3].value = ga_val
}


defineExpose({ update })
</script>