import { defineComponent as q, ref as L, reactive as A, computed as c, watch as V, onMounted as j, nextTick as v, onUnmounted as D, openBlock as m, createElementBlock as f, normalizeStyle as u, normalizeClass as k, createElementVNode as p, toDisplayString as _, createCommentVNode as E, Fragment as F } from "vue";
import { C as n } from "../Shared/base-PQGakkrl.js";
import { R as I } from "../Shared/resize-kOWxHVSP.js";
const U = {
  key: 0,
  class: "progress"
}, G = { class: "progress-circular-line circular-line-right" }, J = { class: "progress-circular-line circular-line-left" }, Z = /* @__PURE__ */ q({
  name: "ClProgress",
  __name: "Index",
  props: {
    className: String,
    theme: {
      type: String,
      default: "horizontal"
      // horizontal | circular
    },
    color: String,
    ratio: {
      type: [Number, String],
      required: !0
    },
    isShowNum: {
      type: Boolean,
      default: !0
    },
    isAnimation: {
      type: Boolean,
      default: !0
    },
    diameter: {
      type: String,
      default: "50px"
    },
    showNumText: String,
    showNumPos: {
      type: String,
      default: "out-center"
      // out-center|out-left|out-right|in-center|in-left|in-right
    },
    showNumTrigger: {
      type: String,
      default: "hover"
      // none|hover
    },
    showNumColor: String
  },
  setup(y) {
    const i = y, g = L(null), x = L(null), r = A({
      isHorizontal: i.theme === "horizontal",
      isCircular: i.theme === "circular",
      ratioHundred: "",
      circularLeftRotate: -45,
      circularLeftTime: 0,
      circularRightRotate: -45,
      circularRightTime: 0,
      posText: {
        inOut: "out",
        lcr: "center",
        isOverflow: !1
      }
    }), s = {
      lastRatio: "",
      lastRotateLeft: -45,
      lastRotateRight: -45,
      runTimeCircularRotate: null,
      resizeEvent: null
    }, b = c(() => {
      let t = "";
      const { showNumText: e } = i;
      if (e && !n.isEmpty(e))
        t = e;
      else {
        let o = r.ratioHundred;
        o = o.substring(0, o.length - 2), t = n.getFormatThousands(o) + "%";
      }
      return t;
    }), z = c(() => {
      const t = {
        "panel-progress": !0
      };
      t[`progress-${i.theme}`] = !0;
      const { className: e, isShowNum: o, showNumTrigger: l } = i;
      return o && l !== "none" && (t[`progress-${l}-num`] = !0), e && !n.isEmpty(e) && e.split(" ").forEach((a) => {
        n.isEmpty(a) || (t[a] = !0);
      }), t;
    }), B = c(() => {
      const t = {};
      return r.isCircular && (n.isEmpty(i.diameter) || (t.width = i.diameter, t.height = i.diameter)), t;
    }), O = c(() => ({
      "progress-bar": !0,
      "progress-bar-striped": i.isAnimation,
      "striped-animation": i.isAnimation
    })), H = c(() => {
      const t = {};
      if (t.width = r.ratioHundred, n.isEmpty(i.color) || (t["background-color"] = i.color), r.isHorizontal && r.posText.inOut === "in") {
        let e = "center";
        switch (r.posText.lcr) {
          case "left":
            e = "flex-start";
            break;
          case "center":
            e = "center";
            break;
          case "right":
            e = "flex-end";
            break;
        }
        r.posText.isOverflow && (e = "flex-start"), t["justify-content"] = e;
      }
      return t;
    }), w = c(() => {
      const t = {}, { showNumColor: e } = i;
      return e && !n.isEmpty(e) && (t.color = e), t;
    }), P = c(() => {
      const t = {};
      return t.transform = `rotate(${r.circularRightRotate}deg)`, r.circularRightTime > 0 && (t["transition-duration"] = `${r.circularRightTime}ms`), n.isEmpty(i.color) || (t["border-bottom-color"] = i.color, t["border-right-color"] = i.color), t;
    }), $ = c(() => {
      const t = {};
      return t.transform = `rotate(${r.circularLeftRotate}deg)`, r.circularLeftTime && (t["transition-duration"] = `${r.circularLeftTime}ms`), n.isEmpty(i.color) || (t["border-bottom-color"] = i.color, t["border-right-color"] = i.color), t;
    }), M = () => {
      const { showNumPos: t } = i, e = t.split("-");
      e.length === 2 && (r.posText.inOut = n.isExistValue(["in", "out"], e[0]) ? e[0] : "out", r.posText.lcr = n.isExistValue(["left", "center", "right"], e[1]) ? e[1] : "center");
    }, N = (t) => {
      let e = n.isEmpty(t) ? 0 : Number(t);
      if (e <= 0 ? e = 0 : e >= 100 && (e = 100), r.ratioHundred = `${e}%`, r.isCircular) {
        s.runTimeCircularRotate && clearTimeout(s.runTimeCircularRotate);
        const o = e / 100 * 360;
        let l = 0, a = 0;
        o < 180 ? (l = o + -45, a = -45) : (l = 135, a = o - 180 - 45);
        let C = !0;
        n.isEmpty(s.lastRatio) || (C = e >= Number(s.lastRatio));
        let h = 0, d = 0;
        const R = Math.abs(l - s.lastRotateRight), T = Math.abs(a - s.lastRotateLeft);
        if (R > 0 && T > 0) {
          const S = 400 / (R + T);
          h = R * S, d = T * S;
        }
        C ? (r.circularRightRotate = l, r.circularRightTime = h, v(() => {
          s.runTimeCircularRotate = setTimeout(() => {
            r.circularLeftRotate = a, r.circularLeftTime = d;
          }, h);
        })) : (r.circularLeftRotate = a, r.circularLeftTime = d, v(() => {
          s.runTimeCircularRotate = setTimeout(() => {
            r.circularRightRotate = l, r.circularRightTime = h;
          }, d);
        })), s.lastRotateRight = l, s.lastRotateLeft = a;
      }
      s.lastRatio = String(e);
    }, W = () => {
      M(), N(i.ratio), s.resizeEvent = new I({
        element: x.value,
        callback: () => {
          if (i.isShowNum && r.isHorizontal && r.posText.inOut === "in" && g.value) {
            const t = g.value.querySelector(".progress-bar"), e = g.value.querySelector(".progress-num");
            if (t && e) {
              const o = t.clientWidth, l = e.clientWidth;
              let a = !1;
              o === 0 && l === 0 ? a = !1 : o === 0 && l > 0 ? a = !0 : a = o > 0 && l > o, r.posText.isOverflow = a;
            }
          }
        }
      });
    };
    return V(
      () => i.ratio,
      (t, e) => {
        t !== e && N(t);
      }
    ), j(() => {
      v(() => {
        W();
      });
    }), D(() => {
      s.resizeEvent && s.resizeEvent.destroy();
    }), (t, e) => (m(), f("div", {
      ref_key: "refElTopParent",
      ref: g,
      class: k(z.value),
      style: u(B.value)
    }, [
      r.isHorizontal ? (m(), f("div", U, [
        p("div", {
          ref_key: "refElBar",
          ref: x,
          class: k(O.value),
          style: u(H.value)
        }, [
          y.isShowNum && r.posText.inOut === "in" ? (m(), f("span", {
            key: 0,
            class: "progress-num",
            style: u(w.value)
          }, _(b.value), 5)) : E("", !0)
        ], 6)
      ])) : r.isCircular ? (m(), f(F, { key: 1 }, [
        p("div", G, [
          p("div", {
            class: "progress-circular-bar",
            style: u(P.value)
          }, null, 4)
        ]),
        p("div", J, [
          p("div", {
            class: "progress-circular-bar",
            style: u($.value)
          }, null, 4)
        ])
      ], 64)) : E("", !0),
      y.isShowNum && r.posText.inOut === "out" ? (m(), f("span", {
        key: 2,
        class: "progress-num",
        style: u(w.value)
      }, _(b.value), 5)) : E("", !0)
    ], 6));
  }
});
export {
  Z as default
};
//# sourceMappingURL=ClProgress.js.map
