/**
 * 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 utils = require('../../chunks/utils.js');
var components_loading_index = require('../loading/index.js');
var components_button_index = require('../button/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('../../chunks/defineProperty-56324511.js');
require('../loading/loading.js');
require('../loading/icon/gradient.js');
require('vue');
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');
require('../button/button.js');
require('../button/props.js');
require('../../utils/ripple.js');

var LDragger = utils_mixins["default"](components_configProvider_configReceiver["default"]("upload"), components_configProvider_configReceiver.getGlobalIconMixins()).extend({
  name: "LUploadDragger",
  components: {
    LLoading: components_loading_index.Loading,
    LButton: components_button_index.Button
  },
  props: {
    showUploadProgress: components_upload_props["default"].showUploadProgress,
    file: {
      type: Object
    },
    loadingFile: {
      type: Object
    },
    display: {
      type: String,

      validator(val) {
        return ["file", "file-input", "image", "custom"].includes(val);
      }

    },
    cancel: Function,
    trigger: Function,
    remove: Function,
    upload: Function,
    autoUpload: Boolean,
    locale: components_upload_props["default"].locale
  },

  data() {
    return {
      target: null,
      dragActive: false
    };
  },

  computed: {
    isImage() {
      return this.display === "image";
    },

    imageUrl() {
      return this.loadingFile && this.loadingFile.url || this.file && this.file.url;
    },

    percent() {
      return this.loadingFile && this.loadingFile.percent;
    },

    inputName() {
      return this.loadingFile && this.loadingFile.name || this.file && this.file.name;
    },

    classes() {
      return [`${this.componentName}__dragger`, {
        [`${this.componentName}__dragger-center`]: !this.loadingFile && !this.file
      }, {
        [`${this.componentName}__dragger-error`]: this.loadingFile && this.loadingFile.status === "fail"
      }];
    },

    size() {
      return this.loadingFile && this.loadingFile.size || this.file && this.file.size;
    },

    showResultOperate() {
      var _this$file, _this$loadingFile;

      return Boolean(!this.loadingFile && ((_this$file = this.file) === null || _this$file === void 0 ? void 0 : _this$file.name)) || ["success", "fail"].includes((_this$loadingFile = this.loadingFile) === null || _this$loadingFile === void 0 ? void 0 : _this$loadingFile.status);
    }

  },
  methods: {
    handleDrop(event) {
      event.preventDefault();
      this.$emit("change", event.dataTransfer.files);
      this.$emit("dragleave", event);
      this.dragActive = false;
    },

    handleDragenter(event) {
      this.target = event.target;
      event.preventDefault();
      this.$emit("dragenter", event);
      this.dragActive = true;
    },

    handleDragleave(event) {
      if (this.target !== event.target) return;
      event.preventDefault();
      this.$emit("dragleave", event);
      this.dragActive = false;
    },

    handleDragover(event) {
      event.preventDefault();
    },

    renderDefaultDragElement() {
      var _this$locale, _this$locale$triggerU, _this$locale2, _this$locale2$dragger, _this$locale3, _this$locale3$dragger;

      const h = this.$createElement;
      const unActiveElement = h("div", [h("span", {
        "class": `${this.componentName}--highlight`
      }, [((_this$locale = this.locale) === null || _this$locale === void 0 ? void 0 : (_this$locale$triggerU = _this$locale.triggerUploadText) === null || _this$locale$triggerU === void 0 ? void 0 : _this$locale$triggerU.normal) || this.global.triggerUploadText.normal]), h("span", ["\xA0\xA0/\xA0\xA0", ((_this$locale2 = this.locale) === null || _this$locale2 === void 0 ? void 0 : (_this$locale2$dragger = _this$locale2.dragger) === null || _this$locale2$dragger === void 0 ? void 0 : _this$locale2$dragger.draggingText) || this.global.dragger.draggingText])]);
      const activeElement = h("div", [((_this$locale3 = this.locale) === null || _this$locale3 === void 0 ? void 0 : (_this$locale3$dragger = _this$locale3.dragger) === null || _this$locale3$dragger === void 0 ? void 0 : _this$locale3$dragger.dragDropText) || this.global.dragger.dragDropText]);
      return this.dragActive ? activeElement : unActiveElement;
    },

    renderImage() {
      const h = this.$createElement;
      return h("div", {
        "class": `${this.componentName}__dragger-img-wrap`
      }, [this.imageUrl && h("img", {
        "attrs": {
          "src": this.imageUrl || "default.png"
        }
      })]);
    },

    renderUploading() {
      const h = this.$createElement;

      if (this.loadingFile.status === "fail") {
        const {
          ErrorCircleFilledIcon
        } = this.useGlobalIcon({
          ErrorCircleFilledIcon: iconsVue.ErrorCircleFilledIcon
        });
        return h(ErrorCircleFilledIcon);
      }

      if (this.loadingFile.status === "progress" && this.showUploadProgress) {
        return h("div", {
          "class": `${this.componentName}__single-progress`
        }, [h("l-loading"), h("span", {
          "class": `${this.componentName}__single-percent`
        }, [Math.min(this.loadingFile.percent, 99), "%"])]);
      }
    },

    reUpload(e) {
      e.stopPropagation();
      this.remove({
        e,
        file: this.file
      });
      this.trigger(e);
    },

    renderProgress() {
      var _this$locale4, _this$locale4$file, _this$locale5, _this$locale5$file, _this$loadingFile2, _this$locale6, _this$loadingFile3, _this$locale7, _this$locale7$trigger, _this$locale8, _this$locale8$trigger, _this$locale9, _this$locale9$trigger;

      const h = this.$createElement;
      const {
        CheckCircleFilledIcon
      } = this.useGlobalIcon({
        CheckCircleFilledIcon: iconsVue.CheckCircleFilledIcon
      });
      return h("div", {
        "class": `${this.componentName}__dragger-progress`
      }, [this.isImage && this.renderImage(), h("div", {
        "class": `${this.componentName}__dragger-progress-info`
      }, [h("div", {
        "class": `${this.componentName}__dragger-text`
      }, [h("span", {
        "class": `${this.componentName}__single-name`
      }, [utils.abridgeName(this.inputName)]), this.loadingFile && this.renderUploading(), !this.loadingFile && !!this.file && h(CheckCircleFilledIcon)]), h("small", {
        "class": `${this.classPrefix}-size-s`
      }, [((_this$locale4 = this.locale) === null || _this$locale4 === void 0 ? void 0 : (_this$locale4$file = _this$locale4.file) === null || _this$locale4$file === void 0 ? void 0 : _this$locale4$file.fileSizeText) || this.global.file.fileSizeText, "\uFF1A", utils.returnFileSize(this.size)]), h("small", {
        "class": `${this.classPrefix}-size-s`
      }, [((_this$locale5 = this.locale) === null || _this$locale5 === void 0 ? void 0 : (_this$locale5$file = _this$locale5.file) === null || _this$locale5$file === void 0 ? void 0 : _this$locale5$file.fileOperationDateText) || this.global.file.fileOperationDateText, "\uFF1A", utils.getCurrentDate()]), h("div", {
        "class": `${this.componentName}__dragger-btns`
      }, [["progress", "waiting"].includes((_this$loadingFile2 = this.loadingFile) === null || _this$loadingFile2 === void 0 ? void 0 : _this$loadingFile2.status) && h("l-button", {
        "attrs": {
          "theme": "primary",
          "variant": "text"
        },
        "class": `${this.componentName}__dragger-progress-cancel`,
        "on": {
          "click": e => {
            var _this$cancel;

            (_this$cancel = this.cancel) === null || _this$cancel === void 0 ? void 0 : _this$cancel.call(this, e);
            e.stopPropagation();
          }
        }
      }, [((_this$locale6 = this.locale) === null || _this$locale6 === void 0 ? void 0 : _this$locale6.cancelUploadText) || this.global.cancelUploadText]), !this.autoUpload && ((_this$loadingFile3 = this.loadingFile) === null || _this$loadingFile3 === void 0 ? void 0 : _this$loadingFile3.status) === "waiting" && h("l-button", {
        "attrs": {
          "theme": "primary",
          "variant": "text"
        },
        "on": {
          "click": e => {
            this.upload({ ...this.loadingFile
            }, e);
            e.stopPropagation();
          }
        }
      }, [((_this$locale7 = this.locale) === null || _this$locale7 === void 0 ? void 0 : (_this$locale7$trigger = _this$locale7.triggerUploadText) === null || _this$locale7$trigger === void 0 ? void 0 : _this$locale7$trigger.normal) || this.global.triggerUploadText.normal])]), this.showResultOperate && h("div", {
        "class": `${this.componentName}__dragger-btns`
      }, [h("l-button", {
        "attrs": {
          "theme": "primary",
          "variant": "text"
        },
        "class": `${this.componentName}__dragger-progress-cancel`,
        "on": {
          "click": this.reUpload
        }
      }, [((_this$locale8 = this.locale) === null || _this$locale8 === void 0 ? void 0 : (_this$locale8$trigger = _this$locale8.triggerUploadText) === null || _this$locale8$trigger === void 0 ? void 0 : _this$locale8$trigger.reupload) || this.global.triggerUploadText.reupload]), h("l-button", {
        "attrs": {
          "theme": "primary",
          "variant": "text"
        },
        "on": {
          "click": e => {
            var _this$remove;

            (_this$remove = this.remove) === null || _this$remove === void 0 ? void 0 : _this$remove.call(this, {
              e,
              file: this.file
            });
            e.stopPropagation();
          }
        }
      }, [((_this$locale9 = this.locale) === null || _this$locale9 === void 0 ? void 0 : (_this$locale9$trigger = _this$locale9.triggerUploadText) === null || _this$locale9$trigger === void 0 ? void 0 : _this$locale9$trigger.delete) || this.global.triggerUploadText.delete])])])]);
    }

  },

  render() {
    const h = arguments[0];
    let content = null;

    if ((this.loadingFile || this.file) && this.display !== "custom") {
      content = this.renderProgress();
    } else {
      content = h("div", {
        "class": `${this.componentName}__trigger`,
        "on": {
          "click": this.trigger
        }
      }, [this.$scopedSlots.default && this.$scopedSlots.default(null) || this.renderDefaultDragElement()]);
    }

    return h("div", {
      "class": this.classes,
      "on": {
        "drop": this.handleDrop,
        "dragenter": this.handleDragenter,
        "dragover": this.handleDragover,
        "dragleave": this.handleDragleave
      }
    }, [content]);
  }

});

exports["default"] = LDragger;
//# sourceMappingURL=dragger.js.map
