<template>
  <div ref="echart" class="echartDiv"></div>
</template>

<script setup>
import { choseRbgb } from '@/utils/tools'
import * as echarts from "echarts";
import { defineExpose, onMounted, ref } from "vue";
let vehicleChart = null
const echart = ref()
onMounted(() => {
  window.addEventListener('resize', handleResize)
});
const initCharts = (data) => {
  vehicleChart = echarts.init(echart.value)
  const colors =['#ff1818', '#0066ff', '#ff9900', '#00cc66']
  const countData = [
    {
      value: 0,
      name: '红色预警',
      colorType: 'red',
      color: ['#ff1818', '#ff6c6c'],
      color1: [choseRbgb('#ff1818', 0.3), choseRbgb('#ff6c6c', 0.3)]
    },
    {
      value: 0,
      name: '橙色预警',
      colorType: 'orange',
      color: ['#ff9900', '#cc7a00'],
      color1: [choseRbgb('#ff9900', 0.3), choseRbgb('#cc7a00', 0.3)]
    },
    {
      value: 0,
      name: '黄色预警',
      colorType: 'yellow',
      color: ['#ece403', '#f6f064'],
      color1: [choseRbgb('#ece403', 0.3), choseRbgb('#f6f064', 0.3)]
    },
    {
      value: 0,
      name: '蓝色预警',
      colorType: 'blue',
      color: ['#0066ff', '#0044cc'],
      color1: [choseRbgb('#0066ff', 0.3), choseRbgb('#0044cc', 0.3)]
    },
  ];
  data.forEach(item => {
    if(item.yj_jb == '10') countData[0].value = item.count;
    if(item.yj_jb == '20') countData[1].value = item.count;
    if(item.yj_jb == '30') countData[2].value = item.count;
    if(item.yj_jb == '40') countData[3].value = item.count;
  });
  vehicleChart.setOption(createChartOption(countData, colors))
}
const createChartOption = (data, colors) => {
  let total = data.reduce((sum, item) => sum + item.value, 0)
  return {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: '60%',
      top: 'center',
      textStyle: {
        color: '#fff',
        rich: {
          value: {
            color: '#fff'
          },
          percentage: {
            padding: [0, 0, 0, 10]
          },
          red: {
            color: colors[0]
          },
          orange: {
            color: colors[2]
          },
          yellow: {
            color: colors[3]
          },
          blue: {
            color: colors[1]
          },
        }
      },
      formatter: (name) => {
        const item = data.find(d => d.name === name);
        let percentage = ((item.value / total) * 100).toFixed(2);
        return `${name} ${item.value} {${item.colorType}|(${percentage}%)}`
      }
    },
    series: [
      {
        type: 'pie',
        radius: ['55%', '70%'],
        center: ['28%', '50%'],
        data: data.map(item => ({
          ...item,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: item.color[0] },
              { offset: 1, color: item.color[1] }
            ])
          }
        })),
        label: {
          show: false
        },
        emphasis: {
          scale: false,
          focus: 'none'
        },
        z: 2
      },
      {
        type: 'pie',
        radius: ['65%', '85%'],
        center: ['28%', '50%'],
        data: data.map(item => ({
          ...item,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: item.color1[0] },
              { offset: 1, color: item.color1[1] }
            ])
          }
        })),
        label: {
          show: false
        },
        emphasis: {
          scale: false,
          focus: 'none'
        },
        z: 1,
        silent: true
      }
    ]
  }
}

const handleResize = () => {
  vehicleChart?.resize()
}

defineExpose({initCharts})
</script>

<style lang='scss' scoped>
.echartDiv {
  width: 100%;
  height: 100%;
}
</style>
