import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { EChartOption, ECharts } from 'echarts'
import { fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import { CommonService } from '../../service/common.service';
import { LegendPieService } from './legend-pie.service'

export type legendPosition = 'bottom' | 'right';

@Component({
  selector: 'bcac-legend-pie',
  templateUrl: './legend-pie.component.html',
  styleUrls: ['./legend-pie.component.scss']
})
export class LegendPieComponent implements OnInit {

  constructor(
    private commonService: CommonService,
    private legendPieService: LegendPieService
  ) { }

  chartOptions: any = this.legendPieService.getDefaultOptionsOfLegendPieChart();

  _bcacChartTitle: { label: string, show: boolean } = { label: "图表标题", show: true }

  // 标题是否显示
  @Input()
  set bcacChartShowTitle(show: boolean) {
    this._bcacChartTitle.show = show;
  }

  // 标题文本
  @Input()
  set bcacChartTitleText(label: string) {
    this._bcacChartTitle.label = label;
    this._bcacChartFileName = this._bcacChartTitle.label;
  }
  // 图片文件名
  _bcacChartFileName: string = "图表名"
  @Input()
  set bcacChartFileName(fileName: string) {
    this._bcacChartFileName = fileName;
  }
  // 加载等待
  _bcacChartLoading: boolean = false;
  @Input()
  set bcacChartLoading(bcacChartLoading: boolean) {
    this._bcacChartLoading = bcacChartLoading;
  }
  // 设置是否显示toolbox
  @Input()
  set bcacChartShowToolbox(show: boolean) {

    this.legendPieService.changeToolboxShow(this.chartOptions, show);
    this.updateOptions()
  }

  // 设置系列名
  @Input()
  set bcacChartSeriesName(bcacChartSeriesName: string) {
    this.legendPieService.changeSeriesName(this.chartOptions, bcacChartSeriesName);
    this.updateOptions();
  }
  // 设置饼图的半径
  @Input()
  set bcacPieChartRadius(bcacPieChartRadius: number | string) {
    this.legendPieService.changeRadius(this.chartOptions, bcacPieChartRadius);
    this.updateOptions();
  }
  // 设置饼图中心位置
  @Input()
  set bcacPieChartCenter(bcacPieChartCenter: Array<string> | Array<number>) {
    this.legendPieService.changeCenter(this.chartOptions, bcacPieChartCenter);
    this.updateOptions();
  }
  // 更新数据
  @Input()
  set bcacChartData(chartData: { name: string, value: string | number }[]) {
    this.legendPieService.changeChartData(this.chartOptions, chartData);
    this.updateOptions();
  }

  // 设置图例的位置
  public _bcacLegendPosition: legendPosition = 'bottom';
  @Input()
  set bcacLegendPosition(position: legendPosition) {
    this._bcacLegendPosition = position;

    this.legendPieService.changeLegendPosition(this.chartOptions, position)
    this.updateOptions();
  }

  @Output() bcacGetChartInstance: EventEmitter<ECharts> = new EventEmitter();


  ngOnInit() {
    fromEvent(window, 'resize').pipe(debounceTime(200)).subscribe(() => {
      let style = this.commonService.changeFontSize();
      if (this.chartInstance) {
        this.chartInstance.setOption({
          legend: {
            itemHeight: style.fontSize - 2,
            itemWidth: style.fontSize - 2,
            textStyle: {
              fontSize: style.fontSize
            }
          },
          toolbox: {
            itemSize: style.toolboxSize,
          },
          series: [{
            label: {
              fontSize: style.fontSize - 1
            }
          }],

        })
      }
    })
  }
  chartInstance: ECharts;
  onOptionInit(ec) {
    this.chartInstance = ec;
    this.bcacGetChartInstance.emit(ec)
  }

  updateOptions() {
    if (this.chartInstance) {
      this.chartInstance.setOption(this.chartOptions, true)
    }
  }
}