<template>
  <div class="bue-chart-box">
    <div class="bue-chart"></div>
  </div>
</template>

<script>
    import Echarts from "echarts";
    import {
        addResizeListener,
        removeResizeListener
    } from "./utils/resize-event";

    const ACTION_EVENTS = [
        "legendselectchanged",
        "legendselected",
        "legendunselected",
        "datazoom",
        "datarangeselected",
        "timelinechanged",
        "timelineplaychanged",
        "restore",
        "dataviewchanged",
        "magictypechanged",
        "geoselectchanged",
        "geoselected",
        "geounselected",
        "pieselectchanged",
        "pieselected",
        "pieunselected",
        "mapselectchanged",
        "mapselected",
        "mapunselected",
        "axisareaselected",
        "focusnodeadjacency",
        "unfocusnodeadjacency",
        "brush",
        "brushselected"
    ];

    const MOUSE_EVENTS = [
        "click",
        "dblclick",
        "mouseover",
        "mouseout",
        "mousedown",
        "mouseup",
        "globalout"
    ];

    export default {
        name: 'bue-chart',
        props: {
            options: Object,
            theme: [String, Object],
            initOptions: Object,
            group: String,
            autoResize: Boolean
        },
        data() {
            return {
                chart: null
            }
        },
        watch: {
            options: {
                deep: true,
                handler(options) {
                    if (!this.chart) {
                        if (Object.keys(options).length) {
                            this.init();
                        }
                    } else {
                        if (Object.keys(options).length) {
                            this.chart.setOption(options, true);
                        } else {
                            this.chart.clear();
                        }
                    }
                }
            },
            group(group) {
                this.chart.group = group
            },
            theme() {
                this.dispose();
                this.init();
            }
        },
        methods: {
            _callMethod(method, ...args) {
                if (!this.chart) {
                    return
                }
                return this.chart[method](...args);
            },
            init() {
                if (this.chart) {
                    return
                }
                let $el = this.$el.children[0];
                let chart = Echarts.init($el, this.theme || "default", this.initOptions);
                this.chart = chart;
                if (this.group) {
                    chart.group = this.group;
                }

                try {
                    this.options && "series" in this.options && chart.setOption(this.options, true);
                } catch (e) {
                    // console.log(e);
                }

                ACTION_EVENTS.forEach((event) => {
                    chart.on(event, (params) => {
                        this.$emit(event, params);
                    });
                });
                MOUSE_EVENTS.forEach((event) => {
                    chart.on(event, (params) => {
                        this.$emit(event, params);
                    });
                });
            },
            dispose() {
                this._callMethod("dispose");
                this.chart = null;
            },
            resize() {
                this._callMethod("resize");
            },
            clear() {
                this._callMethod("clear");
            },
            mergeOptions(options) {
                this._callMethod("setOption", options);
            },
            dispatchAction(payload) {
                this._callMethod("dispatchAction", payload);
            },
            convertToPixel(finder, value) {
                return this._callMethod("convertToPixel", finder, value);
            },
            convertFromPixel(finder, value) {
                return this._callMethod("convertFromPixel", finder, value);
            },
            containPixel(finder, value) {
                return this._callMethod("containPixel", finder, value);
            },
            showLoading(type, options) {
                this._callMethod("showLoading", type, options);
            },
            hideLoading() {
                this._callMethod("hideLoading")
            },
            getDataURL(options) {
                return this._callMethod("getDataURL", options);
            },
            getConnectedDataURL(options) {
                return this._callMethod("getConnectedDataURL", options);
            },
            connect(group) {
                if (typeof group != "string") {
                    group = group.map((chart) => chart.chart);
                }
                Echarts.connect(group);
            },
            disconnect(group) {
                Echarts.disConnect(group);
            },
            registerMap(...args) {
                Echarts.registerMap(...args);
            },
            registerTheme(...args) {
                Echarts.registerTheme(...args);
            }
        },
        mounted() {
            if (this.autoResize) {
                addResizeListener(this.$el, this.resize);
                this.init();
            }
        },
        beforeDestroy() {
            if(this.autoResize) {
                removeResizeListener(this.$el, this.resize);
            }
        },
        activated() {
            if (this.autoResize) {
                addResizeListener(this.$el, this.resize);
            }
        },
        deactivated() {
            if(this.autoResize) {
                removeResizeListener(this.$el, this.resize);
            }
        }
    };
</script>

<style lang="scss">
  .bue-chart-box {
    width: 100%;
    height: 100%;

    .bue-chart {
      width: 100%;
      height: 100%;
      background-color: transparent !important;
    }
  }
</style>
