import { Component, ElementRef, Input, SimpleChanges, ViewChild } from '@angular/core';
import * as echarts from 'echarts';
import { CommonNzModule } from './../../../../../common.nz.module';

@Component({
  selector: 'datav-gauge-chart',
  standalone: true,
  imports: [CommonNzModule],
  templateUrl: './gauge-chart.component.html',
  styleUrl: './gauge-chart.component.less',
})
export class GaugeChartComponent {
  @ViewChild('dom') chartDom!: ElementRef<HTMLDivElement>;
  @Input() height = 100;
  @Input() data = 0;
  @Input() title = '';
  @Input() colors = ['#53EFCD', '#24D3AC'];
  gaugeChart?: echarts.ECharts;
  ngAfterViewInit() {
    this.render();
  }
  ngOnChanges(changes: SimpleChanges) {
    if (changes['data']) {
      this.render();
    }
  }
  render() {
    const dom = this.chartDom?.nativeElement;
    if (dom) {
      this.gaugeChart = echarts.init(dom);
      this.setOption();
      // this.bindListen(this.pieChart);
      setTimeout(() => {
        this.gaugeChart?.setOption({
          series: [
            {
              startAngle: 90,
              endAngle: -270,
            },
          ],
        });
      }, 300);
    }
  }
  setOption() {
    const circleWidth = 6;
    this.gaugeChart?.setOption({
      series: [
        {
          type: 'gauge',
          animation: true,
          radius: '90%',
          clockwise: false,
          startAngle: 0,
          endAngle: 0,
          splitNumber: 25,
          detail: {
            offsetCenter: [0, -20],
            formatter: ' ',
          },
          pointer: {
            show: false,
          },
          progress: {
            show: true,
            overlap: false,
            roundCap: false,
            clip: false,
            itemStyle: {
              borderWidth: 0,
              borderColor: 'transparent',
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: [
                [0, this.colors[0]],
                [1, this.colors[1]],
              ],
              width: circleWidth,
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            distance: -circleWidth,
            length: circleWidth,
            lineStyle: {
              color: '#1D242D',
              width: 3,
            },
          },
          axisLabel: {
            show: false,
          },
          data: [
            {
              value: 0,
            },
          ],
        },
        {
          type: 'pie',
          name: '内层细圆环',
          radius: ['95%', '98%'],
          hoverAnimation: false,
          clockWise: false,
          itemStyle: {
            normal: {
              color: '#0C355E',
            },
          },
          label: {
            show: false,
          },
          data: [100],
        },
      ],
    });
  }
}
