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

@Component({
  selector: 'app-sub-bar-chart',
  templateUrl: './sub-bar-chart.component.html',
  styleUrls: ['./sub-bar-chart.component.scss']
})

export class SubBarChartComponent implements OnInit {

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

  constructor(
    private commonService: CommomService,
    private chartOptionService: ChartOptionService,
    private elementRef: ElementRef,
    private chartMenuService: ChartMenuService,
  ) { }
  barchartloading: boolean = true;
  barOption;
  data = {
    seriesName: ['东京', '纽约', '伦敦', '柏林'],
    xData: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
    yData: [["49.9", "71.5", "106.4", "129.2", "144.0", "176.0", "135.6", "148.5", "216.4", "194.1", "95.6", "54.4"], [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3], [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2], [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]],
    yAxisName: '降雨量(mm)',
    tooltipUnit: 'mm',
    style: this.commonService.changeFontSize()
  }
  // data = {
  //   seriesName: ['北京'],
  //   xData: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
  //   yData: [["49.9", "71.5", "106.4", "129.2", "144.0", "176.0", "135.6", "148.5", "216.4", "194.1", "95.6", "54.4"]],
  //   yAxisName: '等效声级(dB(A))',
  //   tooltipUnit: 'dB(A)',
  //   style:this.commonService.changeFontSize()
  // }

  ngOnInit() {
    this.initChart(this.commonService.changeFontSize(), this.data);
    fromEvent(window, 'resize').pipe(debounceTime(200)).subscribe(() => {
      let style = this.commonService.changeFontSize();
      this.optionInit.setOption({
        legend: {
          itemWidth: style.fontSize,
          textStyle: {
            fontSize: style.fontSize
          },
          itemHeight: style.fontSize,
        },
        toolbox: {
          itemSize: style.toolboxSize
        },
        grid: style.interval
      })
    })


  }

  initChart(style, chartData: data) {
    let option = this.chartOptionService.getColumnChartOption(chartData);
    console.log(option);
    this.barOption = option;
  }
  optionInit
  onOptionInit(ec) {
    this.optionInit = ec;
  }
  closePanel(event) {
    let el = <HTMLElement>event.target;
    if (el) {
      el.setAttribute('style', 'display:none')
    }
  }
  downloadImage(imageType: string, fileName: string) {
    this.chartMenuService.downloadEchartImage(this.optionInit, fileName, imageType);
  }
  fullScreen(event) {
    const el = event.path[4];
    this.chartMenuService.fullScreen(el)
  }

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


}
interface data {
  seriesName: string[];
  xData: string[];
  yData: any[];
  yAxisName: string;
  tooltipUnit: string;
}