/**
 * ldesign v0.2.14
 * (c) 2022/11/2 16:16 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/dep-a7ba89a3.js';
import { Loading } from '../../loading/index.js';
import { useGlobalIcon } from '../../../hooks/use-global-icon.js';
import { ImageViewer } from '../../image-viewer/index.js';
import { commonProps } from '../const.js';
import '../../../_chunks/dep-70c789e5.js';
import '../../../_chunks/dep-5210251b.js';
import '../../../utils/with-install.js';
import 'vue';
import 'lodash';
import '../../../config.js';
import '../../loading/loading.js';
import '../../../utils/dom.js';
import 'raf';
import 'lodash/isString';
import '../../../utils/easing.js';
import '../../../utils/render-node.js';
import '../../../utils/transfer-dom.js';
import '../../config-provider/config-receiver.js';
import 'lodash/mergeWith';
import '../../config-provider/context.js';
import '../../../_chunks/dep-def4c2ce.js';
import '../../../utils/mixins.js';
import '../../loading/props.js';
import '../../loading/icon/gradient.js';
import '../../../_chunks/dep-eb467ddf.js';
import '../../../_chunks/dep-cf772670.js';
import '../../../_chunks/dep-47d77fc8.js';
import '../../loading/plugin.js';
import '../../config-provider/useConfig.js';
import '../../image-viewer/image-viewer.js';
import 'lodash/kebabCase';
import '../../../hooks/use-default-value.js';
import '../../../hooks/use-config.js';
import '../../image-viewer/props.js';
import '../../image-viewer/base/ImageModalIcon.js';
import '../../../hooks/lnode.js';
import 'lodash/isEmpty';
import 'lodash/isFunction';
import 'lodash/camelCase';
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/dep-29915b8e.js';
import '../../popup/props.js';
import '../../popup/popup.js';
import '@popperjs/core';
import '../../../utils/helper.js';
import '../../popup/container.js';
import '../../tooltip/props.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 '../../../utils/event.js';
import '../../../hooks/use-destroy-onclose.js';
import '../../dialog/props.js';
import '../../dialog/mixins/action.js';
import 'lodash/isObject';
import '../../dialog/stack.js';
import '../../dialog/plugin.js';
import '../../image-viewer/const.js';
import '../../image-viewer/base/Container.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(() => {
      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(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(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 ? 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])])])])]);
  }
});

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