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 IBarSettings extends IChartSettings {
    legendShow?: boolean;
    xAxisType?: string;
    yAxisType?: any[];
    yAxisName?: any[];
    axisSite?: object;
}

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

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

    // 配置基础 option
    defineChartOption(): {} {
        return {
            tooltip: {
                trigger: 'axis',
            },
            grid: {
                width: '78%'
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                right: 10,
                top: 20,
                bottom: 10,
                data: []
            },
            xAxis: [{
                type : 'category',
                data: [],
                silent: false,
                splitLine: {
                    show: false
                }
            }],
            yAxis: [{
                type : 'value',
                name : ''
            }],
            series: [
            ]
        };
    }

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

        if (this._chartSettings && this._chartSettings.dimension && this._chartSettings.dimension.length) {

            this.chartOption.xAxis = [];

            let dimension = this._chartSettings.dimension;
            for (let i = 0; i < dimension.length; i++) {
                if (!this.chartOption.xAxis[i]) {
                    this.chartOption.xAxis[i] = {type : 'category', silent: false, splitLine: {show: false}};
                }
                if (i > 1) {
                    this.chartOption.xAxis[i].offset = 20;
                }
                this.chartOption.xAxis[i].data = [];
                for (let j = 0; j < datalen; j++) {
                    this.chartOption.xAxis[i].data.push(data.rows[j][dimension[i]]);
                }
            }
        } else {
            this.chartOption.xAxis = [this.chartOption.xAxis[0]];
            this.chartOption.xAxis[0].data = [];
            for (let i = 0; i < datalen; i++) {
                this.chartOption.xAxis[0].data.push(data.rows[i][data.columns[0]]);
            }
        }

        this.chartOption.yAxis = [{type: 'value', name: ''}];
        if (this._chartSettings && this._chartSettings.metrics) {
            this.chartOption.legend.data = this._chartSettings.metrics;
        } else {
            this.chartOption.legend.data = data.columns.slice(1);
        }

        this.chartOption.series = [];
        let len = this.chartOption.legend.data.length;
        for (let i = 0; i < len; i++) {
            if (!this.chartOption.series[i]) {
                this.chartOption.series[i] = {name: this.chartOption.legend.data[i], type: 'bar',  barWidth: (60/this.chartOption.legend.data.length)+'%'};
            }
            this.chartOption.series[i].data = [];
            for (let j = 0; j < datalen; j++) {
                this.chartOption.series[i].data.push(data.rows[j][this.chartOption.legend.data[i]]);
            }
        }

        return null;
    }

    // 外部传入 settings 经过处理合并到 option
    chartSettingsChange(settings: IBarSettings): any {
        if (!settings) {
            return;
        }

        if (settings.dimension || settings.metrics) {
            this.chartDataChange(this._chartData);
        }

        if (settings.xAxisType) {
            for (let i = 0; i < this.chartOption.xAxis.length; i++) {
                this.chartOption.xAxis[i].type = settings.xAxisType;
            }
        }

        if (settings.yAxisType && settings.yAxisType.length) {
            for (let i = 0; i < settings.yAxisType.length; i++) {
                if (!this.chartOption.yAxis[i]) {
                    this.chartOption.yAxis[i] = {type: 'value'};
                }
                if (settings.yAxisType[i] == 'KMB') {
                    this.chartOption.yAxis[i].axisLabel = {
                        formatter: function (param: any) {
                            return param/1000 + 'k';
                        }
                    }
                } else if (settings.yAxisType[i] == 'percent') {
                    this.chartOption.yAxis[i].axisLabel = {
                        formatter: function (param: any) {
                            return param*100 + '%';
                        }
                    }
                }
                this.chartOption.yAxis[i].name = settings.yAxisName && settings.yAxisName[i] || '';
            }
        }

        if (settings.axisSite && settings.axisSite['right'] && settings.axisSite['right'].length) {
            let axisR = settings.axisSite['right'];
            for (let i = 0; i < axisR.length; i++) {
                for (let j = 0; j < this.chartOption.series.length; j++) {
                    if (axisR[i] == this.chartOption.series[j].name) {
                        this.chartOption.series[j].yAxisIndex = 1;
                        break;
                    }
                }
            }
        }

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