import { defineComponent as S, ref as O, computed as x, openBlock as f, createBlock as $, Transition as z, withCtx as A, createElementBlock as g, normalizeClass as T, createElementVNode as y, createCommentVNode as N, reactive as M, Fragment as _, renderList as L, nextTick as w, createApp as j } from "vue";
import { C as i } from "../../Shared/base-PQGakkrl.js";
const G = { class: "notify-item" }, Q = { class: "notify-icon" }, W = { class: "notify-text" }, X = ["innerHTML"], Y = /* @__PURE__ */ S({
  name: "ClNotifyItem",
  __name: "Notify",
  props: {
    isShow: { type: Boolean },
    itemInfo: {}
  },
  emits: ["onMouseOver", "onMouseOut", "onDestroy"],
  setup(a, { emit: v }) {
    const m = a, r = v, t = O(!1), s = x(() => ({
      progress: !0,
      "progress-hide": t.value
    })), c = x(() => ({
      "progress-bar": !0,
      "progress-countdown": !t.value
    })), l = () => {
      t.value = !0, r("onMouseOver", m.itemInfo.key);
    }, h = () => {
      t.value = !1, r("onMouseOut", m.itemInfo.key);
    }, u = () => {
      r("onDestroy", m.itemInfo.key);
    };
    return (I, C) => (f(), $(z, {
      name: "notify",
      "enter-active-class": a.itemInfo.clsTransitionEnter,
      "leave-active-class": a.itemInfo.clsTransitionLeave
    }, {
      default: A(() => [
        a.isShow ? (f(), g("div", {
          key: 0,
          class: T(a.itemInfo.clsContainer),
          onClick: u,
          onMouseover: l,
          onMouseout: h
        }, [
          y("div", G, [
            y("div", Q, [
              y("i", {
                class: T(a.itemInfo.icon)
              }, null, 2)
            ]),
            y("div", W, [
              y("div", {
                innerHTML: a.itemInfo.text
              }, null, 8, X)
            ]),
            y("button", {
              type: "button",
              class: "notify-close",
              title: "关闭",
              onClick: u
            }, [...C[0] || (C[0] = [
              y("i", { class: "clIconFont clIcon-close" }, null, -1)
            ])])
          ]),
          a.itemInfo.isProgress ? (f(), g("div", {
            key: 0,
            class: T(s.value)
          }, [
            y("div", {
              class: T(c.value)
            }, null, 2)
          ], 2)) : N("", !0)
        ], 34)) : N("", !0)
      ]),
      _: 1
    }, 8, ["enter-active-class", "leave-active-class"]));
  }
}), Z = /* @__PURE__ */ S({
  name: "ClNotify",
  __name: "Notifys",
  props: {
    position: {},
    isProgress: { type: Boolean }
  },
  setup(a, { expose: v }) {
    const m = a, r = O(null), t = O([]), s = M({
      "top-right": [],
      "top-center": [],
      "bottom-right": []
    }), c = M({
      icon: {
        info: "clIcon-info",
        success: "clIcon-check",
        error: "clIcon-exclamation",
        warn: "clIcon-warn-fill"
      },
      delay: 5,
      autoHide: !0,
      showDuration: !0,
      isClickHide: !0
    }), l = M({});
    let h = null;
    const u = {
      type: ["info", "success", "error", "warn"],
      position: ["top-right", "top-center", "bottom-right"]
    }, I = () => document.querySelector("body"), C = () => document.querySelector("body>.panel-notify"), D = () => {
      const e = C();
      return !i.isUndefined(e);
    }, J = () => {
      D() ? (clearTimeout(h), h = null) : I()?.appendChild(r.value);
    }, P = () => {
      w(() => {
        D() && (h = setTimeout(() => {
          const e = C();
          e && I()?.removeChild(e);
        }, 2 * 1e3));
      });
    }, V = (e) => {
      let n = {}, o = -1;
      const d = e.split("_")[1];
      return s[d].forEach((p, k) => {
        p.key === e && (n = p, o = k);
      }), { info: n, inx: o, pos: d };
    }, b = (e) => {
      const n = V(e);
      if (n.inx > -1) {
        const o = t.value.indexOf(e);
        t.value.splice(o, 1), w(() => {
          s[n.pos].splice(n.inx, 1), s[n.pos].length === 0 && (s[n.pos] = []), t.value.length === 0 && (t.value = [], P());
        });
      }
    }, B = (e) => {
      l[e] = setTimeout(() => {
        b(e);
      }, c.delay * 1e3);
    }, H = (e) => {
      let n = "animated fadeInDown", o = "animated fadeOutRight";
      switch (e) {
        case "top-right":
          n = "animated fadeInDown", o = "animated fadeOutRight";
          break;
        case "top-center":
          n = "animated fadeInDown", o = "animated fadeOut";
          break;
        case "bottom-right":
          n = "animated fadeInUp", o = "animated fadeOutRight";
          break;
      }
      return { clsTransitionEnter: n, clsTransitionLeave: o };
    }, R = (e) => {
      if (!i.isEmpty(e) && !i.isEmpty(e.msg)) {
        J();
        const n = i.isExistValue(u.type, e.type) ? e.type : u.type[0], o = {
          type: n,
          text: e.msg,
          position: m.position || "top-right",
          isProgress: m.isProgress || !1
        };
        i.isEmpty(e) || (i.isEmpty(e.position) || (o.position = e.position), i.isBoolean(e.isProgress) && (o.isProgress = e.isProgress), i.isEmpty(e.className) || (o.className = e.className)), o.position = i.isExistValue(u.position, o.position) ? o.position : u.position[0], o.clsContainer = {
          "notify-container": !0,
          "notify-progress": o.isProgress
        }, o.clsContainer[`notify-${n}`] = !0, o.className && (o.clsContainer[o.className] = !0);
        const d = H(o.position);
        o.clsTransitionEnter = d.clsTransitionEnter, o.clsTransitionLeave = d.clsTransitionLeave;
        const p = i.isExistJsonKey(c.icon, n) ? c.icon[n] : u.icon[n];
        o.icon = `clIconFont ${p}`;
        const k = i.getRandom(7), E = `notify_${o.position}_item_${k}`;
        o.key = E, s[o.position].push(o), w(() => {
          t.value.push(o.key), B(E);
        });
      }
    }, F = (e) => {
      l[e] && (clearTimeout(l[e]), l[e] = null);
    }, q = (e) => {
      B(e);
    }, U = (e) => {
      l[e] && (clearTimeout(l[e]), l[e] = null), b(e);
    };
    return v({
      addCustom: (e) => {
        R(e);
      },
      destroy: () => {
        u.position.forEach((e) => {
          s[e] = [];
        }), t.value = [], P();
      }
    }), (e, n) => (f(), g("div", {
      class: "panel-notify",
      ref_key: "refElTopParent",
      ref: r
    }, [
      (f(!0), g(_, null, L(s, (o, d) => (f(), g(_, {
        key: `notify-${d}`
      }, [
        o.length > 0 ? (f(), g("div", {
          key: 0,
          class: T(`notify-wrapper notify-${d}`)
        }, [
          (f(!0), g(_, null, L(o, (p) => (f(), $(Y, {
            key: p.key,
            isShow: t.value.includes(p.key),
            itemInfo: p,
            onOnDestroy: U,
            onOnMouseOver: F,
            onOnMouseOut: q
          }, null, 8, ["isShow", "itemInfo"]))), 128))
        ], 2)) : N("", !0)
      ], 64))), 128))
    ], 512));
  }
}), ne = (a = {}) => {
  const v = j(Z, a), m = document.createElement("div"), r = v.mount(m);
  return {
    info: (t, s = {}) => {
      const c = i.getJsonMerge(s, { type: "info", msg: t });
      r.addCustom(c);
    },
    success: (t, s = {}) => {
      const c = i.getJsonMerge(s, { type: "success", msg: t });
      r.addCustom(c);
    },
    error: (t, s = {}) => {
      const c = i.getJsonMerge(s, { type: "error", msg: t });
      r.addCustom(c);
    },
    warn: (t, s = {}) => {
      const c = i.getJsonMerge(s, { type: "warn", msg: t });
      r.addCustom(c);
    },
    custom: (t) => {
      r.addCustom(t);
    },
    destroy: () => {
      r.destroy();
    }
  };
};
export {
  ne as default
};
//# sourceMappingURL=Notify.js.map
