import { ChartConfigComponent } from '../chart-config/chart-config.component';
import { ActivatedRoute, Router } from '@angular/router';
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import * as echarts from 'echarts'
import { DataAnalysisService } from '../data-analysis.service';
import { NzModalService } from '../../../../ng-zorro/ng-zorro-antd.module';

@Component({
  selector: 'mat-chart',
  encapsulation: ViewEncapsulation.None,
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.less']
})
export class ChartComponent implements OnInit {
  analysisId: number;

  constructor(private router: Router,
              private routerInfo: ActivatedRoute,
              private dataAnalysisService: DataAnalysisService,
              private confirmServ: NzModalService,
              private modalServ: NzModalService) { }

  ngOnInit() {
    
  }

  ngAfterViewInit() {
    console.dir(document.body.clientWidth - 260);
    document.getElementById('echarts').style.width = document.body.clientWidth - 260 + 'px'
    let myChart = echarts.init(document.getElementById('echarts'));
    let option = {}
    let xName
    let yName
    this.analysisId = this.routerInfo.snapshot.params['analysisId'];
    this.dataAnalysisService.getAnalysisChart(this.analysisId).then(data => {
      data = data.data
      xName = data.childThs[0].cnName
      yName = data.childThs[1].cnName
      let series = []
      data.data.list.forEach(record => {
        let recordData = []
        record.childList.forEach(point => {
          let pointArray = [point.fieldList[0].dValue, point.fieldList[1].dValue];
          recordData.push(pointArray)
        });
        series.push({name: `${xName}-${yName}`, type: 'line', smooth: true, data: recordData})
      });

      option = {
        title: {
          text: 'test'
        },
        grid: {
          bottom: "25%",
          left: "12%",
        },
        tooltip: {},
        legend: {
          data: [`${xName}-${yName}`]
        },
        xAxis: { name: xName, type: 'value' },
        yAxis: { name: yName, type: 'value' },
        series: series
      };
      myChart.setOption(option);
    })
  }
}