/**
 * ldesign v0.2.14
 * (c) 2022/11/2 16:16 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/use-global-icon.js');
var components_imageViewer_index = require('../../image-viewer/index.js');
var components_upload_const = require('../const.js');
require('../../../chunks/log.js');
require('../../../chunks/_commonjsHelpers-2e6815bd.js');
require('../../../utils/with-install.js');
require('vue');
require('lodash');
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('../../../utils/transfer-dom.js');
require('../../config-provider/config-receiver.js');
require('lodash/mergeWith');
require('../../config-provider/context.js');
require('../../../chunks/zh_CN.js');
require('../../../utils/mixins.js');
require('../../loading/props.js');
require('../../loading/icon/gradient.js');
require('../../../chunks/defineProperty-838e4192.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('lodash/kebabCase');
require('../../../hooks/use-default-value.js');
require('../../../hooks/use-config.js');
require('../../image-viewer/props.js');
require('../../image-viewer/base/ImageModalIcon.js');
require('../../../hooks/lnode.js');
require('lodash/isEmpty');
require('lodash/isFunction');
require('lodash/camelCase');
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('../../../utils/helper.js');
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/use-destroy-onclose.js');
require('../../dialog/props.js');
require('../../dialog/mixins/action.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(() => {
      var _displayFiles$value;
      if (multiple.value) return !max.value || displayFiles.value.length < max.value;
      return !((_displayFiles$value = displayFiles.value) !== null && _displayFiles$value !== void 0 && _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 => {
                  var _this$onPreview;
                  let {
                    e
                  } = _ref2;
                  (_this$onPreview = this.onPreview) === null || _this$onPreview === void 0 ? void 0 : _this$onPreview.call(this, {
                    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 => {
            var _this$onRemove;
            let {
              e
            } = _ref3;
            return this === null || this === void 0 ? void 0 : (_this$onRemove = this.onRemove) === null || _this$onRemove === void 0 ? void 0 : _this$onRemove.call(this, {
              e,
              file,
              index
            });
          }
        }
      })])]])]);
    },
    renderProgressFile(file, loadCard) {
      var _this$locale, _this$locale$progress;
      const h = this.$createElement;
      return h("div", {
        "class": loadCard
      }, [h(components_loading_index.Loading, {
        "attrs": {
          "loading": true,
          "size": "medium"
        }
      }), h("p", [(_this$locale = this.locale) === null || _this$locale === void 0 ? void 0 : (_this$locale$progress = _this$locale.progress) === null || _this$locale$progress === void 0 ? void 0 : _this$locale$progress.uploadingText, this.showUploadProgress ? ` ${file.percent}%` : ""])]);
    },
    renderFailFile(file, index, loadCard) {
      var _file$response, _this$locale2, _this$locale2$progres;
      const h = this.$createElement;
      const {
        ErrorCircleFilledIcon,
        DeleteIcon
      } = this.icons;
      return h("div", {
        "class": loadCard
      }, [h(ErrorCircleFilledIcon), h("p", [((_file$response = file.response) === null || _file$response === void 0 ? void 0 : _file$response.error) || ((_this$locale2 = this.locale) === null || _this$locale2 === void 0 ? void 0 : (_this$locale2$progres = _this$locale2.progress) === null || _this$locale2$progres === void 0 ? void 0 : _this$locale2$progres.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 => {
            var _this$onRemove2;
            let {
              e
            } = _ref4;
            return this === null || this === void 0 ? void 0 : (_this$onRemove2 = this.onRemove) === null || _this$onRemove2 === void 0 ? void 0 : _this$onRemove2.call(this, {
              e,
              file,
              index
            });
          }
        }
      })])])]);
    }
  },
  render() {
    var _this$displayFiles, _this$locale3, _this$locale3$trigger;
    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 = this.displayFiles) === null || _this$displayFiles === void 0 ? void 0 : _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$locale3 = this.locale) === null || _this$locale3 === void 0 ? void 0 : (_this$locale3$trigger = _this$locale3.triggerUploadText) === null || _this$locale3$trigger === void 0 ? void 0 : _this$locale3$trigger.image])])])])]);
  }
});

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