import { defineComponent as p, useCssVars as O, ref as m, onMounted as h, watch as a, createElementBlock as g, openBlock as v, createVNode as w, unref as H } from "vue";
import { cloneDeep as n, isEqual as r } from "lodash";
import T from "@vueform/slider";
import { SHJDatasourceV2 as E } from "../../commons/core/datasource/index.mjs";
import "@vueform/slider/themes/default.css";
const S = { class: "zerov-widget-slider" }, V = p({ name: "zv-interaction-slider" }), D = /* @__PURE__ */ p({
  ...V,
  props: {
    basicOption: {},
    sources: {},
    useEvents: {},
    uuid: {}
  },
  emits: ["on-change"],
  setup(l, { expose: d, emit: c }) {
    O((s) => ({
      b6a7cf50: s.basicOption.css.sliderBg,
      "231eb75c": s.basicOption.css.sliderConnectBg,
      "5d420793": s.basicOption.css.sliderHeight + "px",
      a164e470: s.basicOption.css.sliderRadius + "px",
      "2ba8fe60": s.basicOption.css.sliderHandleBg,
      "0965473c": s.basicOption.css.sliderHandleWidth + "px",
      "8e32e6ea": s.basicOption.css.sliderHandleHeight + "px",
      "0af212c0": s.basicOption.css.sliderHandleRadius + "px",
      "428cad32": s.basicOption.css.sliderHandleRingWidth + "px",
      "6e2786d0": s.basicOption.css.sliderHandleRingColor,
      b47740a6: s.basicOption.css.sliderTooltipFontSize + "px",
      "3b910d16": s.basicOption.css.sliderTooltipFontWeight + "px",
      "2dfcac35": s.basicOption.css.sliderTooltipBg,
      e2416d1a: s.basicOption.css.sliderTooltipColor,
      "4b62446a": s.basicOption.css.sliderTooltipRadius + "px",
      "7bd98074": s.basicOption.css.sliderTooltipPy + "px",
      "13f85395": s.basicOption.css.sliderTooltipPx + "px",
      c4f214da: s.basicOption.css.sliderTooltipArrowSize + "px",
      "319615f0": s.basicOption.css.sliderTooltipDistance + "px"
    }));
    const i = l, b = c, t = m(20), o = () => {
      E.parse({
        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 u = (s) => {
      b("on-change", {
        data: s,
        event: s
      }), window.SHJParseEvent(i.useEvents, "on-change", {
        data: s,
        event: s
      });
    };
    return a(
      () => n(i.basicOption),
      (s, e) => {
        r(s, e) || o();
      },
      { deep: !0 }
    ), a(
      () => n(i.sources),
      (s, e) => {
        r(s, e) || o();
      },
      { deep: !0 }
    ), d({
      refresh: () => o(),
      refreshView: () => o(),
      refreshData: () => o()
    }), (s, e) => (v(), g("div", S, [
      w(H(T), {
        modelValue: t.value,
        "onUpdate:modelValue": e[0] || (e[0] = (f) => t.value = f),
        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: u
      }, null, 8, ["modelValue", "min", "max", "step", "tooltips", "show-tooltip", "tooltip-position", "format"])
    ]));
  }
});
export {
  D as default
};
