'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
require('../../../utils/index.js');
var cropperImage = require('./cropper-image.js');
require('./cropper-image.vue.js');
require('../../image/index.js');
require('../../watermark/index.js');
var createNamespace = require('../../../utils/create-namespace.js');
var watermark = require('../../watermark/src/watermark.js');
var image = require('../../image/src/image.js');
var file = require('../../../utils/file.js');
var cropperImage_vue_vue_type_script_setup_true_lang = require('./cropper-image.vue2.js');

"use strict";
const _hoisted_1 = ["src"];
const _hoisted_2 = { style: { "display": "none" } };
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{ name: "LlCropperModal" },
  __name: "cropper-modal",
  props: cropperImage.cropperModalProps,
  emits: cropperImage.cropperModalEmits,
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const bem = createNamespace.createNamespace("cropper-modal");
    const attrs = vue.useAttrs();
    const src = vue.ref(props.avatar || "");
    const previewSource = vue.ref("");
    const open = vue.ref(false);
    const loading = vue.ref(props.loading);
    const uploadLoading = vue.ref(false);
    const imageVisible = vue.ref(false);
    const isHover = vue.ref(false);
    const cropper = vue.ref();
    let scaleX = 1;
    let scaleY = 1;
    const sizeStyle = vue.computed(() => {
      if (typeof props.avatarSize === "number") {
        return `${props.avatarSize}px`;
      } else if (typeof props.avatarSize === "string") {
        return props.avatarSize;
      } else return void 0;
    });
    const getImgBindValue = vue.computed(() => {
      const imagePropKeys = Object.keys({ ...image.imageProps, ...watermark.watermarkProps });
      return Object.fromEntries(
        Object.entries(attrs).filter(([key]) => imagePropKeys.includes(key))
      );
    });
    const filteredAttrs = vue.computed(() => {
      const watermarkKeys = Object.keys(watermark.watermarkProps);
      return Object.fromEntries(
        Object.entries(attrs).filter(([key]) => !watermarkKeys.includes(key))
      );
    });
    const handleBeforeUpload = (file) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      uploadLoading.value = true;
      src.value = "";
      previewSource.value = "";
      reader.onload = function(e) {
        src.value = e.target?.result ?? "";
        uploadLoading.value = false;
      };
      reader.onerror = () => {
        uploadLoading.value = false;
      };
      return false;
    };
    const handleOpen = () => {
      if (props.disabled) return;
      open.value = true;
    };
    const handleCropend = ({ imgBase64 }) => {
      previewSource.value = imgBase64;
    };
    const handleReady = (cropperInstance) => {
      cropper.value = cropperInstance;
    };
    const handlerToolbar = (event, arg) => {
      if (event === "scaleX") {
        scaleX = arg = scaleX === -1 ? 1 : -1;
      }
      if (event === "scaleY") {
        scaleY = arg = scaleY === -1 ? 1 : -1;
      }
      cropper?.value?.[event]?.(arg);
    };
    const handleOk = async () => {
      const blob = file.dataURLtoBlob(previewSource.value);
      emits("confirm", { blob, previewSource: previewSource.value });
      emits("update:avatar", previewSource.value);
      src.value = previewSource.value;
      open.value = false;
    };
    const handleCancel = async () => {
      await cleanValue();
      open.value = false;
    };
    const handleRemoveImage = () => {
      src.value = "";
      previewSource.value = "";
      emits("update:avatar", "");
    };
    const mouseenter = () => {
      isHover.value = true;
    };
    const mouseleave = () => {
      isHover.value = false;
    };
    const cleanValue = () => {
      src.value = "";
      previewSource.value = "";
    };
    vue.watch(open, (val) => {
      if (val) {
        src.value = props.avatar;
        previewSource.value = props.avatar;
      }
    });
    vue.watchEffect(() => {
      loading.value = props.loading;
    });
    __expose({
      cleanValue
    });
    return (_ctx, _cache) => {
      const _component_ll_icon = vue.resolveComponent("ll-icon");
      const _component_ll_button = vue.resolveComponent("ll-button");
      const _component_ll_tooltip = vue.resolveComponent("ll-tooltip");
      const _component_a_upload = vue.resolveComponent("a-upload");
      const _component_ll_space = vue.resolveComponent("ll-space");
      const _component_ll_image = vue.resolveComponent("ll-image");
      const _component_a_spin = vue.resolveComponent("a-spin");
      const _component_ll_new_modal = vue.resolveComponent("ll-new-modal");
      const _component_a_image = vue.resolveComponent("a-image");
      const _component_a_image_preview_group = vue.resolveComponent("a-image-preview-group");
      return vue.openBlock(), vue.createElementBlock(
        vue.Fragment,
        null,
        [
          vue.createVNode(_component_ll_new_modal, {
            open: open.value,
            title: props.title,
            width: 800,
            keyboard: false,
            "mask-closable": false,
            "ok-text": "\u786E\u5B9A",
            loading: uploadLoading.value,
            onCancel: handleCancel,
            onOk: handleOk
          }, {
            default: vue.withCtx(() => [
              vue.createElementVNode(
                "div",
                {
                  class: vue.normalizeClass(vue.unref(bem).b())
                },
                [
                  vue.createElementVNode(
                    "div",
                    {
                      class: vue.normalizeClass(vue.unref(bem).e("left"))
                    },
                    [
                      vue.createElementVNode(
                        "div",
                        {
                          class: vue.normalizeClass(vue.unref(bem).e("cropper"))
                        },
                        [
                          src.value && open.value ? (vue.openBlock(), vue.createBlock(cropperImage_vue_vue_type_script_setup_true_lang.default, {
                            key: 0,
                            src: src.value,
                            height: "300px",
                            circled: _ctx.circled,
                            loading: uploadLoading.value,
                            onCropend: handleCropend,
                            onOnReady: handleReady
                          }, null, 8, ["src", "circled", "loading"])) : vue.createCommentVNode("v-if", true)
                        ],
                        2
                        /* CLASS */
                      ),
                      vue.createElementVNode(
                        "div",
                        {
                          class: vue.normalizeClass(vue.unref(bem).e("toolbar"))
                        },
                        [
                          vue.createVNode(_component_ll_space, null, {
                            default: vue.withCtx(() => [
                              vue.createVNode(_component_a_upload, {
                                "file-list": [],
                                accept: "image/*",
                                "before-upload": handleBeforeUpload
                              }, {
                                default: vue.withCtx(() => [
                                  vue.createVNode(_component_ll_tooltip, {
                                    title: "\u9009\u62E9\u56FE\u7247",
                                    placement: "bottom"
                                  }, {
                                    default: vue.withCtx(() => [
                                      vue.createVNode(_component_ll_button, {
                                        type: "primary",
                                        size: "small",
                                        disabled: uploadLoading.value,
                                        onClick: _cache[0] || (_cache[0] = ($event) => handlerToolbar("reset"))
                                      }, {
                                        default: vue.withCtx(() => [
                                          vue.createVNode(_component_ll_icon, { "icon-name": "icon-upload" })
                                        ]),
                                        _: 1
                                        /* STABLE */
                                      }, 8, ["disabled"])
                                    ]),
                                    _: 1
                                    /* STABLE */
                                  })
                                ]),
                                _: 1
                                /* STABLE */
                              }),
                              vue.createVNode(_component_ll_tooltip, {
                                tip: "\u91CD\u7F6E",
                                placement: "bottom"
                              }, {
                                default: vue.withCtx(() => [
                                  vue.createVNode(_component_ll_button, {
                                    type: "primary",
                                    size: "small",
                                    disabled: !src.value || uploadLoading.value,
                                    onClick: _cache[1] || (_cache[1] = ($event) => handlerToolbar("reset"))
                                  }, {
                                    default: vue.withCtx(() => [
                                      vue.createVNode(_component_ll_icon, { "icon-name": "icon-refresh" })
                                    ]),
                                    _: 1
                                    /* STABLE */
                                  }, 8, ["disabled"])
                                ]),
                                _: 1
                                /* STABLE */
                              }),
                              vue.createVNode(_component_ll_tooltip, {
                                tip: "\u9006\u65F6\u9488\u65CB\u8F6C",
                                placement: "bottom"
                              }, {
                                default: vue.withCtx(() => [
                                  vue.createVNode(_component_ll_button, {
                                    type: "primary",
                                    size: "small",
                                    disabled: !src.value || uploadLoading.value,
                                    onClick: _cache[2] || (_cache[2] = ($event) => handlerToolbar("rotate", -45))
                                  }, {
                                    default: vue.withCtx(() => [
                                      vue.createVNode(_component_ll_icon, { "icon-name": "icon-counter-clockwise" })
                                    ]),
                                    _: 1
                                    /* STABLE */
                                  }, 8, ["disabled"])
                                ]),
                                _: 1
                                /* STABLE */
                              }),
                              vue.createVNode(_component_ll_tooltip, {
                                tip: "\u987A\u65F6\u9488\u65CB\u8F6C",
                                placement: "bottom"
                              }, {
                                default: vue.withCtx(() => [
                                  vue.createVNode(_component_ll_button, {
                                    type: "primary",
                                    size: "small",
                                    disabled: !src.value || uploadLoading.value,
                                    onClick: _cache[3] || (_cache[3] = ($event) => handlerToolbar("rotate", 45))
                                  }, {
                                    default: vue.withCtx(() => [
                                      vue.createVNode(_component_ll_icon, { "icon-name": "icon-clockwise-rotation" })
                                    ]),
                                    _: 1
                                    /* STABLE */
                                  }, 8, ["disabled"])
                                ]),
                                _: 1
                                /* STABLE */
                              }),
                              vue.createVNode(_component_ll_tooltip, {
                                tip: "\u6C34\u5E73\u7FFB\u8F6C",
                                placement: "bottom"
                              }, {
                                default: vue.withCtx(() => [
                                  vue.createVNode(_component_ll_button, {
                                    type: "primary",
                                    size: "small",
                                    disabled: !src.value || uploadLoading.value,
                                    onClick: _cache[4] || (_cache[4] = ($event) => handlerToolbar("scaleX"))
                                  }, {
                                    default: vue.withCtx(() => [
                                      vue.createVNode(_component_ll_icon, { "icon-name": "icon-flip-horizontal" })
                                    ]),
                                    _: 1
                                    /* STABLE */
                                  }, 8, ["disabled"])
                                ]),
                                _: 1
                                /* STABLE */
                              }),
                              vue.createVNode(_component_ll_tooltip, {
                                tip: "\u5782\u76F4\u7FFB\u8F6C",
                                placement: "bottom"
                              }, {
                                default: vue.withCtx(() => [
                                  vue.createVNode(_component_ll_button, {
                                    type: "primary",
                                    size: "small",
                                    disabled: !src.value || uploadLoading.value,
                                    onClick: _cache[5] || (_cache[5] = ($event) => handlerToolbar("scaleY"))
                                  }, {
                                    default: vue.withCtx(() => [
                                      vue.createVNode(_component_ll_icon, { "icon-name": "icon-flip-vertical" })
                                    ]),
                                    _: 1
                                    /* STABLE */
                                  }, 8, ["disabled"])
                                ]),
                                _: 1
                                /* STABLE */
                              }),
                              vue.createVNode(_component_ll_tooltip, {
                                tip: "\u653E\u5927",
                                placement: "bottom"
                              }, {
                                default: vue.withCtx(() => [
                                  vue.createVNode(_component_ll_button, {
                                    type: "primary",
                                    size: "small",
                                    disabled: !src.value || uploadLoading.value,
                                    onClick: _cache[6] || (_cache[6] = ($event) => handlerToolbar("zoom", 0.1))
                                  }, {
                                    default: vue.withCtx(() => [
                                      vue.createVNode(_component_ll_icon, { "icon-name": "icon-amplify1" })
                                    ]),
                                    _: 1
                                    /* STABLE */
                                  }, 8, ["disabled"])
                                ]),
                                _: 1
                                /* STABLE */
                              }),
                              vue.createVNode(_component_ll_tooltip, {
                                tip: "\u7F29\u5C0F",
                                placement: "bottom"
                              }, {
                                default: vue.withCtx(() => [
                                  vue.createVNode(_component_ll_button, {
                                    type: "primary",
                                    size: "small",
                                    disabled: !src.value || uploadLoading.value,
                                    onClick: _cache[7] || (_cache[7] = ($event) => handlerToolbar("zoom", -0.1))
                                  }, {
                                    default: vue.withCtx(() => [
                                      vue.createVNode(_component_ll_icon, { "icon-name": "icon-scale" })
                                    ]),
                                    _: 1
                                    /* STABLE */
                                  }, 8, ["disabled"])
                                ]),
                                _: 1
                                /* STABLE */
                              })
                            ]),
                            _: 1
                            /* STABLE */
                          })
                        ],
                        2
                        /* CLASS */
                      )
                    ],
                    2
                    /* CLASS */
                  ),
                  vue.createElementVNode(
                    "div",
                    {
                      class: vue.normalizeClass(vue.unref(bem).e("right"))
                    },
                    [
                      vue.createVNode(_component_a_spin, { spinning: uploadLoading.value }, {
                        default: vue.withCtx(() => [
                          vue.createElementVNode(
                            "div",
                            {
                              class: vue.normalizeClass(vue.unref(bem).e("preview"))
                            },
                            [
                              previewSource.value ? (vue.openBlock(), vue.createElementBlock("img", {
                                key: 0,
                                src: previewSource.value,
                                alt: "\u9884\u89C8"
                              }, null, 8, _hoisted_1)) : vue.createCommentVNode("v-if", true)
                            ],
                            2
                            /* CLASS */
                          ),
                          previewSource.value ? (vue.openBlock(), vue.createElementBlock(
                            "div",
                            {
                              key: 0,
                              class: vue.normalizeClass(vue.unref(bem).e("group"))
                            },
                            [
                              vue.createVNode(_component_ll_image, {
                                preview: false,
                                src: previewSource.value,
                                width: 32,
                                height: 32
                              }, null, 8, ["src"]),
                              vue.createVNode(_component_ll_image, {
                                preview: false,
                                src: previewSource.value,
                                width: 48,
                                height: 48
                              }, null, 8, ["src"]),
                              vue.createVNode(_component_ll_image, {
                                preview: false,
                                src: previewSource.value,
                                width: 64,
                                height: 64
                              }, null, 8, ["src"]),
                              vue.createVNode(_component_ll_image, {
                                preview: false,
                                src: previewSource.value,
                                width: 80,
                                height: 80
                              }, null, 8, ["src"])
                            ],
                            2
                            /* CLASS */
                          )) : vue.createCommentVNode("v-if", true)
                        ]),
                        _: 1
                        /* STABLE */
                      }, 8, ["spinning"])
                    ],
                    2
                    /* CLASS */
                  )
                ],
                2
                /* CLASS */
              )
            ]),
            _: 1
            /* STABLE */
          }, 8, ["open", "title", "loading"]),
          vue.createElementVNode(
            "div",
            vue.mergeProps({ style: { display: "inline-block" } }, filteredAttrs.value),
            [
              vue.createElementVNode(
                "div",
                {
                  class: vue.normalizeClass([
                    vue.unref(bem).e("cropper-avatar"),
                    props.disabled ? vue.unref(bem).is("disabled") : ""
                  ]),
                  style: vue.normalizeStyle({
                    cursor: props.disabled ? "not-allowed" : "pointer",
                    display: "inline-flex",
                    borderRadius: _ctx.borderRadius,
                    border: `1px var(--color-border) ${_ctx.borderType}`
                  }),
                  onClick: handleOpen,
                  onMouseenter: mouseenter,
                  onMouseleave: mouseleave
                },
                [
                  vue.createVNode(_component_a_spin, {
                    spinning: loading.value,
                    style: { "display": "inline-block" }
                  }, {
                    default: vue.withCtx(() => [
                      vue.renderSlot(_ctx.$slots, "default", { src: _ctx.avatar }, () => [
                        _ctx.avatar ? (vue.openBlock(), vue.createBlock(_component_ll_image, vue.mergeProps({ key: 0 }, getImgBindValue.value, {
                          src: _ctx.avatar,
                          width: _ctx.avatarSize,
                          height: _ctx.avatarSize,
                          "is-show-border": false,
                          "border-radius": _ctx.borderRadius,
                          preview: { visible: false }
                        }), {
                          previewMaskContent: vue.withCtx(() => [
                            _ctx.maskMode === "default" ? (vue.openBlock(), vue.createElementBlock(
                              "div",
                              {
                                key: 0,
                                class: vue.normalizeClass(vue.unref(bem).m("preview-mask-default"))
                              },
                              [
                                vue.createVNode(_component_ll_icon, {
                                  "icon-name": `icon-pwd-look`,
                                  class: vue.normalizeClass(vue.unref(bem).e("image-icon")),
                                  onClick: _cache[8] || (_cache[8] = vue.withModifiers(($event) => imageVisible.value = true, ["stop"]))
                                }, null, 8, ["class"]),
                                vue.createVNode(_component_ll_icon, {
                                  "icon-name": `icon-delete`,
                                  class: vue.normalizeClass(vue.unref(bem).e("image-icon")),
                                  onClick: vue.withModifiers(handleRemoveImage, ["stop"])
                                }, null, 8, ["class"])
                              ],
                              2
                              /* CLASS */
                            )) : (vue.openBlock(), vue.createElementBlock(
                              vue.Fragment,
                              { key: 1 },
                              [
                                vue.createCommentVNode(" \u6E10\u5165\u5F0F "),
                                vue.createElementVNode(
                                  "div",
                                  {
                                    class: vue.normalizeClass(vue.unref(bem).m("preview-mask-fade-in")),
                                    style: vue.normalizeStyle({ height: isHover.value ? _ctx.maskHeight : "0" })
                                  },
                                  [
                                    vue.createElementVNode(
                                      "div",
                                      {
                                        class: vue.normalizeClass(vue.unref(bem).m("mask-text")),
                                        style: vue.normalizeStyle({ fontSize: _ctx.maskTextSize })
                                      },
                                      vue.toDisplayString(_ctx.maskText),
                                      7
                                      /* TEXT, CLASS, STYLE */
                                    )
                                  ],
                                  6
                                  /* CLASS, STYLE */
                                )
                              ],
                              2112
                              /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
                            ))
                          ]),
                          _: 1
                          /* STABLE */
                        }, 16, ["src", "width", "height", "border-radius"])) : (vue.openBlock(), vue.createElementBlock(
                          "div",
                          {
                            key: 1,
                            class: vue.normalizeClass(vue.unref(bem).e("cropper-upload")),
                            style: vue.normalizeStyle({ width: sizeStyle.value, height: sizeStyle.value })
                          },
                          [
                            vue.createVNode(_component_ll_icon, {
                              "icon-name": _ctx.uploadIcon || "icon-add",
                              size: _ctx.uploadIconSize
                            }, null, 8, ["icon-name", "size"]),
                            vue.createCommentVNode(" \u4E0A\u4F20\u6807\u9898 "),
                            _ctx.uploadTitle ? (vue.openBlock(), vue.createElementBlock(
                              "div",
                              {
                                key: 0,
                                class: vue.normalizeClass(vue.unref(bem).m("upload-title"))
                              },
                              vue.toDisplayString(_ctx.uploadTitle),
                              3
                              /* TEXT, CLASS */
                            )) : vue.createCommentVNode("v-if", true),
                            vue.createCommentVNode(" \u4E0A\u4F20\u63D0\u793A "),
                            _ctx.uploadTip ? (vue.openBlock(), vue.createElementBlock(
                              "div",
                              {
                                key: 1,
                                class: vue.normalizeClass(vue.unref(bem).m("upload-tip"))
                              },
                              vue.toDisplayString(_ctx.uploadTip),
                              3
                              /* TEXT, CLASS */
                            )) : vue.createCommentVNode("v-if", true)
                          ],
                          6
                          /* CLASS, STYLE */
                        ))
                      ])
                    ]),
                    _: 3
                    /* FORWARDED */
                  }, 8, ["spinning"]),
                  vue.createElementVNode("div", _hoisted_2, [
                    vue.createVNode(_component_a_image_preview_group, {
                      preview: {
                        visible: imageVisible.value,
                        onVisibleChange: (vis) => imageVisible.value = vis
                      }
                    }, {
                      default: vue.withCtx(() => [
                        vue.createVNode(_component_a_image, { src: _ctx.avatar }, null, 8, ["src"])
                      ]),
                      _: 1
                      /* STABLE */
                    }, 8, ["preview"])
                  ])
                ],
                38
                /* CLASS, STYLE, NEED_HYDRATION */
              )
            ],
            16
            /* FULL_PROPS */
          )
        ],
        64
        /* STABLE_FRAGMENT */
      );
    };
  }
});

exports.default = _sfc_main;
//# sourceMappingURL=cropper-modal.vue2.js.map
