import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from '@angular/core';
import { CosmosChartService } from '../common/chart.service';
import { ChartCommon, IChartData, IChartSettings } from './../common/chart.common';

export interface IRadarSettings extends IChartSettings {
    dataType?: object;
    legendShow?: boolean;
}

@Component({
    selector: 'cm-radar',
    templateUrl: './radar.component.html',
    styleUrls: ['./radar.component.less']
})
export class CosmosRadarComponent extends ChartCommon implements OnInit, OnDestroy {

    constructor(private chartService: CosmosChartService) {
        super(chartService);
    }

    // 配置基础 option
    defineChartOption(): {} {
        return {
            tooltip: {

            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                right: 10,
                top: 20,
                bottom: 10,
                data: []
            },
            radar: {
                indicator: [
                ]
            },
            series: [{
                name: '',
                type: 'radar',
                data : [
                ]
            }]
        };
    }

    // 外部传入 data 计算出每个 radar indicator 的 max 值
    maxRange(data: any[], value: string) {
        if (!data || !data.length) {
            return null;
        }
        let max = data[0][value];
        for (let i = 1; i < data.length; i++) {
            max = Math.max(max, data[i][value]);
        }
        return max;
    }

    // 外部传入 data 经过处理合并到 option
    chartDataChange(data: IChartData): any {
        let dimension: string;
        let indicator: any[];

        if (!data || !data.columns || !data.rows || !data.columns.length || !data.rows.length) {
            return;
        }
        let datalen = data.rows.length;

        if (this._chartSettings && this._chartSettings.dimension && this._chartSettings.dimension.length) {
            dimension = this._chartSettings.dimension[0];
        } else {
            dimension = data.columns[0];
        }
        this.chartOption.legend.data = [];
        for (let i = 0; i < datalen; i++) {
            this.chartOption.legend.data.push(data.rows[i][dimension]);
        }

        if (this._chartSettings && this._chartSettings.metrics) {
            indicator = this._chartSettings.metrics;
        } else {
            indicator = data.columns.slice(1);
        }
        this.chartOption.radar.indicator = [];
        for (let i = 0; i < indicator.length; i++) {
            this.chartOption.radar.indicator.push({name: indicator[i], max: this.maxRange(data.rows, indicator[i])});
        }

        this.chartOption.series[0].data = [];
        for (let i = 0; i < datalen; i++) {
            if (!this.chartOption.series[0].data[i]) {
                this.chartOption.series[0].data[i] = {name: this.chartOption.legend.data[i]}
            }
            this.chartOption.series[0].data[i].value = [];
            for (let j = 0; j < indicator.length; j++) {
               this.chartOption.series[0].data[i].value.push(data.rows[i][indicator[j]]);
            }
        }

        return null;
    }

    // 外部传入 settings 经过处理合并到 option
    chartSettingsChange(settings: IRadarSettings): any {
        if (settings.dimension || settings.metrics) {
            this.chartDataChange(this._chartData);
        }

        if (settings.dataType) {
            let indicator = this.chartOption.radar.indicator;

            this.chartOption.tooltip.formatter = function (param: any) {
                let str = param.data.name;
                for (let i = 0; i < indicator.length; i++) {
                    str += '<br/>' + indicator[i].name;
                    for (let key in settings.dataType) {
                        if (key == indicator[i].name) {
                            if (settings.dataType[key] == 'KMB') {
                                str += ": " + param.value[i]/1000 + 'k';
                            } else if (settings.dataType[key] == 'percent') {
                                str += ": " + param.value[i]*100 + '%';
                            }
                            break;
                        }
                        str += ": " + param.value[i];
                    }
                }
                return str;
            }
        }

        if (settings.legendShow == false) {
            this.chartOption.legend.show = false;
        } else if (settings.legendShow || settings.legendShow == null || settings.legendShow == undefined) {
            this.chartOption.legend.show = true;
        }

        return null;
    }

    ngOnInit() {
        this.chartContainer = this.canvas.nativeElement;
    }

    // echarts 初始化自动调用
    onInitChart() {

    }

    // echarts 销毁后自动调用
    onDestroyChart() {

    }

    ngOnDestroy() {
        this.disposeChart();
    }
}