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

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

  constructor(private message: NzMessageService) { }

  ngOnInit() {

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

@Component({
  selector: 'app-stack-column-sub-chart-new',
  template: \`
<bcac-stack-column [bcacChartTitleText]="chartTitle" [bcacLegendPosition]="position" [bcacChartData]="data"
[bcacChartLoading]="loading">
</bcac-stack-column>
  \`,
  styleUrls: ['./stack-column-sub-chart-new.component.scss']
})
export class StackColumnSubChartNewComponent implements OnInit {

  constructor() { }

  chartTitle: string;

  loading: boolean = false;

  position: string;
  data;
  ngOnInit() {

    this.initChart();
  }


  initChart() {
    this.chartTitle = "行政区达标率";

    this.position = 'bottom';

    this.data = {
      seriesName: ['大型车', '大型车', '中小型车', '中小型车',],
      stack: ['昼间', '夜间', '昼间', '夜间'],
      xData: ['0类', '1类', '2类', '3类', '4a类', '4b类'],
      yData: [[0, 12, 240, 404, 580, 640], [12, 20, 210, 774, 864, 856], [200, 564, 300, 646, 560, 604], [365, 416, 445, 506, 564, 654]],
      yAxisName: '车流量',
      tooltipUnit: '辆',
      tooltipFormatter: (params) => {
        let another;
        if (params.seriesIndex % 2 == 0) {
          another = this.data.yData[2 - params.seriesIndex][params.dataIndex]
        } else {
          another = this.data.yData[4 - params.seriesIndex][params.dataIndex]
        }

        let total = params.value + another;
        let str = '';

        str += params.name + '-' + this.data.stack[params.seriesIndex] + '<br>';
        str += '<span style="color:' + params.color + '">' + params.seriesName + '：</span> <b>' + params.value + this.data.tooltipUnit + '</b><br/>'
        str += '<span style="color:' + params.color + '"> 总量: </span> <b>' + total + this.data.tooltipUnit + '</b><br/>'
        return str;
      }
    }

  }
}
  `;
  htmlCode = `@import { ChartModule } from 'bcac-lib/business-component/chart'
  
@NgModule({
  imports: [
    ChartModule
  ]
})
  '`;
  scssCode = ``;

  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", 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: "(bcacGetChartInstance)", desc: '获取当前echart实例', type: "EventEmitter<>", defaultValue: '-' },
  ]

  bcacChartData = [
    {
      field: "seriesName",
      type: "string[]",
      required: true,
      eg: "['大型车', '大型车', '中小型车', '中小型车']",
      desc: "系列的名称"
    },
    {
      field: "xData",
      type: "string[]",
      required: true,
      eg: "['0类', '1类', '2类', '3类', '4a类', '4b类']",
      desc: "目录轴的数据"
    },
    {
      field: "yData",
      type: "string[][]",
      required: true,
      eg: '[[0, 12, 240, 404, 580, 640], [12, 20, 210, 774, 864, 856], [200, 564, 300, 646, 560, 604], [365, 416, 445, 506, 564, 654]]',
      desc: "值轴的数据,二维数组元素的个数与系列数量一致,二维数组里的一位数组的元素数量与x轴数量一致"
    },
    {
      field: "tooltipFormatter",
      type: "string|((params)=>string)",
      required: false,
      eg: `(params) => {
        let another;
        if (params.seriesIndex % 2 == 0) {
          another = this.data.yData[2 - params.seriesIndex][params.dataIndex]
        } else {
          another = this.data.yData[4 - params.seriesIndex][params.dataIndex]
        }

        let total = params.value + another;
        let str = '';

        str += params.name + '-' + this.data.stack[params.seriesIndex] + '<br>';
        str += '<span style="color:' + params.color + '">' + params.seriesName + '：</span> <b>' + params.value + '辆' + '</b><br/>'
        str += '<span style="color:' + params.color + '"> 总量: </span> <b>' + total + '辆' + '</b><br/>'
        return str;
      }`
    }
  ]
  copied($event) {
    console.log($event)
    if ($event.isSuccess) {
      this.message.success('复制成功');
    }
  }


}