import * as echarts from 'echarts'

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

export class LineChart {
  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',
    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
            }
          },
          grid: {
            top: '25%',
            left: '3%',
            right: '3%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: this.chartData.xData,
            axisLine: { lineStyle: { color: this.styleColor.axisLineColor, width: 1 } }, //x轴线
            axisTick: {
              show: false //不显示X轴刻度线
            },
            axisLabel: {
              color: this.styleColor.axisLabelColor,
              fontSize: 12
            } //x轴标题
          },
          yAxis: {
            type: 'value',
            name:this.chartData.unit,
            nameTextStyle:{
                color:this.styleColor.axisLabelColor
            },
            axisLabel: {
              color: this.styleColor.axisLabelColor,
              fontSize: 12
            },
            splitLine: {
              lineStyle: {
                color: this.styleColor.axisLineColor,
                opacity: 0.5
              }
            }
          },
          series: [
            {
            type: 'line',
              data: this.chartData.data,
              smooth: true,
              label: {
                show: true,
                position: 'top',
                color: this.styleColor.barValueColor
              },
              itemStyle: {
                color: this.styleColor.barColor
              }
            }
          ]
        }
        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',
              titleColor: '#fff',
              axisLabelColor: '#5C6272',
              axisLineColor: '#3F404D',
              barColor: '#3071EC',
              barValueColor: '#fff'
            }
          } else if (index === 1) {
            this.styleColor = {
              backgroundColor: '#FFFFFF',
              titleColor: '#333',
              axisLabelColor: '#737373',
              axisLineColor: '#D9D9D9',
              barColor: '#6790EA',
              barValueColor: '#333'
            }
          }else{
              this.styleColor = {
                  backgroundColor: 'rgba(80,122,252,0.1)',
                  titleColor: '#fff',
                  axisLabelColor: '#7A8195',
                  axisLineColor: '#3F404D',
                  barColor:'#0A50FF',
                  barValueColor: '#fff'
                }
          }
      
          this.chart.setOption({
            backgroundColor: this.styleColor.backgroundColor,
            title: {
              textStyle: {
                color: this.styleColor.titleColor
              }
            },
            xAxis: {
              axisLine: { lineStyle: { color: this.styleColor.axisLineColor } }, //x轴线
              axisLabel: {
                color: this.styleColor.axisLabelColor
              } //x轴标题
            },
            yAxis: {
              nameTextStyle:{
                  color:this.styleColor.axisLabelColor
              },
              axisLabel: {
                color: this.styleColor.axisLabelColor
              },
              splitLine: {
                lineStyle: {
                  color: this.styleColor.axisLineColor
                }
              }
            },
            series: [
              {
                label: {
                  color: this.styleColor.barValueColor
                },
                itemStyle: {
                  color: this.styleColor.barColor
                }
              }
            ]
          })
        }

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