import { inject, ref, reactive, computed, watch, onMounted, onBeforeUnmount, nextTick, h, TransitionGroup } from "vue";
import { defineVxeComponent } from "../../ui/src/comp.mjs";
import XEUtils from "xe-utils";
import "../../ui/index.mjs";
import { getSlotVNs } from "../../ui/src/vn.mjs";
import { errLog, warnLog } from "../../ui/src/log.mjs";
import { toCssUnit, initTpImg, getEventTargetNode, getTpImg } from "../../ui/src/dom.mjs";
import { readLocalFile } from "./util.mjs";
import VxeButtonComponent from "../../button/src/button.mjs";
import { getConfig } from "../../../../@vxe-ui/core/es/src/config.mjs";
import { useSize } from "../../../../@vxe-ui/core/es/src/useFns.mjs";
import { getI18n } from "../../../../@vxe-ui/core/es/src/i18n.mjs";
import { globalEvents, createEvent } from "../../../../@vxe-ui/core/es/src/event.mjs";
import { VxeUI, renderEmptyElement } from "../../../../@vxe-ui/core/es/index.esm.mjs";
import { getIcon } from "../../../../@vxe-ui/core/es/src/icon.mjs";
function createReactData() {
  return {
    isDragUploadStatus: false,
    showMorePopup: false,
    isActivated: false,
    fileList: [],
    fileCacheMaps: {},
    isDragMove: false,
    dragIndex: -1,
    dragTipText: ""
  };
}
function createInternalData() {
  return {
    moreId: XEUtils.uniqueId("upload"),
    imagePreviewTypes: ["jpg", "jpeg", "png", "gif"],
    prevDragIndex: -1
    // prevDragPos: ''
  };
}
const VxeUploadComponent = defineVxeComponent({
  name: "VxeUpload",
  props: {
    modelValue: [Array, String, Object],
    showList: {
      type: Boolean,
      default: () => getConfig().upload.showList
    },
    moreConfig: Object,
    readonly: {
      type: Boolean,
      default: null
    },
    disabled: {
      type: Boolean,
      default: null
    },
    autoSubmit: {
      type: Boolean,
      default: () => getConfig().upload.autoSubmit
    },
    mode: {
      type: String,
      default: () => getConfig().upload.mode
    },
    imageTypes: {
      type: Array,
      default: () => XEUtils.clone(getConfig().upload.imageTypes, true)
    },
    imageConfig: {
      type: Object,
      default: () => XEUtils.clone(getConfig().upload.imageConfig, true)
    },
    /**
     * 已废弃，被 image-config 替换
     * @deprecated
     */
    imageStyle: {
      type: Object,
      default: () => XEUtils.clone(getConfig().upload.imageStyle, true)
    },
    fileTypes: {
      type: Array,
      default: () => XEUtils.clone(getConfig().upload.fileTypes, true)
    },
    dragSort: Boolean,
    dragToUpload: {
      type: Boolean,
      default: () => XEUtils.clone(getConfig().upload.dragToUpload, true)
    },
    dragPlaceholder: {
      type: String,
      default: () => getConfig().upload.dragPlaceholder
    },
    pasteToUpload: {
      type: Boolean,
      default: () => XEUtils.clone(getConfig().upload.pasteToUpload, true)
    },
    keyField: String,
    singleMode: Boolean,
    urlMode: Boolean,
    urlArgs: {
      type: Boolean,
      default: () => getConfig().upload.urlArgs
    },
    multiple: Boolean,
    limitSize: {
      type: [String, Number],
      default: () => getConfig().upload.limitSize
    },
    showLimitSize: {
      type: Boolean,
      default: () => getConfig().upload.showLimitSize
    },
    limitSizeText: {
      type: [String, Number, Function],
      default: () => getConfig().upload.limitSizeText
    },
    limitCount: {
      type: [String, Number],
      default: () => getConfig().upload.limitCount
    },
    showLimitCount: {
      type: Boolean,
      default: () => getConfig().upload.showLimitCount
    },
    limitCountText: {
      type: [String, Number, Function],
      default: () => getConfig().upload.limitCountText
    },
    nameField: {
      type: String,
      default: () => getConfig().upload.nameField
    },
    typeField: {
      type: String,
      default: () => getConfig().upload.typeField
    },
    urlField: {
      type: String,
      default: () => getConfig().upload.urlField
    },
    sizeField: {
      type: String,
      default: () => getConfig().upload.sizeField
    },
    showErrorStatus: {
      type: Boolean,
      default: () => getConfig().upload.showErrorStatus
    },
    showProgress: {
      type: Boolean,
      default: () => getConfig().upload.showProgress
    },
    progressText: {
      type: [String, Number, Function],
      default: () => getConfig().upload.progressText
    },
    showSubmitButton: Boolean,
    autoHiddenButton: {
      type: Boolean,
      default: () => getConfig().upload.autoHiddenButton
    },
    showUploadButton: {
      type: Boolean,
      default: () => getConfig().upload.showUploadButton
    },
    buttonText: {
      type: [String, Number, Function],
      default: () => getConfig().upload.buttonText
    },
    buttonIcon: {
      type: String,
      default: () => getConfig().upload.buttonIcon
    },
    showButtonText: {
      type: Boolean,
      default: () => getConfig().upload.showButtonText
    },
    showButtonIcon: {
      type: Boolean,
      default: () => getConfig().upload.showButtonIcon
    },
    showRemoveButton: {
      type: Boolean,
      default: () => getConfig().upload.showRemoveButton
    },
    showDownloadButton: {
      type: Boolean,
      default: () => getConfig().upload.showDownloadButton
    },
    showPreview: {
      type: Boolean,
      default: () => getConfig().upload.showPreview
    },
    showTip: {
      type: Boolean,
      default: () => null
    },
    maxSimultaneousUploads: {
      type: Number,
      default: () => getConfig().upload.maxSimultaneousUploads
    },
    tipText: [String, Number, Function],
    hintText: String,
    previewMethod: Function,
    beforeSelectMethod: Function,
    uploadMethod: Function,
    beforeRemoveMethod: Function,
    removeMethod: Function,
    beforeDownloadMethod: Function,
    downloadMethod: Function,
    getUrlMethod: Function,
    getThumbnailUrlMethod: Function,
    size: {
      type: String,
      default: () => getConfig().upload.size || getConfig().size
    }
  },
  emits: [
    "update:modelValue",
    "add",
    "remove",
    "remove-fail",
    "download",
    "download-fail",
    "upload-success",
    "upload-error",
    "sort-dragend",
    "more-visible"
  ],
  setup(props, context) {
    const { emit, slots } = context;
    const $xeForm = inject("$xeForm", null);
    const formItemInfo = inject("xeFormItemInfo", null);
    const $xeTable = inject("$xeTable", null);
    const xID = XEUtils.uniqueId();
    const { computeSize } = useSize(props);
    const refElem = ref();
    const refPopupElem = ref();
    const refDragLineElem = ref();
    const refModalDragLineElem = ref();
    const reactData = reactive(createReactData());
    const internalData = createInternalData();
    const refMaps = {
      refElem
    };
    const computeFormReadonly = computed(() => {
      const { readonly } = props;
      if (readonly === null) {
        if ($xeForm) {
          return $xeForm.props.readonly;
        }
        return false;
      }
      return readonly;
    });
    const computeIsDisabled = computed(() => {
      const { disabled } = props;
      if (disabled === null) {
        if ($xeForm) {
          return $xeForm.props.disabled;
        }
        return false;
      }
      return disabled;
    });
    const computeKeyField = computed(() => {
      return props.keyField || "_X_KEY";
    });
    const computeIsImage = computed(() => {
      return props.mode === "image";
    });
    const computeNameProp = computed(() => {
      return props.nameField || "name";
    });
    const computeTypeProp = computed(() => {
      return props.typeField || "type";
    });
    const computeUrlProp = computed(() => {
      return props.urlField || "url";
    });
    const computeSizeProp = computed(() => {
      return props.sizeField || "size";
    });
    const computeLimitMaxSize = computed(() => {
      return XEUtils.toNumber(props.limitSize) * 1024 * 1024;
    });
    const computeLimitMaxCount = computed(() => {
      return props.multiple ? XEUtils.toNumber(props.limitCount) : 1;
    });
    const computeOverCount = computed(() => {
      const { multiple } = props;
      const { fileList } = reactData;
      const limitMaxCount = computeLimitMaxCount.value;
      if (multiple) {
        if (limitMaxCount) {
          return fileList.length >= limitMaxCount;
        }
        return true;
      }
      return fileList.length >= 1;
    });
    const computeLimitSizeUnit = computed(() => {
      const limitSize = XEUtils.toNumber(props.limitSize);
      if (limitSize) {
        if (limitSize > 1048576) {
          return `${limitSize / 1048576}T`;
        }
        if (limitSize > 1024) {
          return `${limitSize / 1024}G`;
        }
        return `${limitSize}M`;
      }
      return "";
    });
    const computedShowTipText = computed(() => {
      const { showTip, tipText } = props;
      if (XEUtils.isBoolean(showTip)) {
        return showTip;
      }
      const defShowTip = getConfig().upload.showTip;
      if (XEUtils.isBoolean(defShowTip)) {
        return defShowTip;
      }
      if (tipText) {
        return true;
      }
      return false;
    });
    const computedDefTipText = computed(() => {
      const { limitSize, fileTypes, multiple, limitCount } = props;
      const tipText = props.tipText || props.hintText;
      const isImage = computeIsImage.value;
      const limitSizeUnit = computeLimitSizeUnit.value;
      if (XEUtils.isString(tipText)) {
        return tipText;
      }
      if (XEUtils.isFunction(tipText)) {
        return `${tipText({})}`;
      }
      const defTips = [];
      if (isImage) {
        if (multiple && limitCount) {
          defTips.push(getI18n("vxe.upload.imgCountHint", [limitCount]));
        }
        if (limitSize && limitSizeUnit) {
          defTips.push(getI18n("vxe.upload.imgSizeHint", [limitSizeUnit]));
        }
      } else {
        if (fileTypes && fileTypes.length) {
          defTips.push(getI18n("vxe.upload.fileTypeHint", [fileTypes.join("/")]));
        }
        if (limitSize && limitSizeUnit) {
          defTips.push(getI18n("vxe.upload.fileSizeHint", [limitSizeUnit]));
        }
        if (multiple && limitCount) {
          defTips.push(getI18n("vxe.upload.fileCountHint", [limitCount]));
        }
      }
      return defTips.join(getI18n("vxe.base.comma"));
    });
    const computeImageOpts = computed(() => {
      return Object.assign({}, props.imageConfig || props.imageStyle);
    });
    const computeImgStyle = computed(() => {
      const imageOpts = computeImageOpts.value;
      const { width, height } = imageOpts;
      const stys = {};
      if (width) {
        stys.width = toCssUnit(width);
      }
      if (height) {
        stys.height = toCssUnit(height);
      }
      return stys;
    });
    const computeMoreOpts = computed(() => {
      return Object.assign({ showMoreButton: true }, props.moreConfig);
    });
    const computeMaps = {};
    const $xeUpload = {
      xID,
      props,
      context,
      reactData,
      internalData,
      getRefMaps: () => refMaps,
      getComputeMaps: () => computeMaps
    };
    const getUniqueKey = () => {
      return XEUtils.uniqueId();
    };
    const getFieldKey = (item) => {
      const keyField = computeKeyField.value;
      return item[keyField];
    };
    const updateFileList = () => {
      const { modelValue, multiple } = props;
      const formReadonly = computeFormReadonly.value;
      const keyField = computeKeyField.value;
      const nameProp = computeNameProp.value;
      const typeProp = computeTypeProp.value;
      const urlProp = computeUrlProp.value;
      const sizeProp = computeSizeProp.value;
      const fileList = modelValue ? (modelValue ? XEUtils.isArray(modelValue) ? modelValue : [modelValue] : []).map((item) => {
        if (!item || XEUtils.isString(item)) {
          const url = `${item || ""}`;
          const urlObj = XEUtils.parseUrl(item);
          const name2 = (urlObj ? urlObj.searchQuery[nameProp] : "") || parseFileName(url);
          return {
            [nameProp]: name2,
            [typeProp]: (urlObj ? urlObj.searchQuery[typeProp] : "") || parseFileType(name2),
            [urlProp]: url,
            [sizeProp]: XEUtils.toNumber(urlObj ? urlObj.searchQuery[sizeProp] : 0) || 0,
            [keyField]: getUniqueKey()
          };
        }
        const name = item[nameProp] || "";
        item[nameProp] = name;
        item[typeProp] = item[typeProp] || parseFileType(name);
        item[urlProp] = item[urlProp] || "";
        item[sizeProp] = item[sizeProp] || 0;
        item[keyField] = item[keyField] || getUniqueKey();
        return item;
      }) : [];
      reactData.fileList = formReadonly || multiple ? fileList : fileList.slice(0, 1);
    };
    const parseFileName = (url) => {
      return decodeURIComponent(`${url || ""}`).split("/").pop() || "";
    };
    const parseFileType = (name) => {
      const index = name.lastIndexOf(".");
      if (index > 0) {
        return name.substring(index + 1).toLowerCase();
      }
      return "";
    };
    const dispatchEvent = (type, params, evnt) => {
      emit(type, createEvent(evnt, { $upload: $xeUpload }, params));
    };
    const emitModel = (value) => {
      emit("update:modelValue", value);
    };
    const handleChange = (value) => {
      const { singleMode, urlMode, urlArgs } = props;
      const urlProp = computeUrlProp.value;
      const nameProp = computeNameProp.value;
      let restList = value ? value.slice(0) : [];
      if (urlMode) {
        restList = restList.map((item) => {
          const url = item[urlProp];
          if (url && urlArgs) {
            const urlObj = XEUtils.parseUrl(url);
            if (!urlObj.searchQuery[nameProp]) {
              if (url.indexOf("blob:") === -1) {
                return `${url}${url.indexOf("?") === -1 ? "?" : "&"}${nameProp}=${encodeURIComponent(item[nameProp] || "")}`;
              }
            }
          }
          return url;
        });
      }
      emitModel(singleMode ? restList[0] || null : restList);
    };
    const getThumbnailFileUrl = (item) => {
      const getThumbnailUrlFn = props.getThumbnailUrlMethod || getConfig().upload.getThumbnailUrlMethod;
      if (getThumbnailUrlFn) {
        return getThumbnailUrlFn({
          $upload: $xeUpload,
          option: item
        });
      }
      return getFileUrl(item);
    };
    const getFileUrl = (item) => {
      const getUrlFn = props.getUrlMethod || getConfig().upload.getUrlMethod;
      const urlProp = computeUrlProp.value;
      return getUrlFn ? getUrlFn({
        $upload: $xeUpload,
        option: item
      }) : item[urlProp];
    };
    const handleDefaultFilePreview = (item) => {
      const { imageTypes, showDownloadButton } = props;
      const typeProp = computeTypeProp.value;
      const beforeDownloadFn = props.beforeDownloadMethod || getConfig().upload.beforeDownloadMethod;
      const { imagePreviewTypes } = internalData;
      if (imagePreviewTypes.concat(imageTypes || []).some((type) => `${type}`.toLowerCase() === `${item[typeProp]}`.toLowerCase())) {
        if (VxeUI.previewImage) {
          VxeUI.previewImage({
            urlList: [getFileUrl(item)],
            showDownloadButton,
            beforeDownloadMethod: beforeDownloadFn ? () => {
              return beforeDownloadFn({
                $upload: $xeUpload,
                option: item
              });
            } : void 0
          });
        }
      }
    };
    const handlePreviewFileEvent = (evnt, item) => {
      const previewFn = props.previewMethod || getConfig().upload.previewMethod;
      if (props.showPreview) {
        if (previewFn) {
          previewFn({
            $upload: $xeUpload,
            option: item
          });
        } else {
          handleDefaultFilePreview(item);
        }
      }
    };
    const handlePreviewImageEvent = (evnt, item, index) => {
      const { showDownloadButton } = props;
      const { fileList } = reactData;
      const previewFn = props.previewMethod || getConfig().upload.previewMethod;
      const beforeDownloadFn = props.beforeDownloadMethod || getConfig().upload.beforeDownloadMethod;
      if (props.showPreview) {
        if (previewFn) {
          previewFn({
            $upload: $xeUpload,
            option: item
          });
        } else if (VxeUI.previewImage) {
          VxeUI.previewImage({
            urlList: fileList.map((item2) => getFileUrl(item2)),
            activeIndex: index,
            showDownloadButton,
            beforeDownloadMethod: beforeDownloadFn ? ({ index: index2 }) => {
              return beforeDownloadFn({
                $upload: $xeUpload,
                option: fileList[index2]
              });
            } : void 0
          });
        }
      }
    };
    const handleUploadResult = (item, file) => {
      const { showErrorStatus } = props;
      const fileKey = getFieldKey(item);
      const uploadFn = props.uploadMethod || getConfig().upload.uploadMethod;
      if (uploadFn) {
        return Promise.resolve(uploadFn({
          $upload: $xeUpload,
          file,
          option: item,
          updateProgress(percentNum) {
            const { fileCacheMaps } = reactData;
            const cacheItem = fileCacheMaps[getFieldKey(item)];
            if (cacheItem) {
              cacheItem.percent = Math.max(0, Math.min(99, XEUtils.toNumber(percentNum)));
            }
          }
        })).then((res) => {
          const { fileCacheMaps } = reactData;
          const cacheItem = fileCacheMaps[fileKey];
          if (cacheItem) {
            cacheItem.percent = 100;
            cacheItem.status = "success";
          }
          Object.assign(item, res);
          dispatchEvent("upload-success", { option: item, data: res }, null);
        }).catch((res) => {
          const { fileCacheMaps } = reactData;
          const cacheItem = fileCacheMaps[fileKey];
          if (cacheItem) {
            cacheItem.status = "error";
          }
          if (showErrorStatus) {
            Object.assign(item, res);
          } else {
            reactData.fileList = reactData.fileList.filter((obj) => getFieldKey(obj) !== fileKey);
          }
          dispatchEvent("upload-error", { option: item, data: res }, null);
        }).finally(() => {
          const { fileCacheMaps } = reactData;
          const cacheItem = fileCacheMaps[fileKey];
          if (cacheItem) {
            cacheItem.loading = false;
          }
        });
      } else {
        const { fileCacheMaps } = reactData;
        const cacheItem = fileCacheMaps[fileKey];
        if (cacheItem) {
          cacheItem.loading = false;
        }
      }
      return Promise.resolve();
    };
    const handleReUpload = (item) => {
      const { uploadMethod, urlMode } = props;
      const { fileCacheMaps } = reactData;
      const fileKey = getFieldKey(item);
      const cacheItem = fileCacheMaps[fileKey];
      const uploadFn = uploadMethod || getConfig().upload.uploadMethod;
      if (uploadFn && cacheItem) {
        const file = cacheItem.file;
        cacheItem.loading = true;
        cacheItem.status = "pending";
        cacheItem.percent = 0;
        handleUploadResult(item, file).then(() => {
          if (urlMode) {
            handleChange(reactData.fileList);
          }
        });
      }
    };
    const handleUploadFile = (files, evnt) => {
      const { multiple, urlMode, showLimitSize, limitSizeText, showLimitCount, limitCountText, autoSubmit } = props;
      const { fileList } = reactData;
      const beforeSelectFn = props.beforeSelectMethod || getConfig().upload.beforeSelectMethod;
      const uploadFn = props.uploadMethod || getConfig().upload.uploadMethod;
      const keyField = computeKeyField.value;
      const nameProp = computeNameProp.value;
      const typeProp = computeTypeProp.value;
      const urlProp = computeUrlProp.value;
      const sizeProp = computeSizeProp.value;
      const limitMaxSize = computeLimitMaxSize.value;
      const limitMaxCount = computeLimitMaxCount.value;
      const limitSizeUnit = computeLimitSizeUnit.value;
      let selectFiles = files;
      if (multiple && limitMaxCount) {
        if (showLimitCount && fileList.length >= limitMaxCount) {
          if (VxeUI.modal) {
            VxeUI.modal.notification({
              title: getI18n("vxe.modal.errTitle"),
              status: "error",
              content: limitCountText ? `${XEUtils.isFunction(limitCountText) ? limitCountText({ maxCount: limitMaxCount }) : limitCountText}` : getI18n("vxe.upload.overCountErr", [limitMaxCount])
            });
          }
          return;
        }
        const overNum = selectFiles.length - (limitMaxCount - fileList.length);
        if (showLimitCount && overNum > 0) {
          const overExtraList = selectFiles.slice(limitMaxCount - fileList.length);
          if (limitCountText) {
            VxeUI.modal.notification({
              title: getI18n("vxe.modal.errTitle"),
              status: "error",
              content: `${XEUtils.isFunction(limitCountText) ? limitCountText({ maxCount: limitMaxCount }) : limitCountText}`
            });
          } else if (VxeUI.modal) {
            VxeUI.modal.notification({
              title: getI18n("vxe.modal.errTitle"),
              status: "error",
              width: null,
              slots: {
                default() {
                  return h("div", {
                    class: "vxe-upload--file-message-over-error"
                  }, [
                    h("div", {}, getI18n("vxe.upload.overCountExtraErr", [limitMaxCount, overNum])),
                    h("div", {
                      class: "vxe-upload--file-message-over-extra"
                    }, overExtraList.map((file, index) => {
                      return h("div", {
                        key: index,
                        class: "vxe-upload--file-message-over-extra-item"
                      }, file.name);
                    }))
                  ]);
                }
              }
            });
          }
        }
        selectFiles = selectFiles.slice(0, limitMaxCount - fileList.length);
      }
      if (showLimitSize && limitMaxSize) {
        for (let i = 0; i < files.length; i++) {
          const file = files[0];
          if (file.size > limitMaxSize) {
            if (VxeUI.modal) {
              VxeUI.modal.notification({
                title: getI18n("vxe.modal.errTitle"),
                status: "error",
                content: limitSizeText ? `${XEUtils.isFunction(limitSizeText) ? limitSizeText({ maxSize: limitMaxSize }) : limitSizeText}` : getI18n("vxe.upload.overSizeErr", [limitSizeUnit])
              });
            }
            return;
          }
        }
      }
      const cacheMaps = Object.assign({}, reactData.fileCacheMaps);
      const newFileList = multiple ? fileList : [];
      const uploadPromiseRests = [];
      selectFiles.forEach((file) => {
        const { name } = file;
        const fileKey = getUniqueKey();
        const fileObj = {
          [nameProp]: name,
          [typeProp]: parseFileType(name),
          [sizeProp]: file.size,
          [urlProp]: URL.createObjectURL(file),
          [keyField]: fileKey
        };
        if (uploadFn) {
          cacheMaps[fileKey] = {
            file,
            loading: !!autoSubmit,
            status: "pending",
            percent: 0
          };
        }
        const item = reactive(fileObj);
        if (!beforeSelectFn || beforeSelectFn({ $upload: $xeUpload, file })) {
          if (uploadFn && autoSubmit) {
            uploadPromiseRests.push(handleUploadResult(item, file));
          }
          newFileList.push(item);
        }
      });
      reactData.fileList = newFileList;
      reactData.fileCacheMaps = cacheMaps;
      newFileList.forEach((item) => {
        dispatchEvent("add", { option: item }, evnt);
      });
      Promise.all(urlMode ? uploadPromiseRests : []).then(() => {
        handleChange(newFileList);
        if ($xeForm && formItemInfo) {
          $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, newFileList);
        }
      });
    };
    const handleChoose = (evnt) => {
      const { multiple, imageTypes, fileTypes } = props;
      const isDisabled = computeIsDisabled.value;
      const isImage = computeIsImage.value;
      if (isDisabled) {
        return Promise.resolve({
          status: false,
          files: [],
          file: null
        });
      }
      return readLocalFile({
        multiple,
        types: isImage ? imageTypes : fileTypes
      }).then((params) => {
        handleUploadFile(params.files, evnt);
        return params;
      });
    };
    const clickEvent = (evnt) => {
      handleChoose(evnt).catch(() => {
      });
    };
    const handleRemoveEvent = (evnt, item, index) => {
      const { fileList } = reactData;
      fileList.splice(index, 1);
      handleChange(fileList);
      if ($xeForm && formItemInfo) {
        $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, fileList);
      }
      dispatchEvent("remove", { option: item }, evnt);
    };
    const removeFileEvent = (evnt, item, index) => {
      const beforeRemoveFn = props.beforeRemoveMethod || getConfig().upload.beforeRemoveMethod;
      const removeFn = props.removeMethod || getConfig().upload.removeMethod;
      Promise.resolve(beforeRemoveFn ? beforeRemoveFn({
        $upload: $xeUpload,
        option: item
      }) : true).then((status) => {
        if (status) {
          if (removeFn) {
            Promise.resolve(removeFn({
              $upload: $xeUpload,
              option: item
            })).then(() => {
              handleRemoveEvent(evnt, item, index);
            }).catch((e) => e);
          } else {
            handleRemoveEvent(evnt, item, index);
          }
        } else {
          dispatchEvent("remove-fail", { option: item }, evnt);
        }
      });
    };
    const handleDownloadEvent = (evnt, item) => {
      dispatchEvent("download", { option: item }, evnt);
    };
    const downloadFileEvent = (evnt, item) => {
      const beforeDownloadFn = props.beforeDownloadMethod || getConfig().upload.beforeDownloadMethod;
      const downloadFn = props.downloadMethod || getConfig().upload.downloadMethod;
      Promise.resolve(beforeDownloadFn ? beforeDownloadFn({
        $upload: $xeUpload,
        option: item
      }) : true).then((status) => {
        if (status) {
          if (downloadFn) {
            Promise.resolve(downloadFn({
              $upload: $xeUpload,
              option: item
            })).then(() => {
              handleDownloadEvent(evnt, item);
            }).catch((e) => e);
          } else {
            handleDownloadEvent(evnt, item);
          }
        } else {
          dispatchEvent("download-fail", { option: item }, evnt);
        }
      });
    };
    const handleUploadDragleaveEvent = (evnt) => {
      const targetElem = evnt.currentTarget;
      const { clientX, clientY } = evnt;
      if (targetElem) {
        const { x: targetX, y: targetY, height: targetHeight, width: targetWidth } = targetElem.getBoundingClientRect();
        if (clientX < targetX || clientX > targetX + targetWidth || clientY < targetY || clientY > targetY + targetHeight) {
          reactData.isDragUploadStatus = false;
        }
      }
    };
    const handleUploadDragoverEvent = (evnt) => {
      const dataTransfer = evnt.dataTransfer;
      if (dataTransfer) {
        const { items } = dataTransfer;
        if (items && items.length) {
          evnt.preventDefault();
          reactData.isDragUploadStatus = true;
        }
      }
    };
    const uploadTransferFileEvent = (evnt, files) => {
      const { imageTypes, fileTypes } = props;
      const { imagePreviewTypes } = internalData;
      const isImage = computeIsImage.value;
      if (isImage) {
        const pasteImgTypes = imagePreviewTypes.concat(imageTypes && imageTypes.length ? imageTypes : []);
        files = files.filter((file) => {
          const fileType = `${file.type.split("/")[1] || ""}`.toLowerCase();
          if (pasteImgTypes.some((type) => `${type}`.toLowerCase() === fileType)) {
            return true;
          }
          return false;
        });
      } else {
        if (fileTypes && fileTypes.length) {
          const errTypes = [];
          files.forEach((file) => {
            const fileType = parseFileType(file.name);
            if (!fileTypes.some((type) => `${type}`.toLowerCase() === fileType)) {
              errTypes.push(fileType);
            }
          });
          if (errTypes.length) {
            if (VxeUI.modal) {
              VxeUI.modal.message({
                content: getI18n("vxe.error.notType", [errTypes.join(", ")]),
                status: "error"
              });
            }
            return;
          }
        }
      }
      if (!files.length) {
        if (VxeUI.modal) {
          VxeUI.modal.notification({
            title: getI18n("vxe.modal.errTitle"),
            status: "error",
            content: getI18n("vxe.upload.uploadTypeErr")
          });
        }
        return;
      }
      handleUploadFile(files, evnt);
    };
    const handleUploadDropEvent = (evnt) => {
      const dataTransfer = evnt.dataTransfer;
      if (dataTransfer) {
        const { items } = dataTransfer;
        if (items && items.length) {
          evnt.preventDefault();
          const files = handleTransferFiles(items);
          if (files.length) {
            uploadTransferFileEvent(evnt, files);
          }
        }
      }
      reactData.isDragUploadStatus = false;
    };
    const handleTransferFiles = (items) => {
      const files = [];
      XEUtils.arrayEach(items, (item) => {
        const file = item.getAsFile();
        if (file) {
          files.push(file);
        }
      });
      return files;
    };
    const handleMoreEvent = (evntParams) => {
      const formReadonly = computeFormReadonly.value;
      const isImage = computeIsImage.value;
      const evnt = evntParams.$event;
      if (VxeUI.modal) {
        VxeUI.modal.open({
          id: internalData.moreId,
          title: formReadonly ? getI18n("vxe.upload.morePopup.readTitle") : getI18n(`vxe.upload.morePopup.${isImage ? "imageTitle" : "fileTitle"}`),
          width: 660,
          height: 500,
          escClosable: true,
          showMaximize: true,
          resize: true,
          maskClosable: true,
          slots: {
            default() {
              const { showErrorStatus, dragToUpload, dragSort, dragPlaceholder } = props;
              const { isActivated, isDragMove, isDragUploadStatus, dragIndex } = reactData;
              const { fileList } = reactData;
              const isDisabled = computeIsDisabled.value;
              const moreContSlot = slots.moreContent || slots["more-content"];
              const ons = {};
              if (dragToUpload && dragIndex === -1) {
                ons.onDragover = handleUploadDragoverEvent;
                ons.onDragleave = handleUploadDragleaveEvent;
                ons.onDrop = handleUploadDropEvent;
              }
              return h("div", Object.assign({ ref: refPopupElem, class: ["vxe-upload--more-popup", {
                "is--readonly": formReadonly,
                "is--disabled": isDisabled,
                "is--active": isActivated,
                "show--error": showErrorStatus,
                "is--drag": isDragUploadStatus
              }] }, ons), moreContSlot ? getSlotVNs(moreContSlot({ options: fileList })) : [
                isImage ? dragSort ? h(TransitionGroup, {
                  name: `vxe-upload--drag-list${isDragMove ? "" : "-disabled"}`,
                  tag: "div",
                  class: "vxe-upload--image-more-list"
                }, {
                  default: () => renderImageItemList(fileList, true).concat(renderImageAction(true))
                }) : h("div", {
                  class: "vxe-upload--image-more-list"
                }, renderImageItemList(fileList, true).concat(renderImageAction(true))) : h("div", {
                  class: "vxe-upload--file-more-list"
                }, [
                  renderFileAction(true),
                  dragSort ? h(TransitionGroup, {
                    name: `vxe-upload--drag-list${isDragMove ? "" : "-disabled"}`,
                    tag: "div",
                    class: "vxe-upload--file-list"
                  }, {
                    default: () => renderFileItemList(fileList, false)
                  }) : h("div", {
                    class: "vxe-upload--file-list"
                  }, renderFileItemList(fileList, true))
                ]),
                dragSort ? h("div", {
                  ref: refModalDragLineElem,
                  class: "vxe-upload--drag-line"
                }) : renderEmptyElement(),
                isDragUploadStatus ? h("div", {
                  class: "vxe-upload--drag-placeholder"
                }, dragPlaceholder || getI18n("vxe.upload.dragPlaceholder")) : renderEmptyElement()
              ]);
            }
          },
          onShow() {
            reactData.showMorePopup = true;
          },
          onHide({ $event }) {
            reactData.showMorePopup = false;
            if ($event) {
              dispatchEvent("more-visible", { visible: false }, $event);
            }
          }
        });
        if (evnt) {
          dispatchEvent("more-visible", { visible: true }, evnt);
        }
      }
    };
    const showDropTip = (evnt, dragEl, dragPos) => {
      const { showMorePopup } = reactData;
      const el = refElem.value;
      const popupEl = refPopupElem.value;
      const wrapperEl = showMorePopup ? popupEl : el;
      if (!wrapperEl) {
        return;
      }
      const wrapperRect = wrapperEl.getBoundingClientRect();
      const ddLineEl = refDragLineElem.value;
      const mdLineEl = refModalDragLineElem.value;
      const currDLineEl = showMorePopup ? mdLineEl : ddLineEl;
      if (currDLineEl) {
        const dragRect = dragEl.getBoundingClientRect();
        currDLineEl.style.display = "block";
        currDLineEl.style.top = `${Math.max(1, dragRect.y - wrapperRect.y)}px`;
        currDLineEl.style.left = `${Math.max(1, dragRect.x - wrapperRect.x)}px`;
        currDLineEl.style.height = `${dragRect.height}px`;
        currDLineEl.style.width = `${dragRect.width - 1}px`;
        currDLineEl.setAttribute("drag-pos", dragPos);
      }
    };
    const hideDropTip = () => {
      const ddLineEl = refDragLineElem.value;
      const mdLineEl = refModalDragLineElem.value;
      if (ddLineEl) {
        ddLineEl.style.display = "";
      }
      if (mdLineEl) {
        mdLineEl.style.display = "";
      }
    };
    const handleDragSortDragstartEvent = (evnt) => {
      evnt.stopPropagation();
      if (evnt.dataTransfer) {
        evnt.dataTransfer.setDragImage(getTpImg(), 0, 0);
      }
      const dragEl = evnt.currentTarget;
      const parentEl = dragEl.parentElement;
      const dragIndex = XEUtils.findIndexOf(Array.from(parentEl.children), (item) => dragEl === item);
      reactData.isDragMove = true;
      reactData.dragIndex = dragIndex;
      setTimeout(() => {
        reactData.isDragMove = false;
      }, 500);
    };
    const handleDragSortDragoverEvent = (evnt) => {
      evnt.stopPropagation();
      evnt.preventDefault();
      const { dragIndex } = reactData;
      if (dragIndex === -1) {
        return;
      }
      const isImage = computeIsImage.value;
      const dragEl = evnt.currentTarget;
      const parentEl = dragEl.parentElement;
      const currIndex = XEUtils.findIndexOf(Array.from(parentEl.children), (item) => dragEl === item);
      let dragPos = "";
      if (isImage) {
        const offsetX = evnt.clientX - dragEl.getBoundingClientRect().x;
        dragPos = offsetX < dragEl.clientWidth / 2 ? "left" : "right";
      } else {
        const offsetY = evnt.clientY - dragEl.getBoundingClientRect().y;
        dragPos = offsetY < dragEl.clientHeight / 2 ? "top" : "bottom";
      }
      if (dragIndex === currIndex) {
        showDropTip(evnt, dragEl, dragPos);
        return;
      }
      showDropTip(evnt, dragEl, dragPos);
      internalData.prevDragIndex = currIndex;
      internalData.prevDragPos = dragPos;
    };
    const handleDragSortDragendEvent = (evnt) => {
      const { fileList, dragIndex } = reactData;
      const { prevDragIndex, prevDragPos } = internalData;
      const oldIndex = dragIndex;
      const targetIndex = prevDragIndex;
      const dragOffsetIndex = prevDragPos === "bottom" || prevDragPos === "right" ? 1 : 0;
      const oldItem = fileList[oldIndex];
      const newItem = fileList[targetIndex];
      if (oldItem && newItem) {
        fileList.splice(oldIndex, 1);
        const ptfIndex = XEUtils.findIndexOf(fileList, (item) => newItem === item);
        const nIndex = ptfIndex + dragOffsetIndex;
        fileList.splice(nIndex, 0, oldItem);
        dispatchEvent("sort-dragend", {
          oldItem,
          newItem,
          dragPos: prevDragPos,
          offsetIndex: dragOffsetIndex,
          _index: {
            newIndex: nIndex,
            oldIndex
          }
        }, evnt);
      }
      hideDropTip();
      reactData.dragIndex = -1;
    };
    const handleItemMousedownEvent = (evnt) => {
      if ($xeTable) {
        evnt.stopPropagation();
      }
      reactData.isActivated = true;
    };
    const handleGlobalPasteEvent = (evnt) => {
      const { pasteToUpload } = props;
      const { isActivated } = reactData;
      if (!isActivated || !pasteToUpload) {
        return;
      }
      const clipboardData = evnt.clipboardData || evnt.originalEvent.clipboardData;
      if (!clipboardData) {
        return;
      }
      const { items } = clipboardData;
      if (!items) {
        return;
      }
      const files = handleTransferFiles(items);
      if (files.length) {
        evnt.preventDefault();
        uploadTransferFileEvent(evnt, files);
      }
    };
    const handleGlobalMousedownEvent = (evnt) => {
      const el = refElem.value;
      const popupEl = refPopupElem.value;
      let isActivated = getEventTargetNode(evnt, el).flag;
      if (!isActivated && popupEl) {
        const parentEl = popupEl.parentElement || popupEl;
        const modalEl = parentEl ? parentEl.parentElement : parentEl;
        isActivated = getEventTargetNode(evnt, modalEl).flag;
      }
      reactData.isActivated = isActivated;
    };
    const handleGlobalBlurEvent = () => {
      reactData.isActivated = false;
    };
    const uploadMethods = {
      dispatchEvent,
      choose() {
        return handleChoose(null);
      },
      submit(isFull) {
        const { maxSimultaneousUploads } = props;
        const msNum = XEUtils.toNumber(maxSimultaneousUploads || 1) || 1;
        const { fileList, fileCacheMaps } = reactData;
        const allPendingList = fileList.filter((item) => {
          const fileKey = getFieldKey(item);
          const cacheItem = fileCacheMaps[fileKey];
          return cacheItem && (cacheItem.status === "pending" || isFull && cacheItem.status === "error");
        });
        const handleSubmit = (item) => {
          const fileKey = getFieldKey(item);
          const cacheItem = fileCacheMaps[fileKey];
          if (cacheItem) {
            const file = cacheItem.file;
            if (file && (cacheItem.status === "pending" || isFull && cacheItem.status === "error")) {
              cacheItem.loading = true;
              cacheItem.percent = 0;
              return handleUploadResult(item, file).then(handleNextSubmit);
            }
          }
          return handleNextSubmit();
        };
        const handleNextSubmit = () => {
          if (allPendingList.length) {
            const item = allPendingList[0];
            allPendingList.splice(0, 1);
            return handleSubmit(item).then(handleNextSubmit);
          }
          return Promise.resolve();
        };
        return Promise.all(allPendingList.splice(0, msNum).map(handleSubmit)).then(() => {
        });
      },
      getMoreVisible() {
        return reactData.showMorePopup;
      },
      openMore() {
        handleMoreEvent({ $event: new Event("click") });
        return nextTick();
      },
      openMoreByEvent(evnt) {
        handleMoreEvent({ $event: evnt });
        return nextTick();
      },
      closeMore() {
        if (VxeUI.modal) {
          VxeUI.modal.close(internalData.moreId);
        }
        return nextTick();
      }
    };
    const uploadPrivateMethods = {};
    Object.assign($xeUpload, uploadMethods, uploadPrivateMethods);
    const renderFileItemList = (currList, isMoreView) => {
      const { showRemoveButton, showDownloadButton, showProgress, progressText, showPreview, showErrorStatus, dragSort, autoSubmit, showSubmitButton } = props;
      const { fileList, fileCacheMaps } = reactData;
      const isDisabled = computeIsDisabled.value;
      const formReadonly = computeFormReadonly.value;
      const nameProp = computeNameProp.value;
      const typeProp = computeTypeProp.value;
      const optionSlot = slots.option;
      const actionSlot = slots.action;
      const cornerSlot = slots.corner;
      const nameSlot = slots.name;
      const ons = {};
      if (dragSort && currList.length > 1) {
        ons.onDragstart = handleDragSortDragstartEvent;
        ons.onDragover = handleDragSortDragoverEvent;
        ons.onDragend = handleDragSortDragendEvent;
      }
      return currList.map((item, index) => {
        const fileKey = getFieldKey(item);
        const cacheItem = fileCacheMaps[fileKey];
        let isLoading = false;
        let isError = false;
        let isPending = false;
        const fileName = `${item[nameProp] || ""}`;
        if (cacheItem) {
          isLoading = cacheItem.loading;
          isError = cacheItem.status === "error";
          isPending = cacheItem.status === "pending";
        }
        return h("div", Object.assign({ key: dragSort ? fileKey : index, class: ["vxe-upload--file-item", {
          "is--preview": showPreview,
          "is--loading": isLoading,
          "is--pending": isPending,
          "is--error": isError
        }], fileid: fileKey, draggable: dragSort ? true : null }, ons), optionSlot ? getSlotVNs(optionSlot({ option: item, isMoreView, options: fileList })) : [
          h("div", {
            class: "vxe-upload--file-item-icon"
          }, [
            h("i", {
              class: getIcon()[`UPLOAD_FILE_TYPE_${`${item[typeProp]}`.toLocaleUpperCase()}`] || getIcon().UPLOAD_FILE_TYPE_DEFAULT
            })
          ]),
          h("div", {
            class: "vxe-upload--file-item-name",
            title: fileName,
            onClick(evnt) {
              if (!isLoading && !isError) {
                handlePreviewFileEvent(evnt, item);
              }
            }
          }, nameSlot ? getSlotVNs(nameSlot({ option: item, isMoreView, options: fileList })) : fileName),
          isLoading ? h("div", {
            class: "vxe-upload--file-item-loading-icon"
          }, [
            h("i", {
              class: getIcon().UPLOAD_LOADING
            })
          ]) : renderEmptyElement(),
          showProgress && isLoading && cacheItem ? h("div", {
            class: "vxe-upload--file-item-loading-text"
          }, progressText ? XEUtils.toFormatString(`${XEUtils.isFunction(progressText) ? progressText({}) : progressText}`, { percent: cacheItem.percent }) : getI18n("vxe.upload.uploadProgress", [cacheItem.percent])) : renderEmptyElement(),
          !isLoading && (isError && showErrorStatus || isPending && showSubmitButton && !autoSubmit) ? h("div", {
            class: "vxe-upload--file-item-rebtn"
          }, [
            h(VxeButtonComponent, {
              icon: isError ? getIcon().UPLOAD_IMAGE_RE_UPLOAD : getIcon().UPLOAD_IMAGE_UPLOAD,
              mode: "text",
              status: "primary",
              content: isError ? getI18n("vxe.upload.reUpload") : getI18n("vxe.upload.manualUpload"),
              onClick() {
                handleReUpload(item);
              }
            })
          ]) : renderEmptyElement(),
          h("div", {
            class: "vxe-upload--file-item-btn-wrapper"
          }, actionSlot ? getSlotVNs(actionSlot({ option: item, isMoreView, options: fileList, readonly: formReadonly })) : [
            cornerSlot ? h("div", {
              class: "vxe-upload--file-item-action"
            }, getSlotVNs(cornerSlot({ option: item, isMoreView, options: fileList, readonly: formReadonly }))) : renderEmptyElement(),
            showDownloadButton && !(isLoading || isPending) ? h("div", {
              class: "vxe-upload--file-item-download-btn",
              onClick(evnt) {
                downloadFileEvent(evnt, item);
              }
            }, [
              h("i", {
                class: getIcon().UPLOAD_FILE_DOWNLOAD
              })
            ]) : renderEmptyElement(),
            showRemoveButton && !formReadonly && !isDisabled && !isLoading ? h("div", {
              class: "vxe-upload--file-item-remove-btn",
              onClick(evnt) {
                removeFileEvent(evnt, item, index);
              }
            }, [
              h("i", {
                class: getIcon().UPLOAD_FILE_REMOVE
              })
            ]) : renderEmptyElement()
          ])
        ]);
      });
    };
    const renderFileAction = (isMoreView) => {
      const { showUploadButton, buttonText, buttonIcon, showButtonText, showButtonIcon, autoHiddenButton } = props;
      const { fileList } = reactData;
      const isDisabled = computeIsDisabled.value;
      const formReadonly = computeFormReadonly.value;
      const showTipText = computedShowTipText.value;
      const defTipText = computedDefTipText.value;
      const overCount = computeOverCount.value;
      const defaultSlot = slots.default;
      const tipSlot = slots.tip || slots.hint;
      if (formReadonly || !showUploadButton) {
        return renderEmptyElement();
      }
      return h("div", {
        class: "vxe-upload--file-action"
      }, [
        autoHiddenButton && overCount ? renderEmptyElement() : h("div", {
          class: "vxe-upload--file-action-btn",
          onClick: clickEvent
        }, defaultSlot ? getSlotVNs(defaultSlot({ isMoreView, options: fileList, $upload: $xeUpload })) : [
          h(VxeButtonComponent, {
            class: "vxe-upload--file-action-button",
            content: isMoreView || showButtonText ? buttonText ? `${XEUtils.isFunction(buttonText) ? buttonText({}) : buttonText}` : getI18n("vxe.upload.fileBtnText") : "",
            icon: showButtonIcon ? buttonIcon || getIcon().UPLOAD_FILE_ADD : "",
            disabled: isDisabled
          })
        ]),
        showTipText && (defTipText || tipSlot) ? h("div", {
          class: "vxe-upload--file-action-tip"
        }, tipSlot ? getSlotVNs(tipSlot({ isMoreView, options: fileList, $upload: $xeUpload })) : `${defTipText}`) : renderEmptyElement()
      ]);
    };
    const rendeFileMode = () => {
      const { showList, moreConfig, dragSort } = props;
      const { fileList, isDragMove } = reactData;
      const moreOpts = computeMoreOpts.value;
      const { maxCount, showMoreButton, layout, moreButtonText } = moreOpts;
      const isHorizontal = layout === "horizontal";
      const moreBtnSlot = slots.moreButton || slots["more-button"];
      let currList = fileList;
      let overMaxNum = 0;
      let isMoreMax = false;
      let isMiniMore = false;
      if (XEUtils.isNumber(maxCount) && fileList.length > maxCount) {
        isMoreMax = true;
        isMiniMore = maxCount === 0;
        overMaxNum = fileList.length - maxCount;
        currList = fileList.slice(0, maxCount);
      }
      return h("div", {
        key: "all",
        class: "vxe-upload--file-wrapper"
      }, showList ? [
        showMoreButton && moreConfig && isHorizontal ? renderEmptyElement() : renderFileAction(true),
        h("div", {
          class: ["vxe-upload--file-list-wrapper", {
            "is--horizontal": isHorizontal
          }]
        }, [
          currList.length ? dragSort ? h(TransitionGroup, {
            name: `vxe-upload--drag-list${isDragMove ? "" : "-disabled"}`,
            tag: "div",
            class: "vxe-upload--file-list"
          }, {
            default: () => renderFileItemList(currList, false)
          }) : h("div", {
            class: "vxe-upload--file-list"
          }, renderFileItemList(currList, false)) : renderEmptyElement(),
          showMoreButton && overMaxNum ? h("div", {
            class: "vxe-upload--file-over-more"
          }, moreBtnSlot ? getSlotVNs(moreBtnSlot({ options: fileList })) : [
            h(VxeButtonComponent, {
              mode: "text",
              content: moreButtonText ? XEUtils.isFunction(moreButtonText) ? moreButtonText({ $upload: $xeUpload, options: fileList }) : XEUtils.toFormatString(moreButtonText, [fileList.length]) : getI18n(isMoreMax && isMiniMore ? "vxe.upload.moreFileBtnText" : "vxe.upload.moreBtnText", [fileList.length]),
              status: "primary",
              onClick: handleMoreEvent
            })
          ]) : renderEmptyElement(),
          showMoreButton && moreConfig && isHorizontal ? renderFileAction(false) : renderEmptyElement()
        ])
      ] : [
        renderFileAction(false)
      ]);
    };
    const renderImageItemList = (currList, isMoreView) => {
      const { showRemoveButton, showProgress, progressText, showPreview, showErrorStatus, dragSort, autoSubmit, showSubmitButton } = props;
      const { fileList, fileCacheMaps } = reactData;
      const isDisabled = computeIsDisabled.value;
      const formReadonly = computeFormReadonly.value;
      const imageOpts = computeImageOpts.value;
      const imgStyle = computeImgStyle.value;
      const optionSlot = slots.option;
      const actionSlot = slots.action;
      const cornerSlot = slots.corner;
      const ons = {
        onMousedown: handleItemMousedownEvent
      };
      if (dragSort && currList.length > 1) {
        ons.onDragstart = handleDragSortDragstartEvent;
        ons.onDragover = handleDragSortDragoverEvent;
        ons.onDragend = handleDragSortDragendEvent;
      }
      return currList.map((item, index) => {
        const fileKey = getFieldKey(item);
        const cacheItem = fileCacheMaps[fileKey];
        let isLoading = false;
        let isError = false;
        let isPending = false;
        if (cacheItem) {
          isLoading = cacheItem.loading;
          isError = cacheItem.status === "error";
          isPending = cacheItem.status === "pending";
        }
        return h("div", Object.assign({ key: dragSort ? fileKey : index, class: ["vxe-upload--image-item", {
          "is--preview": showPreview,
          "is--circle": imageOpts.circle,
          "is--loading": isLoading,
          "is--pending": isPending,
          "is--error": isError
        }], fileid: fileKey, draggable: dragSort ? true : null }, ons), optionSlot ? getSlotVNs(optionSlot({ option: item, isMoreView, options: fileList })) : [
          h("div", {
            class: "vxe-upload--image-item-box",
            style: isMoreView ? null : imgStyle,
            onClick(evnt) {
              if (!isLoading && !isError) {
                handlePreviewImageEvent(evnt, item, index);
              }
            }
          }, [
            isLoading && cacheItem ? h("div", {
              class: "vxe-upload--image-item-loading"
            }, [
              h("div", {
                class: "vxe-upload--image-item-loading-icon"
              }, [
                h("i", {
                  class: getIcon().UPLOAD_LOADING
                })
              ]),
              showProgress ? h("div", {
                class: "vxe-upload--image-item-loading-text"
              }, progressText ? XEUtils.toFormatString(`${XEUtils.isFunction(progressText) ? progressText({}) : progressText}`, { percent: cacheItem.percent }) : getI18n("vxe.upload.uploadProgress", [cacheItem.percent])) : renderEmptyElement()
            ]) : renderEmptyElement(),
            h("div", {
              class: "vxe-upload--image-item-img-wrapper",
              title: getI18n("vxe.upload.viewItemTitle")
            }, [
              h("img", {
                class: "vxe-upload--image-item-img",
                src: getThumbnailFileUrl(item)
              })
            ]),
            !isLoading && (isError && showErrorStatus || isPending && showSubmitButton && !autoSubmit) ? h("div", {
              class: "vxe-upload--image-item-rebtn"
            }, [
              h(VxeButtonComponent, {
                icon: isError ? getIcon().UPLOAD_IMAGE_RE_UPLOAD : getIcon().UPLOAD_IMAGE_UPLOAD,
                mode: "text",
                status: "primary",
                content: isError ? getI18n("vxe.upload.reUpload") : getI18n("vxe.upload.manualUpload"),
                onClick() {
                  handleReUpload(item);
                }
              })
            ]) : renderEmptyElement(),
            h("div", {
              class: "vxe-upload--image-item-btn-wrapper",
              onClick(evnt) {
                evnt.stopPropagation();
              }
            }, actionSlot ? getSlotVNs(actionSlot({ option: item, isMoreView, options: fileList, readonly: formReadonly })) : [
              cornerSlot ? h("div", {
                class: "vxe-upload--file-item-action"
              }, getSlotVNs(cornerSlot({ option: item, isMoreView, options: fileList, readonly: formReadonly }))) : renderEmptyElement(),
              showRemoveButton && !formReadonly && !isDisabled && !isLoading ? h("div", {
                class: "vxe-upload--image-item-remove-btn",
                onClick(evnt) {
                  evnt.stopPropagation();
                  removeFileEvent(evnt, item, index);
                }
              }, [
                h("i", {
                  class: getIcon().UPLOAD_IMAGE_REMOVE
                })
              ]) : renderEmptyElement()
            ])
          ])
        ]);
      });
    };
    const renderImageAction = (isMoreView) => {
      const { showUploadButton, buttonText, buttonIcon, showButtonText, showButtonIcon, autoHiddenButton } = props;
      const { fileList } = reactData;
      const formReadonly = computeFormReadonly.value;
      const showTipText = computedShowTipText.value;
      const defTipText = computedDefTipText.value;
      const overCount = computeOverCount.value;
      const imgStyle = computeImgStyle.value;
      const defaultSlot = slots.default;
      const tipSlot = slots.tip || slots.hint;
      if (formReadonly || !showUploadButton || autoHiddenButton && overCount) {
        return renderEmptyElement();
      }
      return h("div", {
        key: "action",
        class: "vxe-upload--image-action"
      }, [
        h("div", {
          class: "vxe-upload--image-action-btn",
          onClick: clickEvent
        }, defaultSlot ? defaultSlot({ isMoreView, options: fileList, $upload: $xeUpload }) : [
          h("div", {
            class: "vxe-upload--image-action-box",
            style: isMoreView ? null : imgStyle
          }, [
            showButtonIcon ? h("div", {
              class: "vxe-upload--image-action-icon"
            }, [
              h("i", {
                class: buttonIcon || getIcon().UPLOAD_IMAGE_ADD
              })
            ]) : renderEmptyElement(),
            isMoreView || showButtonText ? h("div", {
              class: "vxe-upload--image-action-content"
            }, buttonText ? `${XEUtils.isFunction(buttonText) ? buttonText({}) : buttonText}` : getI18n("vxe.upload.imgBtnText")) : renderEmptyElement(),
            showTipText && (defTipText || tipSlot) ? h("div", {
              class: "vxe-upload--image-action-hint"
            }, tipSlot ? getSlotVNs(tipSlot({ isMoreView, options: fileList, $upload: $xeUpload })) : `${defTipText}`) : renderEmptyElement()
          ])
        ])
      ]);
    };
    const renderImageMode = () => {
      const { showList, dragSort } = props;
      const { fileList, isDragMove } = reactData;
      const moreOpts = computeMoreOpts.value;
      const moreBtnSlot = slots.moreButton || slots["more-button"];
      const { maxCount, showMoreButton, moreButtonText } = moreOpts;
      let currList = fileList;
      let overMaxNum = 0;
      let isMoreMax = false;
      let isMiniMore = false;
      if (XEUtils.isNumber(maxCount) && fileList.length > maxCount) {
        isMoreMax = true;
        isMiniMore = maxCount === 0;
        overMaxNum = fileList.length - maxCount;
        currList = fileList.slice(0, maxCount);
      }
      return h("div", {
        key: "image",
        class: "vxe-upload--image-wrapper"
      }, showList ? [
        dragSort ? h(TransitionGroup, {
          name: `vxe-upload--drag-list${isDragMove ? "" : "-disabled"}`,
          tag: "div",
          class: "vxe-upload--image-list"
        }, {
          default: () => renderImageItemList(currList, false).concat([
            showMoreButton && overMaxNum ? h("div", {
              key: "om",
              class: "vxe-upload--image-over-more"
            }, moreBtnSlot ? getSlotVNs(moreBtnSlot({ options: fileList })) : [
              h(VxeButtonComponent, {
                mode: "text",
                content: moreButtonText ? XEUtils.isFunction(moreButtonText) ? moreButtonText({ $upload: $xeUpload, options: fileList }) : XEUtils.toFormatString(moreButtonText, [fileList.length]) : getI18n(isMoreMax && isMiniMore ? "vxe.upload.moreImgBtnText" : "vxe.upload.moreBtnText", [fileList.length]),
                status: "primary",
                onClick: handleMoreEvent
              })
            ]) : renderEmptyElement(),
            renderImageAction(false)
          ])
        }) : h("div", {
          class: "vxe-upload--image-list"
        }, renderImageItemList(currList, false).concat([
          showMoreButton && overMaxNum ? h("div", {
            class: "vxe-upload--image-over-more"
          }, moreBtnSlot ? getSlotVNs(moreBtnSlot({ options: fileList })) : [
            h(VxeButtonComponent, {
              mode: "text",
              content: moreButtonText ? XEUtils.isFunction(moreButtonText) ? moreButtonText({ $upload: $xeUpload, options: fileList }) : XEUtils.toFormatString(moreButtonText, [fileList.length]) : getI18n(isMoreMax && isMiniMore ? "vxe.upload.moreImgBtnText" : "vxe.upload.moreBtnText", [fileList.length]),
              status: "primary",
              onClick: handleMoreEvent
            })
          ]) : renderEmptyElement(),
          renderImageAction(false)
        ]))
      ] : [
        h("div", {
          class: "vxe-upload--image-list"
        }, [
          renderImageAction(false)
        ])
      ]);
    };
    const renderVN = () => {
      const { showErrorStatus, dragToUpload, pasteToUpload, dragSort, dragPlaceholder } = props;
      const { isDragUploadStatus, showMorePopup, isActivated, dragIndex } = reactData;
      const vSize = computeSize.value;
      const isDisabled = computeIsDisabled.value;
      const formReadonly = computeFormReadonly.value;
      const isImage = computeIsImage.value;
      const ons = {
        onMousedown: handleItemMousedownEvent
      };
      if (dragToUpload && dragIndex === -1) {
        ons.onDragover = handleUploadDragoverEvent;
        ons.onDragleave = handleUploadDragleaveEvent;
        ons.onDrop = handleUploadDropEvent;
      }
      return h("div", Object.assign({ ref: refElem, class: ["vxe-upload", {
        [`size--${vSize}`]: vSize,
        "is--active": isActivated,
        "is--readonly": formReadonly,
        "is--disabled": isDisabled,
        "is--paste": pasteToUpload,
        "show--error": showErrorStatus,
        "is--drag": isDragUploadStatus
      }] }, ons), [
        isImage ? renderImageMode() : rendeFileMode(),
        dragSort ? h("div", {
          ref: refDragLineElem,
          class: "vxe-upload--drag-line"
        }) : renderEmptyElement(),
        isDragUploadStatus && !showMorePopup ? h("div", {
          class: "vxe-upload--drag-placeholder"
        }, dragPlaceholder || getI18n("vxe.upload.dragPlaceholder")) : renderEmptyElement()
      ]);
    };
    const listFlag = ref(0);
    watch(() => props.modelValue ? props.modelValue.length : 0, () => {
      listFlag.value++;
    });
    watch(() => props.modelValue, () => {
      listFlag.value++;
    });
    watch(listFlag, () => {
      updateFileList();
    });
    onMounted(() => {
      if (props.multiple && props.singleMode) {
        errLog("vxe.error.errConflicts", ["[upload] multiple", "single-mode"]);
      }
      if (props.imageStyle) {
        warnLog("vxe.error.delProp", ["[upload] image-style", "image-config"]);
      }
      if (props.dragSort) {
        initTpImg();
      }
      globalEvents.on($xeUpload, "paste", handleGlobalPasteEvent);
      globalEvents.on($xeUpload, "mousedown", handleGlobalMousedownEvent);
      globalEvents.on($xeUpload, "blur", handleGlobalBlurEvent);
    });
    onBeforeUnmount(() => {
      reactData.isDragUploadStatus = false;
      globalEvents.off($xeUpload, "paste");
      globalEvents.off($xeUpload, "mousedown");
      globalEvents.off($xeUpload, "blur");
      XEUtils.assign(reactData, createReactData());
      XEUtils.assign(internalData, createInternalData());
    });
    updateFileList();
    $xeUpload.renderVN = renderVN;
    return $xeUpload;
  },
  render() {
    return this.renderVN();
  }
});
export {
  VxeUploadComponent as default
};
