import { Component, OnInit } from '@angular/core';
import { HighlightResult } from 'ngx-highlightjs';
import { NzMessageService } from 'ng-zorro-antd/message';

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

  constructor(private message: NzMessageService) { }

  response: HighlightResult;

  typeScriptCode =
`import { Component, OnInit, ViewChild } from "@angular/core";
import { ENgxPrintComponent } from "e-ngx-print";
import { CommomService } from "src/app/core/services/commom.service";
import { ChartOptionService } from "src/app/core/services/chartServices/chart-option.service";
import { ChartMenuService } from "src/app/core/services/chartServices/chart-menu.service";
import { addMilliseconds, format } from "date-fns";
import { fromEvent } from "rxjs";
import { debounceTime } from "rxjs/operators";

@Component({
  selector: "app-sub-annotations-line-chart",
  templateUrl: "./sub-annotations-line-chart.component.html",
  styleUrls: ["./sub-annotations-line-chart.component.scss"],
})
export class SubAnnotationsLineChartComponent implements OnInit {
  @ViewChild("print1", { static: false }) print1Component: ENgxPrintComponent;

  constructor(
    private commomService: CommomService,
    private chartOptionService: ChartOptionService,
    private chartMenuService: ChartMenuService
  ) {}

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

  optionInit;
  onOptionInit(ec) {
    this.optionInit = ec;
    console.log(ec)
    let a = this.optionInit._api.dispatchAction(
      {
        type: "legendUnSelect",
        name: "lmax"
      }
    );
    console.log("a", a);
  }

  echartOption;

  // 图名
  chartName = "噪声变化趋势";

  // echart配置项
  initEchart(style) {
    // 获取模拟数据
    let leqDatas = this.makeData(1000, 50.8);
    let lmaxDatas = this.makeData(1000, 53.8);
    let simulateData = [leqDatas.datas, lmaxDatas.datas];
    let markPoints = [leqDatas.markPoints, lmaxDatas.markPoints];
    style.interval.right = "30";
    //参数传递
    let params = {
      customGrid: style.interval,
      style: style,
      unit: "dB",
      xAxisName: "",
      yAxisName: "noise level(dB)",
      yNameGap: 30,
      datas: simulateData,
      seriesNames: ["Leq"],
      markPoints: markPoints,
    };
    this.echartOption = this.chartOptionService.getOptionAnnotationLineChart(params);
  }

  closePanel(event) {
    event.fromElement.setAttribute("style", "display:none");
  }

  downloadImage(imageType: string, fileName: string) {
    this.chartMenuService.downloadEchartImage(
      this.optionInit,
      fileName,
      imageType
    );
  }

  printComplete() {}

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

  fullScreen(event) {
    this.chartMenuService.fullScreen(
      event.srcElement.parentNode.parentNode.parentNode.parentNode
    );
  }

  private makeData(num, level) {
    let datas = [];
    let markPoints = [];
    let a, b;
    let dateTime = new Date("2020-10-01 00:00:00");
    for (let i = 0; i < num; i++) {
      if (i % 200 === 0) {
        a = 2 * Math.random();
      }
      if (i % 300 === 0) {
        b = 2 * Math.random();
      }
      dateTime = addMilliseconds(dateTime, 1000);
      let value = (
        level +
        (3 * i) / 200 +
        2 * Math.sin(i / 50) +
        a +
        b +
        Math.random()
      ).toFixed(2);
      datas.push([format(dateTime, "yyyy-MM-dd HH:mm:ss"), value]);
      if (i % 200 == 0) {
        markPoints.push({
          name: "event" + (i + 1),
          coord: [format(dateTime, "yyyy-MM-dd HH:mm:ss"), value],
        });
      }
    }
    return {
      datas: datas,
      markPoints: markPoints,
    };
  }
}

`;

  htmlCode = 
`<div class="chart-card">
<div nz-row class="chart-title">
    <div nz-col nzSpan="10">
        {{chartName}}
    </div>
</div>
<div class="bodys">
    <div class="echart-menu-panel" style="display: none;" (mouseleave)="closePanel($event)">
        <div class="echart-menu-panel-border">
            <div class="echart-menu-panel-box above">
                <div (click)="fullScreen($event)">全屏查看</div>
                <div (click)="customPrint()">打印图表</div>
            </div>
            <div class="echart-menu-panel-box bottom">
                <div (click)="downloadImage('.png', '月平均气温')">下载PNG文件</div>
                <div (click)="downloadImage('.jpeg', '月平均气温')">下载JPEG文件</div>
            </div>
        </div>
    </div>
    <div echarts [options]="echartOption" class="chart-body" [loading]="maploading" [autoResize]="true"
        [initOpts]="{renderer:'canvas'}" (chartInit)="onOptionInit($event)">
        <e-ngx-print #print1
                       [showBtn]="false"
                       [printStyle]="printStyle"
                       [printCSS]="printCSS"
                       (printComplete)="printComplete()">
        </e-ngx-print>
    </div>
</div>
</div>
`;

  scssCode = 
`@import "src/styles.scss";

.chart-card {
  background: rgb(255, 255, 255);
  padding: 1.5rem;
  height: 100%;
  .chart-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: $title-color;
    line-height: 1.5;
    padding: 0.4rem;
  }
  .bodys {
    position: relative;
    height: 93%;
    .chart-body {
      width: 100%;
      height: 100%;
      font-size: 1.2rem;
    }
  }
}
.echart-menu-panel {
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  //   border: 0.1rem solid #aaa4a4;
  width: 14rem;
  padding: 2rem 1.7rem 2rem 2rem;
  font-size: 1.2rem;
  letter-spacing: 0.1rem;
  font-weight: 450;
  .echart-menu-panel-border {
    box-shadow: 0.2rem 0.2rem 1rem #888888;
    border: 0.1rem solid #aaa4a4;
    background-color: #ffffff;
  }
  .echart-menu-panel-box {
    padding: 0.4rem 0;
    border-bottom: 0.1rem solid #aaa4a4;
    div {
      padding: 0.4rem 0.8rem;
    }
    div:hover {
      background-color: #335cad;
      cursor: pointer;
      color: #ffffff;
    }
  }
}

::-webkit-scrollbar {
  width: 0;
  height: 0.6rem;
}

::-webkit-scrollbar-track {
  background-color: rgb(214, 212, 212);
  -webkit-border-radius: 0.2rem;
  -moz-border-radius: 0.2rem;
  border-radius: 0.2rem;
}

::-webkit-scrollbar-thumb {
  background-color: #beb9b9;
  -webkit-border-radius: 0.2rem;
  -moz-border-radius: 0.2rem;
  border-radius: 0.2rem;
}

`;
  ngOnInit() {
  }

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

}