import { Component, OnInit } from "@angular/core";
import { fromEvent } from "rxjs";
import { debounceTime } from "rxjs/operators";
import { CommomService } from "src/app/core/services/commom.service";
import { ElementRef, ViewChild } from "@angular/core";
import { ChartOptionService } from 'src/app/core/services/chartServices/chart-option.service';
import { ENgxPrintComponent } from 'e-ngx-print';
import { ChartMenuService } from 'src/app/core/services/chartServices/chart-menu.service';

@Component({
  selector: "app-sub-line-chart",
  templateUrl: "./sub-line-chart.component.html",
  styleUrls: ["./sub-line-chart.component.scss"],
})
export class SubLineChartComponent implements OnInit {

  @ViewChild('print1', {static: false}) print1Component: ENgxPrintComponent;

  constructor(
    private commomService: CommomService,
    private chartOptionService: ChartOptionService,
    private chartMenuService: ChartMenuService,
    private elementRef: ElementRef
    ) {}

  ngOnInit() {
    this.initEchart(this.commomService.changeFontSize());
    fromEvent(window, "resize")
      .pipe(debounceTime(200))
      .subscribe(() => {
        let style = this.commomService.changeFontSize();
        this.optionInit.setOption({
          legend: {
            itemWidth: style.fontSize,
            itemHeight: style.fontSize,
          },
          toolbox: {
            itemSize: style.toolboxSize,
          },
          grid: style.interval,
        });
      });
  }
  optionInit;
  onOptionInit(ec) {
    this.optionInit = ec;
  }
  echartOption;
  // 图名
  chartName = "噪声变化趋势";

  // echart配置项
  initEchart(style) {
    //获取数据
    let simulateData = this.makeData();
    style.interval.right = "30";
    // 参数传递
    let params = {
      customGrid: style.interval,
      style: style,
      unit: "dB",
      menuPanelClassName: "echart-menu-panel",
      xAxisName: "",
      yAxisName: "noise level(dB)",
      xAxisDatas: simulateData.xAxisDatas,
      yNameGap: simulateData.yNameGap,
      seriesNames: simulateData.seriesNames,
      datas: simulateData.datas,
      elementRef: this.elementRef
    };
    this.echartOption = this.chartOptionService.getOptionBasicLineChart(params);
  }

  closePanel(event) {
    event.fromElement.setAttribute('style','display:none')
  }

  downloadImage(imageType: string, fileName: string) {
    this.chartMenuService.downloadEchartImage(this.optionInit, fileName, imageType);
  }

  printComplete() {
  }

  customPrint() {
    this.chartMenuService.customPrint(this.optionInit, this.print1Component);
  }

  fullScreen(event) {
    this.chartMenuService.fullScreen(event.srcElement.parentNode.parentNode.parentNode.parentNode);
  }

  makeData() {
    let data = {
      xAxisDatas : ["10-01", "10-02","10-03","10-04","10-05","10-06","10-07"],
      yNameGap: 30,
      seriesNames: ["会展中心站", "匡达制药厂", "造纸七厂", "兴谷开发区"],
      datas:[
        [58.1, 60.4, 64.2, 50.8, 51.8, 64.5, 57.4],
        [57.1, 58.4, 63.4, 51.8, 51.5, 62.5, 62.1],
        [59.5, 60.4, 57.5, 50.0, 54.2, 57.2, 51.4],
        [60.5, 61.4, 58.5, 51.0, 55.2, 58.2, 60.5]
      ]
    };
    return data;
  }
}