import { defineComponent, toRefs, ref, onMounted, onUnmounted, watch, openBlock, createElementBlock, normalizeStyle, unref } from "vue";
import { initChart, destroyChart, updatedChartOption, tooltipAnimationFunc } from "./echartsFunc.mjs";
import { debounce } from "lodash";
import "./EchartsContainer.vue_vue_type_style_index_0_scoped_true_lang.mjs";
import _export_sfc from "../../../_virtual/plugin-vue_export-helper.mjs";
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "EchartsContainer",
  props: {
    style: { default: () => {
      return {
        width: 300,
        height: 300
      };
    } },
    options: null,
    tooltipAnimation: { type: Boolean, default: false },
    theme: null
  },
  setup(__props) {
    const props = __props;
    const { options, style, tooltipAnimation } = toRefs(props);
    let width = style.value.width;
    let height = style.value.height;
    let chartBox = ref();
    let myChart;
    onMounted(() => {
      if (timer)
        clearTimeout(timer);
      if (chartBox.value) {
        myChart = initChart(chartBox.value, options.value);
        myChart.on("click", function(params) {
          console.log(params);
        });
        myChart.on("mouseover", (params) => {
          controlAnimate = false;
        });
        myChart.on("mouseout", (params) => {
          controlAnimate = true;
        });
        if (tooltipAnimation.value) {
          console.log("onMounted\u7684\u72B6\u6001");
          chartAnimation();
        }
        window.onresize = debounce(() => {
          myChart.resize();
        });
      }
    });
    onUnmounted(() => {
      destroyChart(myChart);
      chartBox.value = null;
      window.onresize = null;
      if (timer)
        clearTimeout(timer);
    });
    watch(
      () => props.options,
      (newOptions) => {
        updatedChartOption(myChart, newOptions);
      },
      {
        deep: true
      }
    );
    watch(
      () => props.tooltipAnimation,
      () => {
        chartAnimation();
      }
    );
    watch(
      () => props.style,
      () => {
        debounce(() => {
          myChart.resize();
        })();
      }
    );
    watch(
      () => props.theme,
      (n) => {
        updatedChartOption(myChart, n);
      }
    );
    let curIndex = 0;
    let lastIndex = 0;
    let controlAnimate = true;
    let timer;
    const chartAnimation = () => {
      const { options: options2, tooltipAnimation: tooltipAnimation2 } = toRefs(props);
      if (tooltipAnimation2 && controlAnimate) {
        tooltipAnimationFunc(myChart, curIndex, lastIndex);
        lastIndex = curIndex;
        curIndex++;
        if (options2.value) {
          const type = options2.value.series[0].type;
          let xAxisLen;
          if (type == "pie") {
            xAxisLen = options2.value.series[0].data.length;
          } else {
            xAxisLen = options2.value.xAxis.data.length;
          }
          if (curIndex >= xAxisLen) {
            curIndex = 0;
          }
        }
        timer = setTimeout(() => {
          chartAnimation();
        }, 1e3 * 2);
      }
    };
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        ref_key: "chartBox",
        ref: chartBox,
        class: "echartsBox",
        style: normalizeStyle({ width: unref(width), height: unref(height) })
      }, null, 4);
    };
  }
});
var EchartsContainer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-563965e6"]]);
export { EchartsContainer as default };
