import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { BasicLineService } from './basic-line.service';
import { CommonService } from '../../service/common.service';
import { from, fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import { ChangeFilter } from '../../change-filter'
import { BasicLineChartParam, axisLabelRotate } from './basic-line-interface'
import { ECharts } from 'echarts';

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

export class BasicLineComponent implements OnInit {

  constructor(
    private basicLineService: BasicLineService,
    private commonService: CommonService

  ) { }

  chartOption: any = this.basicLineService.getDefaultOpitonsOfBasicLineChart()

  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;
  }
  // 表格文件名
  public _bcacChartFileName = "图表";
  @Input()
  set bcacChartFileName(fileName: string) {
    this._bcacChartFileName = fileName;
  }

  // 是否显示toolbox
  @Input()
  set bcacChartShowToolbox(show: boolean) {
    this.basicLineService.changeToolboxShow(this.chartOption, show)
    this.updateOption()
  }

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

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

  @Input()
  set bcacTooltipUnit(tooltipUnit: string) {
    this.basicLineService.changeTooltipUnit(this.chartOption, tooltipUnit);
  }
  // x轴名称
  @Input()
  set bcacXAxisName(bcacXaxisName: string) {
    this.basicLineService.changeXAxisName(this.chartOption, bcacXaxisName)
    this.updateOption()
  }
  // y轴名称
  @Input()
  set bcacYAxisName(bcacYaxisName: string) {
    this.basicLineService.changeYAxisName(this.chartOption, bcacYaxisName)
    this.updateOption();
  }
  // y轴名称距离
  @Input()
  set bcacYAxisNameGap(yAxisNameGap: number) {
    this.basicLineService.changeYAxisNameGap(this.chartOption, yAxisNameGap)
    this.updateOption();
  }
  // x轴刻度标签旋转
  @Input()
  set bcacXAxisLabelRotate(xAxisLabelRotate: axisLabelRotate) {
    this.basicLineService.changeXAxisLabelRotate(this.chartOption, xAxisLabelRotate);
    this.updateOption();
  }
  // y轴刻度标签旋转
  @Input()
  set bcacYAxisLabelRotate(yAxisLabelRotate: axisLabelRotate) {
    this.basicLineService.changeYAxisLabelRotate(this.chartOption, yAxisLabelRotate);
    this.updateOption();
  }


  @Input()
  set bcacChartData(data: BasicLineChartParam) {
    this.basicLineService.changeChartData(this.chartOption, data)

    this.updateOption();
  }

  ngOnInit() {

    fromEvent(window, 'resize').pipe(debounceTime(200)).subscribe(() => {
      let style = this.commonService.changeFontSize();
      style.interval.right = '30';

      this.echartInstance.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 - 1,
          textStyle: {
            fontSize: style.fontSize - 1
          },
          itemHeight: style.fontSize - 1,
        },
        toolbox: {
          itemSize: style.toolboxSize
        },
        grid: style.interval
      })
    })

  }

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

  echartInstance: ECharts;
  onOptionInit(ec) {
    this.echartInstance = ec;
  }

}