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

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

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

    // 配置基础 option
    defineChartOption(): {} {
        return {
            tooltip: {
                trigger: 'item',
                formatter: "{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'right',
                show: true,
                data: []
            },
            series: [
                {
                    type: 'pie',
                    radius: '50%',
                    center: ['50%', '50%'],
                    data: [],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
    }

    // 外部传入 data 经过处理合并到 option
    chartDataChange(data: IChartData): any {
        this.chartOption.legend.data = data.columns;
        this.chartOption.series[0].data = data.rows;
        return null;
    }

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