import { Component, Input, OnInit, ElementRef, ViewChild, OnChanges, SimpleChanges, Output, EventEmitter } from '@angular/core';
import { NoiseAnalysisLineParam } from './noise-analysis-line-interface';
import { NoiseAnalysisLineService } from './noise-analysis-line.service';
import { ECharts } from 'echarts'
import { fromEvent } from "rxjs";
import { debounceTime } from "rxjs/operators";
import { CommonService } from "../../service/common.service";

type axisNameRotate = 'leftSmallAngle' | 'leftBigAngle' | 'rightSmallAngle' | 'rightBigAngle';

@Component({
  selector: 'bcac-noise-analysis-line',
  templateUrl: './noise-analysis-line.component.html',
  styleUrls: ['./noise-analysis-line.component.scss']
})
export class NoiseAnalysisLineComponent implements OnInit {

  constructor(
    private noiseAnalysisLineService: NoiseAnalysisLineService,
    private commonService: CommonService,
  ) { }

  @Output() bcacGetChartInstance: EventEmitter<ECharts> = new EventEmitter<ECharts>();


  //todo toolbox事件
  @Output() bcacBrushSelected: EventEmitter<any> = new EventEmitter<any>()
  @Output() bcacShowSpec: EventEmitter<any> = new EventEmitter<any>()
  @Output() bcacBrushEnlarge: EventEmitter<any> = new EventEmitter<any>()
  @Output() bcacBrushRestore: EventEmitter<any> = new EventEmitter<any>()
  @Output() bcacBrushCalculation: EventEmitter<any> = new EventEmitter<any>()
  @Output() bcacRectClick: EventEmitter<any> = new EventEmitter<any>()
  @Output() bcacChartMouseOver: EventEmitter<any> = new EventEmitter<any>()



  Option: any = this.noiseAnalysisLineService.getDefaultOpitonsOfNoiseAnalysisLineChart()

  public _bcacChartTitle: { show: boolean, label: string } = {
    show: true,
    label: "声学分析"
  };


  //todo 是否显示标题
  @Input()
  set bcacChartShowTitle(show: boolean) {
    this._bcacChartTitle.show = typeof (show) == "string"
      ? JSON.parse(show)
      : show;
  }
  //todo 标题文字
  @Input()
  set bcacChartTitleText(text: string) {
    this._bcacChartTitle.label = text;
  }

  // todo 下载文件名
  public _bcacChartFileName = "图表";
  @Input()
  set bcacChartFileName(fileName: string) {
    this._bcacChartFileName = fileName;
  }

  //todo 图数据
  receiveChartData  //接收的chart数据
  @Input()
  set bcacChartData(data: NoiseAnalysisLineParam) {
    if (data) {
      this.Option = this.noiseAnalysisLineService.changeChartData(this.Option, data)
      this.receiveChartData = data
    }
  }

  //todo tooltip显示格式化
  @Input()
  set bcacTooltipFormatter(value: any) {
    this.noiseAnalysisLineService.setTooltipFormat(this.Option, value);
  }


  //todo 是否显示toolbox
  @Input()
  set bcacChartShowToolbox(show: boolean) {
    this.noiseAnalysisLineService.changeToolboxShow(this.Option, show)
  }

  //todo toolbox显示项目
  @Input()
  set bcacChartToolboxItem(item: string[]) {
    if (this.Option.toolbox.show) {
      const funcObj = {
        bcacShowSpec: this.bcacShowSpec,
        bcacBrushEnlarge: this.bcacBrushEnlarge,
        bcacBrushRestore: this.bcacBrushRestore,
        bcacBrushCalculation: this.bcacBrushCalculation,
      }
      this.noiseAnalysisLineService.changeToolboxItem(this.Option, item, funcObj)
    }
  }

  // todo toolbox的switchInterval值list
  public _bcacChartToolboxSwitchIntervalData = [];
  @Input()
  set bcacChartToolboxSwitchIntervalData(data: Array<number>) {
    this._bcacChartToolboxSwitchIntervalData = data
  }

  // todo toolbox的switchValue值list
  public _bcacChartToolboxSwitchValueData = [];
  @Input()
  set bcacChartToolboxSwitchValueData(data: Array<string>) {
    this._bcacChartToolboxSwitchValueData = data
  }

  //todo loading状态
  public _bcacChartLoading: boolean = false;
  @Input()
  set bcacChartLoading(loading: boolean) {
    this._bcacChartLoading = loading;
  }


  //todo x轴名称
  @Input()
  set bcacXAxisName(bcacXaxisName: string) {
    this.Option.xAxis = this.noiseAnalysisLineService.changeXAxisName(this.Option.xAxis, bcacXaxisName)
  }
  //todo y轴名称
  @Input()
  set bcacYAxisName(bcacYaxisName: string) {
    this.Option.yAxis = this.noiseAnalysisLineService.changeYAxisName(this.Option.yAxis, bcacYaxisName)
  }
  //todo  y轴名称距离
  @Input()
  set bcacYAxisNameGap(yAxisNameGap: number) {
    this.Option.yAxis = this.noiseAnalysisLineService.changeYAxisNameGap(this.Option.yAxis, yAxisNameGap)
  }
  //todo x轴刻度标签旋转
  @Input()
  set bcacXAxisLabelRotate(xAxisLabelRotate: axisNameRotate) {
    this.noiseAnalysisLineService.changeXAxisLabelRotate(this.Option, xAxisLabelRotate);
  }
  //todo  y轴刻度标签旋转
  @Input()
  set bcacYAxisLabelRotate(yAxisLabelRotate: axisNameRotate) {
    this.noiseAnalysisLineService.changeYAxisLabelRotate(this.Option, yAxisLabelRotate);
  }



  //todo 框选事件
  brushSelected($event) {
    //!获取框选时间
    let brushTime = {
      start: '',
      end: ''
    }
    if ($event.batch[0].areas.length > 0) {
      let selectedlist = $event.batch[0].selected
      for (const item of selectedlist) {
        if (item.dataIndex.length > 0) {
          let selectindex = item.dataIndex
          brushTime.start = this.receiveChartData.xAxisDatas[selectindex[0]]
          brushTime.end = this.receiveChartData.xAxisDatas[selectindex[selectindex.length - 1]]
        }
      }
      this.bcacBrushSelected.emit(brushTime)
    }

  }

  ngOnInit() {
    this.renderGraph()
    fromEvent(window, "resize")
      .pipe(debounceTime(200))
      .subscribe(() => {
        let style = this.commonService.setNoiseAnalysisLineByWindows();
        if (this.echartInstance) {
          this.echartInstance.setOption({
            toolbox: {
              itemSize: style.toolbox.itemSize,
              itemGap: style.toolbox.itemGap,
              right: style.toolbox.right,
            },
            grid: style.grid,
            legend: style.grid,
          });
        }
      });
  }

  ngOnChanges(changes: SimpleChanges) {
    this.updateOption()
  }

  updateOption() {
    if (this.echartInstance) {
      this.echartInstance.setOption(this.chartOption, true);
    }
  }

  //todo 渲染图
  chartOption;//图option
  renderGraph() {
    this.chartOption = this.Option
  }

  //todo 获取实例
  echartInstance;
  onOptionInit(ec) {
    this.echartInstance = ec;
    this.bcacGetChartInstance.emit(ec)
  }

  //todo 点击事件
  chartClick(e) {
    if (e.componentSubType == "custom") {
      let clickDate = {
        eventID: e.data.value[4],
        startTime: e.data.value[1],
        endTime: e.data.value[2],
      }
      this.bcacRectClick.emit(clickDate)
    }
  }

  //todo 添加鼠标进入事件
  chartMouseOver(e){
    if (e.componentSubType == "custom") {
      return  //方块
    } else {
      this.bcacChartMouseOver.emit(e)
    }
  }

  //todo toolbox显示值改变
  toolboxValueChange(checkedlist) {
    if (this.echartInstance) {
      let option = this.echartInstance.getOption()
      let keepseriesList = this.receiveChartData.rectTypeLists.concat(['custom'])
      let newseries1: any = [
        {
          name: 'brush',
          type: 'bar',
          data: this.receiveChartData.xAxisDatas,
          yAxisIndex: 3,
          itemStyle: {
            opacity: 0
          }
        }
      ]
      let newseries2: any = []
      for (const item of option.series) {
        if (keepseriesList.includes(item.name)) {
          newseries2.push(item)
        }
      }
      let newseries3: any = []
      for (const item of this.receiveChartData.monitorItem) {
        if (checkedlist.includes(item)) {
          newseries3.push({
            name: item,
            type: 'line',
            symbol: 'circle',
            yAxisIndex: 0,
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 1//设置线条粗细
                }
              }
            },
            data: this.receiveChartData.yAxisDatas[item]
          })
        }
      }
      option.series = newseries1.concat(newseries2, newseries3)
      this.echartInstance.setOption(option, true)
    }
  }

  //todo toolbox间隔改变
  toolboxIntervalChange(value) {
    if (this.echartInstance) {
      let option = this.echartInstance.getOption()
      option.xAxis[0].axisLabel.interval = Number(value)
      option.xAxis[1].axisLabel.interval = Number(value)
      this.echartInstance.setOption(option, true)
    }
  }





}