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

import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { TimeFilledIcon, CheckCircleFilledIcon, ErrorCircleFilledIcon, DeleteIcon, BrowseIcon } from '@ldesign/icons-vue';
import { a as abridgeName, r as returnFileSize } from '../../_chunks/dep-58b4c751.js';
import { Button } from '../button/index.js';
import { Loading } from '../loading/index.js';
import props from './props.js';
import mixins from '../../utils/mixins.js';
import getConfigReceiverMixins, { getGlobalIconMixins } from '../config-provider/config-receiver.js';
import '../../_chunks/dep-33b15d9d.js';
import '../../_chunks/dep-a65fe6e9.js';
import '../button/button.js';
import '../button/props.js';
import '../../utils/render-node.js';
import '@babel/runtime/helpers/typeof';
import 'vue';
import 'lodash/camelCase';
import 'lodash/kebabCase';
import '../../utils/ripple.js';
import '../../_chunks/dep-85e8b23b.js';
import '../../config.js';
import '../loading/loading.js';
import '../loading/icon/gradient.js';
import '../../_chunks/dep-fc383775.js';
import '@babel/runtime/helpers/toConsumableArray';
import '@babel/runtime/helpers/slicedToArray';
import '../../utils/dom.js';
import 'raf';
import 'lodash/isString';
import '../../utils/easing.js';
import '../../utils/transfer-dom.js';
import '../loading/props.js';
import 'lodash/mergeWith';
import 'lodash';
import '../config-provider/context.js';
import '../../_chunks/dep-a0f2090c.js';
import '../../utils/with-install.js';
import '../loading/plugin.js';

var LFlowList = mixins(getConfigReceiverMixins("upload"), getGlobalIconMixins()).extend({
  name: "LUploadFlowList",
  components: {
    LButton: Button,
    LLoading: Loading
  },
  props: {
    showUploadProgress: props.showUploadProgress,
    allowUploadDuplicateFile: props.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);
      }
    },
    locale: props.locale
  },
  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() {
      var _this$locale, _this$locale$progress, _this$locale2, _this$locale2$trigger, _this$locale3, _this$locale3$trigger;

      var uploadingText = ((_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;
      var reuploadText = ((_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.reupload) || this.global.triggerUploadText.reupload;
      var normalText = ((_this$locale3 = this.locale) === null || _this$locale3 === void 0 ? void 0 : (_this$locale3$trigger = _this$locale3.triggerUploadText) === null || _this$locale3$trigger === void 0 ? void 0 : _this$locale3$trigger.normal) || this.global.triggerUploadText.normal;
      if (this.isUploading) return "".concat(uploadingText, "...");
      return this.failedList && this.failedList.length ? reuploadText : normalText;
    },
    batchRemoveRow: function batchRemoveRow() {
      return this.batchUpload && this.files.length > 0;
    }
  },
  methods: {
    renderStatus: function renderStatus(file) {
      var _this$locale4, _this$locale4$progres, _this$locale5, _this$locale5$progres, _this$locale6, _this$locale6$progres, _this$locale7, _this$locale7$progres;

      var h = this.$createElement;
      var status = null;

      var _this$useGlobalIcon = this.useGlobalIcon({
        TimeFilledIcon: TimeFilledIcon,
        CheckCircleFilledIcon: CheckCircleFilledIcon,
        ErrorCircleFilledIcon: ErrorCircleFilledIcon
      }),
          TimeFilledIcon$1 = _this$useGlobalIcon.TimeFilledIcon,
          CheckCircleFilledIcon$1 = _this$useGlobalIcon.CheckCircleFilledIcon,
          ErrorCircleFilledIcon$1 = _this$useGlobalIcon.ErrorCircleFilledIcon;

      switch (file.status) {
        case "success":
          status = h("div", {
            "class": "".concat(this.componentName, "__flow-status")
          }, [h(CheckCircleFilledIcon$1), h("span", [((_this$locale4 = this.locale) === null || _this$locale4 === void 0 ? void 0 : (_this$locale4$progres = _this$locale4.progress) === null || _this$locale4$progres === void 0 ? void 0 : _this$locale4$progres.successText) || this.global.progress.successText])]);
          break;

        case "fail":
          status = h("div", {
            "class": "".concat(this.componentName, "__flow-status")
          }, [h(ErrorCircleFilledIcon$1), h("span", [((_this$locale5 = this.locale) === null || _this$locale5 === void 0 ? void 0 : (_this$locale5$progres = _this$locale5.progress) === null || _this$locale5$progres === void 0 ? void 0 : _this$locale5$progres.failText) || this.global.progress.failText])]);
          break;

        case "progress":
          this.showUploadProgress && (status = h("div", {
            "class": "".concat(this.componentName, "__flow-status")
          }, [h("l-loading"), h("span", ["".concat(((_this$locale6 = this.locale) === null || _this$locale6 === void 0 ? void 0 : (_this$locale6$progres = _this$locale6.progress) === null || _this$locale6$progres === void 0 ? void 0 : _this$locale6$progres.uploadingText) || this.global.progress.uploadingText, " ").concat(Math.min(file.percent, 99), "%")])]));
          break;

        case "waiting":
          status = h("div", {
            "class": "".concat(this.componentName, "__flow-status")
          }, [h(TimeFilledIcon$1), h("span", [((_this$locale7 = this.locale) === null || _this$locale7 === void 0 ? void 0 : (_this$locale7$progres = _this$locale7.progress) === null || _this$locale7$progres === void 0 ? void 0 : _this$locale7$progres.waitingText) || 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 _this$locale8, _this$locale8$dragger, _this$locale9, _this$locale9$dragger;

      var h = this.$createElement;
      var dragDropText = ((_this$locale8 = this.locale) === null || _this$locale8 === void 0 ? void 0 : (_this$locale8$dragger = _this$locale8.dragger) === null || _this$locale8$dragger === void 0 ? void 0 : _this$locale8$dragger.dragDropText) || this.global.dragger.dragDropText;
      var clickAndDragText = ((_this$locale9 = this.locale) === null || _this$locale9 === void 0 ? void 0 : (_this$locale9$dragger = _this$locale9.dragger) === null || _this$locale9$dragger === void 0 ? void 0 : _this$locale9$dragger.clickAndDragText) || this.global.dragger.clickAndDragText;
      return h("div", {
        "class": "".concat(this.componentName, "__flow-empty"),
        "on": {
          "drop": this.handleDrop,
          "dragenter": this.handleDragenter,
          "dragover": this.handleDragover,
          "dragleave": this.handleDragleave
        }
      }, [this.dragActive ? dragDropText : clickAndDragText]);
    },
    renderFileList: function renderFileList() {
      var _this$locale10,
          _this$locale10$file,
          _this$locale11,
          _this$locale11$file,
          _this$locale12,
          _this$locale12$file,
          _this$locale13,
          _this$locale13$file,
          _this2 = this;

      var h = this.$createElement;
      return h("table", {
        "class": "".concat(this.componentName, "__flow-table")
      }, [h("tr", [h("th", [((_this$locale10 = this.locale) === null || _this$locale10 === void 0 ? void 0 : (_this$locale10$file = _this$locale10.file) === null || _this$locale10$file === void 0 ? void 0 : _this$locale10$file.fileNameText) || this.global.file.fileNameText]), h("th", [((_this$locale11 = this.locale) === null || _this$locale11 === void 0 ? void 0 : (_this$locale11$file = _this$locale11.file) === null || _this$locale11$file === void 0 ? void 0 : _this$locale11$file.fileSizeText) || this.global.file.fileSizeText]), h("th", [((_this$locale12 = this.locale) === null || _this$locale12 === void 0 ? void 0 : (_this$locale12$file = _this$locale12.file) === null || _this$locale12$file === void 0 ? void 0 : _this$locale12$file.fileStatusText) || this.global.file.fileStatusText]), h("th", [((_this$locale13 = this.locale) === null || _this$locale13 === void 0 ? void 0 : (_this$locale13$file = _this$locale13.file) === null || _this$locale13$file === void 0 ? void 0 : _this$locale13$file.fileOperationText) || 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", [abridgeName(file.name, 7, 10)]), h("td", [returnFileSize(file.size)]), h("td", [_this2.renderStatus(file)]), showBatchUploadAction ? _this2.renderBatchActionCol(index) : _this2.renderNormalActionCol(file, index)]);
      })]);
    },
    renderNormalActionCol: function renderNormalActionCol(file, index) {
      var _this3 = this,
          _this$locale14,
          _this$locale14$trigge;

      var h = this.$createElement;
      return h("td", [h("span", {
        "class": "".concat(this.componentName, "__flow-button"),
        "on": {
          "click": function click(e) {
            return _this3.remove({
              e: e,
              index: index,
              file: file
            });
          }
        }
      }, [((_this$locale14 = this.locale) === null || _this$locale14 === void 0 ? void 0 : (_this$locale14$trigge = _this$locale14.triggerUploadText) === null || _this$locale14$trigge === void 0 ? void 0 : _this$locale14$trigge["delete"]) || this.global.triggerUploadText["delete"]])]);
    },
    renderBatchActionCol: function renderBatchActionCol(index) {
      var _this4 = this,
          _this$locale15,
          _this$locale15$trigge;

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

      var h = this.$createElement;

      var _this$useGlobalIcon2 = this.useGlobalIcon({
        ErrorCircleFilledIcon: ErrorCircleFilledIcon,
        DeleteIcon: DeleteIcon,
        BrowseIcon: BrowseIcon
      }),
          ErrorCircleFilledIcon$1 = _this$useGlobalIcon2.ErrorCircleFilledIcon,
          DeleteIcon$1 = _this$useGlobalIcon2.DeleteIcon,
          BrowseIcon$1 = _this$useGlobalIcon2.BrowseIcon;

      return h("div", {
        "class": "".concat(this.componentName, "__flow-card-area")
      }, [this.showInitial && this.renderDragger(), !!this.listFiles.length && h("ul", {
        "class": "".concat(this.componentName, "__card clearfix")
      }, [this.listFiles.map(function (file, index) {
        var _this5$locale, _this5$locale$progres, _this5$locale2, _this5$locale2$progre;

        return h("li", {
          "class": "".concat(_this5.componentName, "__card-item")
        }, [h("div", {
          "class": ["".concat(_this5.componentName, "__card-content"), _defineProperty({}, "".concat(_this5.classPrefix, "-is-bordered"), file.status !== "waiting")]
        }, [file.status === "fail" && h("div", {
          "class": "".concat(_this5.componentName, "__card-status-wrap")
        }, [h(ErrorCircleFilledIcon$1), h("p", [((_this5$locale = _this5.locale) === null || _this5$locale === void 0 ? void 0 : (_this5$locale$progres = _this5$locale.progress) === null || _this5$locale$progres === void 0 ? void 0 : _this5$locale$progres.failText) || _this5.global.progress.failText])]), file.status === "progress" && h("div", {
          "class": "".concat(_this5.componentName, "__card-status-wrap")
        }, [h("l-loading"), h("p", [((_this5$locale2 = _this5.locale) === null || _this5$locale2 === void 0 ? void 0 : (_this5$locale2$progre = _this5$locale2.progress) === null || _this5$locale2$progre === void 0 ? void 0 : _this5$locale2$progre.uploadingText) || _this5.global.progress.uploadingText, " ", Math.min(file.percent, 99)])]), (["waiting", "success"].includes(file.status) || !file.status && file.url) && h("img", {
          "class": "".concat(_this5.componentName, "__card-image"),
          "attrs": {
            "src": file.url || "//tdesign.gtimg.com/tdesign-default-img.png"
          }
        }), h("div", {
          "class": "".concat(_this5.componentName, "__card-mask")
        }, [file.url && h("span", {
          "class": "".concat(_this5.componentName, "__card-mask-item")
        }, [h(BrowseIcon$1, {
          "nativeOn": {
            "click": function click(e) {
              return _this5.onViewClick(e, file);
            }
          }
        }), h("span", {
          "class": "".concat(_this5.componentName, "__card-mask-item-divider")
        })]), !_this5.disabled && h("span", {
          "class": "".concat(_this5.componentName, "__card-mask-item"),
          "on": {
            "click": function click(e) {
              return _this5.remove({
                e: e,
                index: index,
                file: file
              });
            }
          }
        }, [h(DeleteIcon$1)])])]), h("p", {
          "class": "".concat(_this5.componentName, "__card-name")
        }, [abridgeName(file.name)])]);
      })])]);
    }
  },
  render: function render() {
    var _this$locale16,
        _this6 = this;

    var h = arguments[0];
    return h("div", {
      "class": ["".concat(this.componentName, "__flow"), "".concat(this.componentName, "__flow-").concat(this.display)]
    }, [h("div", {
      "class": "".concat(this.componentName, "__flow-op")
    }, [this.$scopedSlots["default"] && this.$scopedSlots["default"](null), h("small", {
      "class": "".concat(this.classPrefix, "-size-s ").concat(this.componentName, "__flow-placeholder")
    }, [this.placeholder])]), this.display === "file-flow" && this.renderFileList(), this.display === "image-flow" && this.renderImgList(), h("div", {
      "class": "".concat(this.componentName, "__flow-bottom")
    }, [h("l-button", {
      "attrs": {
        "theme": "default"
      },
      "on": {
        "click": this.cancel
      }
    }, [((_this$locale16 = this.locale) === null || _this$locale16 === void 0 ? void 0 : _this$locale16.cancelUploadText) || this.global.cancelUploadText]), h("l-button", {
      "attrs": {
        "disabled": !this.allowUpload,
        "theme": "primary"
      },
      "on": {
        "click": function click(e) {
          return _this6.upload(_this6.waitingUploadFiles, e);
        }
      }
    }, [this.uploadText])])]);
  }
});

export { LFlowList as default };
//# sourceMappingURL=flow-list.js.map
