'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var shared = require('@vue/shared');
var core = require('echarts/core');
var general = require('../../../../utils/src/general.js');
require('../../../../utils/index.js');
var core$1 = require('@vueuse/core');
var chart = require('./chart.js');
var exports$1 = require('../../../../utils/src/elementPlus/exports.js');

var _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{
    name: "GmChart",
    inheritAttrs: false
  },
  __name: "Chart",
  props: chart.chartProps,
  emits: { ...{}, ...chart.chartEmits },
  setup(__props, { expose: __expose }) {
    const props = __props;
    const attrs = vue.useAttrs();
    const root = vue.shallowRef();
    const chart$1 = vue.shallowRef();
    const manualOption = vue.shallowRef();
    const { autoresize, manualUpdate } = vue.toRefs(props);
    const realOption = vue.computed(() => manualOption.value || props.option || null);
    const realTheme = vue.computed(() => props.theme);
    const realInitOptions = vue.computed(() => props.initOptions);
    const realUpdateOptions = vue.computed(() => props.updateOptions);
    const nonEventAttrs = vue.computed(() => general.omitOnEvents(attrs));
    const nativeListeners = {};
    const realListeners = {};
    Object.keys(attrs).filter((key) => shared.isOn(key)).forEach((key) => {
      let event = key.charAt(2).toLowerCase() + key.slice(3);
      if (event.indexOf("native:") === 0) {
        const nativeKey = `on${event.charAt(7).toUpperCase()}${event.slice(8)}`;
        nativeListeners[nativeKey] = attrs[key];
        return;
      }
      if (event.slice(Math.max(0, event.length - 4)) === "Once") {
        event = `~${event.slice(0, Math.max(0, event.length - 4))}`;
      }
      realListeners[event] = attrs[key];
    });
    function init(option) {
      if (!root.value) {
        return;
      }
      const instance = chart$1.value = core.init(root.value, realTheme.value, realInitOptions.value);
      if (props.group) {
        instance.group = props.group;
      }
      Object.keys(realListeners).forEach((key) => {
        let handler = realListeners[key];
        if (!handler) {
          return;
        }
        let event = key.toLowerCase();
        if (event.charAt(0) === "~") {
          event = event.slice(1);
          handler.__once__ = true;
        }
        let target = instance;
        if (event.indexOf("zr:") === 0) {
          target = instance.getZr();
          event = event.slice(3);
        }
        if (handler.__once__) {
          delete handler.__once__;
          const raw = handler;
          handler = (...args) => {
            raw(...args);
            target.off(event, handler);
          };
        }
        target.on(event, handler);
      });
      function resize() {
        if (instance && !instance.isDisposed()) {
          instance.resize();
        }
      }
      function commit() {
        const opt = option || realOption.value;
        if (opt) {
          instance.setOption(opt, realUpdateOptions.value);
        }
      }
      if (autoresize.value) {
        vue.nextTick(() => {
          resize();
          commit();
        });
      } else {
        commit();
      }
    }
    function setOption(option, updateOptions) {
      if (props.manualUpdate) {
        manualOption.value = option;
      }
      if (!chart$1.value) {
        init(option);
      } else {
        chart$1.value.setOption(option, updateOptions || {});
      }
    }
    function cleanup() {
      if (chart$1.value) {
        chart$1.value.dispose();
        chart$1.value = void 0;
      }
    }
    let unwatchOption = null;
    vue.watch(
      manualUpdate,
      (manualUpdate2) => {
        if (typeof unwatchOption === "function") {
          unwatchOption();
          unwatchOption = null;
        }
        if (!manualUpdate2) {
          unwatchOption = vue.watch(
            () => props.option,
            (option, oldOption) => {
              if (!option) {
                return;
              }
              if (!chart$1.value) {
                init();
              } else {
                chart$1.value.setOption(option, {
                  // mutating `option` will lead to `notMerge: false` and
                  // replacing it with new reference will lead to `notMerge: true`
                  notMerge: option !== oldOption,
                  ...realUpdateOptions.value
                });
              }
            },
            { deep: true }
          );
        }
      },
      {
        immediate: true
      }
    );
    vue.watch(
      [realTheme, realInitOptions],
      () => {
        cleanup();
        init();
      },
      {
        deep: true
      }
    );
    vue.watchEffect(() => {
      if (props.group && chart$1.value) {
        chart$1.value.group = props.group;
      }
    });
    core$1.useResizeObserver(root, () => {
      if (!autoresize.value) {
        return;
      }
      const autoresizeOptions = autoresize.value === true ? {} : autoresize.value;
      const { throttle: wait, onResize } = autoresizeOptions;
      const callback = () => {
        chart$1.value?.resize();
        onResize?.();
      };
      const resizeCallback = wait ? core.throttle(callback, wait) : callback;
      resizeCallback();
    });
    const { exposeFns } = exports$1.getGmObjExports(chart$1, chart.chartExposeEvents);
    vue.onMounted(() => {
      init();
    });
    vue.onBeforeUnmount(() => {
      cleanup();
    });
    __expose({
      chart: chart$1,
      root,
      setOption,
      nonEventAttrs,
      nativeListeners,
      ...exposeFns
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock(
        "div",
        vue.mergeProps({
          ref_key: "root",
          ref: root
        }, nonEventAttrs.value),
        null,
        16
        /* FULL_PROPS */
      );
    };
  }
});

exports.default = _sfc_main;
//# sourceMappingURL=Chart.vue2.js.map
