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


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

  constructor(
    private commonService: CommonService,
    private rosePieService: RosePieService
  ) { }

  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
            }
          }],
        })
      }
    })
  }

  chartOptions: any = this.rosePieService.getDefaultOptionsOfRosePieChart();

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

  // 设置系列名
  @Input()
  set bcacChartSeriesName(bcacChartSeriesName: string) {
    this.rosePieService.changeSeriesName(this.chartOptions, bcacChartSeriesName);
    this.updateOptions();
  }
  // 设置饼图的半径
  @Input()
  set bcacPieChartRadius(bcacPieChartRadius: Array<string> | Array<number>) {
    this.rosePieService.changeRadius(this.chartOptions, bcacPieChartRadius);
    this.updateOptions();
  }
  // 设置饼图中心位置
  @Input()
  set bcacPieChartCenter(bcacPieChartCenter: Array<string> | Array<number>) {
    this.rosePieService.changeCenter(this.chartOptions, bcacPieChartCenter);
    this.updateOptions();
  }
  // 设置玫瑰图模式
  @Input()
  set bcacPieChartRoseType(bcacRoseType: 'radius' | 'area') {
    this.rosePieService.changePieChartRoseType(this.chartOptions, bcacRoseType)
    this.updateOptions()
  }
  // 设置labelLine Length 第一段视觉引导线
  @Input()
  set bcacLabelLineLength(bcacLabelLineLength: number) {
    this.rosePieService.changeLabelLineLength(this.chartOptions, bcacLabelLineLength)
  }
  // 设置labelLine length2 第二段视觉引导线长度
  @Input()
  set bcacLabelLineLength2(bcacLabelLineLength2: number) {
    this.rosePieService.changeLabelLineLength2(this.chartOptions, bcacLabelLineLength2)
  }
  // 设置数据
  @Input()
  set bcacChartData(bcacChartData: { name: string, value: string | number }[]) {
    this.rosePieService.changeChartData(this.chartOptions, bcacChartData)
    this.updateOptions()
  }


  //更改legend位置
  @Input()
  set bcacLegendPosition(legendPosition) {
    this.rosePieService.changeLegendPosition(this.chartOptions, legendPosition)
    this.updateOptions()
  }
  // 更改legend显示状态
  @Input()
  set bcacChartShowLegend(showLegend: boolean) {
    this.rosePieService.changeLegendShowStatus(this.chartOptions, showLegend)
    this.updateOptions()
  }
  //更改label显示状态
  @Input()
  set bcacShowLabel(showLabel: boolean) {
    this.rosePieService.changeLabelStatus(this.chartOptions, showLabel);
    this.updateOptions()
  }

  @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);
    }
  }



}