<script setup lang="ts">
import { onMounted, ref, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts/core';
import { TooltipComponent } from 'echarts/components';
import { GaugeChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';

import useI18n from '@/hooks/useI18n';
import { GaugeSeriesOption } from 'echarts/types/dist/echarts';
const { t } = useI18n();

echarts.use([TooltipComponent, GaugeChart, CanvasRenderer]);

type EChartsOption = echarts.ComposeOption<GaugeSeriesOption>;

/**图DOM节点实例对象 */
const neResourcesDom = ref<HTMLElement | undefined>(undefined);

/**图实例对象 */
const neResourcesChart = ref<any>(null);

const optionData: EChartsOption = {
  tooltip: {
    formatter: '{a} <br> {b} : {c}%',
  },
  series: [
    {
      name: '系统内存',
      type: 'gauge',
      center: ['30%', '25%'],
      radius: '40%',
      startAngle: 90,
      endAngle: -270,
      min: 1,
      max: 100,
      itemStyle: {
        color: '#1890ff',
      },
      progress: {
        show: true,
        width: 10,
        overlap: true,
        roundCap: true,
        clip: false,
      },
      pointer: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          width: 10,
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      anchor: {
        show: false,
      },
      title: {
        show: true,
        offsetCenter: [0, -5],
        fontSize: 10,
        color: '#fafafa',
      },
      detail: {
        valueAnimation: true,
        width: '60%',
        lineHeight: 40,
        borderRadius: 8,
        offsetCenter: [0, 10],
        fontSize: 10,
        fontWeight: 'bolder',
        formatter: '{value}%',
        color: 'inherit',
      },
      data: [
        {
          name: '系统内存',
          value: 20,
        },
      ],
    },
    {
      name: '系统CPU',
      type: 'gauge',
      center: ['70%', '25%'],
      radius: '40%',
      startAngle: 90,
      endAngle: -270,
      min: 1,
      max: 100,
      itemStyle: {
        color: '#1890ff',
      },
      progress: {
        show: true,
        width: 10,
        overlap: true,
        roundCap: true,
        clip: false,
      },
      pointer: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          width: 10,
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      anchor: {
        show: false,
      },
      title: {
        show: true,
        offsetCenter: [0, -5],
        fontSize: 10,
        color: '#fafafa',
      },
      detail: {
        valueAnimation: true,
        width: '60%',
        lineHeight: 40,
        borderRadius: 8,
        offsetCenter: [0, 10],
        fontSize: 10,
        fontWeight: 'bolder',
        formatter: '{value}%',
        color: 'inherit',
      },
      data: [
        {
          name: '系统内存',
          value: 20,
        },
      ],
    },
    {
      name: '网元内存',
      type: 'gauge',
      center: ['30%', '75%'],
      radius: '40%',
      startAngle: 90,
      endAngle: -270,
      min: 1,
      max: 100,
      itemStyle: {
        color: '#1890ff',
      },
      progress: {
        show: true,
        width: 10,
        overlap: true,
        roundCap: true,
        clip: false,
      },
      pointer: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          width: 10,
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      anchor: {
        show: false,
      },
      title: {
        show: true,
        offsetCenter: [0, -5],
        fontSize: 10,
        color: '#fafafa',
      },
      detail: {
        valueAnimation: true,
        width: '60%',
        lineHeight: 40,
        borderRadius: 8,
        offsetCenter: [0, 10],
        fontSize: 10,
        fontWeight: 'bolder',
        formatter: '{value}%',
        color: 'inherit',
      },
      data: [
        {
          name: '系统内存',
          value: 20,
        },
      ],
    },
    {
      name: '网元CPU',
      type: 'gauge',
      center: ['70%', '75%'],
      radius: '40%',
      startAngle: 90,
      endAngle: -270,
      min: 1,
      max: 100,
      itemStyle: {
        color: '#1890ff',
      },
      progress: {
        show: true,
        width: 10,
        overlap: true,
        roundCap: true,
        clip: false,
      },
      pointer: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          width: 10,
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      anchor: {
        show: false,
      },
      title: {
        show: true,
        offsetCenter: [0, -5],
        fontSize: 10,
        color: '#fafafa',
      },
      detail: {
        valueAnimation: true,
        width: '60%',
        lineHeight: 40,
        borderRadius: 8,
        offsetCenter: [0, 10],
        fontSize: 10,
        fontWeight: 'bolder',
        formatter: '{value}%',
        color: 'inherit',
      },
      data: [
        {
          name: '系统内存',
          value: 20,
        },
      ],
    },
  ],
};

/**图数据渲染 */
function handleRanderChart(
  container: HTMLElement | undefined,
  option: EChartsOption
) {
  if (!container) return;
  const { clientHeight, clientWidth } = container;

  neResourcesChart.value = echarts.init(container, 'light', {
    width: clientWidth,
    height: clientHeight - 36,
  });
  option && neResourcesChart.value.setOption(option);
}

onMounted(() => {
  setInterval(function () {
    const random = +(Math.random() * 90).toFixed(2);
    const random2 = +(Math.random() * 90).toFixed(2);
    const random3 = +(Math.random() * 90).toFixed(2);
    const random4 = +(Math.random() * 90).toFixed(2);
    let color = '#1890ff';
    if (random < 30) {
      color = '#73d13d';
    }
    if (random > 60) {
      color = '#ff4d4f';
    }
    neResourcesChart.value.setOption({
      series: [
        {
          data: [
            {
              name: '系统内存',
              value: random,
              itemStyle: {
                color: color,
                shadowColor: color,
              },
            },
          ],
        },
        {
          data: [
            {
              name: '系统CPU',
              value: random2,
            },
          ],
        },
        {
          data: [
            {
              name: '网元内存',
              value: random3,
            },
          ],
        },
        {
          data: [
            {
              name: '网元CPU',
              value: random4,
            },
          ],
        },
      ],
    });
  }, 2000);

  handleRanderChart(neResourcesDom.value, optionData);
});

onBeforeUnmount(() => {});
</script>

<template>
  <div ref="neResourcesDom" class="chart"></div>
</template>

<style lang="less" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
