'use strict';

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

var vue = require('vue');
var vueDraggablePlus = require('vue-draggable-plus');
var elementPlus = require('element-plus');
var uuid = require('../../utils/uuid.js');
var useImage = require('./composables/useImage.js');
var index$3 = require('../../upload/index.js');
var index$2 = require('../../svg-icon/index.js');
var index = require('../../image-viewer/index.js');
require('./upload-image-item.vue.js');
var index$1 = require('../../flex-box/index.js');
var uploadImageItem_vue_vue_type_script_setup_true_lang = require('./upload-image-item.vue2.js');

"use strict";
const _hoisted_1 = { class: "me-upload-image" };
const _hoisted_2 = { style: { "align-items": "center", "height": "24px" } };
const __default__ = vue.defineComponent({
  name: "me-upload-image"
});
var script = /* @__PURE__ */ vue.defineComponent({
  ...__default__,
  props: /* @__PURE__ */ vue.mergeModels({
    url: { type: String, required: true, default: "" },
    uploadRequest: { type: Function, required: false, default: () => Promise.resolve() },
    imgUrlRequest: { type: Function, required: false, default: () => Promise.resolve() },
    title: { type: String, required: false, default: "\u4E0A\u4F20\u56FE\u7247" },
    width: { type: Number, required: false, default: 100 },
    height: { type: Number, required: false, default: 100 },
    itemStyle: { type: Object, required: false },
    maxCount: { type: Number, required: false, default: 1 },
    closeEvent: { type: Function, required: false, default: () => {
    } },
    uploadRules: { type: Array, required: false, default: () => [
      { name: "jpg", size: 1024 * 1024 * 5 },
      { name: "jpeg", size: 1024 * 1024 * 5 },
      { name: "png", size: 1024 * 1024 * 1 },
      { name: "gif", size: 1024 * 1024 * 1 }
    ] },
    previewImg: { type: Boolean, required: false, default: false },
    module: { type: String, required: false }
  }, {
    "modelValue": { type: String },
    "modelModifiers": {}
  }),
  emits: /* @__PURE__ */ vue.mergeModels(["itemClick", "removeEvent"], ["update:modelValue"]),
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const inputVal = vue.useModel(__props, "modelValue");
    const imageStore = useImage.useImage(props);
    vue.watch(
      inputVal,
      (newValue) => {
        if (imageStore.allowWatch) {
          imageStore.importData(newValue || "");
        } else {
          setTimeout(() => {
            imageStore.allowWatch = true;
          }, 100);
        }
      },
      { immediate: true }
    );
    const el = vue.ref();
    const emit = __emit;
    const clickImageItem = (item, index$1) => {
      if (props.previewImg) {
        index.MeImageViewer(item.url);
      }
      emit("itemClick", item, index$1);
    };
    const uploadCompleteEventHandler = (uploadResultList) => {
      uploadResultList.forEach((item) => {
        imageStore.fileList.value.push(item);
      });
      imageStore.allowWatch = false;
      inputVal.value = imageStore.getValue();
    };
    const setFileList = (uploadResultList) => {
      uploadResultList.forEach((item) => {
        item.domuuid = uuid.uuid();
        imageStore.fileList.value.push(item);
      });
      imageStore.allowWatch = false;
      inputVal.value = imageStore.getValue();
    };
    __expose({
      setFileList,
      openUpload: () => imageStore.openUpload(),
      closeUpload: () => imageStore.closeUpload()
    });
    const onDraggableEnd = () => {
      imageStore.allowWatch = false;
      inputVal.value = imageStore.getValue();
    };
    const removeImageItem = (index) => {
      emit("removeEvent", index);
      imageStore.fileList.value.splice(index, 1);
      imageStore.allowWatch = false;
      inputVal.value = imageStore.getValue();
    };
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
        vue.withDirectives(vue.createVNode(vue.unref(elementPlus.ElInput), {
          modelValue: inputVal.value,
          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputVal.value = $event)
        }, null, 8, ["modelValue"]), [
          [vue.vShow, false]
        ]),
        vue.createCommentVNode(" \u56FE\u7247\u5217\u8868 "),
        vue.createVNode(vue.unref(vueDraggablePlus.VueDraggable), {
          ref_key: "el",
          ref: el,
          modelValue: vue.unref(imageStore).fileList.value,
          "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => vue.unref(imageStore).fileList.value = $event),
          style: { "display": "flex", "float": "left" },
          onEnd: onDraggableEnd
        }, {
          default: vue.withCtx(() => [
            (vue.openBlock(true), vue.createElementBlock(
              vue.Fragment,
              null,
              vue.renderList(vue.unref(imageStore).fileList.value, (item, index) => {
                return vue.openBlock(), vue.createBlock(uploadImageItem_vue_vue_type_script_setup_true_lang.default, {
                  style: vue.normalizeStyle([{ "margin-right": "10px" }, { width: `${props.width}px`, height: `${props.height}px` }]),
                  key: item.domuuid,
                  imgUrl: item.url,
                  imgId: item.id,
                  index,
                  onCloseEvent: removeImageItem,
                  onClick: ($event) => clickImageItem(item, index)
                }, null, 8, ["style", "imgUrl", "imgId", "index", "onClick"]);
              }),
              128
              /* KEYED_FRAGMENT */
            ))
          ]),
          _: 1
          /* STABLE */
        }, 8, ["modelValue"]),
        vue.createCommentVNode(" \u6253\u5F00\u4E0A\u4F20\u5BF9\u8BDD\u6846 "),
        vue.unref(imageStore).fileList.value.length < props.maxCount ? (vue.openBlock(), vue.createElementBlock(
          "div",
          {
            key: 0,
            style: vue.normalizeStyle([{ "float": "left" }, { width: `${props.width}px`, height: `${props.height}px` }])
          },
          [
            vue.createVNode(vue.unref(index$1.MeFlexBox), {
              class: "image-container",
              style: { "width": "100%", "height": "100%" },
              onClick: vue.unref(imageStore).openUpload
            }, {
              default: vue.withCtx(() => [
                vue.createElementVNode("div", _hoisted_2, [
                  vue.createVNode(vue.unref(index$2.MeSvgIcon), {
                    name: "ri-image-add-line",
                    size: 24,
                    style: { "color": "#767676" }
                  })
                ])
              ]),
              _: 1
              /* STABLE */
            }, 8, ["onClick"])
          ],
          4
          /* STYLE */
        )) : vue.createCommentVNode("v-if", true),
        vue.createCommentVNode(" \u901A\u7528\u4E0A\u4F20\u7EC4\u4EF6 "),
        vue.createVNode(vue.unref(index$3.MeUpload), vue.mergeProps({
          modelValue: vue.unref(imageStore).uploadVisible.value,
          "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => vue.unref(imageStore).uploadVisible.value = $event),
          title: props.title,
          uploadRequest: __props.uploadRequest,
          maxCount: __props.maxCount,
          url: __props.url,
          rules: __props.uploadRules,
          uploadCompleteEvent: uploadCompleteEventHandler
        }, _ctx.$attrs), {
          footer: vue.withCtx(() => [
            vue.renderSlot(_ctx.$slots, "footer")
          ]),
          _: 3
          /* FORWARDED */
        }, 16, ["modelValue", "title", "uploadRequest", "maxCount", "url", "rules"])
      ]);
    };
  }
});

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