import { Directive, ElementRef, Input, AfterViewInit } from '@angular/core';
import { ECharts, init } from 'echarts';

@Directive({
    selector: '[app-echart]'
})
export class AppEChartDirective implements AfterViewInit {
    /**
     * 图表实例
     *
     * @private
     * @type {ECharts}
     * @memberof AppChart
     */
    private $echarts: ECharts;
    /**
     * 图表配置
     *
     * @memberof AppEChartDirective
     */
    @Input()
    set chartConfig(val: any) {
        if (val && (Object.keys(val).length > 0)) {
            this.option = this.formatData(val);
            this.setChartOption(this.option);
        }
    }
    private option: any = {};
    /**
     * 图表高度
     *
     * @type {string}
     * @memberof AppEChartDirective
     */
    @Input()
    height: string;
    /**
     * 图表宽度
     *
     * @type {string}
     * @memberof AppEChartDirective
     */
    @Input()
    width: string;

    /**
     * Creates an instance of AppEChartDirective.
     * @memberof AppEChartDirective
     */
    constructor(private ref: ElementRef) { }

    public ngAfterViewInit(): void {
        this.initCharts(this.ref.nativeElement);
    }

    /**
     * 图表配置设置
     *
     * @private
     * @param {*} [opts={}]
     * @memberof AppEChartDirective
     */
    private setChartOption(opts: any = {}) {
        this.$echarts.setOption(opts);
    }

    /**
    * 格式化图表配置
    *
    * @private
    * @param {*} data
    * @returns {*}
    * @memberof AppChart
    */
    private formatData(data: any): any {
        if (data.series) {
            // 区域图分析
            if (Array.isArray(data.series) && (data.series.length > 0)) {
                const series: any[] = data.series;
                if (Object.is(series[0].type, 'area')) {
                    // 如果series是数组的话
                    data.series.forEach((item: any) => {
                        Object.assign(item, { type: 'line', areaStyle: { normal: {} } });
                    });
                    return data;
                } else if (Object.is(series[0].type, 'radar')) {
                    // 1.找到每个角的最大值
                    let max: number = 0;
                    // 获得每个角的数据
                    const arrs: any[] = [];
                    series.forEach((item) => {
                        arrs.push(item.data);
                    });
                    const lastarrs: any[] = arrs[0].map((col, i) => {
                        return arrs.map((row) => {
                            return row[i];
                        });
                    });
                    const maxs: any[] = [];
                    lastarrs.forEach((item: any[]) => {
                        max = item[0];
                        item.forEach((element) => {
                            if (max < element) {
                                max = element;
                            }
                        });
                        maxs.push(max);
                    });

                    // x轴数据转化成indicator数据
                    const indicatorArr: any[] = [];
                    const xAxisData: any[] = data.xAxis.data;
                    xAxisData.forEach((item) => {
                        maxs.forEach((element) => {
                            if (item === element) {
                                indicatorArr.push({ name: item, max: element });
                            }
                        });
                    });

                    data.radar.indicator = [];
                    if (Array.isArray(indicatorArr)) {
                        data.radar.indicator = [...indicatorArr];
                    }
                    data.xAxis = null;

                    // 设置series的data数据
                    series.forEach((item) => {
                        const valueArray = item.data;
                        const name = item.name;
                        item.data = { name, value: valueArray };
                    });
                    return data;
                }
            } else if (Object.is(data.series.type, 'area')) {
                data.series.type = 'line';
                data.series.areaStyle = {};
                Object.assign(data.series.areaStyle, { normal: {} });
                return data;
            } else {
                if (!data.series.data) {
                    this.option.series.data = [];
                    return this.option;
                }
            }
        }
        return data;
    }

    /**
     * 初始化图表
     *
     * @private
     * @memberof AppChart
     */
    private initCharts(ref: HTMLDivElement): void {
        if (ref) {
            const opt: any = {};
            opt.width = this.width ? this.width : ref.clientWidth;
            if (this.height) {
                opt.height = this.height;
            }
            this.$echarts = init(ref, null, opt);
        }
    }

}