/**
 * ldesign v0.2.3
 * (c) 2022年9月24日 swimly
 * @license MIT
 */

'use strict';

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

var iconsVue = require('@ldesign/icons-vue');
var components_loading_index = require('../loading/index.js');
var components_upload_props = require('./props.js');
var utils_mixins = require('../../utils/mixins.js');
var components_configProvider_configReceiver = require('../config-provider/config-receiver.js');
require('../loading/loading.js');
require('../loading/icon/gradient.js');
require('vue');
require('../../chunks/defineProperty-56324511.js');
require('../../chunks/set-style.js');
require('../../chunks/helper2.js');
require('../../config.js');
require('../../utils/dom.js');
require('raf');
require('lodash/isString');
require('../../utils/easing.js');
require('../../utils/render-node.js');
require('lodash/camelCase');
require('lodash/kebabCase');
require('../../utils/transfer-dom.js');
require('../loading/props.js');
require('lodash/mergeWith');
require('lodash');
require('../config-provider/context.js');
require('../../chunks/zh_CN.js');
require('../../utils/with-install.js');
require('../loading/plugin.js');

var LImageCard = utils_mixins["default"](components_configProvider_configReceiver["default"]("upload"), components_configProvider_configReceiver.getGlobalIconMixins()).extend({
  name: "LImageUpload",
  components: {
    TLoading: components_loading_index.Loading
  },
  props: {
    showUploadProgress: components_upload_props["default"].showUploadProgress,
    files: {
      type: Array
    },
    loadingFile: {
      type: Object
    },
    trigger: {
      type: Function
    },
    remove: {
      type: Function
    },
    multiple: Boolean,
    max: Number,
    disabled: Boolean,
    locale: Object
  },
  computed: {
    showTrigger() {
      if (this.multiple) {
        return !this.max || this.files.length < this.max;
      }

      return !(this.files && this.files[0]);
    }

  },
  methods: {
    onMaskClick(e) {
      !this.showTrigger && this.trigger(e);
    },

    onViewClick(e, file) {
      this.$emit("imgPreview", e, file);
    }

  },

  render() {
    var _this$locale, _this$locale$progress, _this$locale2, _this$locale2$trigger;

    const h = arguments[0];
    const {
      AddIcon,
      DeleteIcon,
      BrowseIcon
    } = this.useGlobalIcon({
      AddIcon: iconsVue.AddIcon,
      DeleteIcon: iconsVue.DeleteIcon,
      BrowseIcon: iconsVue.BrowseIcon
    });
    return h("ul", {
      "class": `${this.componentName}__card`
    }, [this.files && this.files.map((file, index) => h("li", {
      "class": `${this.componentName}__card-item ${this.classPrefix}-is--background`
    }, [h("div", {
      "class": `${this.componentName}__card-content ${this.componentName}__card-box`
    }, [h("img", {
      "class": `${this.componentName}__card-image`,
      "attrs": {
        "src": file.url
      }
    }), h("div", {
      "class": `${this.componentName}__card-mask`,
      "on": {
        "click": this.onMaskClick
      }
    }, [h("span", {
      "class": `${this.componentName}__card-mask-item`,
      "on": {
        "click": e => e.stopPropagation()
      }
    }, [h(BrowseIcon, {
      "nativeOn": {
        "click": e => this.onViewClick(e, file)
      }
    })]), !this.disabled && [h("span", {
      "class": `${this.componentName}__card-mask-item-divider`,
      "key": "divider"
    }), h("span", {
      "class": `${this.componentName}__card-mask-item`,
      "on": {
        "click": e => e.stopPropagation()
      },
      "key": "delete-icon"
    }, [h(DeleteIcon, {
      "nativeOn": {
        "click": e => this.remove({
          e,
          file,
          index
        })
      }
    })])]])])])), this.showTrigger && h("li", {
      "class": [`${this.componentName}__card-item`, `${this.classPrefix}-is--background`, {
        [this.commonStatusClassName.disabled]: this.disabled
      }],
      "on": {
        "click": this.trigger
      }
    }, [this.showUploadProgress && this.loadingFile && this.loadingFile.status === "progress" ? h("div", {
      "class": `${this.componentName}__card-container ${this.componentName}__card-box`
    }, [h(components_loading_index.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": `${this.componentName}__card-container ${this.componentName}__card-box`
    }, [h(AddIcon), h("p", {
      "class": `${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])])])]);
  }

});

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