/**
 * tdesign v0.46.4
 * (c) 2022 tdesign
 * @license MIT
 */

import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { AddIcon, DeleteIcon, BrowseIcon } from 'tdesign-icons-vue';
import { Loading } from '../loading/index.js';
import props from './props.js';
import mixins from '../utils/mixins.js';
import getConfigReceiverMixins, { getGlobalIconMixins } from '../config-provider/config-receiver.js';
import '../loading/loading.js';
import '../loading/icon/gradient.js';
import '../_common/js/loading/circle-adapter.js';
import '../_common/js/utils/set-style.js';
import '../_common/js/utils/helper.js';
import '@babel/runtime/helpers/toConsumableArray';
import '@babel/runtime/helpers/objectWithoutProperties';
import '@babel/runtime/helpers/slicedToArray';
import 'vue';
import 'lodash/mergeWith';
import '../config-provider/context.js';
import 'lodash/merge';
import '../_common/js/global-config/default-config.js';
import '../_common/js/global-config/locale/zh_CN.js';
import '../config-provider/type.js';
import '../utils/dom.js';
import 'raf';
import 'lodash/isString';
import '../utils/easing.js';
import '../utils/render-tnode.js';
import '@babel/runtime/helpers/typeof';
import 'lodash/camelCase';
import 'lodash/kebabCase';
import '../utils/transfer-dom.js';
import '../loading/props.js';
import '../utils/withInstall.js';
import 'lodash/capitalize';
import './style/css.js';
import '../loading/type.js';
import '../loading/plugin.js';
import '../config.js';

var ImageCard = mixins(getConfigReceiverMixins("upload"), getGlobalIconMixins()).extend({
  name: "TImageUpload",
  components: {
    TLoading: Loading
  },
  props: {
    showUploadProgress: props.showUploadProgress,
    files: {
      type: Array
    },
    loadingFile: {
      type: Object
    },
    trigger: {
      type: Function
    },
    remove: {
      type: Function
    },
    multiple: Boolean,
    max: Number,
    disabled: Boolean,
    locale: Object
  },
  computed: {
    showTrigger: function showTrigger() {
      if (this.multiple) {
        return !this.max || this.files.length < this.max;
      }

      return !(this.files && this.files[0]);
    }
  },
  methods: {
    onMaskClick: function onMaskClick(e) {
      !this.showTrigger && this.trigger(e);
    },
    onViewClick: function onViewClick(e, file) {
      this.$emit("imgPreview", e, file);
    }
  },
  render: function render() {
    var _this = this,
        _this$locale,
        _this$locale$progress,
        _this$locale2,
        _this$locale2$trigger;

    var h = arguments[0];

    var _this$useGlobalIcon = this.useGlobalIcon({
      AddIcon: AddIcon,
      DeleteIcon: DeleteIcon,
      BrowseIcon: BrowseIcon
    }),
        AddIcon$1 = _this$useGlobalIcon.AddIcon,
        DeleteIcon$1 = _this$useGlobalIcon.DeleteIcon,
        BrowseIcon$1 = _this$useGlobalIcon.BrowseIcon;

    return h("ul", {
      "class": "".concat(this.componentName, "__card")
    }, [this.files && this.files.map(function (file, index) {
      return h("li", {
        "class": "".concat(_this.componentName, "__card-item ").concat(_this.classPrefix, "-is--background")
      }, [h("div", {
        "class": "".concat(_this.componentName, "__card-content ").concat(_this.componentName, "__card-box")
      }, [h("img", {
        "class": "".concat(_this.componentName, "__card-image"),
        "attrs": {
          "src": file.url
        }
      }), h("div", {
        "class": "".concat(_this.componentName, "__card-mask"),
        "on": {
          "click": _this.onMaskClick
        }
      }, [h("span", {
        "class": "".concat(_this.componentName, "__card-mask-item"),
        "on": {
          "click": function click(e) {
            return e.stopPropagation();
          }
        }
      }, [h(BrowseIcon$1, {
        "nativeOn": {
          "click": function click(e) {
            return _this.onViewClick(e, file);
          }
        }
      })]), !_this.disabled && [h("span", {
        "class": "".concat(_this.componentName, "__card-mask-item-divider"),
        "key": "divider"
      }), h("span", {
        "class": "".concat(_this.componentName, "__card-mask-item"),
        "on": {
          "click": function click(e) {
            return e.stopPropagation();
          }
        },
        "key": "delete-icon"
      }, [h(DeleteIcon$1, {
        "nativeOn": {
          "click": function click(e) {
            return _this.remove({
              e: e,
              file: file,
              index: index
            });
          }
        }
      })])]])])]);
    }), this.showTrigger && h("li", {
      "class": ["".concat(this.componentName, "__card-item"), "".concat(this.classPrefix, "-is--background"), _defineProperty({}, this.commonStatusClassName.disabled, this.disabled)],
      "on": {
        "click": this.trigger
      }
    }, [this.showUploadProgress && this.loadingFile && this.loadingFile.status === "progress" ? h("div", {
      "class": "".concat(this.componentName, "__card-container ").concat(this.componentName, "__card-box")
    }, [h(Loading), 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.global.progress.uploadingText, " ", Math.min(this.loadingFile.percent, 99), "%"])]) : h("div", {
      "class": "".concat(this.componentName, "__card-container ").concat(this.componentName, "__card-box")
    }, [h(AddIcon$1), h("p", {
      "class": "".concat(this.classPrefix, "-size-s")
    }, [((_this$locale2 = this.locale) === null || _this$locale2 === void 0 ? void 0 : (_this$locale2$trigger = _this$locale2.triggerUploadText) === null || _this$locale2$trigger === void 0 ? void 0 : _this$locale2$trigger.image) || this.global.triggerUploadText.image])])])]);
  }
});

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