import { Component, OnInit, Input } from "@angular/core";
import { fromEvent } from "rxjs";
import { debounceTime } from "rxjs/operators";
import { CommonService } from "../../service/common.service";
import { addMilliseconds, format } from "date-fns";
import { BigDataLineChartService } from './big-data-line-chart.service';


@Component({
  selector: 'bcac-big-data-line-chart',
  templateUrl: './big-data-line-chart.component.html',
  styleUrls: ['./big-data-line-chart.component.scss']
})
export class BigDataLineChartComponent implements OnInit {

  constructor(
    private commonService: CommonService,
    private bigDataLineChartService: BigDataLineChartService
    ) {}

  ngOnInit() {
    this.initEchart();
    fromEvent(window, "resize")
      .pipe(debounceTime(200))
      .subscribe(() => {
        let style = this.commonService.changeFontSize();
        this.optionInit.setOption({
          legend: {
            itemWidth: style.fontSize,
            textStyle: {
              fontSize: style.fontSize - 1
            },
            itemHeight: style.fontSize,
          },
          toolbox: {
            itemSize: style.toolboxSize,
          },
          grid: style.interval,
          xAxis: {
            axisLabel: {
              fontSize: style.fontSize - 1
            },
            nameTextStyle: {
              fontSize: style.fontSize
            }
          },
          yAxis: {
            axisLabel: {
              fontSize: style.fontSize - 1
            },
            nameTextStyle: {
              fontSize: style.fontSize
            }
          },
        });
      });
  }
  optionInit;
  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;
  }

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

  @Input()
  set bcacYaxisName(value: string) {
    this.bigDataLineChartService.setyAxisName(this.defaultEchartOption, value);
    this.updateOption();
  }
  @Input()
  set bcacYNameGap(value: number) {
    this.bigDataLineChartService.setYNameGap(this.defaultEchartOption, value);
    this.updateOption();
  }

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

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

  @Input()
  set bcacXAxisName(value: string) {
    this.bigDataLineChartService.setXAxisName(this.defaultEchartOption, value);
    this.updateOption();
  }
  
  options;

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

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

  

  // 模拟数据
  // private makeData(num, level) {
  //   let datas = [];
  //   let a, b
  //   let dateTime = new Date("2020-10-01 00:00:00");
  //   for (let i = 0; i < num; i++) {
  //     if (i % 30 === 0) {
  //       a = 2 * Math.random();
  //     }
  //     if (i % 30 === 0) {
  //       b = 2 * Math.random();
  //     }
  //     dateTime = addMilliseconds(dateTime, 1000);

  //     datas.push([
  //       format(dateTime, "yyyy-MM-dd HH:mm:ss"),
  //       (level + 2 * Math.sin(i / 50) + a + b + Math.random()).toFixed(2),
  //     ]);
  //   }
  //   return datas;
  // }

}