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

'use strict';

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

var VueCompositionAPI = require('@vue/composition-api');
var iconsVue = require('@ldesign/icons-vue');
var utils = require('../../../chunks/utils2.js');
var components_loading_index = require('../../loading/index.js');
var hooks_useGlobalIcon = require('../../../hooks/useGlobalIcon.js');
var components_imageViewer_index = require('../../image-viewer/index.js');
var components_upload_const = require('../const.js');
require('../../../chunks/log.js');
require('../../../chunks/_commonjsHelpers-fe796db6.js');
require('../../../utils/withInstall.js');
require('vue');
require('lodash/capitalize');
require('../../../config.js');
require('../../loading/loading.js');
require('../../../utils/dom.js');
require('raf');
require('lodash/isString');
require('../../../utils/easing.js');
require('../../../utils/render-node.js');
require('lodash');
require('../../../utils/transfer-dom.js');
require('../../config-provider/config-receiver.js');
require('lodash/mergeWith');
require('../../config-provider/context.js');
require('lodash/merge');
require('../../../chunks/zh_CN.js');
require('../../../utils/mixins.js');
require('../../loading/props.js');
require('../../loading/icon/gradient.js');
require('../../../chunks/defineProperty-19da3d4c.js');
require('../../../chunks/set-style.js');
require('../../../chunks/helper2.js');
require('../../loading/plugin.js');
require('../../config-provider/useConfig.js');
require('../../image-viewer/image-viewer.js');
require('../../../hooks/useVModel.js');
require('lodash/kebabCase');
require('../../../hooks/useDefaultValue.js');
require('../../../hooks/useConfig.js');
require('../../../utils/helper.js');
require('lodash/camelCase');
require('../../image-viewer/props.js');
require('../../image-viewer/base/ImageModalIcon.js');
require('../../../hooks/lnode.js');
require('lodash/isEmpty');
require('lodash/isFunction');
require('../../../hooks/render-lnode.js');
require('../../image-viewer/base/ImageViewerUtils.js');
require('../../tooltip/index.js');
require('../../../utils/map-props.js');
require('../../tooltip/tooltip.js');
require('../../../chunks/helper.js');
require('../../popup/props.js');
require('../../popup/popup.js');
require('@popperjs/core');
require('../../popup/container.js');
require('../../tooltip/props.js');
require('../../image-viewer/utils.js');
require('../../image-viewer/base/ImageItem.js');
require('../../image-viewer/hooks/index.js');
require('../../image-viewer/base/ImageViewerModal.js');
require('../../dialog/index.js');
require('../../dialog/dialog.js');
require('lodash/isNumber');
require('lodash/throttle');
require('../../button/index.js');
require('../../button/button.js');
require('../../../utils/ripple.js');
require('../../button/props.js');
require('../../../utils/event.js');
require('../../../hooks/useDestroyOnClose.js');
require('../../dialog/props.js');
require('../../dialog/actions.js');
require('lodash/isObject');
require('../../dialog/stack.js');
require('../../dialog/plugin.js');
require('../../image-viewer/const.js');
require('../../image-viewer/base/Container.js');

var ImageCard = VueCompositionAPI.defineComponent({
  name: "UploadImageCard",
  props: {
    ...components_upload_const.commonProps,
    multiple: Boolean,
    max: Number,
    disabled: Boolean,
    showUploadProgress: Boolean,
    triggerUpload: Function,
    uploadFiles: Function,
    cancelUpload: Function
  },
  setup(props) {
    const {
      displayFiles,
      multiple,
      max
    } = VueCompositionAPI.toRefs(props);
    const icons = hooks_useGlobalIcon.useGlobalIcon({
      AddIcon: iconsVue.AddIcon,
      BrowseIcon: iconsVue.BrowseIcon,
      DeleteIcon: iconsVue.DeleteIcon,
      ErrorCircleFilledIcon: iconsVue.ErrorCircleFilledIcon
    });
    const showTrigger = VueCompositionAPI.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(components_imageViewer_index.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(components_loading_index.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 ? utils.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])])])])]);
  }
});

exports["default"] = ImageCard;
//# sourceMappingURL=image-card.js.map
