import { defineComponent as p, useCssVars as m, ref as f, onMounted as h, watch as n, openBlock as g, createElementBlock as w, createVNode as v, unref as H } from "vue";
import { cloneDeep as a, isEqual as l } from "lodash";
import T from "@vueform/slider";
import "@vueform/slider/themes/default.css";
const E = { class: "zerov-widget-slider" }, S = p({ name: "zv-interaction-slider" }), R = /* @__PURE__ */ p({
  ...S,
  props: {
    basicOption: {},
    sources: {},
    useEvents: {},
    uuid: {}
  },
  emits: ["on-change"],
  setup(r, { expose: d, emit: c }) {
    m((s) => ({
      "2711d843": s.basicOption.css.sliderBg,
      71484911: s.basicOption.css.sliderConnectBg,
      "7431b6c8": s.basicOption.css.sliderHeight + "px",
      73858606: s.basicOption.css.sliderRadius + "px",
      "38483bea": s.basicOption.css.sliderHandleBg,
      47783366: s.basicOption.css.sliderHandleWidth + "px",
      "127d8000": s.basicOption.css.sliderHandleHeight + "px",
      "48ccc635": s.basicOption.css.sliderHandleRadius + "px",
      "5006499d": s.basicOption.css.sliderHandleRingWidth + "px",
      "3aa61ae6": s.basicOption.css.sliderHandleRingColor,
      "998407d0": s.basicOption.css.sliderTooltipFontSize + "px",
      "5dd58a7e": s.basicOption.css.sliderTooltipFontWeight + "px",
      "7c263dea": s.basicOption.css.sliderTooltipBg,
      "66525f9e": s.basicOption.css.sliderTooltipColor,
      "57ca98f6": s.basicOption.css.sliderTooltipRadius + "px",
      cba0edc2: s.basicOption.css.sliderTooltipPy + "px",
      "324e5c40": s.basicOption.css.sliderTooltipPx + "px",
      "3f40e688": s.basicOption.css.sliderTooltipArrowSize + "px",
      "16a2dd1a": s.basicOption.css.sliderTooltipDistance + "px"
    }));
    const i = r, u = c, t = f(20), o = () => {
      window.SHJDatasourceV2({
        tId: i.uuid,
        sources: i.sources,
        callback: ({ data: s }) => {
          try {
            window.SHJParseEvent(i.useEvents, "dataListener", s), t.value = s[0].data[0].value;
          } catch {
            window.SHJParseEvent(i.useEvents, "dataListener", null);
          }
        }
      });
    };
    h(() => o());
    const b = (s) => {
      u("on-change", {
        data: s,
        event: s
      }), window.SHJParseEvent(i.useEvents, "on-change", {
        data: s,
        event: s
      });
    };
    return n(
      () => a(i.basicOption),
      (s, e) => {
        l(s, e) || o();
      },
      { deep: !0 }
    ), n(
      () => a(i.sources),
      (s, e) => {
        l(s, e) || o();
      },
      { deep: !0 }
    ), d({
      refresh: () => o(),
      refreshView: () => o(),
      refreshData: () => o()
    }), (s, e) => (g(), w("div", E, [
      v(H(T), {
        modelValue: t.value,
        "onUpdate:modelValue": e[0] || (e[0] = (O) => t.value = O),
        class: "slider",
        min: s.basicOption.slider.min,
        max: s.basicOption.slider.max,
        step: s.basicOption.slider.step,
        tooltips: s.basicOption.slider.tooltips,
        "show-tooltip": s.basicOption.slider.showTooltip,
        "tooltip-position": s.basicOption.slider.tooltipPosition,
        format: {
          prefix: s.basicOption.slider.prefix,
          suffix: s.basicOption.slider.suffix,
          decimals: s.basicOption.slider.decimals
        },
        onChange: b
      }, null, 8, ["modelValue", "min", "max", "step", "tooltips", "show-tooltip", "tooltip-position", "format"])
    ]));
  }
});
export {
  R as default
};
