import { defineComponent as z, useAttrs as k, ref as h, computed as v, onMounted as D, onUnmounted as I, unref as M, openBlock as T, createElementBlock as P, normalizeClass as N, normalizeStyle as _, withDirectives as W, createElementVNode as j, vShow as A } from "vue";
import F from "cropperjs";
import { useDebounceFn as U } from "@vueuse/core";
const S = "g";
function m(t, c, n) {
  let r = t;
  return c && (r += `__${c}`), n && (r += `--${n}`), r;
}
function q(t, c = !1) {
  const n = c ? `.${S}-${t}` : `${S}-${t}`;
  return {
    b: () => m(n),
    e: (e) => e ? m(n, e) : "",
    m: (e) => e ? m(n, "", e) : "",
    em: (e, u) => e && u ? m(n, e, u) : ""
  };
}
const G = ["src", "alt", "crossorigin"], L = {
  name: "GCropperImage"
}, p = /* @__PURE__ */ z({
  ...L,
  props: {
    src: { type: String, required: !0 },
    alt: { type: String },
    circled: { type: Boolean, default: !1 },
    realTimePreview: { type: Boolean, default: !0 },
    height: { type: [String, Number], default: "360px" },
    crossorigin: {
      type: String,
      default: void 0
    },
    imageStyle: { type: Object, default: () => ({}) },
    options: { type: Object, default: () => ({}) }
  },
  emits: ["cropend", "ready", "cropendError"],
  setup(t, { emit: c }) {
    const n = {
      aspectRatio: 1,
      zoomable: !0,
      zoomOnTouch: !0,
      zoomOnWheel: !0,
      cropBoxMovable: !0,
      cropBoxResizable: !0,
      toggleDragModeOnDblclick: !0,
      autoCrop: !0,
      background: !0,
      highlight: !0,
      center: !0,
      responsive: !0,
      restore: !0,
      checkCrossOrigin: !0,
      checkOrientation: !0,
      scalable: !0,
      modal: !0,
      guides: !0,
      movable: !0,
      rotatable: !0
    }, r = t, d = c, y = k(), g = h(), e = h(), u = h(!1), C = q("cropper-image").b(), f = U(b, 80), w = v(() => ({
      height: r.height,
      maxWidth: "100%",
      ...r.imageStyle
    })), R = v(() => [
      C,
      y.class,
      {
        [`${C}--circled`]: r.circled
      }
    ]), B = v(() => ({ height: `${r.height}`.replace(/px/, "") + "px" }));
    D(E), I(() => {
      var o;
      (o = e.value) == null || o.destroy();
    });
    async function E() {
      const o = M(g);
      o && (e.value = new F(o, {
        ...n,
        ready: () => {
          u.value = !0, b(), d("ready", e.value);
        },
        crop() {
          f();
        },
        zoom() {
          f();
        },
        cropmove() {
          f();
        },
        ...r.options
      }));
    }
    function b() {
      r.realTimePreview && O();
    }
    function O() {
      if (!e.value)
        return;
      let o = e.value.getData();
      (r.circled ? $() : e.value.getCroppedCanvas()).toBlob((a) => {
        if (!a)
          return;
        let s = new FileReader();
        s.readAsDataURL(a), s.onloadend = (l) => {
          var x;
          d("cropend", {
            imgBase64: ((x = l.target) == null ? void 0 : x.result) ?? "",
            imgInfo: o
          });
        }, s.onerror = () => {
          d("cropendError");
        };
      }, "image/png");
    }
    function $() {
      const o = e.value.getCroppedCanvas(), i = document.createElement("canvas"), a = i.getContext("2d"), s = o.width, l = o.height;
      return i.width = s, i.height = l, a.imageSmoothingEnabled = !0, a.drawImage(o, 0, 0, s, l), a.globalCompositeOperation = "destination-in", a.beginPath(), a.arc(
        s / 2,
        l / 2,
        Math.min(s, l) / 2,
        0,
        2 * Math.PI,
        !0
      ), a.fill(), i;
    }
    return (o, i) => (T(), P("div", {
      class: N(R.value),
      style: _(B.value)
    }, [
      W(j("img", {
        ref_key: "imgElRef",
        ref: g,
        src: t.src,
        alt: t.alt,
        crossorigin: t.crossorigin,
        style: _(w.value)
      }, null, 12, G), [
        [A, u.value]
      ])
    ], 6));
  }
});
p.install = function(t, c) {
  t.component(c || p.name, p);
};
const K = {
  title: "Cropper 图片裁剪",
  category: "高级组件",
  status: "100%",
  install(t) {
    t.component(p.name, p);
  }
};
export {
  p as CropperImage,
  K as default
};
