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

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

  constructor(
    private horizontalBarService: HorizontalBarService,
    private commonService: CommonService,
  ) { }

  options: any = this.horizontalBarService.getHorizontalBarDefaultOption();

  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.horizontalBarService.changeToolboxShow(this.options, show)
  }
  get bcacChartShowToolbox() {
    return this._bcacChartShowToolbox;
  }

  // 输入是否显示图例
  @Input()
  set bcacChartShowLegend(bcacLegendShow: boolean) {

    this.horizontalBarService.changeLegendShow(this.options, bcacLegendShow);

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

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


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


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


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

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

    this.bcacGetChartInstance.emit(ec);
  }


}