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 { stackBarData } 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-stack-column-sub-chart',
  templateUrl: './stack-column-sub-chart.component.html',
  styleUrls: ['./stack-column-sub-chart.component.scss']
})
export class StackColumnSubChartComponent implements OnInit {

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


  barchartloading: boolean = true;
  barOption;

  ngOnInit() {
    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
      })
    })
    let data = {
      seriesName: ['大型车', '大型车', '中小型车', '中小型车',],
      stack: ['昼间', '夜间', '昼间', '夜间'],
      xData: ['0类', '1类', '2类', '3类', '4a类', '4b类'],
      yData: [[0, 12, 240, 404, 580, 640], [12, 20, 210, 774, 864, 856], [200, 564, 300, 646, 560, 604], [365, 416, 445, 506, 564, 654]],
      yAxisName: '车流量',
      tooltipUnit: '辆',
      style: this.commonService.changeFontSize(),
      tooltipFormatter: (params) => {
        // data.yData[]
        // debugger;
        let another;
        if (params.seriesIndex % 2 == 0) {
          another = data.yData[2 - params.seriesIndex][params.dataIndex]
        } else {
          another = data.yData[4 - params.seriesIndex][params.dataIndex]
        }

        // console.log(params.value, another, data.stack[params.seriesIndex])
        let total = params.value + another;
        let str = '';
        // console.log(params)
        str += params.name + '-' + data.stack[params.seriesIndex] + '<br>';
        str += '<span style="color:' + params.color + '">' + params.seriesName + '：</span> <b>' + params.value + data.tooltipUnit + '</b><br/>'
        str += '<span style="color:' + params.color + '"> 总量: </span> <b>' + total + data.tooltipUnit + '</b><br/>'
        return str;
      }
    }
    this.initChart(this.commonService.changeFontSize(), data);


  }

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

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