/**
 * ldesign v0.2.22
 * (c) 2022/12/7 16:21 built by swimly
 * @license MIT
 */

import { defineComponent, toRefs, computed } from '@vue/composition-api';
import { AddIcon, BrowseIcon, DeleteIcon, ErrorCircleFilledIcon } from '@ldesign/icons-vue';
import { a as abridgeName } from '../../../chunks/utils2.js';
import { Loading } from '../../loading/index.js';
import { useGlobalIcon } from '../../../hooks/useGlobalIcon.js';
import { ImageViewer } from '../../image-viewer/index.js';
import { commonProps } from '../const.js';
import '../../../chunks/defineProperty-19da3d4c.js';
import '../../../chunks/log.js';
import '../../../chunks/_commonjsHelpers-fe796db6.js';
import '../../../utils/withInstall.js';
import 'vue';
import 'lodash/capitalize';
import '../../../config.js';
import '../../loading/loading.js';
import '../../../utils/dom.js';
import 'raf';
import 'lodash/isString';
import '../../../chunks/index.js';
import '../../../utils/easing.js';
import '../../../utils/render-node.js';
import 'lodash';
import '../../../utils/transfer-dom.js';
import '../../config-provider/config-receiver.js';
import 'lodash/mergeWith';
import '../../config-provider/context.js';
import 'lodash/merge';
import '../../../chunks/zh_CN.js';
import '../../config-provider/type.js';
import '../../../utils/mixins.js';
import '../../loading/props.js';
import '../../loading/icon/gradient.js';
import '../../../chunks/set-style.js';
import '../../../chunks/helper2.js';
import '../../loading/style/css.js';
import '../../loading/type.js';
import '../../loading/plugin.js';
import '../../../hooks/useConfig.js';
import '../../config-provider/useConfig.js';
import '../../image-viewer/image-viewer.js';
import '../../../hooks/useVModel.js';
import 'lodash/kebabCase';
import '../../../hooks/useDefaultValue.js';
import '../../../utils/helper.js';
import 'lodash/camelCase';
import '../../image-viewer/props.js';
import '../../image-viewer/base/ImageModalIcon.js';
import '../../../hooks/lnode.js';
import 'lodash/isEmpty';
import 'lodash/isFunction';
import '../../../hooks/render-lnode.js';
import '../../image-viewer/base/ImageViewerUtils.js';
import '../../tooltip/index.js';
import '../../../utils/map-props.js';
import '../../tooltip/tooltip.js';
import '../../../chunks/helper.js';
import '../../../chunks/_commonjsHelpers.js';
import '../../popup/props.js';
import '../../popup/popup.js';
import '@popperjs/core';
import '../../popup/container.js';
import '../../tooltip/props.js';
import '../../tooltip/style/css.js';
import '../../tooltip/type.js';
import '../../image-viewer/utils.js';
import '../../image-viewer/base/ImageItem.js';
import '../../image-viewer/hooks/index.js';
import '../../image-viewer/base/ImageViewerModal.js';
import '../../dialog/index.js';
import '../../dialog/dialog.js';
import 'lodash/isNumber';
import 'lodash/throttle';
import '../../button/index.js';
import '../../button/button.js';
import '../../../utils/ripple.js';
import '../../button/props.js';
import '../../button/style/css.js';
import '../../button/type.js';
import '../../../utils/event.js';
import '../../../hooks/useDestroyOnClose.js';
import '../../dialog/props.js';
import '../../dialog/actions.js';
import 'lodash/isObject';
import '../../dialog/stack.js';
import '../../dialog/style/css.js';
import '../../dialog/type.js';
import '../../dialog/plugin.js';
import '../../image-viewer/const.js';
import '../../image-viewer/base/Container.js';
import '../../image-viewer/style/css.js';
import '../../image-viewer/type.js';

var ImageCard = defineComponent({
  name: "UploadImageCard",
  props: {
    ...commonProps,
    multiple: Boolean,
    max: Number,
    disabled: Boolean,
    showUploadProgress: Boolean,
    triggerUpload: Function,
    uploadFiles: Function,
    cancelUpload: Function
  },
  setup(props) {
    const {
      displayFiles,
      multiple,
      max
    } = toRefs(props);
    const icons = useGlobalIcon({
      AddIcon: AddIcon,
      BrowseIcon: BrowseIcon,
      DeleteIcon: DeleteIcon,
      ErrorCircleFilledIcon: ErrorCircleFilledIcon
    });
    const showTrigger = computed(() => {
      if (multiple.value) return !max.value || displayFiles.value.length < max.value;
      return !displayFiles.value?.[0];
    });
    return {
      icons,
      showTrigger
    };
  },
  methods: {
    renderMainContent(file, index) {
      const h = this.$createElement;
      const {
        BrowseIcon,
        DeleteIcon
      } = this.icons;
      return h("div", {
        "class": `${this.classPrefix}-upload__card-content ${this.classPrefix}-upload__card-box`
      }, [h("img", {
        "class": `${this.classPrefix}-upload__card-image`,
        "attrs": {
          "src": file.url
        }
      }), h("div", {
        "class": `${this.classPrefix}-upload__card-mask`
      }, [h("span", {
        "class": `${this.classPrefix}-upload__card-mask-item`,
        "on": {
          "click": e => e.stopPropagation()
        }
      }, [h(ImageViewer, {
        "attrs": {
          "images": this.displayFiles.map(t => t.url),
          "defaultIndex": index,
          "trigger": (h, _ref) => {
            let {
              open
            } = _ref;
            return h(BrowseIcon, {
              "on": {
                "click": _ref2 => {
                  let {
                    e
                  } = _ref2;
                  this.onPreview?.({
                    file,
                    index,
                    e
                  });
                  open();
                }
              }
            });
          }
        }
      })]), !this.disabled && [h("span", {
        "class": `${this.classPrefix}-upload__card-mask-item-divider`
      }), h("span", {
        "class": `${this.classPrefix}-upload__card-mask-item`,
        "on": {
          "click": e => e.stopPropagation()
        }
      }, [h(DeleteIcon, {
        "on": {
          "click": _ref3 => {
            let {
              e
            } = _ref3;
            return this?.onRemove?.({
              e,
              file,
              index
            });
          }
        }
      })])]])]);
    },
    renderProgressFile(file, loadCard) {
      const h = this.$createElement;
      return h("div", {
        "class": loadCard
      }, [h(Loading, {
        "attrs": {
          "loading": true,
          "size": "medium"
        }
      }), h("p", [this.locale?.progress?.uploadingText, this.showUploadProgress ? ` ${file.percent}%` : ""])]);
    },
    renderFailFile(file, index, loadCard) {
      const h = this.$createElement;
      const {
        ErrorCircleFilledIcon,
        DeleteIcon
      } = this.icons;
      return h("div", {
        "class": loadCard
      }, [h(ErrorCircleFilledIcon), h("p", [file.response?.error || this.locale?.progress?.failText]), h("div", {
        "class": `${this.classPrefix}-upload__card-mask`
      }, [h("span", {
        "class": `${this.classPrefix}-upload__card-mask-item`,
        "on": {
          "click": e => e.stopPropagation()
        }
      }, [h(DeleteIcon, {
        "on": {
          "click": _ref4 => {
            let {
              e
            } = _ref4;
            return this?.onRemove?.({
              e,
              file,
              index
            });
          }
        }
      })])])]);
    }
  },
  render() {
    const h = arguments[0];
    const cardItemClasses = `${this.classPrefix}-upload__card-item ${this.classPrefix}-is-background`;
    const {
      AddIcon
    } = this.icons;
    return h("div", [h("ul", {
      "class": `${this.classPrefix}-upload__card`
    }, [this.displayFiles?.map((file, index) => {
      const loadCard = `${this.classPrefix}-upload__card-container ${this.classPrefix}-upload__card-box`;
      const fileName = this.abridgeName ? abridgeName(file.name, ...this.abridgeName) : file.name;
      return h("li", {
        "class": cardItemClasses,
        "key": index
      }, [file.status === "progress" && this.renderProgressFile(file, loadCard), file.status === "fail" && this.renderFailFile(file, index, loadCard), !["progress", "fail"].includes(file.status) && file.url && this.renderMainContent(file, index), h("div", {
        "class": `${this.classPrefix}-upload__card-name`
      }, [fileName])]);
    }), this.showTrigger && h("li", {
      "class": cardItemClasses,
      "on": {
        "click": this.triggerUpload
      }
    }, [h("div", {
      "class": `${this.classPrefix}-upload__card-container ${this.classPrefix}-upload__card-box`
    }, [h(AddIcon), h("p", {
      "class": `${this.classPrefix}-size-s`
    }, [this.locale?.triggerUploadText?.image])])])])]);
  }
});

export { ImageCard as default };
//# sourceMappingURL=image-card.js.map
