import { Input, ViewChild, ElementRef } from '@angular/core';
import { CosmosChartService } from './chart.service';
import { BaseChart } from "./chart.base";

export interface IChartData {
    columns: any[],
    rows: any[]
}

export interface IChartSettings {
    dimension?: any;
    metrics?: any;
}

export class ChartCommon extends BaseChart {

    @ViewChild('canvas') canvas: ElementRef;

    constructor(service: CosmosChartService) {
        super(service);

        this.chartOption = this.defineChartOption();
    }

    // 定义 echarts option
    protected defineChartOption(): {} {
        return {};
    }

    // 通用option
    @Input() set option(option: any) {
        this.mergeChartOption(option);
    }

    // 数据
    protected _chartData: IChartData;
    @Input() set chartData(data: IChartData) {
        this._chartData = data;
        this.mergeChartOption(this.chartDataChange(data));
    }

    protected chartDataChange(data: IChartData): any {
        return null;
    }

    // 配置
    protected _chartSettings: IChartSettings;
    @Input() set chartSettings(settings: IChartSettings) {
        this._chartSettings = settings;
        this.mergeChartOption(this.chartSettingsChange(settings));
    }

    protected chartSettingsChange(Settings: IChartSettings): any {
        return null;
    }

    private mergeChartOption(option: any) {
        Object.assign(this.chartOption, option);
        if (this.echarts && this.chartOption) {
            this.inputOption();
        }
    }

}