import { defineComponent as k, ref as S, reactive as x, computed as g, onMounted as O, nextTick as N, watch as h, openBlock as l, createElementBlock as C, normalizeClass as F, createElementVNode as A, Fragment as _, createBlock as m, createCommentVNode as c } from "vue";
import { C as a } from "../Shared/base-PQGakkrl.js";
import { _ as $ } from "../Shared/Index.vue_vue_type_script_setup_true_lang-DpxHzkjC.js";
import f from "../Element/ClButton.js";
import { _ as V } from "../Shared/Index.vue_vue_type_script_setup_true_lang-BvGrVSSF.js";
import { _ as L } from "../Shared/Index.vue_vue_type_script_setup_true_lang-AhjUdZHr.js";
const M = { class: "box-flex" }, J = /* @__PURE__ */ k({
  name: "ClCropperPreview",
  __name: "Index",
  props: {
    className: String,
    previewImageUrl: String,
    coverImageUrl: String,
    width: {
      type: Number,
      default: 400
    },
    height: {
      type: Number,
      default: 400
    },
    widthPreview: Number,
    heightPreview: Number,
    previewShape: {
      type: String,
      default: "square"
      // square | round
    },
    isCenterBox: {
      type: Boolean,
      default: !0
    },
    isShowUploadBtn: {
      type: Boolean,
      default: !0
    },
    getCropperImageUrl: Function,
    saveImageBase64: Function
  },
  emits: ["onInitCoverImage"],
  setup(n, { expose: I, emit: U }) {
    const o = n, w = U, s = S(null), i = x({
      isEmptyPrevieUrl: !1,
      isEmptyCoverUrl: !1,
      isInitCover: !1,
      isAgainCropper: !1,
      coverImageUrlOriginal: ""
    }), d = g(() => {
      const { width: r, widthPreview: e } = o;
      let t;
      return e && !a.isEmpty(e) ? t = e : t = r, t;
    }), y = g(() => {
      const { height: r, heightPreview: e } = o;
      let t;
      return e && !a.isEmpty(e) ? t = e : t = r, t;
    }), E = g(() => {
      const { className: r } = o, e = {
        "panel-cropperPreview": !0
      };
      return r && !a.isEmpty(r) && r.split(" ").forEach((t) => {
        a.isEmpty(t) || (e[t] = !0);
      }), e;
    }), v = () => {
      const { previewImageUrl: r } = o, e = a.isEmpty(r);
      i.isEmptyPrevieUrl = e, i.isAgainCropper = e;
    }, u = () => {
      const { coverImageUrl: r } = o, e = a.isEmpty(r);
      i.isEmptyCoverUrl = e, i.coverImageUrlOriginal = e ? "" : r;
    }, B = () => {
      v(), u();
    };
    O(() => {
      N(() => {
        B();
      });
    }), h(
      () => o.previewImageUrl,
      () => {
        v();
      }
    ), h(
      () => o.coverImageUrl,
      () => {
        u();
      }
    );
    const b = (r) => {
      r && w("onInitCoverImage");
    }, P = (r, e) => {
      a.getBase64ByFile(r).then((t) => {
        i.isAgainCropper = !0, i.coverImageUrlOriginal = t;
      });
    };
    return I({
      getValue: async () => s.value ? await s.value.getImageBase64().then((e) => e) : "",
      getCropperUrl: async (r) => {
        let e = "";
        if (s.value && o.getCropperImageUrl)
          e = await o.getCropperImageUrl(s.value, r);
        else {
          const { previewImageUrl: t, coverImageUrl: p } = o;
          e = a.isEmpty(t) ? p : t;
        }
        return e;
      },
      getCoverUrlOriginal: async (r) => {
        let e = "";
        const { coverImageUrlOriginal: t } = i;
        if (t.substring(0, 5) === "data:" && o.saveImageBase64) {
          const p = await o.saveImageBase64(t, r);
          e = p.success ? p.imageUrl : "";
        } else
          /^(http|https):\/\/[^\s]+$/.test(t) && (e = t);
        return e;
      }
    }), (r, e) => (l(), C("div", {
      class: F(E.value)
    }, [
      A("div", M, [
        i.isEmptyPrevieUrl ? c("", !0) : (l(), C(_, { key: 0 }, [
          i.isAgainCropper ? (l(), m(f, {
            key: 0,
            className: "m-b-5 w-120 m-r-10",
            icon: "clIconFont clIcon-reply",
            label: "返回",
            color: "transparent",
            onOnClick: e[0] || (e[0] = (t) => i.isAgainCropper = !1)
          })) : i.isEmptyCoverUrl ? c("", !0) : (l(), m(f, {
            key: 1,
            className: "m-b-5 w-120",
            icon: "clIconFont clIcon-cropper",
            label: "重新裁切",
            color: "transparent",
            onOnClick: e[1] || (e[1] = (t) => i.isAgainCropper = !0)
          }))
        ], 64)),
        n.isShowUploadBtn && (i.isAgainCropper || i.isEmptyCoverUrl) ? (l(), m(V, {
          key: 1,
          className: "m-b-5",
          theme: "button",
          checkFormat: "jpg,png",
          buttonIcon: "clIconFont clIcon-upload-cloud",
          buttonColor: "white",
          buttonLabel: "选择图片",
          isShowUploadResult: !1,
          isShowUploadIng: !1,
          onOnChange: P
        })) : c("", !0)
      ]),
      !i.isEmptyPrevieUrl && !i.isAgainCropper ? (l(), m(L, {
        key: 0,
        type: "image",
        list: [{ value: n.previewImageUrl || "", imgUrl: "", label: "" }],
        width: d.value,
        height: y.value
      }, null, 8, ["list", "width", "height"])) : i.coverImageUrlOriginal.length > 0 ? (l(), m($, {
        key: 1,
        ref_key: "refElCropper",
        ref: s,
        previewShape: n.previewShape,
        isCenterBox: n.isCenterBox,
        src: i.coverImageUrlOriginal,
        width: n.width,
        height: n.height,
        isModal: !1,
        isShowUpload: !1,
        onOnImgLoad: b
      }, null, 8, ["previewShape", "isCenterBox", "src", "width", "height"])) : c("", !0)
    ], 2));
  }
});
export {
  J as default
};
//# sourceMappingURL=ClCropperPreview.js.map
