import { Component, OnInit, Inject } from '@angular/core';
import { NzMessageService } from "ng-zorro-antd/message";
import { HighlightResult } from "ngx-highlightjs";
import { addMilliseconds, format } from "date-fns";
import { DomSanitizer } from '@angular/platform-browser';

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

  constructor(
    @Inject(DomSanitizer) private sanitizer: DomSanitizer,
    private message: NzMessageService,
  ) { }

  response: HighlightResult;

  typeScriptCode =
    `import { Component, OnInit } from "@angular/core";
  import { addMilliseconds, format } from "date-fns";
  
  @Component({
    selector: "noise-analysis-line-chart",
    templateUrl: '
    <bcac-noise-analysis-line
    bcacChartTitleText="声学分析秒级数据" 
    [bcacChartData]="bcacChartData"
    bcacChartFileName="声学分析秒级数据"
    [bcacChartToolboxItem]="bcacChartToolboxItem"
    [bcacChartToolboxSwitchIntervalData]="intevaldata"
    [bcacChartToolboxSwitchValueData]="switchvaluedata"
    (bcacShowSpec)="isShowSpec()"
    (bcacBrushEnlarge)="bcacBrushEnlarge($event)" 
    (bcacBrushRestore)="bcacBrushRestore($event)"
    (bcacBrushCalculation)="bcacBrushCalculation($event)"
    (bcacBrushSelected)="bcacBrushSelected($event)">
</bcac-noise-analysis-line>
    '
  })
  export class NoiseAnalysisLineChartComponent implements OnInit {
  
    constructor(
      private message: NzMessageService
    ) { }

    bcacChartData = this.makeData();
    bcacChartToolboxItem = ['switchInterval', 'switchValue', 'spec', 'brush', 'calculation', 'brush_enlarge', 'brush_restore']
    intevaldata = [
      { text: '1分钟', value: '59' },
      { text: '5分钟', value: '299' },
      { text: '10分钟', value: '599' },
      { text: '30分钟', value: '1799' },
      { text: '1小时', value: '3599' },
      { text: '2小时', value: '7199' }]
    switchvaluedata = [
      { text: 'Leq', value: 'leq' },
      { text: 'Lmax', value: 'lmax' },
      { text: 'Lmin', value: 'lmin' },
    ]
    ngOnInit() {
    }
  
    copied($event) {
      if ($event.isSuccess) {
        this.message.success("复制成功");
      }
    }
  
    makeData() {
      const funcformat = (data) => {
        return format(new Date(Number(data)), 'HH:mm:ss')
      }
      let datas = {
        xAxisDatas: [],//x轴数据
        xInterval: 3599,
        monitorItem: ['leq', 'lmax', 'lmin'],//测量项
        monitorItemDefaultShow: ['leq'],//默认展示的测量项
        yAxisDatas: {
          leq: [],  //测量数据
          lmax: [],
          lmin: []
        },
        rectTypeLists: ["Event", "Car", "Construction", 'Muisc', 'Audio'], //事件类型
        rectsDataLists: [], //事件类型data
        xFormatter: funcformat,
      }
      let time = new Date(new Date().setHours(0, 0, 0, 0)).getTime()
      for (let i = 0; i < 7200; i++) {
        datas.xAxisDatas.push(time + '')
        datas.yAxisDatas.leq.push(Math.ceil(Math.random() * 100) + '')
        datas.yAxisDatas.lmax.push(Math.ceil(Math.random() * 100) + '')
        datas.yAxisDatas.lmin.push(Math.ceil(Math.random() * 100) + '')
        time += 1000
      }
      let classdata = []
      for (let i = 0; i < 16; i++) {
        let radomname = Math.floor(Math.random() * datas.rectTypeLists.length)
        let radomx1 = Math.floor(Math.random() * datas.xAxisDatas.length)
        let radomx2 = radomx1 + Math.floor(Math.random() * 50)
        classdata.push({
          name: datas.rectTypeLists[radomname],
          value: [radomname, datas.xAxisDatas[radomx1] + '', datas.xAxisDatas[radomx2] + '', 5],
        })
      }
      datas.rectsDataLists = classdata
      return datas;
    }
  
    isShowSpec() {
      console.log('========isShowSpec====', new Date());
    }
  
    bcacBrushEnlarge($event) {
      console.log('$event: ', $event);
  
    }
  
    bcacBrushRestore($event) {
      console.log('$event: ', $event);
  
    }
    bcacBrushCalculation($event) {
      console.log('$event: ', $event);
  
    }
  
    bcacBrushSelected($event) {
      console.log('$event: ', $event);
    }
    
  
    
  }
  `;

  importModulStr = `import { ChartModule } from 'bcac-lib/business-component/chart';`;
  apiData = [
    {
      param: "[bcacChartTitleText]",
      desc: "图形标题",
      type: "string",
      required: false,
      defaultValue: '图表名'
    },
    {
      param: "[bcacChartShowTitle]",
      desc: "是否显示图形标题",
      type: "string",
      required: false,
      defaultValue: 'true'
    },
    {
      param: "[bcacChartFileName]",
      desc: "文件下载名",
      type: "string",
      required: false,
      defaultValue: '图表'
    },
    {
      param: "[bcacChartLoading]",
      desc: '图片加载等待',
      type: "boolean",
      required: false,
      defaultValue: 'false'
    },
    {
      param: "[bcacUnit]",
      desc: 'tooltip单位',
      type: "string",
      required: false,
      defaultValue: 'dB'
    },
    {
      param: "[bcacXAxisName]",
      desc: 'x轴名称',
      type: "string",
      required: false,
      defaultValue: ''
    },
    {
      param: "[bcacXAxisLabelRotate]",
      desc: 'x轴刻度标签旋转',
      type: "'leftSmallAngle'|'leftBigAngle'|'rightSmallAngle'|'rightBigAngle'",
      required: false,
      defaultValue: 'leftSmallAngle'
    },
    {
      param: "[bcacYAxisName]",
      desc: 'y轴名称',
      type: "string",
      required: false,
      defaultValue: 'noise level(dB)'
    },
    {
      param: "[bcacYAxisNameGap]",
      desc: '设置Y轴名称与Y轴线距离',
      type: "number",
      required: false,
      defaultValue: 30
    },
    {
      param: "[bcacYAxisLabelRotate]",
      desc: 'y轴刻度标签旋转',
      type: "'leftSmallAngle'|'leftBigAngle'|'rightSmallAngle'|'rightBigAngle'",
      required: false,
      defaultValue: 'leftSmallAngle'
    },
    {
      param: "[bcacChartShowToolbox]",
      desc: '图片是否显示工具栏。',
      type: "Boolean",
      required: false,
      defaultValue: 'true'
    },
    {
      param: "[bcacChartToolboxItem]",
      desc: 'toolbox显示项目',
      type: "string[],可选项有： <br/>"
        + "['switchInterval', 'switchValue', 'spec', 'brush', 'calculation', 'brush_enlarge', 'brush_restore']  <br/>"
        + "switchInterval:&nbsp;&nbsp;控制x轴interval工具  <br/>"
        + "switchValue:  &nbsp;&nbsp;控制显示的测量项  <br/>"
        + "spec:  &nbsp;&nbsp;显示频谱开关 <br/>"
        + "brush:  &nbsp;&nbsp;开启框选 <br/>"
        + "calculation:  &nbsp;&nbsp;计算icon <br/>"
        + "brush_enlarge:  &nbsp;&nbsp;框选放大 <br/>"
        + "brush_restore:  &nbsp;&nbsp;框选还原 <br/>"
      ,
      required: false,
      defaultValue: "下载图片"
    },
    {
      param: "[bcacChartToolboxSwitchIntervalData]",
      desc: 'switchInterval的值',
      type: "[{text:string,value:string}],   <br/>   "
        + " 如：[{ text: '1分钟', value: '59' },{ text: '5分钟', value: '299' }]",
      required: 'bcacChartToolboxItem显示项目中有switchInterval时必填',
      defaultValue: "无"
    },
    {
      param: "[bcacChartToolboxSwitchValueData]",
      desc: 'switchValue的值',
      type: "[{text:string,value:string}], <br/> "
        + " 如：[{ text: 'Leq', value: 'leq' }, { text: 'Lmax', value: 'lmax' }]",
      required: 'bcacChartToolboxItem显示项目中有switchValue时必填',
      defaultValue: "无"
    },
    {
      param: "[bcacChartData]",
      desc: '图片数据',
      type: "object 详情见下",
      required: true,
      defaultValue: '[]'
    },
    {
      param: "(bcacGetChartInstance)",
      desc: '获取当前echart实例',
      type: "EventEmitter<>",
      required: false,
      defaultValue: '-'
    },
    {
      param: "(bcacBrushSelected)",
      desc: '框选事件，返回框选的开始值和结束值',
      type: "EventEmitter<>",
      required: false,
      defaultValue: '-'
    },
    {
      param: "(bcacShowSpec)",
      desc: '显示频谱',
      type: "EventEmitter<>",
      required: false,
      defaultValue: '-'
    },
    {
      param: "(bcacBrushEnlarge)",
      desc: '框选放大',
      type: "EventEmitter<>",
      required: false,
      defaultValue: '-'
    },
    {
      param: "(bcacBrushRestore)",
      desc: '框选还原',
      type: "EventEmitter<>",
      required: false,
      defaultValue: '-'
    },
    {
      param: "(bcacBrushCalculation)",
      desc: '框选计算',
      type: "EventEmitter<>",
      required: false,
      defaultValue: '-'
    },
  ]

  bcacChartDataapi = [
    {
      field: "xAxisDatas",
      type: "any[],",
      required: true,
      eg: "x轴时间",
      desc: "x轴数据"
    },
    {
      field: "xInterval",
      type: "number",
      required: false,
      eg: "59",
      desc: "x轴间隔数"
    },
    {
      field: "xFormatter",
      type: "string |Function",
      required: false,
      eg: '()=>{}',
      desc: "刻度标签的内容格式器，支持字符串模板和回调函数两种形式"
    },
    {
      field: "monitorItem",
      type: "string[]",
      required: true,
      eg: "['leq', 'lmax', 'lmin']",
      desc: "图展示的测量项"
    },
    {
      field: "monitorItemDefaultShow",
      type: "string[]",
      required: true,
      eg: "['leq']",
      desc: "默认展示的测量项"
    },
    {
      field: "yAxisDatas",
      type: " { [key: string]: any[] }",
      required: true,
      eg: " yAxisDatas: {leq: [], lmax: [],lmin: []}",
      desc: "测量数据"
    },
    {
      field: "rectTypeLists",
      type: " string[]",
      required: true,
      eg: "['Event', 'Car', 'Construction', 'Muisc', 'Audio']",
      desc: "事件类型"
    },
    {
      field: "rectsDataLists",
      type: "[{name:'Event',value:[]}]",
      required: true,
      eg: "[{name:'Event',value:[]}]",
      desc: "事件类型数据"
    }
  ]






  bcacChartData: any = this.makeData(7200)


  bcacChartToolboxItem = ['switchInterval', 'switchValue', 'spec', 'brush', 'calculation', 'brush_enlarge', 'brush_restore']
  intevaldata = [
    { text: '1分钟', value: '59' },
    { text: '5分钟', value: '299' },
    { text: '10分钟', value: '599' },
    { text: '30分钟', value: '1799' },
    { text: '1小时', value: '3599' },
    { text: '2小时', value: '7199' }]
  switchvaluedata = [
    { text: 'Leq', value: 'leq' },
    { text: 'Lmax', value: 'lmax' },
    { text: 'Lmin', value: 'lmin' },
  ]
  funcformat = function (data) {
    let res = ""
    if (data[0].componentSubType == "custom") {
      res = data[0].marker + data[0].name + "<br>";
      for (const item of data) {
        res += ' 时间 '
          + format(new Date(Number(item.value[1])), 'HH:mm:ss')
          + " ~ "
          + format(new Date(Number(item.value[2])), 'HH:mm:ss')
          + " <br>"
      }
    } else {
      res = format(new Date(Number(data[0].axisValue)), 'yyyy-MM-dd HH:mm:ss') + "<br>";
      for (const item of data) {
        if (item.seriesName != "brush") {
          res += item.marker
            + item.seriesName
            + " : "
            + (item.value == "null"
              ? '--'
              : Number(item.value).toFixed(2)) + '  (dB)' + "<br>"
        }
      }
    }
    return res
  }

  tooltipformat = this.funcformat
  ngOnInit() {
  }

  copied($event) {
    if ($event.isSuccess) {
      this.message.success("复制成功");
    }
  }

  makeData(num) {
    const funcformat = (data) => {
      return format(new Date(Number(data)), 'HH:mm:ss')
    }
    let datas = {
      xAxisDatas: [],//x轴数据
      xInterval: 3599,
      monitorItem: ['leq', 'lmax', 'lmin'],//测量项
      monitorItemDefaultShow: ['leq'],//默认展示的测量项
      yAxisDatas: {
        leq: [],  //测量数据
        lmax: [],
        lmin: []
      },
      rectTypeLists: ["Event", "Car", "Construction", 'Muisc', 'Audio'], //事件类型
      rectsDataLists: [], //事件类型data
      xFormatter: funcformat,
    }
    let time = new Date(new Date().setHours(0, 0, 0, 0)).getTime()
    for (let i = 0; i < num; i++) {
      datas.xAxisDatas.push(time + '')
      datas.yAxisDatas.leq.push(Math.ceil(Math.random() * 100) + '')
      datas.yAxisDatas.lmax.push(Math.ceil(Math.random() * 100) + '')
      datas.yAxisDatas.lmin.push(Math.ceil(Math.random() * 100) + '')
      time += 1000
    }
    let classdata = []
    for (let i = 0; i < 16; i++) {
      let radomname = Math.floor(Math.random() * datas.rectTypeLists.length)
      let radomx1 = Math.floor(Math.random() * datas.xAxisDatas.length)
      let radomx2 = radomx1 + Math.floor(Math.random() * 50)
      let eventId = Math.random() * 10 * Math.random() * 10 + ''
      classdata.push({
        name: datas.rectTypeLists[radomname],
        value: [radomname, datas.xAxisDatas[radomx1] + '', datas.xAxisDatas[radomx2] + '', 5, eventId],
      })
    }
    datas.rectsDataLists = classdata
    return datas;
  }

  isShowSpec() {
    console.log('========isShowSpec====', new Date());
  }

  bcacBrushEnlarge($event) {
    console.log('$event: ', $event);

  }

  bcacBrushRestore($event) {
    console.log('$event: ', $event);

  }
  bcacBrushCalculation($event) {
    console.log('$event: ', $event);

  }

  bcacBrushSelected($event) {
    console.log('$event: ', $event);
  }

  anytimeOptInstance
  bcacGetAnytimeInstance($event) {
    console.log('$event: ', $event);
    this.anytimeOptInstance = $event
  }

  test() {
    this.bcacChartData = this.makeData(3600)
  }

  restore() {
    this.bcacChartData = this.makeData(7200)
  }

  rectClick(e) {
    let option = this.anytimeOptInstance.getOption()
    let time = new Date(new Date().setHours(0, 0, 0, 0)).getTime()
    let xdata = []
    for (let i = 0; i < 60; i++) {
      xdata.push(time + '')
      time += 1000
    }
    option.xAxis[0].data = xdata
    option.xAxis[0].axisLabel.interval = 2
    option.toolbox[0].feature.brush.show = false
    option.toolbox[0].feature.myTool_calculation.show = false
    option.toolbox[0].feature.myTool_enlarge.show = false
    this.anytimeOptInstance.setOption(option, true)

  }

  bcacChartMouseOver(e){
    console.log('e: ', e);
    
  }

}