import { onMounted as p, nextTick as w, onUnmounted as B, watch as u, defineComponent as k, ref as d, computed as C, openBlock as f, createElementBlock as y, normalizeStyle as m, normalizeClass as b, createElementVNode as D } from "vue";
import { C as o } from "../Shared/base-PQGakkrl.js";
const l = {
  loading: "data:image/gif;base64,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",
  error: "data:image/png;base64,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",
  attr: {
    timeOutId: "data-lazy-timeout-id"
  }
};
class K {
  options = {
    loading: l.loading,
    error: l.error,
    observerOptions: {
      rootMargin: "0px",
      threshold: 0
    },
    log: !1,
    callback: {}
  };
  _images = /* @__PURE__ */ new WeakMap();
  constructor(A) {
    this.config(A);
  }
  config(A = {}) {
    this.options = o.getJsonMergeDeep(this.options, A);
  }
  _initValue(A, t) {
    let e = "", s = this.options.loading, i = this.options.error, r = this.options.callback, n = this.options.delay;
    return o.isObject(A) ? (e = A.src, s = A.loading || this.options.loading, i = A.error || this.options.error, r = A.callback || this.options.callback, n = A.delay || this.options.delay) : o.isString(A) ? e = A : o.isUndefined(A) && (e = t && t.src || ""), {
      src: e,
      loading: s,
      error: i,
      callback: r,
      delay: n
    };
  }
  mount(A, t) {
    if (o.isUndefined(A)) return;
    const e = typeof t == "string" ? t : t.value, { src: s, loading: i, error: r, callback: n, delay: I } = this._initValue(e, A);
    this._setCallback(A, "loading", n), A.setAttribute("src", i || l.loading), this._checkIntersectionObserver() || (this._setImageSrc(A, s, r, n), this._log(() => {
      throw new Error("Not support IntersectionObserver!");
    })), this._initIntersectionObserver(A, s, r, n, I);
  }
  update(A, t) {
    if (o.isUndefined(A)) return;
    this._realObserver(A)?.unobserve(A);
    const e = typeof t == "string" ? t : t.value, { src: s, error: i, callback: r, delay: n } = this._initValue(e, A);
    this._initIntersectionObserver(A, s, i, r, n);
  }
  unmount(A) {
    o.isUndefined(A) || (this._realObserver(A)?.unobserve(A), this._images.delete(A));
  }
  _setImageSrc(A, t, e, s) {
    if (A.tagName.toLowerCase() === "img") {
      const i = A;
      o.isEmpty(t) ? (i.onload = null, this._setCallback(i, "error", s), this._realObserver(i)?.disconnect(), e && i.setAttribute("src", e)) : (t && i.getAttribute("src") !== t && i.setAttribute("src", t), this.options.isCrossOrigin && (i.crossOrigin = "Anonymous"), i.onload = () => {
        t && this._setCallback(i, "loaded", s);
      }, i.onerror = () => {
        i.onload = null, this._setCallback(i, "error", s), this._realObserver(i)?.disconnect(), e && i.getAttribute("src") !== e && i.setAttribute("src", e), this._log(() => {
          throw new Error(`Image failed to load!And failed src was: ${t} `);
        });
      });
    } else
      A.style.backgroundImage = `url('${t}')`;
  }
  _setCallback(A, t, e) {
    switch (A?.setAttribute("lazy", t), t) {
      case "loading":
        e?.loading && e.loading(A);
        break;
      case "loaded":
        e?.loaded && e.loaded(A);
        break;
      case "error":
        e?.error && e.error(A);
        break;
    }
  }
  _realObserver(A) {
    return this._images.get(A);
  }
  _checkIntersectionObserver() {
    return typeof window < "u" && window !== null && "IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype ? ("isIntersecting" in window.IntersectionObserverEntry.prototype || Object.defineProperty(
      window.IntersectionObserverEntry.prototype,
      "isIntersecting",
      {
        get() {
          return this.intersectionRatio > 0;
        }
      }
    ), !0) : !1;
  }
  _initIntersectionObserver(A, t, e, s, i) {
    const r = this.options.observerOptions;
    this._images.set(A, new IntersectionObserver((n) => {
      Array.prototype.forEach.call(n, (I) => {
        i && i > 0 ? this._delayedIntersectionCallback(A, I, i, t, e, s) : this._intersectionCallback(A, I, t, e, s);
      });
    }, r)), this._realObserver(A)?.observe(A);
  }
  _intersectionCallback(A, t, e, s, i) {
    t.isIntersecting && (this._realObserver(A)?.unobserve(t.target), this._setImageSrc(A, e, s, i));
  }
  _delayedIntersectionCallback(A, t, e, s, i, r) {
    if (t.isIntersecting) {
      if (t.target.hasAttribute(l.attr.timeOutId))
        return;
      const n = setTimeout(() => {
        this._intersectionCallback(A, t, s, i, r), t.target.removeAttribute(l.attr.timeOutId);
      }, e);
      t.target.setAttribute(l.attr.timeOutId, String(n));
    } else
      t.target.hasAttribute(l.attr.timeOutId) && (clearTimeout(Number(t.target.getAttribute(l.attr.timeOutId))), t.target.removeAttribute(l.attr.timeOutId));
  }
  _log(A) {
    this.options.log && A();
  }
}
const O = (c, A, t) => {
  const e = new K(t);
  p(() => {
    w(() => {
      c.value && e.mount(c.value, A);
    });
  }), B(() => {
    c.value && e.unmount(c.value);
  }), u(A, (s) => {
    A.value && c.value && e.update(c.value, s);
  });
}, v = /* @__PURE__ */ k({
  name: "ClImage",
  __name: "Index",
  props: {
    className: {},
    src: {},
    height: {},
    width: {},
    isCircle: { type: Boolean },
    fit: {},
    isCrossOrigin: { type: Boolean }
  },
  emits: ["onInit"],
  setup(c, { emit: A }) {
    const t = c, e = A, s = d(t.src), i = d(null), r = () => {
      e("onInit");
    };
    O(i, s, {
      callback: {
        loaded: () => {
          r();
        },
        error: () => {
          r();
        }
      },
      isCrossOrigin: t.isCrossOrigin
    });
    const n = C(() => {
      const a = {
        "panel-imageBox": !0,
        "imageBox-circle": t.isCircle
      };
      return t.className && !o.isEmpty(t.className) && t.className.split(" ").forEach((g) => {
        o.isEmpty(g) || (a[g] = !0);
      }), a;
    }), I = C(() => {
      const { width: a, height: g } = t, E = {};
      return a && !o.isEmpty(a) && (E.width = a), g && !o.isEmpty(g) && (E.height = g), E;
    }), Q = C(() => {
      const { width: a, height: g, fit: E } = t, h = {};
      return E && !o.isEmpty(E) && (h["object-fit"] = E, a && !o.isEmpty(a) && (h.width = a), g && !o.isEmpty(g) && (h.height = g)), h;
    });
    return u(
      () => t.src,
      (a) => {
        s.value = a;
      }
    ), (a, g) => (f(), y("div", {
      class: b(n.value),
      style: m(I.value)
    }, [
      D("img", {
        ref_key: "refElImage",
        ref: i,
        alt: "",
        style: m(Q.value)
      }, null, 4)
    ], 6));
  }
});
export {
  v as default
};
//# sourceMappingURL=ClImage.js.map
