import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
import { CommonService } from '../../service/common.service';
import { NegativeBarChartParam, grid } from './negative-bar-interface';
import { NegativeBarService } from './negative-bar.service';
import { fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import { ChangeFilter } from '../../change-filter';
import { ECharts } from 'echarts';
import { transform } from 'lodash';

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

  constructor(
    private negativeBarService: NegativeBarService,
    private commonService: CommonService
  ) { }


  // 图表配置
  echartOption: any = this.negativeBarService.getDefaultOptionOfNegativeBarChart();
  public _bcacChartTitle: { label: string, show: boolean } = { label: "图片名称", show: true };

  // 是否显示标题
  @Input()
  set bcacChartShowTitle(show: boolean) {
    this._bcacChartTitle.show = show;
  }
  // 图标题文字
  @Input()
  set bcacChartTitleText(text: string) {
    this._bcacChartTitle.label = text;
    this._bcacChartFileName = text;
  }
  // 下载图片文件名
  public _bcacChartFileName: string = "图表";
  @Input()
  set bcacChartFileName(fileName: string) {
    this._bcacChartFileName = fileName;
  }
  // 是否显示toolbox
  @Input()
  set bcacChartShowToolbox(show: boolean) {
    this.negativeBarService.changeToolboxShow(this.echartOption, show)
    this.updateOptions()
  }

  // 输入是否显示图例
  @Input()
  set bcacChartShowLegend(bcacLegendShow: boolean) {
    this.negativeBarService.changeLegendShow(this.echartOption, bcacLegendShow);
    this.updateOptions()
  }
  _tooltipUnit = '';
  @Input()
  set bcacTooltipUnit(tooltipUnit: string) {
    this._tooltipUnit = tooltipUnit;
  }
  _translationNumber: number = 0;
  @Input()
  set bcacTranslationNumber(translationNum: number) {
    this._translationNumber = translationNum;
  }

  // 设置x轴名
  @Input()
  set bcacXAxisName(xAxisName: string) {
    this.negativeBarService.changeXAxisName(this.echartOption, xAxisName)
    this.updateOptions();
  }
  // 设置y轴名
  @Input()
  set bcacYAxisName(yAxisName: string) {
    this.negativeBarService.changeYAxisName(this.echartOption, yAxisName)
    this.updateOptions();
  }
  // 输入y轴名距离
  @Input()
  set bcacYAxisNameGap(yAxisNameGap: number) {
    this.negativeBarService.changeYAxisNameGap(this.echartOption, yAxisNameGap);
    this.updateOptions();
  }
  // x轴label的旋转 
  @Input()
  set bcacXAxisLabelRotate(xAxisLabelRotate: axisLabelRotate) {
    this.negativeBarService.changeXAxisLabelRotate(this.echartOption, xAxisLabelRotate);
    this.updateOptions();
  }
  // y轴label的旋转
  @Input()
  set bcacYAxisLabelRotate(yAxisLabelRotate: axisLabelRotate) {
    this.negativeBarService.changeYAxisLabelRotate(this.echartOption, yAxisLabelRotate);
    this.updateOptions();
  }

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


  @Input()
  set bcacChartData(data: NegativeBarChartParam) {
    let style = this.commonService.changeFontSize();
    style.interval.right = "110";

    this.negativeBarService.changeChartData(this.echartOption, data, style, this._translationNumber, this._tooltipUnit)


    this.updateOptions();
  }

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

  _grid = this.commonService.changeFontSize().interval;
  ngOnInit() {
    fromEvent(window, "resize")
      .pipe(debounceTime(200))
      .subscribe(() => {
        let style = this.commonService.changeFontSize();
        this._grid.right = "110";
        this.chartInstance.setOption({
          xAxis: {
            axisLabel: {
              fontSize: style.fontSize - 1
            },
            nameTextStyle: {
              fontSize: style.fontSize
            }
          },
          yAxis: {
            axisLabel: {
              fontSize: style.fontSize - 1
            },
            nameTextStyle: {
              fontSize: style.fontSize
            }
          },
          legend: {
            itemWidth: style.fontSize - 2,
            itemHeight: style.fontSize - 2,
            textStyle: {
              fontSize: style.fontSize
            },
            pageIconSize: style.fontSize
          },
          toolbox: {
            itemSize: style.toolboxSize,
          },
          grid: this._grid,
        });
      });
  }

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

    this.bcacGetChartInstance.emit(ec);
  }

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

}