import { defineComponent as A, ref as b, reactive as R, computed as h, onMounted as T, nextTick as k, onUnmounted as B, watch as H, provide as M, openBlock as v, createElementBlock as x, normalizeClass as O, createElementVNode as z, normalizeStyle as X, Fragment as q, renderList as U, renderSlot as V } from "vue";
import { C as f } from "../Shared/base-PQGakkrl.js";
import { C } from "../Shared/index-BnerInzC.js";
import { D as J, R as j } from "../Shared/resize-kOWxHVSP.js";
import "js-cookie";
import "decimal.js";
const le = /* @__PURE__ */ A({
  name: "ClWaterfall",
  __name: "Index",
  props: {
    className: String,
    list: {
      type: Array,
      default: () => []
    },
    itemKey: {
      type: String,
      default: "id"
    },
    width: {
      type: Number,
      default: -1
    },
    colNum: {
      type: Number,
      default: -1
    },
    spacing: {
      type: Number,
      default: 10
    },
    animationName: {
      type: String,
      default: "animated fadeIn"
    }
  },
  setup(w, { expose: S }) {
    const a = w, u = b(null), c = R({
      keyIndex: `waterfall-${f.getRandom(8)}`,
      pWidth: 0,
      pHeight: 0
    }), W = b([]), l = {
      colPosY: [],
      resizeEvent: null,
      resizeDelayFun: null,
      isExistItemKey: !0
    }, d = h(() => {
      const e = c.pWidth, { width: t, colNum: s, spacing: n } = a;
      let o = 300;
      const i = t > 0, r = s > 0, m = r ? parseInt(((e + n) / s).toString()) - n : 0;
      if (i && r) {
        const y = (t + n) * s - n;
        o = e >= y ? t : m;
      } else !i && r ? o = m : i && !r && (o = e > t ? t : e);
      return o;
    }), E = h(() => {
      const e = c.pWidth, t = d.value, { colNum: s, spacing: n } = a, o = s > 0;
      let i = -1;
      const r = parseInt(((e + n) / (t + n)).toString());
      if (o) {
        const m = (t + n) * s - n;
        i = e >= m ? s : r;
      } else
        i = r;
      return i;
    }), K = h(() => {
      const e = c.pWidth, t = d.value, s = E.value, { spacing: n } = a, o = (t + n) * s - n;
      return parseInt(((e - o) / 2).toString());
    }), P = h(() => {
      const e = {
        "panel-waterfall": !0
      }, { className: t } = a;
      return t && !f.isEmpty(t) && t.split(" ").forEach((s) => {
        f.isEmpty(s) || (e[s] = !0);
      }), e;
    }), $ = () => {
      const { list: e, itemKey: t } = a;
      e.forEach((s) => {
        l.isExistItemKey && (l.isExistItemKey = f.isExistJsonKey(s, t));
      });
    }, I = () => {
      W.value = a.list;
    }, D = () => {
      const { spacing: e } = a;
      l.colPosY = new Array(E.value).fill(e);
    }, Y = (e) => {
      const { spacing: t } = a, s = d.value;
      return K.value + (s + t) * e;
    }, N = () => {
      let e;
      if (u.value && (e = u.value.querySelectorAll(".waterfall-item")), f.isUndefined(e) || !e || e.length === 0)
        return;
      D();
      const t = d.value, { spacing: s, animationName: n } = a;
      for (let o = 0; o < e.length; o++) {
        const i = e[o], r = C.getPositionView(i).height, m = Math.min.apply(null, l.colPosY), y = l.colPosY.indexOf(m), L = Y(y);
        i.style.width = `${t}px`, i.style.transform = `translate3d(${L}px,${m}px, 0)`, l.colPosY[y] += r + s;
        const p = i.firstChild, g = p.style;
        p.style.visibility = "visible", C.checkHasClass(p.className, n) || (g["animation-duration"] = "1000ms", g["animation-delay"] = "200ms", g["animation-fill-mode"] = "both", p.className = C.getAddClass(p.className, n));
      }
      c.pHeight = Math.max.apply(null, l.colPosY);
    }, _ = () => {
      l.isExistItemKey ? (I(), l.resizeDelayFun.run(() => {
        N();
      })) : l.resizeDelayFun.run(() => {
        I(), k(() => {
          N();
        });
      });
    }, F = () => {
      l.resizeDelayFun = new J(null, 200), l.resizeEvent = new j({
        element: u.value,
        callback: (e) => {
          c.pWidth = e.contentRect.width;
        }
      });
    };
    return T(() => {
      k(() => {
        F();
      });
    }), B(() => {
      l.resizeEvent && l.resizeEvent.destroy();
    }), H(
      () => [c.pWidth, d, a.list],
      () => {
        $(), _();
      },
      { deep: !0 }
    ), M("$WaterfallTop", {
      imgCallback: _
    }), S({
      deleteItem: (e) => {
        const t = u.value?.querySelectorAll(".waterfall-item");
        if (t && t[e]) {
          const s = t[e];
          s.firstChild && (s.firstChild.style.visibility = "hidden");
        }
      }
    }), (e, t) => (v(), x("div", {
      class: O(P.value)
    }, [
      z("div", {
        ref_key: "refElList",
        ref: u,
        class: "waterfall-list",
        style: X({ height: `${c.pHeight}px` })
      }, [
        (v(!0), x(q, null, U(W.value, (s, n) => (v(), x("div", {
          key: `${c.keyIndex}_${s[w.itemKey] || n}`,
          class: "waterfall-item"
        }, [
          z("div", null, [
            V(e.$slots, "default", {
              data: s,
              index: n
            })
          ])
        ]))), 128))
      ], 4)
    ], 2));
  }
});
export {
  le as default
};
//# sourceMappingURL=ClWaterfall.js.map
