import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
import { CommonService } from '../../service/common.service';
import { fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import { ChangeFilter } from '../../change-filter';
import { PyramidBarService } from './pyramid-bar.service';
import { pyramidBarData } from './pyramid-bar-interface'
import { ECharts } from 'echarts';

export type axisLabelRotate = 'leftSmallAngle' | 'leftBigAngle' | 'rightSmallAngle' | 'rightBigAngle';
@Component({
  selector: 'bcac-pyramid-bar',
  templateUrl: './pyramid-bar.component.html',
  styleUrls: ['./pyramid-bar.component.scss']
})
export class PyramidBarComponent implements OnInit {

  constructor(
    private commonService: CommonService,
    private pyramidBarService: PyramidBarService
  ) { }

  options: any = this.pyramidBarService.getPyramidBarChartDefaultOption();

  public _bcacChartTitle: { show: boolean, label: string } = {
    show: true, label: "图表标题"
  }
  // 输入图标题
  @Input()
  set bcacChartTitleText(text: string) {
    this._bcacChartTitle.label = text
    this._bcacChartFileName = text;
  }
  // 图标题是否显示
  @Input()
  set bcacChartShowTitle(show: boolean) {
    this._bcacChartTitle.show = show;
  }
  // 下载图片名称
  public _bcacChartFileName: string = "图表";
  @Input()
  set bcacChartFileName(fileName: string) {
    this._bcacChartFileName = fileName;
  }
  // 是否显示toolbox
  @Input()
  set bcacChartShowToolbox(show: boolean) {
    this.pyramidBarService.changeToolboxShow(this.options, show)
    this.updateOptions()
  }

  // 输入是否显示图例
  @Input()
  set bcacChartShowLegend(bcacLegendShow: boolean) {
    this.pyramidBarService.changeLegendShow(this.options, bcacLegendShow);
    this.updateOptions()
  }

  _bcacChartLoading: boolean = false;
  @Input()
  set bcacChartLoading(chartLoading: boolean) {
    this._bcacChartLoading = chartLoading;
  }

  @Input()
  set bcacChartData(bcacChartData: pyramidBarData) {
    this.pyramidBarService.changeChartData(this.options, bcacChartData)
    this.updateOptions()
  };

  // 输入tooltip的单位
  @Input()
  set bcacTooltipUnit(tooltipUnit: string) {
    this.pyramidBarService.changeTooltip(this.options, tooltipUnit)
    this.updateOptions();
  }
  // x轴Name
  @Input()
  set bcacXAxisName(xAxisName: string) {
    this.pyramidBarService.changeXAxisName(this.options, xAxisName)
    this.updateOptions();
  }
  // 输入y轴名
  @Input()
  set bcacYAxisName(yAxisName: string) {
    this.pyramidBarService.changeYAxisName(this.options, yAxisName)
    this.updateOptions();
  }
  // 输入y轴名距离
  @Input()
  set bcacYAxisNameGap(yAxisNameGap: number) {
    this.pyramidBarService.changeYAxisNameGap(this.options, yAxisNameGap);
    this.updateOptions();
  }
  // x轴label的旋转 
  @Input()
  set bcacXAxisLabelRotate(xAxisLabelRotate: axisLabelRotate) {
    this.pyramidBarService.changeXAxisLabelRotate(this.options, xAxisLabelRotate);
    this.updateOptions();
  }
  // y轴label的旋转
  @Input()
  set bcacYAxisLabelRotate(yAxisLabelRotate: axisLabelRotate) {
    this.pyramidBarService.changeYAxisLabelRotate(this.options, yAxisLabelRotate);
    this.updateOptions();
  }

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


  ngOnInit() {

    fromEvent(window, 'resize').pipe(debounceTime(200)).subscribe(() => {
      let style = this.commonService.changeFontSize();
      this.chartInstance.setOption({
        xAxis: {
          nameTextStyle: {
            fontSize: style.fontSize
          },
          axisLabel: {
            fontSize: style.fontSize - 1
          }
        },
        yAxis: [{
          nameTextStyle: {
            fontSize: style.fontSize
          },
          axisLabel: {
            fontSize: style.fontSize - 1
          }
        }, {
          nameTextStyle: {
            fontSize: style.fontSize
          },
          axisLabel: {
            fontSize: style.fontSize - 1
          }
        }],
        legend: {
          itemWidth: style.fontSize,
          itemHeight: style.fontSize,
          textStyle: {
            fontSize: style.fontSize
          }
        },
        toolbox: {
          itemSize: style.toolboxSize,
        },
        grid: style.pyramidGrid,
      });
    })

  }

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

  chartInstance: ECharts;
  onChartInit(ec) {
    this.chartInstance = ec;

    this.bcacGetChartInstance.emit(ec);
  }

}