/*
 * 特别声明：本技术材料受《中华人民共和国著作权法》、《计算机软件保护条例》等法律、法规、行政
 * 规章以及有关国际条约的保护，赞同科技享有知识产权、保留一切权利并视其为技术秘密。未经本公司书
 * 面许可，任何人不得擅自（包括但不限于：以非法的方式复制、传播、展示、镜像、上载、下载）使用，
 * 不得向第三方泄露、透露、披露。否则，本公司将依法追究侵权者的法律责任。特此声明！
 *
 * Special Declaration: These technical material reserved as the technical secrets by AGREE 
 * TECHNOLOGY have been protected by the "Copyright Law" "ordinances on Protection of Computer 
 * Software" and other relevant administrative regulations and international treaties. Without 
 * the written permission of the Company, no person may use (including but not limited to the 
 * illegal copy, distribute, display, image, upload, and download) and disclose the above 
 * technical documents to any third party. Otherwise, any infringer shall afford the legal 
 * liability to the company.
 */

import {Composite} from "widget/Composite";
import {Widget} from "widget/Widget";
import {VisibilityChangeUtil} from "util/VisibilityChangeUtil";

export class EChart extends Widget {
    protected echart: Echart;
    protected option = {};
    protected $chartNode: JQuery;
    protected resizeFunction: any;
    protected static template: string = `
    <div>
    <div style="width:100%;height:100%"></div>
    <div>
    `;
    private hadVisibilityListener: boolean = false;
    constructor(parentId: string, id: string, style: number) {
        super(parentId, id, style);

        let own = this;
        this.$thisNode = $(EChart.template).attr({ id: this.id });
        this.$chartNode = this.$thisNode.find("div");

        this.resizeFunction = function () {
            if (own.echart) {
                if (own.$thisNode.is(":visible")) {
                    setTimeout(function () {
                        own.echart.resize();
                    }, 380);
                } else {
                    if (!own.hadVisibilityListener) {
                        VisibilityChangeUtil.addVisibilityListener(own.$thisNode, function (visible: boolean) {
                            if (visible) {
                                own.echart.resize();
                                VisibilityChangeUtil.removeVisibilityListener(own.$thisNode);
                                own.hadVisibilityListener = false;
                            }
                        });
                        own.hadVisibilityListener = true;
                    }
                }
            }
        };

        $(window).on("resize", this.resizeFunction);
    }

    //addOption根据传入的mapString对之前的option进行覆盖式写入
    addOption(args: { option: string }) {
        let option = JSON.parse(args.option);

        $.extend(true, this.option, option);
        //layout完成后才进行option的写入
        if (this.echart) {
            this.echart.setOption(this.option);
        }
    }

    //setOption每次都根据传入的mapString整个改变option
    setOption(args: { option: string }) {
        let option = JSON.parse(args.option);

        if (this.echart) {
            this.option = option;
            this.echart.setOption(option);
        } else {
            this.option = option;
        }
    }

    dispose() {
        $(window).off("resize", this.resizeFunction);
        super.dispose();
    }

    postLayout() {
        super.postLayout();
        //layout后组件的高度才能够确定，echarts.init()需要width和height确定的div
        if (!this.echart) {
            this.echart = echarts.init(this.$chartNode.get(0) as HTMLDivElement);

            if (this.option) {
                this.echart.setOption(this.option);
            }
        }
        this.echart.resize();
    }

    clear() {
        if (this.echart) {
            this.echart.clear();
        }
        this.option = {};
    }
}
