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

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

  constructor(private message: NzMessageService) { }

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

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

  constructor(
    private commonService: CommomService,
  ) { }

  chartTitle: string;
  fileName: string;
  loading: boolean = false;
  data;

  ngOnInit() {


    this.initChart(this.commonService.changeFontSize());
  }

  initChart(style) {
    let chartData = {
      yData: ["东城", "西城", '朝阳', '丰台', '石景山', '海淀', '顺义', '通州', '大兴', '房山', '门头沟', '昌平', '平谷', '密云', '怀柔', '延庆'],
      xData: [],
      xAxisName: '达标率(%)',
      tooltipUnit: '%',
      seriesName: ['昼间达标率', "夜间达标率"],
    };
    function getVirtualData() {
      chartData.seriesName.forEach(legend => {
        let xData = []
        chartData.yData.forEach(yCategory => {
          xData.push(Math.floor(Math.random() * 100).toFixed(1));
        });

        xData = xData.sort((a, b) => {
          return a - b;
        })
        chartData.xData.push(xData)
      });
    }
    getVirtualData();
    console.log(chartData.xData)

    this.chartTitle = "行政区达标率排行";
    this.fileName = "行政区达标率排行"
    this.data = chartData;

    this.loading = true;
    let timer = window.setTimeout(() => {
      this.loading = false;
      let chartData = {
        yData: ["东城", "西城", '朝阳', '丰台', '石景山',],
        xData: [[46.4, 48.5, 56.74, 85.4, 87.5]],
        xAxisName: '不达标率(%)',
        tooltipUnit: '%',
        seriesName: ['昼间达标率',],
      }
      this.data = chartData
    }, 4000)
  }

  getInstance($event) {
    console.log($event)
  }
}    
  `
  htmlCode =
    `import { ChartModule } from './business-component/chart'
    
@NgModule({
  imports: [
    ChartModule
  ]
})`
  scssCode =``
  ngOnInit() {
  }
  copied($event) {
    console.log($event)
    if ($event.isSuccess) {
      this.message.success('复制成功')
    }
  }

  apiData = [
    { param: "[bcacChartTitleText]", desc: "图形标题的文本", type: "string", defaultValue: '图表名' },
    { param: "[bcacChartShowTitle]", desc: "是否显示图形标题", type: "string", defaultValue: 'true' },
    { param: "[bcacChartFileName]", desc: "文件下载名", type: "string", defaultValue: '图表' },
    { param: "[bcacChartLoading]", desc: '图片加载等待', type: "boolean", defaultValue: 'false' },
    { param: "[bcacChartShowToolbox]", desc: '图片是否显示toolbox', type: "Boolean", defaultValue: 'true' },
    { param: "[bcacChartShowLegend]", desc: '图片是否显示legend', 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: '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: '{}' },
    { param: "(bcacGetChartInstance)", desc: '获取当前echart实例', type: "EventEmitter<ECharts>", defaultValue: '-' },
  ]

  bcacChartData = [
    {
      field: "yData",
      type: "string[]",
      required: true,
      eg: "['东城', '西城', '朝阳', '丰台', '石景山', '海淀', '顺义', '通州', '大兴', '房山', '门头沟', '昌平', '平谷', '密云', '怀柔', '延庆']",
      desc: "目录轴的数据,注意顺序与xData的一致"
    },
    {
      field: "xData",
      type: "string[][]",
      required: true,
      eg: '[["6.0", "8.0", "25.0", "26.0", "41.0", "47.0", "55.0", "58.0", "65.0", "74.0", "78.0", "78.0", "81.0", "83.0", "93.0", "93.0"]]',
      desc: "数据轴的数据,一维数组的数量跟系列数量一致,一维数组里数据的数量与目录轴数据的数量一致。需要自己排序,按从小到大的顺序"
    },
    {
      field: "seriesName",
      type: 'string[]',
      required: true,
      eg: "['昼间达标率']",
      desc: '系列名称'
    },
    {
      field: "tooltipFormatter",
      type: "(param : any)=> string",
      required: false,
      eg: "",
      desc: "tooltip的formatter回调"
    }
  ]

}