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

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

  constructor(private message: NzMessageService) { }

  ngOnInit() {
  }
  typeScriptCode = `import { Component, OnInit } from '@angular/core';
import { CommomService } from 'src/app/core/services/commom.service'

@Component({
  selector: 'app-pyramid-sub-bar-chart-new',
  template: \`
  <bcac-pyramid-bar [bcacChartTitleText]="chartTitle" [bcacChartData]="data">
  </bcac-pyramid-bar>
  \`,
  styleUrls: ['./pyramid-sub-bar-chart-new.component.scss']
})
export class PyramidSubBarChartNewComponent implements OnInit {

  constructor(
    private commonService: CommomService
  ) { }

  chartTitle: string;

  fileName: string;

  loading: boolean;

  data: any;

  ngOnInit() {

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

  initChart() {
    let tempDataArr1 = ['-100', '-99', '-96', '-91', '-90', '-87', '-86', '-85', '-81', '-79', '-76', '-74', '-73', '-69', '-67', '-65', '-63', '-60']
    let tempDataArr2 = tempDataArr1.map(item => {
      return Math.abs(+item).toFixed(0);
    })

    let data = {
      seriesName: ['昼间', '夜间'],
      stack: '达标率',
      style: this.commonService.changeFontSize(),
      xData: [tempDataArr1, tempDataArr2],
      yData: ["东城", "西城", '朝阳', '丰台', '石景山', '海淀', '顺义', '通州', '大兴', '房山', '门头沟', '昌平', '平谷', '密云', '怀柔', '延庆'],
      xAxisName: '达标率(%)',
      tooltipUnit: '%'
    }

    this.data = data;
    this.loading = false;

  }

}    
`
  htmlCode = `
组件引入
import { ChartModule } from './business-component/chart

@NgModule({
  imports: [
    ChartModule
  ]
})`;
  scssCode = ``;
  apiData = [
    { param: "[bcacChartTitleText]", desc: "图形标题", type: "string", defaultValue: '图表名' },
    { param: "[bcacChartShowTitle]", desc: "是否显示图形标题", type: "string", defaultValue: '图表名' },
    { param: "[bcacChartFileName]", desc: "文件下载名", type: "string", defaultValue: '图表' },
    { param: "[bcacChartLoading]", desc: '图片加载等待', type: "boolean", defaultValue: 'false' },
    { param: "[bcacChartShowLegend]", desc: "是否显示图例", type: "boolean", defaultValue: 'true' },
    { param: "[bcacChartShowToolbox]", desc: '是否显示toolbox', type: "boolean", defaultValue: 'true' },
    { param: "[bcacTooltipUnit]", desc: 'tooltip单位', type: "string", defaultValue: '' },
    { param: "[bcacXAxisName]", desc: '设置x轴名称', type: "string", defaultValue: '' },
    { param: "[bcacYAxisName]", desc: '设置y轴名称', type: "string", defaultValue: '' },
    { param: "[bcacYAxisNameGap]", desc: '设置y轴名称距离', type: "number", defaultValue: 30 },
    { 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: '-' },
    { param: "(bcacGetChartInstance)", desc: '获取当前echart实例', type: "EventEmitter<ECharts>", defaultValue: '-' },
  ]

  bcacChartData = [
    {
      field: "seriesName",
      type: "string[]",
      required: true,
      eg: "['昼间','夜间']",
      desc: "系列名"
    },
    {
      field: "xData",
      type: "string[][]",
      required: true,
      eg: "['-100', '-99', '-96', '-91', '-90', '-87', '-86', '-85', '-81', '-79', '-76', '-74', '-73', '-69', '-67', '-65', '-63', '-60'],['100', '99', '96', '91', '90', '87', '86', '85', '81', '79', '76', '74', '73', '69', '67', '65', '63', '60']",
      desc: "二维数组,其中有一个数组的值都为负值"
    },
    {
      field: "stack",
      type: "string",
      required: true,
      eg: "达标率",
      desc: "数据堆叠的值"
    },
    {
      field: "yData",
      type: "string[]",
      required: true,
      eg: "['东城', '西城', '朝阳', '丰台', '石景山', '海淀', '顺义', '通州', '大兴', '房山', '门头沟', '昌平', '平谷', '密云', '怀柔', '延庆']",
      desc: '目录轴的数据'
    }
  ]
  copied($event) {
    if ($event.isSuccess) {
      this.message.success('复制成功');
    }
  }
}