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


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

  @ViewChild('print1', { static: false }) print1Component: ENgxPrintComponent;
  constructor(
    private commonService: CommomService,
    private chartOptionService: ChartOptionService,
    private chartMenuService: ChartMenuService,
  ) { }


  barchartloading: boolean = false;
  barOption;
  ngOnInit() {
    let style = this.commonService.changeFontSize();
    fromEvent(window, 'resize').pipe(debounceTime(200)).subscribe(() => {
      this.optionInit.setOption({
        legend: {
          itemWidth: style.fontSize,
          textStyle: {
            fontSize: style.fontSize
          },
          itemHeight: style.fontSize,
        },
        toolbox: {
          itemSize: style.toolboxSize
        },
        grid: style.pyramidGrid
      })
    })
    let tempDataArr = ['-100', '-99', '-96', '-91', '-90', '-87', '-86', '-85', '-81', '-79', '-76', '-74', '-73', '-69', '-67', '-65', '-63', '-60'].map(item => {
      return Math.abs(+item).toFixed(0);
    })
    console.log(tempDataArr)
    let data = {
      seriesName: ['昼间', '夜间'],
      stack: '达标率',
      style: style,
      yData: ["东城", "西城", '朝阳', '丰台', '石景山', '海淀', '顺义', '通州', '大兴', '房山', '门头沟', '昌平', '平谷', '密云', '怀柔', '延庆'],
      xData: [['-100', '-99', '-96', '-91', '-90', '-87', '-86', '-85', '-81', '-79', '-76', '-74', '-73', '-69', '-67', '-65', '-63', '-60'], tempDataArr],
      xAxisName: '达标率(%)',
      tooltipUnit: '%',
      tooltipFormatter: function (params) {
        let str = '';
        // let tooltipUnit = 'mm';    //替换 tooltip里显示的单位
        str = '<span>' + params.name + '</span><br/>'
        str += '<span style="color:' + params.color + '">' + params.seriesName + '：</span> <b>' + Math.abs(params.value) + data.tooltipUnit + '</b><br/>'
        return str;

      }
    }

    this.initChart(data)
  }

  /**
   * @style 从commonService获取的样式
   * @data 传入数据
   */
  initChart(data: pyramid) {
    let option = this.chartOptionService.getPyramidBarChartOption(data)

    console.log(option);
    this.barOption = option;
  }

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

  closePanel(event) {
    let el = <HTMLElement>event.target;

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

}