/**
 * tdesign v0.39.1-alpha.1
 * (c) 2022 tdesign
 * @license MIT
 */

import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { CheckCircleFilledIcon, ErrorCircleFilledIcon } from 'tdesign-icons-vue';
import { prefix } from '../config.js';
import { Loading } from '../loading/index.js';
import { Button } from '../button/index.js';
import { UPLOAD_NAME, abridgeName, returnFileSize, getCurrentDate } from './util.js';
import props from './props.js';
import mixins from '../utils/mixins.js';
import getConfigReceiverMixins from '../config-provider/config-receiver.js';
import '../loading/loading.js';
import 'vue';
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/objectWithoutProperties';
import '@babel/runtime/helpers/slicedToArray';
import '../utils/classnames.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/isObject';
import '../utils/transfer-dom.js';
import '../loading/props.js';
import '../utils/withInstall.js';
import 'lodash/capitalize';
import './style/index.js';
import '../loading/type.js';
import '../loading/plugin.js';
import '../button/button.js';
import '../_chunks/dep-1ec74b8b.js';
import '../button/props.js';
import '../utils/ripple.js';
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 '../button/type.js';

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var name = "".concat(prefix, "-upload-dragger");
var Dragger = mixins(getConfigReceiverMixins("upload")).extend({
  name: name,
  components: {
    TLoading: Loading,
    TButton: Button,
    CheckCircleFilledIcon: CheckCircleFilledIcon,
    ErrorCircleFilledIcon: ErrorCircleFilledIcon
  },
  props: {
    showUploadProgress: props.showUploadProgress,
    file: {
      type: Object
    },
    loadingFile: {
      type: Object
    },
    display: {
      type: String,
      validator: function validator(val) {
        return ["file", "file-input", "image", "custom"].includes(val);
      }
    },
    cancel: Function,
    trigger: Function,
    remove: Function,
    upload: Function,
    autoUpload: Boolean
  },
  data: function data() {
    return {
      target: null,
      dragActive: false
    };
  },
  computed: {
    isImage: function isImage() {
      return this.display === "image";
    },
    imageUrl: function imageUrl() {
      return this.loadingFile && this.loadingFile.url || this.file && this.file.url;
    },
    percent: function percent() {
      return this.loadingFile && this.loadingFile.percent;
    },
    inputName: function inputName() {
      return this.loadingFile && this.loadingFile.name || this.file && this.file.name;
    },
    classes: function classes() {
      return ["".concat(UPLOAD_NAME, "__dragger"), _defineProperty({}, "".concat(UPLOAD_NAME, "__dragger-center"), !this.loadingFile && !this.file), _defineProperty({}, "".concat(UPLOAD_NAME, "__dragger-error"), this.loadingFile && this.loadingFile.status === "fail")];
    },
    size: function size() {
      return this.loadingFile && this.loadingFile.size || this.file && this.file.size;
    },
    showResultOperate: function 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: function handleDrop(event) {
      event.preventDefault();
      this.$emit("change", event.dataTransfer.files);
      this.$emit("dragleave", event);
      this.dragActive = false;
    },
    handleDragenter: function handleDragenter(event) {
      this.target = event.target;
      event.preventDefault();
      this.$emit("dragenter", event);
      this.dragActive = true;
    },
    handleDragleave: function handleDragleave(event) {
      if (this.target !== event.target) return;
      event.preventDefault();
      this.$emit("dragleave", event);
      this.dragActive = false;
    },
    handleDragover: function handleDragover(event) {
      event.preventDefault();
    },
    renderDefaultDragElement: function renderDefaultDragElement() {
      var h = this.$createElement;
      var unActiveElement = h("div", [h("span", {
        "class": "".concat(prefix, "-upload--highlight")
      }, [this.global.triggerUploadText.normal]), h("span", ["\xA0\xA0/\xA0\xA0", this.global.dragger.draggingText])]);
      var activeElement = h("div", [this.global.dragger.dragDropText]);
      return this.dragActive ? activeElement : unActiveElement;
    },
    renderImage: function renderImage() {
      var h = this.$createElement;
      return h("div", {
        "class": "".concat(UPLOAD_NAME, "__dragger-img-wrap")
      }, [this.imageUrl && h("img", {
        "attrs": {
          "src": this.imageUrl || "default.png"
        }
      })]);
    },
    renderUploading: function renderUploading() {
      var h = this.$createElement;

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

      if (this.loadingFile.status === "progress" && this.showUploadProgress) {
        return h("div", {
          "class": "".concat(UPLOAD_NAME, "__single-progress")
        }, [h(Loading), h("span", {
          "class": "".concat(UPLOAD_NAME, "__single-percent")
        }, [Math.min(this.loadingFile.percent, 99), "%"])]);
      }
    },
    reupload: function reupload(e) {
      this.remove(e);
      this.trigger(e);
    },
    renderProgress: function renderProgress() {
      var _this$loadingFile2,
          _this$loadingFile3,
          _this = this;

      var h = this.$createElement;
      return h("div", {
        "class": "".concat(UPLOAD_NAME, "__dragger-progress")
      }, [this.isImage && this.renderImage(), h("div", {
        "class": "".concat(UPLOAD_NAME, "__dragger-progress-info")
      }, [h("div", {
        "class": "".concat(UPLOAD_NAME, "__dragger-text")
      }, [h("span", {
        "class": "".concat(UPLOAD_NAME, "__single-name")
      }, [abridgeName(this.inputName)]), this.loadingFile && this.renderUploading(), !this.loadingFile && !!this.file && h(CheckCircleFilledIcon)]), h("small", {
        "class": "".concat(prefix, "-size-s")
      }, [this.global.file.fileSizeText, "\uFF1A", returnFileSize(this.size)]), h("small", {
        "class": "".concat(prefix, "-size-s")
      }, [this.global.file.fileOperationDateText, "\uFF1A", getCurrentDate()]), h("div", {
        "class": "".concat(UPLOAD_NAME, "__dragger-btns")
      }, [["progress", "waiting"].includes((_this$loadingFile2 = this.loadingFile) === null || _this$loadingFile2 === void 0 ? void 0 : _this$loadingFile2.status) && h(Button, {
        "attrs": {
          "theme": "primary",
          "variant": "text"
        },
        "class": "".concat(UPLOAD_NAME, "__dragger-progress-cancel"),
        "on": {
          "click": this.cancel
        }
      }, [this.global.cancelUploadText]), !this.autoUpload && ((_this$loadingFile3 = this.loadingFile) === null || _this$loadingFile3 === void 0 ? void 0 : _this$loadingFile3.status) === "waiting" && h(Button, {
        "attrs": {
          "theme": "primary",
          "variant": "text"
        },
        "on": {
          "click": function click(e) {
            return _this.upload(_objectSpread({}, _this.loadingFile), e);
          }
        }
      }, [this.global.triggerUploadText.normal])]), this.showResultOperate && h("div", {
        "class": "".concat(UPLOAD_NAME, "__dragger-btns")
      }, [h(Button, {
        "attrs": {
          "theme": "primary",
          "variant": "text"
        },
        "class": "".concat(UPLOAD_NAME, "__dragger-progress-cancel"),
        "on": {
          "click": this.reupload
        }
      }, [this.global.triggerUploadText.reupload]), h(Button, {
        "attrs": {
          "theme": "primary",
          "variant": "text"
        },
        "on": {
          "click": this.remove
        }
      }, [this.global.triggerUploadText["delete"]])])])]);
    }
  },
  render: function render() {
    var h = arguments[0];
    var content = null;

    if ((this.loadingFile || this.file) && this.display !== "custom") {
      content = this.renderProgress();
    } else {
      content = h("div", {
        "class": "".concat(UPLOAD_NAME, "__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]);
  }
});

export { Dragger as default };
//# sourceMappingURL=dragger.js.map
