import { defineComponent, useAttrs, shallowRef, toRefs, computed, nextTick, watch, watchEffect, onMounted, onBeforeUnmount, createElementBlock, openBlock, mergeProps } from 'vue';
import { isOn } from '@vue/shared';
import { init, throttle } from 'echarts/core';
import { omitOnEvents } from '../../../../utils/src/general.mjs';
import '../../../../utils/index.mjs';
import { useResizeObserver } from '@vueuse/core';
import { chartExposeEvents, chartEmits, chartProps } from './chart.mjs';
import { getGmObjExports } from '../../../../utils/src/elementPlus/exports.mjs';

var _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    name: "GmChart",
    inheritAttrs: false
  },
  __name: "Chart",
  props: chartProps,
  emits: { ...{}, ...chartEmits },
  setup(__props, { expose: __expose }) {
    const props = __props;
    const attrs = useAttrs();
    const root = shallowRef();
    const chart = shallowRef();
    const manualOption = shallowRef();
    const { autoresize, manualUpdate } = toRefs(props);
    const realOption = computed(() => manualOption.value || props.option || null);
    const realTheme = computed(() => props.theme);
    const realInitOptions = computed(() => props.initOptions);
    const realUpdateOptions = computed(() => props.updateOptions);
    const nonEventAttrs = computed(() => omitOnEvents(attrs));
    const nativeListeners = {};
    const realListeners = {};
    Object.keys(attrs).filter((key) => 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$1(option) {
      if (!root.value) {
        return;
      }
      const instance = chart.value = 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) {
        nextTick(() => {
          resize();
          commit();
        });
      } else {
        commit();
      }
    }
    function setOption(option, updateOptions) {
      if (props.manualUpdate) {
        manualOption.value = option;
      }
      if (!chart.value) {
        init$1(option);
      } else {
        chart.value.setOption(option, updateOptions || {});
      }
    }
    function cleanup() {
      if (chart.value) {
        chart.value.dispose();
        chart.value = void 0;
      }
    }
    let unwatchOption = null;
    watch(
      manualUpdate,
      (manualUpdate2) => {
        if (typeof unwatchOption === "function") {
          unwatchOption();
          unwatchOption = null;
        }
        if (!manualUpdate2) {
          unwatchOption = watch(
            () => props.option,
            (option, oldOption) => {
              if (!option) {
                return;
              }
              if (!chart.value) {
                init$1();
              } else {
                chart.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
      }
    );
    watch(
      [realTheme, realInitOptions],
      () => {
        cleanup();
        init$1();
      },
      {
        deep: true
      }
    );
    watchEffect(() => {
      if (props.group && chart.value) {
        chart.value.group = props.group;
      }
    });
    useResizeObserver(root, () => {
      if (!autoresize.value) {
        return;
      }
      const autoresizeOptions = autoresize.value === true ? {} : autoresize.value;
      const { throttle: wait, onResize } = autoresizeOptions;
      const callback = () => {
        chart.value?.resize();
        onResize?.();
      };
      const resizeCallback = wait ? throttle(callback, wait) : callback;
      resizeCallback();
    });
    const { exposeFns } = getGmObjExports(chart, chartExposeEvents);
    onMounted(() => {
      init$1();
    });
    onBeforeUnmount(() => {
      cleanup();
    });
    __expose({
      chart,
      root,
      setOption,
      nonEventAttrs,
      nativeListeners,
      ...exposeFns
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(
        "div",
        mergeProps({
          ref_key: "root",
          ref: root
        }, nonEventAttrs.value),
        null,
        16
        /* FULL_PROPS */
      );
    };
  }
});

export { _sfc_main as default };
//# sourceMappingURL=Chart.vue2.mjs.map
