import { defineComponent, ref, computed, onMounted, onUnmounted, watch, resolveComponent, createBlock, openBlock, withCtx, createElementVNode, normalizeStyle, normalizeClass, unref, withDirectives, vShow } from 'vue';
import '../../../utils/index.mjs';
import Cropper from 'cropperjs';
import { useDebounceFn } from '../../../../node_modules/.pnpm/@vueuse_shared@10.11.1_vue@3.5.33_typescript@5.9.3_/node_modules/@vueuse/shared/index.mjs';
import { defaultCropperOptions, cropperImageEmits, cropperImageProps } from './cropper-image.mjs';
import { createNamespace } from '../../../utils/create-namespace.mjs';

"use strict";
const _hoisted_1 = ["src", "alt", "crossorigin"];
var _sfc_main = /* @__PURE__ */ defineComponent({
  ...{ name: "CropperImage" },
  __name: "cropper-image",
  props: cropperImageProps,
  emits: cropperImageEmits,
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const bem = createNamespace("cropper-image");
    const imgElRef = ref();
    const cropper = ref();
    const isReady = ref(false);
    const loading = ref(props.loading);
    const getImageStyle = computed(
      () => ({
        height: props.height,
        maxWidth: "100%",
        ...props.imageStyle
      })
    );
    const getWrapperStyle = computed(
      () => ({ height: `${props.height}`.replace(/px/, "") + "px" })
    );
    const init = async () => {
      const imgEl = imgElRef.value;
      if (!imgEl) {
        return;
      }
      loading.value = true;
      cropper.value = new Cropper(imgEl, {
        ...defaultCropperOptions,
        ready() {
          isReady.value = true;
          loading.value = false;
          realTimeCroppered();
          emits("onReady", cropper.value);
        },
        crop() {
          debounceRealTimeCroppered();
        },
        zoom() {
          debounceRealTimeCroppered();
        },
        cropmove() {
          debounceRealTimeCroppered();
        },
        ...props.options
      });
    };
    const realTimeCroppered = () => {
      props.realTimePreview && croppered();
    };
    const debounceRealTimeCroppered = useDebounceFn(realTimeCroppered, 80);
    const croppered = () => {
      if (!cropper.value) {
        return;
      }
      const imgInfo = cropper.value.getData();
      const canvas = props.circled ? getRoundedCanvas() : cropper.value.getCroppedCanvas();
      canvas.toBlob((blob) => {
        if (!blob) {
          return;
        }
        const fileReader = new FileReader();
        fileReader.readAsDataURL(blob);
        fileReader.onloadend = (e) => {
          emits("cropend", {
            imgBase64: e.target?.result ?? "",
            imgInfo
          });
        };
        fileReader.onerror = () => {
          emits("cropendError");
        };
      }, "image/png");
    };
    const getRoundedCanvas = () => {
      const sourceCanvas = cropper.value.getCroppedCanvas();
      const canvas = document.createElement("canvas");
      const context = canvas.getContext("2d");
      const width = sourceCanvas.width;
      const height = sourceCanvas.height;
      canvas.width = width;
      canvas.height = height;
      context.imageSmoothingEnabled = true;
      context.drawImage(sourceCanvas, 0, 0, width, height);
      context.globalCompositeOperation = "destination-in";
      context.beginPath();
      context.arc(
        width / 2,
        height / 2,
        Math.min(width, height) / 2,
        0,
        2 * Math.PI,
        true
      );
      context.fill();
      return canvas;
    };
    const handleLoading = () => {
      loading.value = true;
    };
    onMounted(init);
    onUnmounted(() => {
      cropper.value?.destroy();
    });
    watch(
      () => props.loading,
      (val) => {
        loading.value = val;
      }
    );
    return (_ctx, _cache) => {
      const _component_a_spin = resolveComponent("a-spin");
      return openBlock(), createBlock(_component_a_spin, { spinning: loading.value }, {
        default: withCtx(() => [
          createElementVNode(
            "div",
            {
              class: normalizeClass([unref(bem).b(), props.circled ? unref(bem).is("circled") : ""]),
              style: normalizeStyle(getWrapperStyle.value)
            },
            [
              withDirectives(createElementVNode("img", {
                ref_key: "imgElRef",
                ref: imgElRef,
                src: _ctx.src,
                alt: _ctx.alt,
                crossorigin: _ctx.crossorigin,
                style: normalizeStyle(getImageStyle.value),
                onLoad: handleLoading
              }, null, 44, _hoisted_1), [
                [vShow, isReady.value]
              ])
            ],
            6
            /* CLASS, STYLE */
          )
        ]),
        _: 1
        /* STABLE */
      }, 8, ["spinning"]);
    };
  }
});

export { _sfc_main as default };
//# sourceMappingURL=cropper-image.vue2.mjs.map
