'use strict';

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

var vue = require('vue');
require('../../../utils/index.js');
var antDesignVue = require('ant-design-vue');
var uploadImage = require('./upload-image.js');
var lodashEs = require('lodash-es');
require('../../image/index.js');
require('../../watermark/index.js');
var createNamespace = require('../../../utils/create-namespace.js');
var image = require('../../image/src/image.js');
var watermark = require('../../watermark/src/watermark.js');
var file = require('../../../utils/file.js');

"use strict";
const _hoisted_1 = { style: { "display": "none" } };
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{ name: "LlUploadImage" },
  __name: "upload-image",
  props: uploadImage.uploadImageProps,
  emits: uploadImage.uploadImageEmits,
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const bem = createNamespace.createNamespace("upload-image");
    const attrs = vue.useAttrs();
    const fileList = vue.ref([]);
    const imageVisible = vue.ref(false);
    const innerValue = vue.ref(
      Array.isArray(props.value) ? [...props.value] : props.value ? [props.value] : []
    );
    const formItemContext = antDesignVue.Form.useInjectFormItemContext();
    const getBindValue = vue.computed(() => ({
      ...lodashEs.omit({ ...attrs }, [...Object.keys(image.imageProps)])
    }));
    const getImgBindValue = vue.computed(() => {
      const imagePropKeys = Object.keys({ ...image.imageProps, ...watermark.watermarkProps });
      return Object.fromEntries(
        Object.entries(attrs).filter(([key]) => imagePropKeys.includes(key))
      );
    });
    function getSizeStyle(size) {
      if (typeof size === "number") {
        return `${size}px`;
      }
      if (typeof size === "string") {
        return size;
      }
      return void 0;
    }
    const handleDragEvent = (e) => {
      if (!props.isDrag) {
        e.preventDefault();
        e.stopPropagation();
      }
    };
    const getBorderType = vue.computed(() => {
      switch (props.borderType) {
        // 虚线
        case "dashed":
          return "dashed";
        // 实线
        case "solid":
          return "solid";
        // 点线
        case "dotted":
          return "dotted";
        default:
          return "";
      }
    });
    const computedAccept = vue.computed(() => {
      return props.accept ? props.accept.split(",").map((e) => e.replace(".", "")).join(",") : props.accept;
    });
    const computedTip = vue.computed(() => {
      return typeof props.uploadTip === "string" ? props.uploadTip : props.uploadTip ? `\u652F\u6301${computedAccept.value}\u683C\u5F0F\uFF0C\u4E0D\u8D85\u8FC7${file.formatFileSize(
        props.imgSize * 1024 * 1024
      )}\u3002` : "";
    });
    const computedMultiple = vue.computed(() => props.maxCount > 1);
    const beforeUpload = async (file$1, FileList) => {
      const fileType = file$1.type.toLowerCase().replace("image/", "");
      const isType = fileType === "svg+xml" ? true : props.accept.includes(fileType);
      const fileSizeInMB = file$1.size / (1024 * 1024);
      const isSize = props.imgSize === 0 ? true : fileSizeInMB <= props.imgSize;
      if (!isType) {
        antDesignVue.message.error(`${file$1.name} \u9700\u8981\u4E3A${computedAccept.value}\u683C\u5F0F\u3002`);
        return false;
      }
      if (!isSize) {
        antDesignVue.message.error(
          `${file$1.name} \u6587\u4EF6\u4E0D\u5F97\u5927\u4E8E${file.formatFileSize(
            props.imgSize * 1024 * 1024
          )}\u3002`
        );
        return false;
      }
      return isType && isSize && props.beforeUpload?.(file$1, FileList);
    };
    const customRequest = async (res) => {
      const fileUrl = await file.fileToBase64(res.file);
      if (props.useBase64) {
        props.maxCount === 1 ? innerValue.value = [fileUrl] : innerValue.value.push(fileUrl);
      }
      try {
        props.customRequest?.(res, fileUrl);
      } catch (error) {
        innerValue.value.splice(innerValue.value.length - 1, 1);
        antDesignVue.message.error("\u4E0A\u4F20\u5931\u8D25");
      }
    };
    const handleRemoveImage = async () => {
      const index = innerValue.value.length - 1;
      innerValue.value.splice(index, 1);
      setValue();
    };
    const setValue = () => {
      const value = props.maxCount === 1 ? innerValue.value.length ? innerValue.value[0] : "" : innerValue.value;
      emits("update:value", value);
      emits("change", value);
      formItemContext.onFieldChange();
    };
    vue.watch(
      () => props.value,
      (newVal) => {
        if (newVal !== innerValue.value) {
          innerValue.value = Array.isArray(newVal) ? [...newVal] : newVal ? [newVal] : [];
        }
      }
    );
    vue.watch(
      innerValue,
      () => {
        setValue();
      },
      {
        deep: true
      }
    );
    return (_ctx, _cache) => {
      const _component_ll_icon = vue.resolveComponent("ll-icon");
      const _component_ll_image = vue.resolveComponent("ll-image");
      const _component_a_upload = vue.resolveComponent("a-upload");
      const _component_a_spin = vue.resolveComponent("a-spin");
      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(
        "div",
        {
          class: vue.normalizeClass(vue.unref(bem).b())
        },
        [
          vue.createElementVNode(
            "div",
            {
              class: vue.normalizeClass(vue.unref(bem).m("preview-box"))
            },
            [
              vue.createVNode(_component_a_spin, {
                size: "small",
                spinning: props.imgLoading
              }, {
                default: vue.withCtx(() => [
                  vue.createVNode(_component_a_upload, vue.mergeProps({
                    "file-list": fileList.value,
                    "onUpdate:fileList": _cache[1] || (_cache[1] = ($event) => fileList.value = $event)
                  }, getBindValue.value, {
                    accept: props.accept,
                    "show-upload-list": false,
                    "max-count": props.maxCount,
                    multiple: computedMultiple.value,
                    "before-upload": beforeUpload,
                    "custom-request": customRequest,
                    class: [vue.unref(bem).m("upload"), vue.unref(bem).is(getBorderType.value)],
                    style: {
                      width: getSizeStyle(_ctx.width + 2),
                      height: getSizeStyle(_ctx.height + 2),
                      borderRadius: _ctx.borderRadius
                    },
                    "list-type": "picture-card",
                    onDragenterCapture: handleDragEvent,
                    onDragoverCapture: handleDragEvent,
                    onDropCapture: handleDragEvent
                  }), {
                    default: vue.withCtx(() => [
                      innerValue.value.length > 0 ? (vue.openBlock(), vue.createBlock(_component_ll_image, vue.mergeProps({ key: 0 }, getImgBindValue.value, {
                        preview: { visible: false },
                        width: getSizeStyle(_ctx.width),
                        height: getSizeStyle(_ctx.height),
                        "border-radius": "0",
                        src: innerValue.value[0],
                        "is-show-border": false
                      }), {
                        previewMaskContent: vue.withCtx(() => [
                          vue.createElementVNode(
                            "div",
                            {
                              class: vue.normalizeClass(vue.unref(bem).m("preview-mask"))
                            },
                            [
                              _ctx.isPreview ? (vue.openBlock(), vue.createBlock(_component_ll_icon, {
                                key: 0,
                                "icon-name": `icon-pwd-look`,
                                class: vue.normalizeClass(vue.unref(bem).e("image-icon")),
                                onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => imageVisible.value = true, ["stop"]))
                              }, null, 8, ["class"])) : vue.createCommentVNode("v-if", true),
                              _ctx.isDelete ? (vue.openBlock(), vue.createBlock(_component_ll_icon, {
                                key: 1,
                                "icon-name": `icon-delete`,
                                class: vue.normalizeClass(vue.unref(bem).e("image-icon")),
                                onClick: vue.withModifiers(handleRemoveImage, ["stop"])
                              }, null, 8, ["class"])) : vue.createCommentVNode("v-if", true),
                              _cache[2] || (_cache[2] = vue.createElementVNode(
                                "div",
                                null,
                                null,
                                -1
                                /* CACHED */
                              ))
                            ],
                            2
                            /* CLASS */
                          )
                        ]),
                        _: 1
                        /* STABLE */
                      }, 16, ["width", "height", "src"])) : !_ctx.$slots.iconRender ? (vue.openBlock(), vue.createElementBlock(
                        vue.Fragment,
                        { key: 1 },
                        [
                          vue.createCommentVNode(" \u65E0\u56FE\u7247\u65F6\u5C55\u793A\u56FE\u6807 "),
                          vue.createElementVNode(
                            "div",
                            {
                              class: vue.normalizeClass(vue.unref(bem).e("upload-content"))
                            },
                            [
                              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 "),
                              computedTip.value ? (vue.openBlock(), vue.createElementBlock(
                                "div",
                                {
                                  key: 1,
                                  class: vue.normalizeClass(vue.unref(bem).m("upload-tip"))
                                },
                                vue.toDisplayString(computedTip.value),
                                3
                                /* TEXT, CLASS */
                              )) : vue.createCommentVNode("v-if", true)
                            ],
                            2
                            /* CLASS */
                          )
                        ],
                        2112
                        /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
                      )) : vue.renderSlot(_ctx.$slots, "iconRender", { key: 2 })
                    ]),
                    _: 3
                    /* FORWARDED */
                  }, 16, ["file-list", "accept", "max-count", "multiple", "class", "style"])
                ]),
                _: 3
                /* FORWARDED */
              }, 8, ["spinning"])
            ],
            2
            /* CLASS */
          ),
          vue.createCommentVNode(" \u9884\u89C8\u5C55\u793A "),
          vue.createElementVNode("div", _hoisted_1, [
            vue.createVNode(_component_a_image_preview_group, {
              preview: {
                visible: imageVisible.value,
                onVisibleChange: (vis) => imageVisible.value = vis
              }
            }, {
              default: vue.withCtx(() => [
                (vue.openBlock(true), vue.createElementBlock(
                  vue.Fragment,
                  null,
                  vue.renderList(innerValue.value, (item) => {
                    return vue.openBlock(), vue.createBlock(_component_a_image, {
                      key: item,
                      src: item
                    }, null, 8, ["src"]);
                  }),
                  128
                  /* KEYED_FRAGMENT */
                ))
              ]),
              _: 1
              /* STABLE */
            }, 8, ["preview"])
          ])
        ],
        2
        /* CLASS */
      );
    };
  }
});

exports.default = _sfc_main;
//# sourceMappingURL=upload-image.vue2.js.map
