import * as echarts from 'echarts'
import { color } from 'html2canvas/dist/types/css/types/color'

interface BarChartOptions {
  title?: string
  unit?: string
  xData: string[]
  data: number[]
}

export class PieChart {
  private chart: echarts.ECharts | null = null
  private dom: HTMLElement
  private chartData: any = {}
  private styleColor: any = {
    backgroundColor: '#30333B',
    titleColor: '#fff',
    axisLabelColor: '#5C6272',
    axisLineColor: '#3F404D',
    barColor: ['#3071EC', '#41B7FD', '#54D360', '#DAE8F7', '#F6A451', '#EA7261', '#CA68F5'],
    barValueColor: '#fff'
  }
  constructor(containerId: string, chartData: BarChartOptions) {
    this.dom = document.getElementById(containerId)!
    this.chartData = chartData
    this.initChart()
  }
  private initChart(): void {
    this.chart = echarts.init(this.dom)
    this.setChartOptions()
  }
  private setChartOptions(): void {
    const option = {
      backgroundColor: this.styleColor.backgroundColor,
      title: {
        text: this.chartData.title,
        left: 'center',
        top: '3%',
        textStyle: {
          color: this.styleColor.titleColor,
          fontSize: 14
        }
      },
      legend: {
        orient: 'vertical',
        top: 'center',
        // left:'center',
        right: '10%',
        itemWidth: 10,
        itemHeight: 5,
        textStyle: {
          color: this.styleColor.axisLabelColor,
          fontSize: 12
        }
      },
      tooltip: {
        trigger: 'item',
        formatter:`{b0}: {c0}${this.chartData.unit}`
      },
      grid: {
        top: '20%',
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true
      },
      series: [
        {
          type: 'pie',
          radius: ['35%', '60%'],
          center: ['50%', '50%'],
          data: this.chartData.data,
          color: this.styleColor.barColor,
          label: {
            show: false
          },
          labelLine: {
            show: false
          }
        }
      ]
    }
    this.chart?.setOption(option)
  }
  /**
   * 主题切换 0-简约 ，1-商务 ,2-科技
   * @param index
   */
  changeColorStyle(index: number): void {
    if (!this.chart) {
      console.warn('未读取到元素！')
      return
    }
    if (index === 0) {
      this.styleColor.backgroundColor = '#30333B'
      this.styleColor.axisLabelColor = '#5C6272'
      ;(this.styleColor.titleColor = '#fff'),
        (this.styleColor.barColor = ['#3071EC', '#41B7FD', '#54D360', '#DAE8F7', '#F6A451', '#EA7261', '#CA68F5'])
    } else if (index === 1) {
      this.styleColor.backgroundColor = '#FFFFFF'
      this.styleColor.axisLabelColor = '#737373'
      this.styleColor.titleColor = '#333'
      this.styleColor.barColor = ['#6790EA', '#F17E7E', '#F99774', '#F3D088', '#CFEE5F', '#88DE95', '#63C8EA']
    } else {
      this.styleColor.backgroundColor = 'rgba(80,122,252,0.1)'
      this.styleColor.axisLabelColor = '#7A8195'
      this.styleColor.titleColor = '#fff'
      this.styleColor.barColor = [
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: 'rgba(80, 122, 252, 1)' },
                      { offset: 1, color: 'rgba(80, 122, 252, 0)' }
                    ]), 
                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(35, 202, 244, 1)' },
                        { offset: 1, color: 'rgba(35, 202, 244, 0)' }
                      ]), 
                      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(255, 101, 98, 1)' },
                        { offset: 1, color: 'rgba(255, 101, 98, 0)' }
                      ]), 
                      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(242, 247, 248, 1)' },
                        { offset: 1, color: 'rgba(242, 247, 248, 0)' }
                      ]), 
                      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(53, 199, 93, 1)' },
                        { offset: 1, color: 'rgba(53, 199, 93, 0)' }
                      ]), 
                      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(255, 186, 71, 1)' },
                        { offset: 1, color: 'rgba(255, 186, 71, 0)' }
                      ]), 
                      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(230, 250, 114, 1)' },
                        { offset: 1, color: 'rgba(230, 250, 114, 0)' }
                      ]), 
        ]
    }

    this.chart.setOption({
      backgroundColor: this.styleColor.backgroundColor,
      title: {
        textStyle: {
          color: this.styleColor.titleColor
        }
      },
      series: [
        {
          color: this.styleColor.barColor,
          itemStyle:index === 2 ? {
            shadowBlur: 20,
            shadowColor: 'rgba(0, 0, 0, 0.3)',
            shadowOffsetX: 2,
            shadowOffsetY: 2
          } : undefined
        }
      ]
    })
  }

  dispose(): void {
    if (this.chart) {
      this.chart.dispose()
      this.chart = null
    }
  }
}
