'use strict';

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

var vue = require('vue');
var iconsVue = require('@ant-design/icons-vue');
require('../../../../vue-components/index.cjs');
require('../../../../utils/index.cjs');
var index$1 = require('../../../tooltip/index.cjs');
var index = require('../../../progress/index.cjs');
var useConfigInject = require('../../../config-provider/src/hooks/useConfigInject.cjs');
var propType = require('../../../../utils/vue/propType.cjs');
var transition = require('../../../../vue-components/transition/src/transition.cjs');

function listItemProps() {
  return {
    prefixCls: String,
    locale: propType.objectType(void 0),
    file: propType.objectType(),
    items: propType.arrayType(),
    listType: propType.stringType(),
    isImgUrl: propType.functionType(),
    showRemoveIcon: propType.booleanType(),
    showDownloadIcon: propType.booleanType(),
    showPreviewIcon: propType.booleanType(),
    removeIcon: propType.functionType(),
    downloadIcon: propType.functionType(),
    previewIcon: propType.functionType(),
    iconRender: propType.functionType(),
    actionIconRender: propType.functionType(),
    itemRender: propType.functionType(),
    onPreview: propType.functionType(),
    onClose: propType.functionType(),
    onDownload: propType.functionType(),
    progress: propType.objectType()
  };
}
var ListItem = /* @__PURE__ */ vue.defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: "ListItem",
  inheritAttrs: false,
  props: listItemProps(),
  setup(props, {
    slots,
    attrs
  }) {
    var _a;
    const showProgress = vue.shallowRef(false);
    const progressRafRef = vue.shallowRef();
    vue.onMounted(() => {
      progressRafRef.value = setTimeout(() => {
        showProgress.value = true;
      }, 300);
    });
    vue.onBeforeUnmount(() => {
      clearTimeout(progressRafRef.value);
    });
    const mergedStatus = vue.shallowRef((_a = props.file) == null ? void 0 : _a.status);
    vue.watch(() => {
      var _a2;
      return (_a2 = props.file) == null ? void 0 : _a2.status;
    }, (status) => {
      if (status !== "removed")
        mergedStatus.value = status;
    });
    const {
      rootPrefixCls
    } = useConfigInject.default("upload", props);
    const transitionProps = vue.computed(() => transition.getTransitionProps(`${rootPrefixCls.value}-fade`));
    return () => {
      var _a2, _b;
      const {
        prefixCls,
        locale,
        listType,
        file,
        items,
        progress: progressProps,
        iconRender = slots.iconRender,
        actionIconRender = slots.actionIconRender,
        itemRender = slots.itemRender,
        isImgUrl,
        showPreviewIcon,
        showRemoveIcon,
        showDownloadIcon,
        previewIcon: customPreviewIcon = slots.previewIcon,
        removeIcon: customRemoveIcon = slots.removeIcon,
        downloadIcon: customDownloadIcon = slots.downloadIcon,
        onPreview,
        onDownload,
        onClose
      } = props;
      const {
        class: className,
        style
      } = attrs;
      const iconNode = iconRender({
        file
      });
      let icon = vue.createVNode("div", {
        "class": `${prefixCls}-text-icon`
      }, [iconNode]);
      if (listType === "picture" || listType === "picture-card") {
        if (mergedStatus.value === "uploading" || !file.thumbUrl && !file.url) {
          const uploadingClassName = {
            [`${prefixCls}-list-item-thumbnail`]: true,
            [`${prefixCls}-list-item-file`]: mergedStatus.value !== "uploading"
          };
          icon = vue.createVNode("div", {
            "class": uploadingClassName
          }, [iconNode]);
        } else {
          const thumbnail = (isImgUrl == null ? void 0 : isImgUrl(file)) ? vue.createVNode("img", {
            "src": file.thumbUrl || file.url,
            "alt": file.name,
            "class": `${prefixCls}-list-item-image`,
            "crossorigin": file.crossOrigin
          }, null) : iconNode;
          const aClassName = {
            [`${prefixCls}-list-item-thumbnail`]: true,
            [`${prefixCls}-list-item-file`]: isImgUrl && !isImgUrl(file)
          };
          icon = vue.createVNode("a", {
            "class": aClassName,
            "onClick": (e) => onPreview(file, e),
            "href": file.url || file.thumbUrl,
            "target": "_blank",
            "rel": "noopener noreferrer"
          }, [thumbnail]);
        }
      }
      const infoUploadingClass = {
        [`${prefixCls}-list-item`]: true,
        [`${prefixCls}-list-item-${mergedStatus.value}`]: true
      };
      const linkProps = typeof file.linkProps === "string" ? JSON.parse(file.linkProps) : file.linkProps;
      const removeIcon = showRemoveIcon ? actionIconRender({
        customIcon: customRemoveIcon ? customRemoveIcon({
          file
        }) : vue.createVNode(iconsVue.DeleteOutlined, null, null),
        callback: () => onClose(file),
        prefixCls,
        title: locale.removeFile
      }) : null;
      const downloadIcon = showDownloadIcon && mergedStatus.value === "done" ? actionIconRender({
        customIcon: customDownloadIcon ? customDownloadIcon({
          file
        }) : vue.createVNode(iconsVue.DownloadOutlined, null, null),
        callback: () => onDownload(file),
        prefixCls,
        title: locale.downloadFile
      }) : null;
      const downloadOrDelete = listType !== "picture-card" && vue.createVNode("span", {
        "key": "download-delete",
        "class": [`${prefixCls}-list-item-actions`, {
          picture: listType === "picture"
        }]
      }, [downloadIcon, removeIcon]);
      const listItemNameClass = `${prefixCls}-list-item-name`;
      const fileName = file.url ? [vue.createVNode("a", {
        "key": "view",
        "target": "_blank",
        "rel": "noopener noreferrer",
        "class": listItemNameClass,
        "title": file.name,
        ...linkProps,
        "href": file.url,
        "onClick": (e) => onPreview(file, e)
      }, [file.name]), downloadOrDelete] : [vue.createVNode("span", {
        "key": "view",
        "class": listItemNameClass,
        "onClick": (e) => onPreview(file, e),
        "title": file.name
      }, [file.name]), downloadOrDelete];
      const previewStyle = {
        pointerEvents: "none",
        opacity: 0.5
      };
      const previewIcon = showPreviewIcon ? vue.createVNode("a", {
        "href": file.url || file.thumbUrl,
        "target": "_blank",
        "rel": "noopener noreferrer",
        "style": file.url || file.thumbUrl ? void 0 : previewStyle,
        "onClick": (e) => onPreview(file, e),
        "title": locale.previewFile
      }, [customPreviewIcon ? customPreviewIcon({
        file
      }) : vue.createVNode(iconsVue.EyeOutlined, null, null)]) : null;
      const pictureCardActions = listType === "picture-card" && mergedStatus.value !== "uploading" && vue.createVNode("span", {
        "class": `${prefixCls}-list-item-actions`
      }, [previewIcon, mergedStatus.value === "done" && downloadIcon, removeIcon]);
      const dom = vue.createVNode("div", {
        "class": infoUploadingClass
      }, [icon, fileName, pictureCardActions, showProgress.value && vue.createVNode(vue.Transition, transitionProps.value, {
        default: () => [vue.withDirectives(vue.createVNode("div", {
          "class": `${prefixCls}-list-item-progress`
        }, ["percent" in file ? vue.createVNode(index.Progress, {
          ...progressProps,
          "type": "line",
          "percent": file.percent
        }, null) : null]), [[vue.vShow, mergedStatus.value === "uploading"]])]
      })]);
      const listContainerNameClass = {
        [`${prefixCls}-list-item-container`]: true,
        [`${className}`]: !!className
      };
      const message = file.response && typeof file.response === "string" ? file.response : ((_a2 = file.error) == null ? void 0 : _a2.statusText) || ((_b = file.error) == null ? void 0 : _b.message) || locale.uploadError;
      const item = mergedStatus.value === "error" ? vue.createVNode(index$1.Tooltip, {
        "title": message,
        "getPopupContainer": (node) => node.parentNode
      }, {
        default: () => [dom]
      }) : dom;
      return vue.createVNode("div", {
        "class": listContainerNameClass,
        "style": style
      }, [itemRender ? itemRender({
        originNode: item,
        file,
        fileList: items,
        actions: {
          download: onDownload.bind(null, file),
          preview: onPreview.bind(null, file),
          remove: onClose.bind(null, file)
        }
      }) : item]);
    };
  }
});

exports.default = ListItem;
exports.listItemProps = listItemProps;
//# sourceMappingURL=ListItem.cjs.map
