import { defineComponent as it, inject as yt, ref as P, reactive as X, computed as D, onMounted as dt, nextTick as tt, watch as et, openBlock as E, createElementBlock as N, normalizeStyle as Y, normalizeClass as q, withDirectives as kt, withKeys as Q, createElementVNode as ot, unref as bt, provide as Ct, createVNode as rt, Fragment as ut, createBlock as gt, renderList as pt, createCommentVNode as ht } from "vue";
import { C as k } from "../Shared/base-PQGakkrl.js";
import { D as Mt } from "../Shared/drag-CzfhSB0g.js";
import "js-cookie";
import "decimal.js";
import { tooltipDirectives as Dt, tooltipCommon as Z } from "../Web/__directive__/Tooltip.js";
const Et = /* @__PURE__ */ it({
  name: "ClSliderBar",
  __name: "Bar",
  props: {
    left: {
      type: Number,
      default: 0
    },
    width: {
      type: Number,
      default: 0
    },
    isDisabled: {
      type: Boolean,
      default: !1
    },
    isVertical: {
      type: Boolean,
      default: !1
    },
    isBarDrag: {
      type: Boolean,
      default: !1
    }
  },
  emits: ["onMoveStart", "onMoveIng", "onMoveEnd", "onMouseover", "onMouseout", "onClick"],
  setup(v, { emit: O }) {
    const i = v, u = O, R = yt("$SliderTop"), I = P(null), M = X({
      isHover: !1,
      left: i.left
    }), f = {
      isClick: !1,
      dragStart: 0,
      dragStartRatio: 0
    }, c = D(() => ({
      "slider-bar": !0,
      "slider-bar-drag": i.isBarDrag
    })), l = D(() => {
      const m = {};
      return i.isVertical ? (m.bottom = `${M.left}%`, m.height = `${i.width}%`) : (m.left = `${M.left}%`, m.width = `${i.width}%`), m;
    }), B = (m, g) => {
      f.isClick = !0, f.dragStart = i.isVertical ? g.clientY : g.clientX, f.dragStartRatio = i.left, u("onMoveStart");
    }, _ = (m, g) => {
      f.isClick = !1;
      let T = 0;
      i.isVertical ? T = f.dragStart - g.clientY : T = g.clientX - f.dragStart;
      const V = R.getDragValueInfo(T, f.dragStartRatio);
      M.left = V.ratio, u("onMoveIng", V.ratio);
    }, h = (m) => {
      f.isClick ? u("onClick", m) : u("onMoveEnd"), f.isClick = !1;
    }, y = () => {
      const m = {
        start(g, T) {
          let V = !1;
          return !i.isDisabled && i.isBarDrag && g.buttons === 1 && (V = !0, B(g, T)), V;
        },
        ing: (g, T) => {
          _(g, T);
        },
        end: (g) => {
          h(g);
        }
      };
      new Mt(I.value, m);
    };
    dt(() => {
      tt(() => {
        y();
      });
    }), et(
      () => i.left,
      (m, g) => {
        m !== g && m !== M.left && (M.left = m);
      }
    );
    const z = (m) => {
      !i.isDisabled && !i.isBarDrag && u("onClick", m);
    }, j = () => {
      u("onMouseover");
    }, A = () => {
      u("onMouseout");
    };
    return (m, g) => (E(), N("div", {
      ref_key: "refElBar",
      ref: I,
      class: q(c.value),
      style: Y(l.value),
      onMouseover: j,
      onMouseout: A,
      onClick: z
    }, null, 38));
  }
}), ct = /* @__PURE__ */ it({
  name: "ClSliderButton",
  __name: "Button",
  props: {
    className: String,
    value: [String, Number],
    ratio: {
      type: Number,
      default: 0
    },
    isDisabled: {
      type: Boolean,
      default: !1
    },
    isVertical: {
      type: Boolean,
      default: !1
    },
    tooltipFormat: String
  },
  emits: ["onMoveIng", "onMoveEnd", "onDblClick"],
  setup(v, { expose: O, emit: i }) {
    const u = v, R = i, I = yt("$SliderTop"), M = Dt, f = P(null), c = X({
      isHover: !1,
      ratio: u.ratio,
      value: u.value
    }), l = {
      dragStart: 0,
      dragStartRatio: 0,
      isMoveIng: !1
    }, B = D(() => {
      let s = c.value;
      if (s) {
        const r = u.tooltipFormat;
        s = k.getFormatThousands(s.toString()), r && !k.isEmpty(r) && (s = k.convertStringFormat(r, { _value: s }));
      }
      return s;
    }), _ = D(() => u.isVertical ? "right" : "top"), h = D(() => {
      const s = {
        "slider-button": !0,
        hover: c.isHover
      };
      return u.className && !k.isEmpty(u.className) && u.className.split(" ").forEach((r) => {
        k.isEmpty(r) || (s[r] = !0);
      }), s;
    }), y = D(() => {
      const s = {};
      return u.isVertical ? s.bottom = `${c.ratio}%` : s.left = `${c.ratio}%`, s;
    }), z = () => {
      Z.show(f.value);
    }, j = () => {
      Z.hide(f.value);
    }, A = (s, r) => {
      let S = 0;
      u.isVertical ? S = l.dragStart - r.clientY : S = r.clientX - l.dragStart;
      const $ = I.getDragValueInfo(S, l.dragStartRatio);
      return c.ratio = $.ratio, c.value = $.value, $;
    }, m = (s, r) => {
      l.dragStart = u.isVertical ? r.clientY : r.clientX, l.dragStartRatio = u.ratio;
    }, g = (s, r) => {
      const S = A(s, r);
      Z.show(f.value), R("onMoveIng", { value: S.ratio, runType: "drag" });
    }, T = (s, r) => {
      A(s, r), c.isHover || f.value === s.target || f.value?.contains(s.target) || Z.hide(f.value), R("onMoveEnd", { runType: "drag" });
    }, V = (s) => {
      l.isMoveIng = !0;
      const r = I.getButtonMoveValueInfo(s, u.ratio);
      c.ratio = r.ratio, c.value = r.value, R("onMoveIng", { value: r.ratio, runType: "keydown" });
    }, C = () => {
      const s = {
        start(r, S) {
          let $ = !1;
          return !u.isDisabled && r.buttons === 1 && ($ = !0, m(r, S)), $;
        },
        ing: (r, S) => {
          g(r, S);
        },
        end: (r, S) => {
          T(r, S);
        }
      };
      new Mt(f.value, s);
    };
    dt(() => {
      tt(() => {
        C();
      });
    }), et(
      () => u.value,
      (s, r) => {
        s !== r && s !== c.value && (c.value = s);
      }
    ), et(
      () => u.ratio,
      (s, r) => {
        s !== r && s !== c.ratio && (c.ratio = s);
      }
    );
    const J = (s) => {
      u.isDisabled || (s.preventDefault(), s.stopPropagation(), V("left"));
    }, G = (s) => {
      u.isDisabled || (s.preventDefault(), s.stopPropagation(), V("right"));
    }, at = () => {
      u.isDisabled || (c.isHover = !0);
    }, K = () => {
      u.isDisabled || (c.isHover = !1, l.isMoveIng && (l.isMoveIng = !1, R("onMoveEnd", { runType: "keydown" })));
    }, W = () => {
      u.isDisabled || R("onDblClick");
    };
    return O({
      showTooltip: () => {
        z();
      },
      hideTooltip: () => {
        j();
      }
    }), (s, r) => kt((E(), N("div", {
      ref_key: "refElButton",
      ref: f,
      class: q(h.value),
      style: Y(y.value),
      tabindex: "0",
      onDblclick: W,
      onFocus: at,
      onBlur: K,
      onKeydown: [
        Q(J, ["down"]),
        Q(G, ["up"]),
        Q(J, ["left"]),
        Q(G, ["right"])
      ]
    }, [...r[0] || (r[0] = [
      ot("div", { class: "slider-button-icon" }, null, -1)
    ])], 38)), [
      [
        bt(M),
        { trigger: ["hover", "focus"], position: _.value, html: B.value, updRefreshInx: c.ratio },
        void 0,
        { black: !0 }
      ]
    ]);
  }
}), It = /* @__PURE__ */ it({
  name: "ClSliderDot",
  __name: "Dot",
  props: {
    itemInfo: {
      type: Object,
      default: () => ({})
    },
    isHover: {
      type: Boolean,
      default: !1
    },
    isVertical: {
      type: Boolean,
      default: !1
    },
    isTooltip: {
      type: Boolean,
      default: !0
    },
    tooltipFormat: String
  },
  emits: ["onMouseover", "onMouseout", "onClick"],
  setup(v, { emit: O }) {
    const i = v, u = O, R = Dt, I = D(() => i.isVertical ? "right" : "top"), M = D(() => {
      let h = i.itemInfo.value;
      if (h) {
        const y = i.tooltipFormat;
        h = k.getFormatThousands(h.toString()), y && !k.isEmpty(y) && (h = k.convertStringFormat(y, { _value: h }));
      }
      return h;
    }), f = D(() => ({
      "slider-dot": !0,
      "slider-dot-active": i.itemInfo.isActive,
      "slider-dot-hide": i.itemInfo.isHide,
      hover: i.isHover
    })), c = D(() => {
      const h = {};
      return i.isVertical ? h.bottom = `${i.itemInfo.ratio}%` : h.left = `${i.itemInfo.ratio}%`, h;
    }), l = () => {
      u("onMouseover");
    }, B = () => {
      u("onMouseout");
    }, _ = () => {
      u("onClick");
    };
    return (h, y) => kt((E(), N("div", {
      class: q(f.value),
      style: Y(c.value),
      onMouseover: l,
      onMouseout: B,
      onClick: _
    }, [...y[0] || (y[0] = [
      ot("div", { class: "slider-dot-icon" }, null, -1)
    ])], 38)), [
      [
        bt(R),
        { init: v.isTooltip, position: I.value, html: M.value },
        void 0,
        {
          black: !0,
          hover: !0
        }
      ]
    ]);
  }
}), wt = { class: "slider-container" }, Nt = {
  key: 2,
  class: "slider-dots"
}, _t = {
  key: 0,
  class: "slider-marks"
}, xt = ["innerHTML", "onMouseover"], Lt = /* @__PURE__ */ it({
  name: "ClSlider",
  __name: "Index",
  props: {
    className: String,
    value: [String, Number],
    min: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 100
    },
    disabled: {
      type: Boolean,
      default: !1
    },
    isRange: {
      type: Boolean,
      default: !1
    },
    isBarDrag: {
      type: Boolean,
      default: !1
    },
    splitNumber: {
      type: Number,
      default: 0
    },
    isShowDot: {
      type: Boolean,
      default: !0
    },
    isShowDotActive: {
      type: Boolean,
      default: !0
    },
    marks: {
      type: Array,
      default: () => []
    },
    isVertical: {
      type: Boolean,
      default: !1
    },
    verticalHeight: String,
    size: {
      type: String,
      default: "large",
      // large | small
      validator: (v) => ["large", "small"].indexOf(v) > -1
    },
    numType: {
      type: String,
      default: "int",
      // int | float2 | float3
      validator: (v) => ["int", "float2", "float3"].indexOf(v) > -1
    },
    tooltipFormat: String
  },
  emits: ["update:value", "onChange"],
  setup(v, { emit: O }) {
    const i = v, u = O, R = P(null), I = P(null), M = P(null), f = X({
      keyIndex: `slider-${k.getRandom(8)}`,
      markHoverIndex: -1
    }), c = X({
      left: 0,
      width: 0
    }), l = X({
      start: i.min,
      end: i.min,
      startRatio: 0,
      endRatio: 0
    }), B = P([]), _ = P([]), h = D(() => Math.abs(i.max - i.min)), y = D(() => i.marks.length > 0), z = D(() => {
      const { isRange: e, isBarDrag: t } = i;
      let o = !1;
      return e && (o = t), o;
    }), j = (e) => {
      const t = {};
      return i.isVertical ? t.bottom = `${e.ratio}%` : t.left = `${e.ratio}%`, k.isEmpty(e.color) || (t.color = e.color), t;
    }, A = D(() => {
      const e = {
        "panel-slider": !0,
        "slider-disabled": i.disabled,
        "slider-vertical": i.isVertical,
        "slider-level": !i.isVertical
      };
      let t = i.size;
      return k.isEmpty(t) && (t = "large"), e[`slider-${t}`] = !0, i.className && !k.isEmpty(i.className) && i.className.split(" ").forEach((o) => {
        k.isEmpty(o) || (e[o] = !0);
      }), e;
    }), m = D(() => {
      const e = {};
      return i.isVertical && (e.height = i.verticalHeight), e;
    }), g = (e) => {
      const t = e ? e.start : l.start, o = e ? e.end : l.end;
      let a = t, n = o;
      a > n && (a = o, n = t);
      const d = i.isRange ? `${a},${n}` : n.toString();
      u("update:value", d), u("onChange", d, { start: a, end: n });
    }, T = (e, t = 2) => Number((e * 100).toFixed(t)), V = (e) => {
      const t = h.value;
      return t > 0 ? T((e - i.min) / t) : 0;
    }, C = (e) => {
      let t = 0;
      if (e <= 0)
        t = i.min;
      else if (e >= 100)
        t = i.max;
      else {
        const { numType: o } = i, n = h.value * e / 100, d = k.getValueByFormat(n.toString(), o, { isThousands: !1 });
        if (t = i.min + Number(d), k.isExistValue(["float2", "float3"], o)) {
          const p = t.toString(), b = Number(p.replace("float", ""));
          k.isExistValue(p, ".") && p.split(".")[1].length > b && (t = Number(t.toFixed(b)));
        }
      }
      return t;
    }, J = (e) => {
      let t = Number(e), o = !0;
      return t <= i.min ? (t = i.min, o = !1) : t >= i.max && (t = i.max, o = !1), { value: t, check: o };
    }, G = () => {
      if (y.value) {
        const e = [];
        i.marks.forEach((t) => {
          const o = k.getJsonClone(t);
          o.value = Number(o.value), o.ratio = V(o.value), e.push(o);
        }), _.value = e;
      }
    }, at = () => {
      const e = [];
      if (y.value)
        _.value.forEach((t) => {
          e.push({ ratio: t.ratio, value: t.value, isActive: !1, isHide: !1 });
        });
      else if (i.splitNumber > 1) {
        const t = Number((100 / i.splitNumber).toFixed()), o = t / 2;
        for (let a = 1; a < i.splitNumber; a++) {
          const n = t * a, d = C(n);
          e.push({
            value: d,
            ratio: n,
            isActive: !1,
            isHide: !1,
            left: n - o,
            right: n + o
          });
        }
      }
      B.value = e;
    }, K = () => {
      if (B.value.length > 0) {
        const { isShowDot: e, isShowDotActive: t, min: o, max: a } = i, n = y.value, d = c.left, p = d + c.width, b = [];
        B.value.forEach((w) => {
          const x = k.getJsonClone(w), H = w.ratio >= d && w.ratio <= p;
          x.isActive = H;
          let F = !1;
          n ? F = !0 : e ? (F = !0, H && (t ? F = !0 : F = !1)) : F = !1, (x.ratio === o || x.ratio === a) && (F = !1), x.isHide = !F, b.push(x);
        }), B.value = b;
      }
    }, W = (e) => {
      const t = e.startRatio > e.endRatio ? e.endRatio : e.startRatio, o = Math.abs(e.endRatio - e.startRatio);
      c.left = t, c.width = o;
    }, L = (e) => {
      tt(() => {
        i.isRange ? e ? (I.value?.showTooltip(), M.value?.showTooltip()) : (I.value?.hideTooltip(), M.value?.hideTooltip()) : e ? M.value?.showTooltip() : M.value?.hideTooltip();
      });
    }, U = (e) => {
      W(e), l.start = e.start, l.end = e.end, l.startRatio = e.startRatio, l.endRatio = e.endRatio, K();
    }, s = (e) => {
      let t, o;
      if (e && !k.isEmpty(e)) {
        const d = e.toString().split(","), p = J(d[0]);
        if (i.isRange) {
          if (t = p.value, o = t, d.length > 1) {
            const b = J(d[1]);
            b.value > t && (o = b.value);
          }
        } else
          t = i.min, o = p.value;
      } else
        t = i.min, o = i.min;
      const a = V(t), n = V(o);
      U({ start: t, end: o, startRatio: a, endRatio: n });
    }, r = (e) => {
      let t = T(e);
      const o = B.value;
      if (!y.value && o.length > 0) {
        if (t < o[0].left)
          t = 0;
        else if (t > o[o.length - 1].right)
          t = 100;
        else
          for (let a = 0; a < o.length; a++)
            if (t >= o[a].left && t <= o[a].right) {
              t = o[a].ratio;
              break;
            }
      }
      return t;
    }, S = (e) => {
      const t = r(e), o = C(t);
      let { start: a, startRatio: n, end: d, endRatio: p } = l, b = "";
      if (i.isRange)
        if (t <= n)
          b = "start";
        else if (t >= p)
          b = "end";
        else {
          const w = (p - n) / 2;
          t > n && t <= n + w ? b = "start" : t >= p - w && t < p && (b = "end");
        }
      else
        b = "end";
      switch (b) {
        case "start":
          a = o, n = t;
          break;
        case "end":
          d = o, p = t;
          break;
      }
      return { start: a, end: d, startRatio: n, endRatio: p };
    }, $ = () => {
      G(), at(), s(i.value);
    };
    dt(() => {
      tt(() => {
        $();
      });
    }), et(
      () => i.value,
      (e, t) => {
        if (e && e !== t) {
          let o = !0;
          const a = e.toString().split(","), n = Number(a[0]);
          if (i.isRange) {
            const d = a.length > 1 ? Number(a[1]) : n;
            (n === l.start && d === l.end || n === l.end && d === l.start) && (o = !1);
          } else
            o = n !== l.end;
          o && s(e);
        }
      }
    );
    const nt = (e) => {
      if (!i.disabled) {
        e.preventDefault(), e.stopPropagation();
        const t = R.value, o = t.getBoundingClientRect(), a = i.isVertical ? (o.bottom - e.clientY) / t.clientHeight : (e.clientX - o.left) / t.clientWidth, n = S(a);
        U(n), g(n);
      }
    }, st = (e, t) => {
      let { startRatio: o, endRatio: a } = l;
      const n = e.value;
      t === "start" ? (o = n, l.start = C(n), l.startRatio = n) : (a = n, l.end = C(n), l.endRatio = n), W({ startRatio: o, endRatio: a }), K(), e.runType === "keydown" && g();
    }, lt = (e) => {
      const { left: t, width: o } = c, a = {
        startRatio: t,
        endRatio: t + o
      };
      a.start = C(a.startRatio), a.end = C(a.endRatio), U(a), e.runType === "drag" && g(a);
    }, ft = (e) => {
      if (i.isRange) {
        let { start: t, startRatio: o, end: a, endRatio: n } = l;
        e === "start" ? (n = o, a = t) : (o = n, t = a);
        const d = { start: t, startRatio: o, end: a, endRatio: n };
        U(d), g(d);
      }
    }, Rt = () => {
      L(!0);
    }, Bt = (e) => {
      const t = e;
      l.start = C(e), l.startRatio = e;
      const o = e + c.width;
      l.end = C(o), l.endRatio = o, W({ startRatio: t, endRatio: o }), K(), L(!0);
    }, St = () => {
      g(), L(!1);
    }, Tt = () => {
      L(!0);
    }, Vt = () => {
      L(!1);
    }, vt = (e) => {
      y.value && (f.markHoverIndex = e);
    }, mt = () => {
      f.markHoverIndex = -1;
    };
    return Ct("$SliderTop", {
      getDragValueInfo: (e, t) => {
        const o = i.isVertical ? e / R.value.clientHeight : e / R.value.clientWidth;
        let a = t / 100 + o;
        a >= 1 ? a = 1 : a <= 0 && (a = 0), a = r(a);
        const n = C(a);
        return { ratio: a, value: n };
      },
      getButtonMoveValueInfo: (e, t) => {
        const o = e === "left" ? -1 : 1, a = Number(t);
        let n;
        const d = B.value, p = d.length;
        if (!y.value && p > 0) {
          let w = -1;
          if (a < d[0].ratio)
            w = -1;
          else if (a > d[p - 1].ratio)
            w = p;
          else
            for (let H = 0; H < p; H++)
              if (a >= d[H].ratio && H + 1 < p && a < d[H + 1].ratio) {
                w = H;
                break;
              }
          const x = w + o;
          x < 0 ? n = 0 : x >= p ? n = 100 : n = d[x].ratio;
        } else
          n = a + o;
        n >= 100 ? n = 100 : n <= 0 && (n = 0);
        const b = C(n);
        return { ratio: n, value: b };
      }
    }), (e, t) => (E(), N("div", {
      class: q(A.value),
      style: Y(m.value)
    }, [
      ot("div", wt, [
        ot("div", {
          ref_key: "refElTrack",
          ref: R,
          class: "slider-track",
          onClick: nt
        }, null, 512),
        rt(Et, {
          isDisabled: v.disabled,
          isVertical: v.isVertical,
          isBarDrag: z.value,
          left: c.left,
          width: c.width,
          onOnMoveStart: Rt,
          onOnMoveIng: Bt,
          onOnMoveEnd: St,
          onOnClick: nt,
          onOnMouseover: Tt,
          onOnMouseout: Vt
        }, null, 8, ["isDisabled", "isVertical", "isBarDrag", "left", "width"]),
        v.isRange ? (E(), N(ut, { key: 0 }, [
          rt(ct, {
            ref_key: "refBtnStart",
            ref: I,
            isDisabled: v.disabled,
            isVertical: v.isVertical,
            value: l.start,
            ratio: l.startRatio,
            tooltipFormat: v.tooltipFormat,
            onOnMoveIng: t[0] || (t[0] = (o) => st(o, "start")),
            onOnMoveEnd: lt,
            onOnDblClick: t[1] || (t[1] = (o) => ft("start"))
          }, null, 8, ["isDisabled", "isVertical", "value", "ratio", "tooltipFormat"]),
          rt(ct, {
            ref_key: "refBtnEnd",
            ref: M,
            isDisabled: v.disabled,
            isVertical: v.isVertical,
            value: l.end,
            ratio: l.endRatio,
            tooltipFormat: v.tooltipFormat,
            onOnMoveIng: t[2] || (t[2] = (o) => st(o, "end")),
            onOnMoveEnd: lt,
            onOnDblClick: t[3] || (t[3] = (o) => ft("end"))
          }, null, 8, ["isDisabled", "isVertical", "value", "ratio", "tooltipFormat"])
        ], 64)) : (E(), gt(ct, {
          key: 1,
          ref_key: "refBtnEnd",
          ref: M,
          isDisabled: v.disabled,
          isVertical: v.isVertical,
          value: l.end,
          ratio: l.endRatio,
          tooltipFormat: v.tooltipFormat,
          onOnMoveIng: t[4] || (t[4] = (o) => st(o, "end")),
          onOnMoveEnd: lt
        }, null, 8, ["isDisabled", "isVertical", "value", "ratio", "tooltipFormat"])),
        B.value.length > 0 ? (E(), N("div", Nt, [
          (E(!0), N(ut, null, pt(B.value, (o, a) => (E(), gt(It, {
            key: `${f.keyIndex}-dot-${a}`,
            isVertical: v.isVertical,
            itemInfo: o,
            isHover: f.markHoverIndex === a,
            isTooltip: !y.value,
            onOnMouseover: (n) => vt(a),
            onOnMouseout: mt,
            onOnClick: nt
          }, null, 8, ["isVertical", "itemInfo", "isHover", "isTooltip", "onOnMouseover"]))), 128))
        ])) : ht("", !0)
      ]),
      y.value ? (E(), N("div", _t, [
        (E(!0), N(ut, null, pt(_.value, (o, a) => (E(), N("div", {
          key: `${f.keyIndex}-mark-${a}`,
          class: q({ "slider-mark": !0, hover: f.markHoverIndex === a }),
          style: Y(j(o)),
          innerHTML: o.mark,
          onMouseover: (n) => vt(a),
          onMouseout: mt
        }, null, 46, xt))), 128))
      ])) : ht("", !0)
    ], 6));
  }
});
export {
  Lt as default
};
//# sourceMappingURL=ClSlider.js.map
