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

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

  constructor(private message: NzMessageService) { }

  typeScriptCode =
    `import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test-base-bar-sub-chart',
  template: \`
  <bcac-basic-bar [bcacChartData]="data" [bcacChartLoading]="loading">
  </bcac-basic-bar>
  \`,
  styleUrls: ['./test-base-bar-sub-chart.component.scss']
})
export class TestBaseBarSubChartComponent implements OnInit {

  constructor() { }

  chartTitle: string = "测试基础柱状图";
  fileName: string = "各城市降雨量";
  loading: boolean = true;
  data;
  legend: boolean = true;
  position: string;

  ngOnInit() {

    this.initChart();
  }
  initChart() {
    this.data = {
      seriesName: ['东京', '纽约', '伦敦', '柏林'],
      xData: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
      yData: [["49.9", "71.5", "106.4", "129.2", "144.0", "176.0", "135.6", "148.5", "216.4", "194.1", "95.6", "54.4"], [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3], [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2], [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]],
      yAxisName: '降雨量(mm)',
      tooltipUnit: 'mm',
    }
    let timer = window.setTimeout(() => {
      this.data = {
        seriesName: ['东京',],
        xData: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        yData: [["49.9", "71.5", "106.4", "129.2", "144.0", "176.0", "135.6", "148.5", "216.4", "194.1", "95.6", "54.4"]],
        yAxisName: '降雨量(mm)',
        tooltipUnit: 'mm',
      }
    }, 3000)
  }
}
    `
  htmlCode =
    `import { ChartModule } from './business-component/chart'

@NgModule({
  imports: [
    ChartModule
  ]
})
    `
  scssCode =
    ``


  fileName: string = "各城市降雨量";
  chartTitle: string = "测试基础柱状图";
  loading: boolean = true;
  data;
  legend: boolean = true;
  position: string = 'bottom';
  ngOnInit() {
    this.initChart()
  }
  selected($event) {
    console.log($event)
  }

  calcFn = function ($event) {
    console.log($event)
  }

  initChart() {
    this.data = {
      seriesName: ['东京', '纽约', '伦敦', '柏林'],
      xData: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
      yData: [["49.9", "71.5", "106.4", "129.2", "144.0", "176.0", "135.6", "148.5", "216.4", "194.1", "95.6", "54.4"], [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3], [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2], [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]],
      markLine: [
        [{ type: 'max' }, { type: 'min' }],
        null,
        [{ type: 'average' }, { type: 'min' }]
      ],
    }
  }

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

  apiData = [
    { param: "[bcacChartTitleText]", desc: "图形标题", type: "string", defaultValue: '图表名' },
    { param: "[bcacChartShowTitle]", desc: "是否显示图形标题", type: "boolean", defaultValue: 'true' },
    { param: "[bcacChartShowLegend]", desc: "是否显示legend图例", type: "boolean", defaultValue: 'true' },
    { param: "[bcacLegendPosition]", desc: "图例位置", type: "bottom|right|block", defaultValue: 'bottom' },
    { 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: "[bcacBrush]", desc: '开启或者关闭刷子', type: "boolean", defaultValue: false },
    { param: "(bcacGetChartInstance)", desc: '获取当前echart实例', type: "EventEmitter<>", defaultValue: '-' },
    { param: "(bcacBrushSelected)", desc: "获取刷子的框选事件", type: "EventEmitter<>", defaultValue: '-' }
  ]

  bcacChartData = [
    {
      field: "seriesName",
      type: "string[]",
      required: true,
      eg: "['东京', '纽约', '伦敦', '柏林']",
      desc: '系列数组'
    },
    {
      field: "xData",
      type: "string[]",
      required: true,
      eg: "['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']",
      desc: 'x轴数据'
    },
    {
      field: "yData",
      type: "string[][]",
      required: true,
      eg: '[["49.9", "71.5", "106.4", "129.2", "144.0", "176.0", "135.6", "148.5", "216.4", "194.1", "95.6", "54.4"]]',
      desc: '二维数组中一维数组的数量取决于系列的数量。注意：即使是一个系列也是二维数组！'
    },
    {
      field: 'markLine',
      type: "{type:string}[][]",
      required: false,
      eg: "[[{ type: 'max' }, { type: 'min' }],null,[{ type: 'average' }, { type: 'min' }]]",
      desc: '二维数组下的一位数组的顺序即为要添加标记线的系列,最多只能跟系列的元素数量一致。中间可以用null隔开。'
    },
    {
      field: "tooltipFormatter",
      type: "(param) =>string",
      required: false,
      eg: '(param)=>string',
      desc: 'tooltip提示,可以传入一个自己写的方法'
    }
  ]
}