import { Component, Input, OnInit, ElementRef, ViewChild, OnChanges, SimpleChanges, Output, EventEmitter } from '@angular/core';
import * as _ from 'lodash';
import { columnData, axisLabelRotate, legendPosition } from './basic-bar-interface';
import { fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import { CommonService } from '../../service/common.service';
import { BasicBarService } from './basic-bar.service';
import { ChangeFilter } from '../../change-filter'
import { ECharts } from 'echarts'


@Component({
  selector: 'bcac-basic-bar',
  templateUrl: './basic-bar.component.html',
  styleUrls: ['./basic-bar.component.scss']
})

export class BasicBarComponent implements OnInit, OnChanges {

  constructor(
    private basicBarService: BasicBarService,
    private commonService: CommonService,
  ) { }

  chartOption: any = this.basicBarService.getColumnChartDefaultOpiton();

  public _bcacChartTitle: { show: boolean, label: string } = {
    show: true,
    label: "图表标题"
  };
  // 是否显示标题
  @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;
  }
  get bcacChartFileName() {
    return this._bcacChartFileName;
  }
  // 是否显示toolbox
  public _bcacChartShowToolbox: boolean = true;
  @Input()
  set bcacChartShowToolbox(show: boolean) {
    this._bcacChartShowToolbox = show;
    this.basicBarService.changeToolboxShow(this.chartOption, show)

  }
  get bcacChartShowToolbox() {
    return this._bcacChartShowToolbox;
  }

  public _bcacLegendPosition: legendPosition = 'bottom';
  @Input()
  set bcacLegendPosition(position: legendPosition) {
    this._bcacLegendPosition = position;

    this.basicBarService.changeLegendPosition(this.chartOption, position);
    console.log(this.chartOption)
    this.updateOption()
  };
  // 输入是否显示图例
  @Input()
  set bcacChartShowLegend(bcacLegendShow: boolean) {

    this.basicBarService.changeLegendShow(this.chartOption, bcacLegendShow);
    this.updateOption()
  }
  // 加载等待
  public _bcacChartLoading: boolean = false;
  @Input()
  set bcacChartLoading(loading: boolean) {
    this._bcacChartLoading = loading;
  }

  // 图数据
  @Input()
  set bcacChartData(data: columnData) {
    this.basicBarService.changeChartData(this.chartOption, data)
    this.updateOption();
  }
  // 输入tooltip的单位
  @Input()
  set bcacTooltipUnit(tooltipUnit: string) {
    this.basicBarService.changeTooltipUnit(this.chartOption, tooltipUnit)
    this.updateOption();
  }
  // x轴Name
  @Input()
  set bcacXAxisName(xAxisName: string) {
    this.basicBarService.changeXAxisName(this.chartOption, xAxisName)
    this.updateOption();
  }
  // 输入y轴名
  @Input()
  set bcacYAxisName(yAxisName: string) {
    this.basicBarService.changeYAxisName(this.chartOption, yAxisName)
    this.updateOption();
  }
  // 输入y轴名距离
  @Input()
  set bcacYAxisNameGap(yAxisNameGap: number) {
    this.basicBarService.changeYAxisNameGap(this.chartOption, yAxisNameGap);
    this.updateOption();
  }
  // x轴label的旋转 
  @Input()
  set bcacXAxisLabelRotate(xAxisLabelRotate: axisLabelRotate) {
    this.basicBarService.changeXAxisLabelRotate(this.chartOption, xAxisLabelRotate);
    this.updateOption();
  }
  // y轴label的旋转
  @Input()
  set bcacYAxisLabelRotate(yAxisLabelRotate: axisLabelRotate) {
    this.basicBarService.changeYAxisLabelRotate(this.chartOption, yAxisLabelRotate);
    this.updateOption();
  }
  // 是否开启框选
  @Input()
  set bcacBrush(callback: ($event, ...args: any[]) => void) {
    let style = this.commonService.changeFontSize()
    this.basicBarService.changeBrushStatus(this.chartOption, style ,callback);
  }

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

  // 框选选中事件
  @Output() bcacBrushSelected: EventEmitter<any> = new EventEmitter<any>();

  // 
  @Output() bcacMouseover: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();

  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 'above':
          grid = style.interval;
          break;
        case 'right':
          grid = style.rightLegendGrid;
          break;
      }
      this.optionInit.setOption({
        xAxis: {
          axisLabel: {
            fontSize: style.fontSize - 1
          }
        },
        yAxis: {
          axisLabel: {
            fontSize: style.fontSize - 1
          },
          nameTextStyle: {
            fontSize: style.fontSize - 1
          }
        },
        legend: {
          itemWidth: style.fontSize - 1,
          textStyle: {
            fontSize: style.fontSize - 1
          },
          itemHeight: style.fontSize - 1,
        },
        toolbox: {
          itemSize: style.toolboxSize - 1,
        },
        grid: grid
      })
    })
  }

  ngOnChanges(changes: SimpleChanges) {
    const filter = ChangeFilter.of(changes);
    filter.has<boolean>('bcacChartLoading').subscribe(v => this.toggleLoading(!!v))
  }

  updateOption() {
    if (this.optionInit) {
      this.optionInit.setOption(this.chartOption, true)
    }

  }

  updateChart(data) {
    this.basicBarService.changeChartData(this.chartOption, data)
  }

  toggleLoading(v) {
    if (this.optionInit) {
      if (v) {
        this.optionInit.showLoading()
      } else {
        this.optionInit.hideLoading()
      }
    }
  }

  chartBrushSelected($evnet) {
    this.bcacBrushSelected.emit($evnet);
  }

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

}