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

@Component({
  selector: "app-negative-bar-sub-chart",
  templateUrl: "./negative-bar-sub-chart.component.html",
  styleUrls: ["./negative-bar-sub-chart.component.scss"],
})
export class NegativeBarSubChartComponent implements OnInit {
  @ViewChild("print1", { static: false }) print1Component: ENgxPrintComponent;

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

  ngOnInit() {
    this.initEchart(this.commomService.changeFontSize());
    fromEvent(window, "resize")
      .pipe(debounceTime(200))
      .subscribe(() => {
        let style = this.commomService.changeFontSize();
        style.interval.right = "110";
        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 datas = this.makeData(50, 7, 16);
    style.interval.right = "110";
    //参数传递
    let params = {
      customGrid: style.interval,
      style: style,
      unit: "%",
      xAxisName: "",
      yAxisName: "达标率(%)",
      yNameGap: 30,
      datas: datas,
      seriesNames: [
        "东城区",
        "西城区",
        "朝阳区",
        "丰台区",
        "石景山区",
        "海淀区",
        "门头沟区",
        "房山区",
        "通州区",
        "顺义区",
        "昌平区",
        "大兴区",
        "怀柔区",
        "平谷区",
        "密云区",
        "延庆区"
      ],
      translationNumber: 55
    };
    this.echartOption = this.chartOptionService.getNegativeBarChart(params);
    console.log("echartOption", this.echartOption);
  }

  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
    );
  }

  // 数据模拟
  private makeData(baseValue, number, seriesNumber): any[] {
    let seriesDatas = [];
    for (let j = 0; j < seriesNumber; j++) {
      let datas = [];
      if (j%3 == 0) {
        baseValue = 40;
      } else {
        baseValue = 70;
      }
      let funcZones = ["0类", "1类", "2类", "3类", "4a类", "4b类"];
      if (number > funcZones.length) {
        number = funcZones.length;
      }
      for (let i = 0; i < number; i++) {
        let value = (
          baseValue +
          10* Math.random()
        ).toFixed(1);
        datas.push([funcZones[i], value]);
      }
      seriesDatas.push(datas);
    }
    return seriesDatas;
  }
}