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 IScatterSettings extends IChartSettings {
    symbolSize?: object;
    legendShow?: boolean;
}

@Component({
    selector: 'cm-scatter',
    templateUrl: './scatter.component.html',
    styleUrls: ['./scatter.component.less']
})
export class CosmosScatterComponent extends ChartCommon implements OnInit, OnDestroy {
    dimension: string;
    metrics: any[];
    scatterSettings: IScatterSettings;

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

    // 配置基础 option
    defineChartOption(): {} {
        return {
            grid: {
                width: '75%'
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                right: 10,
                top: 20,
                bottom: 10,
                data: []
            },
            xAxis: {

            },
            yAxis: {
                scale: true
            },
            series: [

            ]
        };
    }

    // 外部传入 data 处理为散点图需要的格式
    handleData(rows: any[]) {
        let data: any = [];
        if (!rows || !rows.length ) {
            return [];
        }
        for (let i = 0; i < rows.length; i++) {
            let item: any[] = [];
            for (let j = 0; j < this.metrics.length; j++) {
                item.push(rows[i][this.metrics[j]]);
            }
            item.push(rows[i][this.dimension]);
            data.push(item);
        }
        return data;
    }

    // 外部传入 data 处理为散点图需要的格式
    formatRowsData(rowsData: any[]) {
        let retval = [];
        let arr = [];
        if (!rowsData || !rowsData.length ) {
            return [];
        }
        for (let i = 0; i < rowsData.length; i++) {
            let len = rowsData[i]['data'] && rowsData[i]['data'].length || 0;
            for (let j = 0; j < len; j++) {
                arr.push(rowsData[i]['data'][j])
            }
        }

        for (let i = 0; i < arr.length; i++) {
            let index = -1;
            for (let j = 0; j < retval.length; j++) {
                if (retval[j][this.dimension] == arr[i][this.dimension]) {
                    index = j;
                    retval[j]['data'].push(arr[i]);
                }
            }
            if (-1 == index) {
                let item = {};
                item[this.dimension] = arr[i][this.dimension]+'';
                item['data'] = [arr[i]];
                retval.push(item);
            }
        }

        return retval;
    }


    // 外部传入 data 经过处理合并到 option
    chartDataChange(data: IChartData): any {
        if (!data || !data.columns || !data.rows || !data.rows.length || !data.columns.length) {
            return;
        }

        if (this._chartSettings && this._chartSettings.dimension && this._chartSettings.dimension.length) {
            this.dimension = this._chartSettings.dimension[0];
        } else {
            this.dimension = data.columns[0];
        }

        if (this._chartSettings && this._chartSettings.metrics && this._chartSettings.metrics.length) {
            this.metrics = this._chartSettings.metrics;
        } else {
            this.metrics = data.columns.slice(1);
        }

        this.chartOption.series = [];
        this.chartOption.legend.data = [];

        let valArr = this.formatRowsData(data.rows);
        let datalen = valArr && valArr.length || 0;
        for (let i = 0; i < datalen; i++) {
            this.chartOption.legend.data.push(valArr[i][this.dimension]+'');

            this.chartOption.series[i] = {name: valArr[i][this.dimension]+''};
            this.chartOption.series[i].data = this.handleData(valArr[i]['data']);
            this.chartOption.series[i].type = 'scatter';

            if (this.metrics.length > 2) {
                this.chartOption.series[i].label = {
                    emphasis: {
                        show: true,
                        formatter: function (param: any) {
                            return param.data[2];
                        },
                        position: 'top'
                    }
                };
            }
            let fun: any;
            if (this.scatterSettings && this.scatterSettings.symbolSize) {
                fun = this.scatterSettings.symbolSize;
            }
            if (this.metrics.length > 3) {
                this.chartOption.series[i].symbolSize = function (data: any[]) {
                    if (fun && typeof(fun) == 'function' ) {
                        return fun(data[3])
                    }
                    return data[3];
                };
            }
        }

        return null;
    }

    // 外部传入 settings 经过处理合并到 option
    chartSettingsChange(settings: IScatterSettings): any {
        this.scatterSettings = settings;
        this.chartDataChange(this._chartData);

        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();
    }
}