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 { BasicPieService } from './basic-pie.service'

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

  constructor(
    private commonService: CommonService,
    private basicPieService: BasicPieService
  ) { }

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

      })
    })
  }

  chartOptions: any = this.basicPieService.getDefaultOptionsOfBasicPieChart();

  _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.basicPieService.changeToolboxShow(this.chartOptions, show);
    this.updateOptions()
  }

  // 设置系列名
  @Input()
  set bcacChartSeriesName(bcacChartSeriesName: string) {
    this.basicPieService.changeSeriesName(this.chartOptions, bcacChartSeriesName);
    this.updateOptions();
  }

  // 设置饼图的半径
  @Input()
  set bcacPieChartRadius(bcacPieChartRadius: number | string) {
    this.basicPieService.changeRadius(this.chartOptions, bcacPieChartRadius);
    this.updateOptions();
  }
  // 设置饼图中心位置
  @Input()
  set bcacPieChartCenter(bcacPieChartCenter: Array<string> | Array<number>) {
    this.basicPieService.changeCenter(this.chartOptions, bcacPieChartCenter);
    this.updateOptions();
  }
  // 设置视觉引导线第一段的长度
  @Input()
  set bcacLabelLineLength(lineLength: number) {
    this.basicPieService.changeLineLength(this.chartOptions, lineLength);
    this.updateOptions();
  }
  // 设置视觉引导线第二段的长度
  @Input()
  set bcacLableLineLength2(lineLength2: number){
    this.basicPieService.changeLineLength2(this.chartOptions,lineLength2);
    this.updateOptions();
  }

  // 更新数据
  @Input()
  set bcacChartData(chartData: { name: string, value: string | number }[]) {
    this.basicPieService.changeChartData(this.chartOptions, chartData);
    this.updateOptions();
  }

  // @Input()
  // set bcacTooltipUnit(unit: string) {
  //    this.basicPieService.changeChartTooltipUnit()
  // }


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

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

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


}