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

@Component({
  selector: 'app-data-analysis-detail',
  templateUrl: './data-analysis-detail.component.html',
  styleUrls: ['./data-analysis-detail.component.less']
})
export class DataAnalysisDetailComponent implements OnInit {
  _allChecked = false;
  _disabledButton = true;
  _checkedNumber = 0;
  _displayData: Array<any> = [];
  _dataSet = [];
  _indeterminate = false;

  analysisId: number;
  analysisName: string;
  analysisDescription: string;
  tableId: number;
  chartSetting: object;

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

  _displayDataChange($event) {
    this._displayData = $event;
  }

  _checkAll(value) {
    if (value) {
      this._displayData.forEach(data => data.checked = true);
    } else {
      this._displayData.forEach(data => data.checked = false);
    }
    this._refreshStatus();
  };

  _refreshStatus() {
    const allChecked = this._displayData.every(value => value.checked === true);
    const allUnChecked = this._displayData.every(value => !value.checked);
    this._allChecked = allChecked;
    // 部分选中 
    this._indeterminate = (!allChecked) && (!allUnChecked);
    this._disabledButton = !this._dataSet.some(value => value.checked);
    this._checkedNumber = this._dataSet.filter(value => value.checked).length;
  };

  ngOnInit() {
    this.analysisId = this.routerInfo.snapshot.params['analysisId'];
    this.getAnalysisDetail(this.analysisId);
  }

  getAnalysisDetail(analysisId) {
    this.dataAnalysisServ.getAnalysisDetail(analysisId).then(data => {
      this._dataSet = data.recordList || [];
      this._displayData = this._dataSet;
      this.analysisName = data.name;
      this.analysisDescription = data.description; 
      this.tableId = data.tableId;
      this.chartSetting = data.chartSetting ? data.chartSetting : {};
    });
  }

  parsePath(pathList) {
    let path = ''
    pathList.forEach(item => {
      path += `${item.cnName}>`;
    });
    return path.slice(0, -1);
  }

  showChartConfig() {
    const subscription = this.modalServ.open({
      title: '图表配置',
      content: ChartConfigComponent,
      footer: false,
      componentParams: {
        analysisId: this.analysisId,
        tableId: this.tableId,
        chartSetting: this.chartSetting
      }
    });
    subscription.subscribe(result => {
      if (result == 'success') {
        subscription.destroy();
        // this.router.navigate(['chart'])
      } else if (result = 'nodata') {
        console.log('no data');
      }
    })
  }

  toChartResult() {
    if (!this.chartSetting.hasOwnProperty('chartType')) {
      this.confirmServ.warning({
        content: '请先配置！'
      });
      return;
    }
    this.router.navigate(['./', 'chart']);
  }

  editAnalysis() {
  }

  tableCompare(){}

  chartCompare(){}

  deleteRecord(){}
}