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

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

  constructor(private message: NzMessageService) { }

  response: HighlightResult;

  typeScriptCode =
    `import { Component, OnInit } from '@angular/core';
import { CommomService } from 'src/app/core/services/commom.service';
import { ElementRef, ViewChild } from "@angular/core";


@Component({
  selector: 'app-sub-line-chart-new',
  template: \`
<bcac-basic-line [bcacChartTitleText]="bcacChartTitle" [bcacChartData]="data" [bcacYAxisName]="yAxisName" [bcacYAxisNameGap]="yAxisNameGap" [bcacTooltipUnit]="tooltipUnit"></bcac-basic-line>
  \`,
  styleUrls: ['./sub-line-chart-new.component.scss']
})
export class SubLineChartNewComponent implements OnInit {

  constructor(
    private commonService: CommomService,
    private elementRef: ElementRef
  ) { }

  bcacChartTitle: string;

  yAxisName: string;

  yAxisNameGap: number = 0;

  tooltipUnit: string = '';
  data: any;


  ngOnInit() {

    this.bcacChartTitle = "表格标题";
    this.yAxisName = "noise level(dB)";
    this.yAxisNameGap = 40;
    this.tooltipUnit = "dB"
    this.initEchart(this.commonService.changeFontSize());
  }

  // 构建图
  initEchart(style) {
    let simulateData = this.makeData();
    style.interval.right = "30";

    let params = {
      customGrid: style.interval,
      xAxisDatas: simulateData.xAxisDatas,
      seriesNames: simulateData.seriesNames,
      datas: simulateData.datas,
    };
    this.data = params;
  }

  makeData() {
    let data = {
      xAxisDatas: ["10-01", "10-02", "10-03", "10-04", "10-05", "10-06", "10-07"],
      seriesNames: ["会展中心站", "匡达制药厂", "造纸七厂", "兴谷开发区"],
      datas: [
        [58.1, 60.4, 64.2, 50.8, 51.8, 64.5, 57.4],
        [57.1, 58.4, 63.4, 51.8, 51.5, 62.5, 62.1],
        [59.5, 60.4, 57.5, 50.0, 54.2, 57.2, 51.4],
        [60.5, 61.4, 58.5, 51.0, 55.2, 58.2, 60.5]
      ],
      markLine: [
        [{ name: '最大值', type: 'max' }, { name: '最小值', type: 'min' }], false, [{ name: '平均值', type: 'average' }]
      ],
      markArea: [
        [
          [{
            name: '开始高峰',
            xAxis: '10-01'
          }, {
            xAxis: '10-03'
          }], [{
            name: '结束高峰',
            xAxis: '10-05'
          }, {
            xAxis: '10-06'
          }],
        ],
        [
          [{
            name: '开始高峰',
            xAxis: '10-03'
          }, {
            xAxis: '10-04'
          }], [{
            name: '结束高峰',
            xAxis: '10-06'
          }, {
            xAxis: '10-07'
          }],
        ]
      ]
    };
    return data;
  }

}`;
  htmlCode = ``;

  scssCode = ``;
  ngOnInit() {
  }

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

  bcacChartData = [
    {
      field: "xAxisDatas",
      type: "string[]",
      required: true,
      eg: '["10-01", "10-02", "10-03", "10-04", "10-05", "10-06", "10-07"]',
      desc: "x轴的数据"
    },
    {
      field: "datas",
      type: "string[][]",
      required: true,
      eg: "[[58.1, 60.4, 64.2, 50.8, 51.8, 64.5, 57.4],57.1, 58.4, 63.4, 51.8, 51.5, 62.5, 62.1],[59.5, 60.4, 57.5, 50.0, 54.2, 57.2, 51.4],[60.5, 61.4, 58.5, 51.0, 55.2, 58.2, 60.5]]",
      desc: "数据,二维数组,其中二维数组的子元素一维数组的元素数量跟x轴的数据数量保持一致"
    },
    {
      field: "seriesNames",
      type: "string[]",
      required: true,
      eg: '["会展中心站", "匡达制药厂", "造纸七厂", "兴谷开发区"]',
      desc: "系列名"
    },
    {
      field: "markLines",
      type: "{[key:string]:any}[][]",
      required: false,
      eg: `[ [{ name: '最大值', type: 'max' }, { name: '最小值', type: 'min' }], null, [{ name: '平均值', type: 'average' }] ]`,
      desc: "一维数组的数量最多不超过系列series的数量，每一个一位数组中可以有多个对象去设置对应系列的标记线"
    },
    {
      field: "markArea",
      type: "{[key:string]:any}[][]",
      required: false,
      eg: `[
        [
          [{
            name: '开始高峰',
            xAxis: '10-01'
          }, {
            xAxis: '10-03'
          }], [{
            name: '结束高峰',
            xAxis: '10-05'
          }, {
            xAxis: '10-06'
          }],
        ],
        [
          [{
            name: '开始高峰',
            xAxis: '10-03'
          }, {
            xAxis: '10-04'
          }], [{
            name: '结束高峰',
            xAxis: '10-06'
          }, {
            xAxis: '10-07'
          }],
        ]
      ]`,
      desc: "二维数组的数量最多不超过系列数，二维数组设置对应系列的MarkArea。"
    }
  ]

  apiData = [
    { param: "[bcacChartTitleText]", desc: "图形标题", type: "string", defaultValue: '图表名' },
    { param: "[bcacChartShowTitle]", desc: "是否显示图形标题", type: "boolean", defaultValue: 'true' },
    { param: "[bcacChartShowLegend]", desc: "是否显示legend图例", type: "boolean", defaultValue: 'true' },
    { param: "[bcacChartFileName]", desc: "下载图片名", type: "string", defaultValue: '图表' },
    { param: "[bcacChartLoading]", desc: '图片加载等待', type: "boolean", defaultValue: 'false' },
    { param: "[bcacTooltipUnit]", desc: 'tooltip单位', type: "string", defaultValue: '' },
    { param: "[bcacChartShowToolbox]", desc: '图片是否显示工具栏', type: "Boolean", defaultValue: 'true' },
    { param: "[bcacXAxisName]", desc: '设置x轴名称', type: "string", defaultValue: '' },
    { param: "[bcacYAxisName]", desc: '设置y轴名称', type: "string", defaultValue: '' },
    { param: "[bcacYAxisNameGap]", desc: '设置y轴名称距离', type: "number", defaultValue: 'true' },
    { param: "[bcacXAxisLabelRotate]", desc: '设置x轴label旋转', type: "'leftSmallAngle'|'leftBigAngle'|'rightSmallAngle'|'rightBigAngle'", defaultValue: '-' },
    { param: "[bcacYAxisLabelRotate]", desc: '设置y轴label旋转', type: "'leftSmallAngle'|'leftBigAngle'|'rightSmallAngle'|'rightBigAngle'", defaultValue: '-' },
    { param: "[bcacChartData]", desc: '图片数据', type: "object 详情见下", defaultValue: 'false' },
    { param: "(bcacGetChartInstance)", desc: '获取当前echart实例', type: "EventEmitter<>", defaultValue: '-' },
  ]
}