import { ActivatedRoute } from '@angular/router';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
import { Component, OnInit, Input } from '@angular/core';
import { DataAnalysisService } from '../data-analysis.service';
import { NzModalSubject } from '../../../../ng-zorro/ng-zorro-antd.module';
import { CommonService } from '../../../shared/common.service';

@Component({
  selector: 'mat-chart-config',
  templateUrl: './chart-config.component.html',
  styleUrls: ['./chart-config.component.less']
})
export class ChartConfigComponent implements OnInit {
  validateForm: FormGroup;
  Xs = [];
  Ys = [];
  lineAttrs = [];
  scatterAttrs = [];
  chartType: number = 1;
  currentX: number;
  currentY: number;

  @Input() analysisId: number;
  @Input() tableId: number;
  @Input() 
  chartSetting: any = {
    id: '',
    analysisId: '',
    attributeIdX: '',
    attributeIdsY: '',
    chartType: ''
  };

  constructor(private fb: FormBuilder,
    private routerInfo: ActivatedRoute,
    private dataAnalysisService: DataAnalysisService,
    private commonService: CommonService,
    private subject: NzModalSubject) { }

  onSummit() {
    if (!this.validateForm.valid) 
      return;

    let reqBody = {
      id: this.analysisId,
      chartSetting: {
        chartType: this.chartType,
        attributeIdX: this.validateForm.value.attributeIdX,
        attributeIdsY: this.validateForm.value.attributeIdsY.toString()
      }
    }

    if (this.chartSetting.id) 
      Object.assign(reqBody.chartSetting, { id: this.chartSetting.id})

    this.dataAnalysisService.saveChartAttrs(this.analysisId, reqBody).then(data => {
      if (data.code == 200) {
        this.subject.next('success');
      }
    })
  }

  handleCancel(e) {
    this.subject.destroy();
  }

  getFormControl(name) {
    return this.validateForm.get(name)
  }

  ngOnInit() {
    this.validateForm = this.fb.group({
      chartType: [null, [Validators.required]],
      attributeIdX: [null, [Validators.required]],
      attributeIdsY: [null, [Validators.required]],
    });
    this.dataAnalysisService.getChartAttrs(this.analysisId, this.tableId)
      .then(data => {
      this.lineAttrs = data['12'];
      this.scatterAttrs = data['1'];
      this.chartType = this.chartSetting.chartType || 1;
      this.updateAttrs(this.chartType);
    })
      .catch(err => console.log(err))
  }

  updateAttrs(chartType: number) {
    if (this.lineAttrs.length == 0 || this.lineAttrs.length == 0) return;
    this.chartType = chartType;
    this.Xs = chartType == 1 ? this.lineAttrs : this.scatterAttrs;
    this.Ys = chartType == 1 ? this.lineAttrs : this.scatterAttrs;
    this.currentX = this.commonService.searchArr(this.chartSetting.attributeIdX, this.Xs).id ? this.chartSetting.attributeIdX : this.Xs[0].id;
    // 曲线图为数组，散点图为数字
    this.currentY = chartType == 1
      ?
      this.commonService.parseStr2Arr(this.chartSetting.attributeIdsY)
      :
      (parseInt(this.chartSetting.attributeIdsY) || this.Ys[1].id);
    this.updateY(this.currentX);
  }

  // 过滤出timeLine与x一致的y属性
  updateY(X: number) {
    this.Ys = this.lineAttrs.filter(item => (item.timeLine == this.commonService.searchArr(X, this.lineAttrs).timeLine));
  }
}