<script setup lang="ts" name="DashboardCharts">
import { ref, onMounted, watch, nextTick, inject } from "vue";
import * as echarts from "echarts";

const props = defineProps(['color', 'chartNum']);
const DashboardCharts = ref();

let myChart;
watch(
  () => props.chartNum,
  (newVal) => {
    nextTick().then(() => {
      myChart = echarts.init(DashboardCharts.value);
      if (newVal.toString() && myChart) {
        myChart.setOption({
          series: [
            // 低圈--外环
            {
              type: 'pie',
              zlevel: 1,
              radius: ['137%', '152%'],
              center: ['50%', '80%'],
              startAngle: 180,
              endAngle: 0,
              animation: false,
              itemStyle: {
                borderRadius: 20
              },
              data: [
                {
                  value: 100,
                  itemStyle: {
                    color: 'rgba(247, 247, 247, 1)',
                  },
                }
              ],
            },
            {
              type: 'gauge',
              center: ['50%', '76%'],
              radius: '115%',
              startAngle: 180,
              endAngle: 0,
              min: 0,
              max: 100,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                      offset: 0,
                      color: props.color[0]
                  },
                  {
                      offset: 1,
                      color: props.color[1]
                  }
              ]),
              },
              progress: {
                show: true,
                roundCap: true,
                width: 18,
              },
              axisLine: {
                roundCap: true,
                lineStyle: {
                  color: [
                        [1,  props.color[2]]
                    ],
                  width: 18
                  
                }
              },
              pointer: {
                show: false,
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: false
              },
              axisLabel: {
                show: false
              },
              title: {
                show: false
              },
               detail: {
                show: false
              },
              data: [
                {
                  value: props.chartNum
                }
              ]
            },
            {
              z:10,
              type: 'gauge',
              center: ['50%', '76%'],
              radius: '115%',
              startAngle: 180,
              endAngle: 0,
              min: 0,
              max: 100,
              itemStyle: {
                color: 'rgba(255,255,255,0)',
              },
              progress: {
                show: false,
                itemStyle: {
                  opacity: 0
                },
              },
              pointer: {
                icon: 'circle',
                width: 20,
                length: 20,
                offsetCenter: ['3%', '-83%'],
                itemStyle: {
                  z: 10,
                  zlevel: 3,
                  color: props.color[1],
                  borderWidth: 6,
                  borderColor: '#fff',
                  shadowBlur: 6,
                  shadowColor: 'rgba(53, 64, 79, 0.2)',
                }
              },
              axisLine: {
                show: false

            },
              axisTick: {
                show: false
              },
              splitLine: {
                show: false
              },
              axisLabel: {
                show: false
              },
              title: {
                show: false
              },
               detail: {
                show: false
              },
              data: [
                {
                  value: props.chartNum
                }
              ]
            }
          ]
        });
      }
    });
  },
  { deep: true, immediate: true }
);

const generateRandomColors = () => {
  const hue = Math.floor(Math.random() * 360);
  const saturation = Math.floor(Math.random() * 30) + 70;
  const lightness = Math.floor(Math.random() * 20) + 40;
  const color = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
  return color;
}

onMounted(() => {
  myChart = echarts.init(DashboardCharts.value);
});
</script>
<template>
  <div class="echarts-wrapper">
    <div ref="DashboardCharts" id="DashboardCharts" class="bar-chart" />
  </div>
</template>
<style lang="scss" scoped>
.echarts-wrapper {
  height: 100%;
  width: 100%;

  .bar-chart {
    height: 100%;
    width: 100%;
  }
}
</style>