'use strict';

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

var vue = require('vue');
var core = require('@vueuse/core');
var index = require('../../utils/index.js');

const _hoisted_1 = ["id"];
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{
    name: "FChart"
  },
  __name: "index",
  props: {
    options: { default: () => ({}) },
    id: { default: () => Math.random().toString(36).substring(2, 8) },
    theme: { default: "" },
    isEmpty: { type: [Boolean, Function], default: false },
    description: { default: "\u6682\u65E0\u6570\u636E" }
  },
  setup(__props, { emit: __emit }) {
    const { proxy } = vue.getCurrentInstance();
    const props = __props;
    const echartRef = vue.ref();
    const chart = vue.ref();
    const emits = __emit;
    const events = Object.entries(vue.useAttrs());
    const renderChart = () => {
      chart.value = vue.markRaw(proxy.$echarts.init(echartRef.value, props.theme));
      setOption(props.options);
      emits("chart", chart.value);
      events.forEach(([key, value]) => {
        if (key.startsWith("on") && !key.startsWith("onChart")) {
          const on = index.toLine(key).substring(3);
          chart.value.on(on, (...args) => emits(on, ...args));
        }
      });
      core.useResizeObserver(echartRef.value, resizeChart);
    };
    const resizeChart = index.debounce(
      () => {
        var _a;
        (_a = chart.value) == null ? void 0 : _a.resize();
      },
      300,
      true
    );
    const setOption = index.debounce(
      async (data) => {
        if (!chart.value) return;
        chart.value.setOption(data, true, true);
        await vue.nextTick();
        resizeChart();
      },
      300,
      true
    );
    const formatEmpty = vue.computed(() => {
      if (typeof props.isEmpty === "function") {
        return props.isEmpty(props.options);
      }
      return props.isEmpty;
    });
    vue.watch(
      () => props.options,
      async (nw) => {
        await vue.nextTick();
        setOption(nw);
      },
      { deep: true }
    );
    vue.watch(
      () => props.theme,
      async () => {
        chart.value.dispose();
        renderChart();
      }
    );
    vue.onMounted(() => {
      renderChart();
    });
    vue.onBeforeUnmount(() => {
      chart.value.dispose();
      chart.value = null;
    });
    return (_ctx, _cache) => {
      const _component_el_empty = vue.resolveComponent("el-empty");
      return vue.openBlock(), vue.createElementBlock(
        "div",
        vue.mergeProps({ class: "f-chart" }, _ctx.$attrs),
        [
          vue.withDirectives(vue.createElementVNode("div", {
            class: "f-chart-container",
            id: __props.id,
            ref_key: "echartRef",
            ref: echartRef
          }, null, 8, _hoisted_1), [
            [vue.vShow, !formatEmpty.value]
          ]),
          formatEmpty.value ? vue.renderSlot(_ctx.$slots, "empty", { key: 0 }, () => [
            vue.createVNode(_component_el_empty, vue.mergeProps(_ctx.$attrs, { description: __props.description }), null, 16, ["description"])
          ]) : vue.createCommentVNode("v-if", true),
          vue.renderSlot(_ctx.$slots, "default")
        ],
        16
        /* FULL_PROPS */
      );
    };
  }
});

exports.default = _sfc_main;
