import { defineComponent as T, inject as U, reactive as $, computed as O, openBlock as v, createElementBlock as m, normalizeClass as V, createElementVNode as r, withModifiers as g, createVNode as E, createCommentVNode as x, toDisplayString as A, Transition as q, withCtx as K, withDirectives as Q, normalizeStyle as W, vShow as M, nextTick as F, ref as D, onBeforeUnmount as G, provide as H, Fragment as J, createBlock as j } from "vue";
import { C as u } from "./base-PQGakkrl.js";
import { C as z } from "./index-BnerInzC.js";
import { _ as X } from "./Index.vue_vue_type_script_setup_true_lang-DKAxas3I.js";
import Y from "video.js";
const Z = { class: "preview-image" }, ee = { class: "preview-image-actions-container" }, se = { key: 0 }, te = {
  key: 1,
  class: "image-num"
}, oe = {
  key: 0,
  class: "preview-image-container"
}, ne = ["src"], ie = /* @__PURE__ */ T({
  name: "ClPreviewImage",
  __name: "Image",
  props: {
    imageInx: {
      type: Number,
      default: 0
    },
    list: {
      type: Array,
      default: () => []
    },
    isLoop: {
      type: Boolean,
      default: !1
    },
    isShowCopy: {
      type: Boolean,
      default: !0
    }
  },
  emits: ["onClick"],
  setup(y, { expose: _, emit: L }) {
    const i = y, f = U("$PreviewTop"), e = $({
      isShow: !1,
      isSwitch: !1,
      src: "",
      scale: 1,
      scaleRatio: 1.4,
      rotate: 0,
      rotateAngle: 90,
      showIndex: i.imageInx
    }), l = O(() => {
      const n = {}, s = [];
      return s.push(`scale(${e.scale})`), s.push(`rotate(${e.rotate}deg)`), n.transform = s.join(" "), n;
    }), a = () => {
      const { showIndex: n } = e, s = i.list.length, d = s > 0 && n < s;
      e.isShow = d, d ? F(() => {
        e.isSwitch = !0, e.src = i.list[n], f.setPrevNextStatus(n, s);
      }) : e.isSwitch = !1;
    }, h = () => {
      const { scale: n, scaleRatio: s } = e, d = n * s;
      d < 7 && (e.scale = Number(d.toFixed(3)));
    }, w = () => {
      const { scale: n, scaleRatio: s } = e, d = n / s;
      d > 0.18 && (e.scale = Number(d.toFixed(3)));
    }, S = () => {
      const { rotate: n, rotateAngle: s } = e;
      e.rotate = n - s;
    }, C = () => {
      const { rotate: n, rotateAngle: s } = e;
      e.rotate = n + s;
    }, P = () => {
      e.scale = 1, e.rotate = 0;
    };
    return _({
      show: (n) => {
        e.showIndex = n, a();
      },
      hide: () => {
        e.scale = 1, e.rotate = 0, e.isShow = !1;
      },
      prev: () => {
        const { showIndex: n } = e;
        let s = -1;
        n > 0 ? s = n - 1 : i.isLoop && (s = i.list.length - 1), s > -1 && (e.isSwitch = !1, e.showIndex = s, e.scale = 1, e.rotate = 0, a());
      },
      next: () => {
        const { showIndex: n } = e;
        let s = -1;
        n < i.list.length - 1 ? s = n + 1 : i.isLoop && (s = 0), s > -1 && (e.isSwitch = !1, e.showIndex = s, e.scale = 1, e.rotate = 0, a());
      },
      large: () => {
        h();
      },
      small: () => {
        w();
      }
    }), (n, s) => (v(), m("div", Z, [
      e.isShow ? (v(), m("div", {
        key: 0,
        class: V({ "preview-btn": !0, "preview-image-actions": !0, "preview-image-num": y.list.length > 1 })
      }, [
        r("div", ee, [
          r("span", {
            onClick: g(h, ["stop"])
          }, [...s[0] || (s[0] = [
            r("i", { class: "clIconFont clIcon-search-plus" }, null, -1)
          ])]),
          r("span", {
            onClick: g(w, ["stop"])
          }, [...s[1] || (s[1] = [
            r("i", { class: "clIconFont clIcon-search-minus" }, null, -1)
          ])]),
          r("span", {
            onClick: g(S, ["stop"])
          }, [...s[2] || (s[2] = [
            r("i", { class: "clIconFont clIcon-rotate-left" }, null, -1)
          ])]),
          r("span", {
            onClick: g(C, ["stop"])
          }, [...s[3] || (s[3] = [
            r("i", { class: "clIconFont clIcon-rotate-right" }, null, -1)
          ])]),
          r("span", {
            onClick: g(P, ["stop"])
          }, [...s[4] || (s[4] = [
            r("i", { class: "clIconFont clIcon-restore" }, null, -1)
          ])]),
          y.isShowCopy ? (v(), m("span", se, [
            E(X, {
              textLabel: e.src
            }, null, 8, ["textLabel"])
          ])) : x("", !0),
          y.list.length > 1 ? (v(), m("span", te, A(e.showIndex + 1) + "/" + A(y.list.length), 1)) : x("", !0)
        ])
      ], 2)) : x("", !0),
      E(q, {
        "enter-active-class": "animated zoomIn",
        "leave-active-class": "animated zoomOut"
      }, {
        default: K(() => [
          e.isShow ? Q((v(), m("div", oe, [
            r("img", {
              src: e.src,
              style: W(l.value)
            }, null, 12, ne)
          ], 512)), [
            [M, e.isSwitch]
          ]) : x("", !0)
        ]),
        _: 1
      })
    ]));
  }
}), le = { class: "preview-video" }, ae = {
  key: 0,
  class: "preview-video-container"
}, re = ["id"], ce = /* @__PURE__ */ T({
  name: "ClPreviewVideo",
  __name: "Video",
  props: {
    videoInx: {
      type: Number,
      default: 0
    },
    list: {
      type: Array,
      default: () => []
    },
    isLoop: {
      type: Boolean,
      default: !1
    }
  },
  emits: ["onClick"],
  setup(y, { expose: _, emit: L }) {
    const i = y, f = U("$PreviewTop"), e = D(null), l = $({
      keyIndex: `previewVideo-${u.getRandom(8)}`,
      isShow: !1,
      src: "",
      showIndex: i.videoInx
    }), a = {
      playerOpt: null
    }, h = () => {
      if (a.playerOpt)
        a.playerOpt.src(l.src), a.playerOpt.play();
      else {
        const c = {
          sources: [{ src: l.src }],
          autoplay: !0,
          controls: !0,
          loop: !1
        };
        a.playerOpt = Y(e.value, c, () => {
          a.playerOpt.play();
        });
      }
    }, w = () => {
      const { showIndex: c } = l, p = i.list.length, k = p > 0 && c < p;
      l.isShow = k, k && (l.src = i.list[c], f.setPrevNextStatus(c, p), F(() => {
        h();
      }));
    }, S = () => {
      a.playerOpt && a.playerOpt.dispose && (a.playerOpt.pause && a.playerOpt.pause(), a.playerOpt.dispose(), a.playerOpt = null);
    };
    return _({
      show: (c) => {
        l.showIndex = c, w();
      },
      hide: () => {
        S(), l.isShow = !1;
      },
      prev: () => {
        const { showIndex: c } = l;
        let p = -1;
        c > 0 ? p = c - 1 : i.isLoop && (p = i.list.length - 1), p > -1 && (l.showIndex = p, w());
      },
      next: () => {
        const { showIndex: c } = l;
        let p = -1;
        c < i.list.length - 1 ? p = c + 1 : i.isLoop && (p = 0), p > -1 && (l.showIndex = p, w());
      }
    }), (c, p) => (v(), m("div", le, [
      E(q, {
        "enter-active-class": "animated zoomIn",
        "leave-active-class": "animated zoomOut"
      }, {
        default: K(() => [
          l.isShow ? (v(), m("div", ae, [
            r("div", null, [
              r("video", {
                ref_key: "refElVideo",
                ref: e,
                id: l.keyIndex,
                class: "video-js vjs-default-skin vjs-big-play-centered"
              }, null, 8, re)
            ])
          ])) : x("", !0)
        ]),
        _: 1
      })
    ]));
  }
}), ye = /* @__PURE__ */ T({
  name: "ClPreview",
  __name: "Index",
  setup(y, { expose: _ }) {
    const L = D(null), i = D(null), f = D(null), e = $({
      type: "",
      list: [],
      isLoop: !1,
      isShowPrevNext: !1,
      isDisablePrev: !1,
      isDisableNext: !1,
      isShowCopy: !0
    }), l = O(() => e.type === "image"), a = O(() => e.type === "video");
    let h = null;
    const w = () => document.querySelector("body"), S = () => document.querySelector("body>.panel-preview"), C = () => {
      const t = S();
      return !u.isUndefined(t);
    }, P = () => {
      C() ? (clearTimeout(h), h = null) : (document.body.className = z.getAddClass(document.body.className, "preview-open"), w().appendChild(L.value));
    }, N = (t) => {
      let o = t.keyCode;
      if (!u.isUndefined(o))
        switch (o = o.toString(), o) {
          case "38":
            t.preventDefault(), t.stopPropagation();
            break;
          case "40":
            t.preventDefault(), t.stopPropagation();
            break;
        }
    }, B = (t) => {
      let o = t.keyCode;
      if (!u.isUndefined(o))
        switch (o = o.toString(), o) {
          case "27":
            n();
            break;
          case "37":
            s();
            break;
          case "38":
            t.preventDefault(), t.stopPropagation(), l.value ? i.value.large() : a.value && s();
            break;
          case "39":
            d();
            break;
          case "40":
            t.preventDefault(), t.stopPropagation(), l.value ? i.value.small() : a.value && d();
            break;
        }
    }, c = () => {
      window.removeEventListener("keydown", N), window.removeEventListener("keyup", B);
    }, p = () => {
      window.addEventListener("keydown", N), window.addEventListener("keyup", B);
    }, k = (t = !1) => {
      C() && (h = setTimeout(
        () => {
          const o = S();
          o && (document.body.className = z.getRemoveClass(
            document.body.className,
            "preview-open"
          ), w().removeChild(o)), c();
        },
        t ? 2 * 1e3 : 0
      ));
    }, R = (t) => {
      if (!u.isEmpty(t) && !u.isEmpty(t.src)) {
        P();
        let o = [];
        const I = t.src;
        u.isArray(I) ? o = I : u.isString(I) && (o = [I]), e.type = t.type, e.list = o, e.isLoop = u.isBoolean(t.isLoop) ? t.isLoop : !1, e.isShowCopy = u.isBoolean(t.isShowCopy) ? t.isShowCopy : !0;
        const b = u.isEmpty(t.showIndex) ? 0 : t.showIndex;
        p(), F(() => {
          l.value ? i.value.show(b) : a.value && f.value.show(b);
        });
      }
    };
    G(() => {
      c();
    });
    const n = () => {
      l.value ? i.value.hide() : a.value && f.value.hide(), k();
    }, s = () => {
      e.isDisablePrev || (l.value ? i.value.prev() : a.value && f.value.prev());
    }, d = () => {
      e.isDisableNext || (l.value ? i.value.next() : a.value && f.value.next());
    };
    return H("$PreviewTop", {
      setPrevNextStatus: (t, o) => {
        const I = o > 1;
        if (e.isShowPrevNext = I, I) {
          const { isLoop: b } = e;
          e.isDisablePrev = b ? !1 : t === 0, e.isDisableNext = b ? !1 : t === o - 1;
        }
      }
    }), _({
      show: (t) => {
        R(t);
      },
      destroy: () => {
        k();
      }
    }), (t, o) => (v(), m("div", {
      ref_key: "refElTopParent",
      ref: L,
      class: "panel-preview"
    }, [
      o[3] || (o[3] = r("div", { class: "preview-bg" }, null, -1)),
      r("div", {
        class: "preview-btn preview-close",
        onClick: g(n, ["stop"])
      }, [...o[0] || (o[0] = [
        r("i", { class: "clIconFont clIcon-close" }, null, -1)
      ])]),
      e.isShowPrevNext ? (v(), m(J, { key: 0 }, [
        r("div", {
          class: V({ "preview-btn": !0, "preview-prev": !0, "preview-btn-disable": e.isDisablePrev }),
          onClick: g(s, ["stop"])
        }, [...o[1] || (o[1] = [
          r("i", { class: "clIconFont clIcon-angle-left" }, null, -1)
        ])], 2),
        r("div", {
          class: V({ "preview-btn": !0, "preview-next": !0, "preview-btn-disable": e.isDisableNext }),
          onClick: g(d, ["stop"])
        }, [...o[2] || (o[2] = [
          r("i", { class: "clIconFont clIcon-angle-right" }, null, -1)
        ])], 2)
      ], 64)) : x("", !0),
      l.value ? (v(), j(ie, {
        key: 1,
        ref_key: "refElImage",
        ref: i,
        isLoop: e.isLoop,
        list: e.list,
        isShowCopy: e.isShowCopy
      }, null, 8, ["isLoop", "list", "isShowCopy"])) : a.value ? (v(), j(ce, {
        key: 2,
        ref_key: "refElVideo",
        ref: f,
        isLoop: e.isLoop,
        list: e.list
      }, null, 8, ["isLoop", "list"])) : x("", !0)
    ], 512));
  }
});
export {
  ye as _
};
//# sourceMappingURL=Index.vue_vue_type_script_setup_true_lang-DlCXpiu6.js.map
