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

type legendPosition = 'bottom' | 'right';
export type axisLabelRotate = 'leftSmallAngle' | 'leftBigAngle' | 'rightSmallAngle' | 'rightBigAngle';

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

  constructor(
    private commonService: CommonService,
    private stackColumnService: StackColumnService
  ) { }


  echartOption: any = this.stackColumnService.getStackBarChartDefaultOption();

  // 图标题
  _bcacChartTitle: { text: string, show: boolean } = { text: '图表标题', show: true }
  // 图表题文本
  @Input()
  set bcacChartTitleText(bcacChartTitleText: string) {
    this._bcacChartTitle.text = bcacChartTitleText;
    this._bcacChartFileName = bcacChartTitleText;
  }
  // 是否显示图标题
  @Input()
  set bcacChartShowTitle(bcacShowChartTitle: boolean) {
    this._bcacChartTitle.show = bcacShowChartTitle;
  }
  // 图表下载文件名
  public _bcacChartFileName: string = "图表";
  @Input()
  set bcacChartFileName(fileName: string) {
    this._bcacChartFileName = fileName;
  }
  // 是否显示toolbox
  @Input()
  set bcacChartShowToolbox(show: boolean) {
    this.stackColumnService.changeToolboxShow(this.echartOption, show)
    this.updateOptions();
  }
  // 更改legend位置
  @Input()
  set bcacLegendPosition(position: legendPosition) {
    this.stackColumnService.changeLegendPosition(this.echartOption, position);
    this.updateOptions()
  };
  // 输入是否显示图例
  @Input()
  set bcacChartShowLegend(bcacLegendShow: boolean) {

    this.stackColumnService.changeLegendShow(this.echartOption, bcacLegendShow);

    this.updateOptions()
  }
  // 图加载等待
  public _bcacChartLoading: boolean = false;
  @Input()
  set bcacChartLoading(loading: boolean) {
    this._bcacChartLoading = loading;
  }

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

  @Input()
  set bcacChartData(data: stackColumnData) {
    this.stackColumnService.changeChartData(this.echartOption, data)
    this.updateOptions()
  }


  @Output() bcacGetChartInstance: EventEmitter<ECharts> = new EventEmitter<ECharts>();
  ngOnInit() {
    
    fromEvent(window, "resize").pipe(debounceTime(200)).subscribe(() => {
      let style = this.commonService.changeFontSize();
      let grid;
      switch (this.bcacLegendPosition) {
        case 'bottom':
          grid = style.interval;
          break;
        case 'right':
          grid = style.rightLegendGrid;
          break;
      }

      this.chartInstance.setOption({
        xAxis: {
          nameTextStyle: {
            fontSize: style.fontSize - 1
          },
          axisLabel: {
            fontSize: style.fontSize - 1
          }
        },
        yAxis: {
          nameTextStyle: {
            fontSize: style.fontSize - 1
          },
          axisLabel: {
            fontSize: style.fontSize - 1
          }
        },
        legend: {
          itemWidth: style.fontSize - 2,
          itemHeight: style.fontSize - 2,
          textStyle: {
            fontSize: style.fontSize
          }
        },
        toolbox: {
          itemSize: style.toolboxSize,
        },
        grid: grid,
      });
    })
  }

  // 更新配置
  updateOptions() {
    if (this.chartInstance) {
      this.chartInstance.setOption(this.echartOption, true);
    }
  }

  chartInstance: ECharts;
  onOptionInit($event) {
    this.chartInstance = $event;

    this.bcacGetChartInstance.emit($event);
  }

}