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

'use strict';

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

var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var tdesignIconsVue = require('tdesign-icons-vue');
var config = require('../config.js');
var button_index = require('../button/index.js');
var loading_index = require('../loading/index.js');
var _common_js_upload_utils = require('../_common/js/upload/utils.js');
var upload_props = require('./props.js');
var utils_mixins = require('../utils/mixins.js');
var configProvider_configReceiver = require('../config-provider/config-receiver.js');
require('../button/button.js');
require('../_chunks/dep-99705d51.js');
require('../utils/classnames.js');
require('../button/props.js');
require('../utils/render-tnode.js');
require('@babel/runtime/helpers/typeof');
require('vue');
require('../utils/ripple.js');
require('../_common/js/utils/set-style.js');
require('../loading/loading.js');
require('../loading/icon/gradient.js');
require('../_common/js/loading/circle-adapter.js');
require('../_common/js/utils/helper.js');
require('@babel/runtime/helpers/objectWithoutProperties');
require('@babel/runtime/helpers/slicedToArray');
require('../utils/dom.js');
require('raf');
require('lodash/isString');
require('../utils/easing.js');
require('../utils/transfer-dom.js');
require('../loading/props.js');
require('../utils/withInstall.js');
require('lodash/capitalize');
require('../loading/plugin.js');
require('lodash/mergeWith');
require('../config-provider/context.js');
require('lodash/merge');
require('../_common/js/global-config/default-config.js');
require('../_common/js/global-config/locale/zh_CN.js');

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

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

var uploadName = "".concat(config.prefix, "-upload");
var FlowList = utils_mixins["default"](configProvider_configReceiver["default"]("upload")).extend({
  name: "TUploadFlowList",
  components: {
    TButton: button_index.Button,
    TLoading: loading_index.Loading,
    TimeFilledIcon: tdesignIconsVue.TimeFilledIcon,
    CheckCircleFilledIcon: tdesignIconsVue.CheckCircleFilledIcon,
    ErrorCircleFilledIcon: tdesignIconsVue.ErrorCircleFilledIcon,
    DeleteIcon: tdesignIconsVue.DeleteIcon,
    BrowseIcon: tdesignIconsVue.BrowseIcon
  },
  props: {
    showUploadProgress: upload_props["default"].showUploadProgress,
    allowUploadDuplicateFile: upload_props["default"].allowUploadDuplicateFile,
    files: Array,
    batchUpload: Boolean,
    toUploadFiles: Array,
    placeholder: String,
    autoUpload: Boolean,
    disabled: Boolean,
    remove: Function,
    upload: Function,
    cancel: Function,
    display: {
      type: String,
      validator: function validator(val) {
        return ["file-flow", "image-flow"].includes(val);
      }
    }
  },
  data: function data() {
    return {
      dragActive: false,
      target: null
    };
  },
  computed: {
    showInitial: function showInitial() {
      var isWaitingEmpty = !this.waitingUploadFiles || !this.waitingUploadFiles.length;
      return (!this.files || !this.files.length) && isWaitingEmpty;
    },
    waitingUploadFiles: function waitingUploadFiles() {
      var _this = this;

      var list = [];
      this.toUploadFiles.forEach(function (item) {
        if (!_this.allowUploadDuplicateFile) {
          var r = _this.files.filter(function (t) {
            return t.name === item.name;
          });

          if (!r.length) {
            list.push(item);
          }
        } else {
          list.push(item);
        }
      });
      return list;
    },
    listFiles: function listFiles() {
      if (!this.files || !this.files.length) return this.toUploadFiles;
      return this.files.concat(this.waitingUploadFiles);
    },
    failedList: function failedList() {
      return this.toUploadFiles.filter(function (file) {
        return file.status === "fail";
      });
    },
    processList: function processList() {
      return this.toUploadFiles.filter(function (file) {
        return file.status === "progress";
      });
    },
    isUploading: function isUploading() {
      return !!this.processList.length;
    },
    allowUpload: function allowUpload() {
      return Boolean(this.waitingUploadFiles && this.waitingUploadFiles.length) && !this.isUploading;
    },
    uploadText: function uploadText() {
      if (this.isUploading) return "".concat(this.global.progress.uploadingText, "...");
      return this.failedList && this.failedList.length ? this.global.triggerUploadText.reupload : this.global.triggerUploadText.normal;
    },
    batchRemoveRow: function batchRemoveRow() {
      return this.batchUpload && this.files.length > 0;
    }
  },
  methods: {
    renderStatus: function renderStatus(file) {
      var h = this.$createElement;
      var status = null;

      switch (file.status) {
        case "success":
          status = h("div", {
            "class": "".concat(uploadName, "__flow-status")
          }, [h(tdesignIconsVue.CheckCircleFilledIcon), h("span", [this.global.progress.successText])]);
          break;

        case "fail":
          status = h("div", {
            "class": "".concat(uploadName, "__flow-status")
          }, [h(tdesignIconsVue.ErrorCircleFilledIcon), h("span", [this.global.progress.failText])]);
          break;

        case "progress":
          this.showUploadProgress && (status = h("div", {
            "class": "".concat(uploadName, "__flow-status")
          }, [h(loading_index.Loading), h("span", ["".concat(this.global.progress.uploadingText, " ").concat(Math.min(file.percent, 99), "%")])]));
          break;

        case "waiting":
          status = h("div", {
            "class": "".concat(uploadName, "__flow-status")
          }, [h(tdesignIconsVue.TimeFilledIcon), h("span", [this.global.progress.waitingText])]);
          break;
      }

      return status;
    },
    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();
    },
    onViewClick: function onViewClick(event, file) {
      this.$emit("imgPreview", event, file);
    },
    renderDragger: function renderDragger() {
      var h = this.$createElement;
      return h("div", {
        "class": "".concat(uploadName, "__flow-empty"),
        "on": {
          "drop": this.handleDrop,
          "dragenter": this.handleDragenter,
          "dragover": this.handleDragover,
          "dragleave": this.handleDragleave
        }
      }, [this.dragActive ? this.global.dragger.dragDropText : this.global.dragger.clickAndDragText]);
    },
    renderFileList: function renderFileList() {
      var _this2 = this;

      var h = this.$createElement;
      return h("table", {
        "class": "".concat(uploadName, "__flow-table")
      }, [h("tr", [h("th", [this.global.file.fileNameText]), h("th", [this.global.file.fileSizeText]), h("th", [this.global.file.fileStatusText]), h("th", [this.global.file.fileOperationText])]), this.showInitial && h("tr", [h("td", {
        "attrs": {
          "colspan": 4
        }
      }, [this.renderDragger()])]), this.listFiles.map(function (file, index) {
        var showBatchUploadAction = _this2.batchUpload && _this2.toUploadFiles.length === 0;
        return h("tr", [h("td", [_common_js_upload_utils.abridgeName(file.name, 7, 10)]), h("td", [_common_js_upload_utils.returnFileSize(file.size)]), h("td", [_this2.renderStatus(file)]), showBatchUploadAction ? _this2.renderBatchActionCol(index) : _this2.renderNormalActionCol(file, index)]);
      })]);
    },
    renderNormalActionCol: function renderNormalActionCol(file, index) {
      var _this3 = this;

      var h = this.$createElement;
      return h("td", [h("span", {
        "class": "".concat(uploadName, "__flow-button"),
        "on": {
          "click": function click(e) {
            return _this3.remove({
              e: e,
              index: index,
              file: file
            });
          }
        }
      }, [this.global.triggerUploadText["delete"]])]);
    },
    renderBatchActionCol: function renderBatchActionCol(index) {
      var _this4 = this;

      var h = this.$createElement;
      return index === 0 ? h("td", {
        "attrs": {
          "rowspan": this.listFiles.length
        },
        "class": "".concat(uploadName, "__flow-table__batch-row")
      }, [h("span", {
        "class": "".concat(uploadName, "__flow-button"),
        "on": {
          "click": function click(e) {
            return _this4.remove({
              e: e,
              index: -1,
              file: null
            });
          }
        }
      }, [this.global.triggerUploadText["delete"]])]) : "";
    },
    renderImgList: function renderImgList() {
      var _this5 = this;

      var h = this.$createElement;
      return h("div", {
        "class": "".concat(uploadName, "__flow-card-area")
      }, [this.showInitial && this.renderDragger(), !!this.listFiles.length && h("ul", {
        "class": "".concat(uploadName, "__card clearfix")
      }, [this.listFiles.map(function (file, index) {
        return h("li", {
          "class": "".concat(uploadName, "__card-item")
        }, [h("div", {
          "class": ["".concat(uploadName, "__card-content"), _defineProperty__default["default"]({}, "".concat(config.prefix, "-is-bordered"), file.status !== "waiting")]
        }, [file.status === "fail" && h("div", {
          "class": "".concat(uploadName, "__card-status-wrap")
        }, [h(tdesignIconsVue.ErrorCircleFilledIcon), h("p", [_this5.global.progress.failText])]), file.status === "progress" && h("div", {
          "class": "".concat(uploadName, "__card-status-wrap")
        }, [h(loading_index.Loading), h("p", [_this5.global.progress.uploadingText, " ", Math.min(file.percent, 99)])]), (["waiting", "success"].includes(file.status) || !file.status && file.url) && h("img", {
          "class": "".concat(uploadName, "__card-image"),
          "attrs": {
            "src": file.url || "//tdesign.gtimg.com/tdesign-default-img.png"
          }
        }), h("div", {
          "class": "".concat(uploadName, "__card-mask")
        }, [file.url && h("span", {
          "class": "".concat(uploadName, "__card-mask-item")
        }, [h(tdesignIconsVue.BrowseIcon, {
          "nativeOn": {
            "click": function click(e) {
              return _this5.onViewClick(e, file);
            }
          }
        }), h("span", {
          "class": "".concat(uploadName, "__card-mask-item-divider")
        })]), !_this5.disabled && h("span", {
          "class": "".concat(uploadName, "__card-mask-item"),
          "on": {
            "click": function click(e) {
              return _this5.remove({
                e: e,
                index: index,
                file: file
              });
            }
          }
        }, [h(tdesignIconsVue.DeleteIcon)])])]), h("p", {
          "class": "".concat(uploadName, "__card-name")
        }, [_common_js_upload_utils.abridgeName(file.name)])]);
      })])]);
    }
  },
  render: function render() {
    var _this6 = this;

    var h = arguments[0];
    return h("div", {
      "class": ["".concat(uploadName, "__flow"), "".concat(uploadName, "__flow-").concat(this.display)]
    }, [h("div", {
      "class": "".concat(uploadName, "__flow-op")
    }, [this.$scopedSlots["default"] && this.$scopedSlots["default"](null), h("small", {
      "class": "".concat(config.prefix, "-size-s ").concat(uploadName, "__flow-placeholder")
    }, [this.placeholder])]), this.display === "file-flow" && this.renderFileList(), this.display === "image-flow" && this.renderImgList(), h("div", {
      "class": "".concat(uploadName, "__flow-bottom")
    }, [h(button_index.Button, {
      "attrs": {
        "theme": "default"
      },
      "on": {
        "click": this.cancel
      }
    }, [this.global.cancelUploadText]), h(button_index.Button, {
      "attrs": {
        "disabled": !this.allowUpload,
        "theme": "primary"
      },
      "on": {
        "click": function click(e) {
          return _this6.upload(_this6.waitingUploadFiles, e);
        }
      }
    }, [this.uploadText])])]);
  }
});

exports["default"] = FlowList;
//# sourceMappingURL=flow-list.js.map
