import { Component, Input, OnInit } from "@angular/core";
import { ECharts } from "echarts";
import { from, fromEvent } from "rxjs";
import { debounceTime } from "rxjs/operators";
import { CommonService } from "../../service/common.service";
import { MultiLineChartService } from "./multi-line-chart.service";

@Component({
  selector: "bcac-multi-line-chart",
  templateUrl: "./multi-line-chart.component.html",
  styleUrls: ["./multi-line-chart.component.scss"],
})
export class MultiLineChartComponent implements OnInit {
  constructor(
    private commonService: CommonService,
    private multiLineChartService: MultiLineChartService
  ) {}

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

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

  chartTitle = {
    show: true,
    label: "图表名称",
  };
  @Input()
  set bcacTitle(value: string) {
    this.chartTitle.show = true;
    this.chartTitle.label = value;
  }
  @Input()
  set bcacCloseTitle(value: boolean) {
    this.chartTitle.show = false;
  }

  @Input()
  set bcacUnit(value: string) {
    this.multiLineChartService.setUnit(this.defaultEchartOption, value);
    this.updateOption();
  }

  @Input()
  set bcacXaxisName(value: string) {
    this.multiLineChartService.setXaxisName(this.defaultEchartOption, value);
    this.updateOption();
  }

  @Input()
  set bcacYaxisName(value: string) {
    this.multiLineChartService.setYaxisName(this.defaultEchartOption, value);
    this.updateOption();
  }

  @Input()
  set bcacYnameGap(value: number) {
    this.multiLineChartService.setYnameGap(this.defaultEchartOption, value);
    this.updateOption();
  }

  @Input()
  set bcacDatas(value: any) {
    this.multiLineChartService.setDatas(this.defaultEchartOption, value);
    this.updateOption();
  }

  defaultEchartOption: any = this.multiLineChartService.getDefaultOption();

  options;
  // echart配置项
  initEchart() {
    this.options = this.defaultEchartOption;
  }

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