/**
 * tdesign v0.32.0
 * (c) 2021 tdesign
 * @license MIT
 */

'use strict';

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

var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var Vue = require('vue');
var tdesignIconsVue = require('tdesign-icons-vue');
var loading_index = require('../loading/index.js');
var upload_util = require('./util.js');
var upload_props = require('./props.js');
var config = require('../config.js');
var utils_classnames = require('../utils/classnames.js');
require('../loading/loading.js');
require('../loading/icon/gradient.js');
require('../utils/set-style.js');
require('../utils/dom.js');
require('raf');
require('lodash/isString');
require('../utils/easing.js');
require('../utils/render-tnode.js');
require('@babel/runtime/helpers/typeof');
require('../utils/transfer-dom.js');
require('../loading/props.js');
require('../utils/withInstall.js');
require('lodash/capitalize');
require('../loading/plugin.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
var Vue__default = /*#__PURE__*/_interopDefaultLegacy(Vue);

var ImageCard = Vue__default["default"].extend({
  name: "TImageUpload",
  components: {
    TIconAdd: tdesignIconsVue.AddIcon,
    IIconDelete: tdesignIconsVue.DeleteIcon,
    IIconUpload: tdesignIconsVue.UploadIcon,
    TIconBrowse: tdesignIconsVue.BrowseIcon,
    TLoading: loading_index.Loading
  },
  props: {
    showUploadProgress: upload_props["default"].showUploadProgress,
    files: {
      type: Array
    },
    loadingFile: {
      type: Object
    },
    trigger: {
      type: Function
    },
    remove: {
      type: Function
    },
    multiple: Boolean,
    max: Number,
    disabled: Boolean
  },
  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;

    var h = arguments[0];
    return h("ul", {
      "class": "".concat(upload_util.UPLOAD_NAME, "__card")
    }, [this.files && this.files.map(function (file, index) {
      return h("li", {
        "class": "".concat(upload_util.UPLOAD_NAME, "__card-item ").concat(config.prefix, "-is--background")
      }, [h("div", {
        "class": "".concat(upload_util.UPLOAD_NAME, "__card-content ").concat(upload_util.UPLOAD_NAME, "__card-box")
      }, [h("img", {
        "class": "".concat(upload_util.UPLOAD_NAME, "__card-image"),
        "attrs": {
          "src": file.url
        }
      }), h("div", {
        "class": "".concat(upload_util.UPLOAD_NAME, "__card-mask"),
        "on": {
          "click": _this.onMaskClick
        }
      }, [h("span", {
        "class": "".concat(upload_util.UPLOAD_NAME, "__card-mask-item"),
        "on": {
          "click": function click(e) {
            return e.stopPropagation();
          }
        }
      }, [h(tdesignIconsVue.BrowseIcon, {
        "nativeOn": {
          "click": function click(e) {
            return _this.onViewClick(e, file);
          }
        }
      })]), h("span", {
        "class": "".concat(upload_util.UPLOAD_NAME, "__card-mask-item-divider")
      }), h("span", {
        "class": "".concat(upload_util.UPLOAD_NAME, "__card-mask-item"),
        "on": {
          "click": function click(e) {
            return e.stopPropagation();
          }
        }
      }, [h(tdesignIconsVue.DeleteIcon, {
        "nativeOn": {
          "click": function click(e) {
            return _this.remove({
              e: e,
              file: file,
              index: index
            });
          }
        }
      })])])])]);
    }), this.showTrigger && h("li", {
      "class": ["".concat(upload_util.UPLOAD_NAME, "__card-item ").concat(config.prefix, "-is--background"), _defineProperty__default["default"]({}, utils_classnames["default"].STATUS.disabled, this.disabled)],
      "on": {
        "click": this.trigger
      }
    }, [this.showUploadProgress && this.loadingFile && this.loadingFile.status === "progress" ? h("div", {
      "class": "".concat(upload_util.UPLOAD_NAME, "__card-container ").concat(upload_util.UPLOAD_NAME, "__card-box")
    }, [h(loading_index.Loading), h("p", ["\u4E0A\u4F20\u4E2D ", Math.min(this.loadingFile.percent, 99), "%"])]) : h("div", {
      "class": "".concat(upload_util.UPLOAD_NAME, "__card-container ").concat(upload_util.UPLOAD_NAME, "__card-box")
    }, [h(tdesignIconsVue.AddIcon), h("p", {
      "class": "".concat(config.prefix, "-size-s")
    }, ["\u70B9\u51FB\u4E0A\u4F20\u56FE\u7247"])])])]);
  }
});

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