import { defineComponent as O, inject as W, reactive as j, ref as q, computed as v, onMounted as A, nextTick as H, watch as J, resolveComponent as b, openBlock as u, createElementBlock as m, normalizeClass as g, createElementVNode as p, Fragment as E, renderList as R, mergeProps as T, createVNode as x, withModifiers as h, createCommentVNode as d, toDisplayString as f, renderSlot as _, normalizeStyle as Q } from "vue";
import { C as o } from "./base-PQGakkrl.js";
const X = { class: "previewExample-image-icon" }, Y = ["onClick"], Z = ["onClick"], ee = { class: "previewExample-video-img previewExample-image" }, te = ["src"], le = ["onClick"], ie = {
  key: 2,
  class: "previewExample-label-msg"
}, se = {
  key: 3,
  class: "previewExample-totalCount"
}, oe = /* @__PURE__ */ O({
  name: "ClPreviewexample",
  __name: "Index",
  props: {
    className: String,
    classContainer: String,
    classItem: {
      type: String,
      default: ""
    },
    type: {
      type: String,
      default: "image"
      // image video
    },
    width: {
      type: [Number, String],
      default: "auto"
    },
    height: {
      type: Number,
      required: !0
    },
    list: {
      type: Array,
      default: () => []
    },
    label: String,
    previewIconSize: {
      type: String,
      default: "large"
      // large | small
    },
    previewCallback: Function,
    isShowLoading: {
      type: Boolean,
      default: !1
    },
    isLoading: {
      type: Boolean,
      default: !1
    },
    isShowDelete: {
      type: Boolean,
      default: !1
    },
    showNum: {
      type: Number,
      default: -1
    },
    srcValueKey: {
      type: String,
      default: "value"
    },
    isShowCopy: {
      type: Boolean,
      default: !0
    },
    isClickImagePreview: {
      type: Boolean,
      default: !1
    }
  },
  emits: ["onDelete"],
  setup(s, { emit: N }) {
    const n = s, $ = N, B = W("$ClGlobals"), y = j({
      keyIndex: `PreviewExample-${o.getRandom(8)}`,
      totalCount: -1
    }), w = q([]), k = v(() => {
      const { width: e } = n;
      let t = !1;
      return (o.isEmpty(e) || typeof e == "string" && e === "auto" || typeof e == "number" && e <= 0) && (t = !0), t;
    }), L = v(() => {
      const { className: e } = n, t = {
        "panel-previewExample": !0,
        "previewExample-width-default": k.value
      };
      return e && !o.isEmpty(e) && e.split(" ").forEach((i) => {
        o.isEmpty(i) || (t[i] = !0);
      }), t;
    }), P = v(() => {
      const { classContainer: e } = n, t = {
        "previewExample-container": !0
      };
      return e && !o.isEmpty(e) && e.split(" ").forEach((i) => {
        o.isEmpty(i) || (t[i] = !0);
      }), t;
    }), D = v(() => {
      const { type: e, previewIconSize: t, classItem: i } = n, c = {
        "previewExample-item": !0
      };
      return c[`previewExample-${e}`] = !0, c[`previewExample-iconSize-${t}`] = !0, i && !o.isEmpty(i) && i.split(" ").forEach((l) => {
        o.isEmpty(l) || (c[l] = !0);
      }), c;
    }), S = v(() => {
      const e = {
        height: `${n.height}px`
      };
      if (!k.value) {
        let t = n.width.toString();
        t.indexOf("%") === -1 && (t = `${n.width}px`), e.width = t;
      }
      return e;
    }), F = (e) => {
      const t = {};
      return o.isEmpty(e.id) || (t["data-id"] = e.id), o.isEmpty(e.ranId) || (t["data-ran-id"] = e.ranId), t;
    }, V = (e) => {
      $("onDelete", e);
    }, I = () => {
      const { list: e, showNum: t, srcValueKey: i } = n;
      let c = o.getListClone(e), l = e.length;
      t > 0 && e.length >= t && (l = t);
      const a = [];
      c.forEach((r, U) => {
        if (U + 1 <= l)
          if (o.isString(r))
            a.push({ value: r });
          else {
            const G = o.isExistJsonKey(r, i) ? r[i] : r.value;
            r.value = G, a.push(r);
          }
      }), c = a, y.totalCount = e.length, w.value = c;
    }, z = () => {
      I();
    };
    A(() => {
      H(() => {
        z();
      });
    }), J(
      () => n.list,
      () => {
        I();
      },
      { deep: !0 }
    );
    const K = (e, t) => {
      n.isClickImagePreview && C(e, t, "image");
    }, C = (e, t, i) => {
      if (n.previewCallback)
        n.previewCallback(i, e, t);
      else {
        const { list: c } = n;
        let l;
        c.length === 1 ? l = e.value : l = c.map((a) => o.isString(a) ? a : a.value), B.preview.show({
          type: i,
          src: l,
          showIndex: t,
          isShowCopy: n.isShowCopy
        });
      }
    }, M = (e) => {
      V(e);
    };
    return (e, t) => {
      const i = b("cl-image"), c = b("cl-load");
      return u(), m("div", {
        class: g(L.value)
      }, [
        p("div", {
          class: g(P.value)
        }, [
          (u(!0), m(E, null, R(w.value, (l, a) => (u(), m("div", T({
            key: `${y.keyIndex}-${a}`,
            class: D.value,
            style: S.value
          }, { ref_for: !0 }, F(l)), [
            s.type === "image" ? (u(), m(E, { key: 0 }, [
              x(i, {
                src: l.value,
                class: g({ "cursor-pointer": s.isClickImagePreview }),
                onClick: h((r) => K(l, a), ["stop"])
              }, null, 8, ["src", "class", "onClick"]),
              p("div", X, [
                p("i", {
                  title: "预览",
                  class: "clIconFont clIcon-search",
                  onClick: h((r) => C(l, a, "image"), ["stop"])
                }, null, 8, Y),
                s.isShowDelete ? (u(), m("i", {
                  key: 0,
                  title: "删除",
                  class: "clIconFont clIcon-close",
                  onClick: h((r) => M(a), ["stop"])
                }, null, 8, Z)) : d("", !0)
              ])
            ], 64)) : s.type === "video" ? (u(), m(E, { key: 1 }, [
              p("div", ee, [
                l.imgUrl && l.imgUrl.length > 0 ? (u(), m("img", {
                  key: 0,
                  src: l.imgUrl
                }, null, 8, te)) : d("", !0)
              ]),
              p("div", {
                class: "previewExample-video-icon",
                onClick: h((r) => C(l, a, "video"), ["stop"])
              }, [...t[0] || (t[0] = [
                p("i", { class: "clIconFont clIcon-play" }, null, -1)
              ])], 8, le)
            ], 64)) : d("", !0),
            s.label && s.label.length > 0 || l.label && l.label.length > 0 ? (u(), m("div", ie, f(s.label && s.label.length > 0 ? s.label : l.label), 1)) : d("", !0),
            s.showNum > -1 && a === w.value.length - 1 && y.totalCount > s.showNum ? (u(), m("div", se, [
              p("span", null, "共" + f(y.totalCount) + f(s.type === "image" ? "张" : "个"), 1)
            ])) : d("", !0),
            _(e.$slots, "extend", {
              data: l,
              inx: a
            })
          ], 16))), 128)),
          s.isShowLoading && s.isLoading ? (u(), m("div", {
            key: 0,
            class: g([`previewExample-${s.type}`]),
            style: Q(S.value)
          }, [
            x(c, { theme: "circleNotch" })
          ], 6)) : d("", !0)
        ], 2)
      ], 2);
    };
  }
});
export {
  oe as _
};
//# sourceMappingURL=Index.vue_vue_type_script_setup_true_lang-AhjUdZHr.js.map
