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 IFunnelSettings extends IChartSettings {
    ascending?: string;
    legendShow?: boolean;
}

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

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

    // 配置基础 option
    defineChartOption(): {} {
        return {
            tooltip: {
                trigger: 'item',
                formatter: "{b} : {c}"
            },
            grid: {
                width: '78%'
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                right: 10,
                top: 20,
                bottom: 10,
                data: []
            },
            calculable: true,
            series: [
                {
                    name: '漏斗图',
                    type: 'funnel',
                    left: '10%',
                    top: 60,
                    bottom: 60,
                    width: '80%',
                    sort: 'descending',
                    label: {
                        normal: {
                            show: true,
                            position: 'inside'
                        },
                        emphasis: {
                            textStyle: {
                                fontSize: 20
                            }
                        }
                    },
                    data: []
                }
            ]
        };
    }

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

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

        if (this._chartSettings && this._chartSettings.dimension) {
            dimension = this._chartSettings.dimension;
        } 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) {
            metrics = this._chartSettings.metrics;
        } else {
            metrics = data.columns[1];
        }

        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] = {};
            }
            this.chartOption.series[0].data[i].name = data.rows[i][dimension];
            this.chartOption.series[0].data[i].value = data.rows[i][metrics];
        }

        return null;
    }

    // 外部传入 settings 经过处理合并到 option
    chartSettingsChange(settings: IFunnelSettings): any {
        this.chartDataChange(this._chartData);
        this.chartOption.series[0].sort = settings.ascending ? 'ascending' : 'descending';
        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();
    }
}