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

import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { TimeFilledIcon, CheckCircleFilledIcon, ErrorCircleFilledIcon, DeleteIcon, BrowseIcon } from 'tdesign-icons-vue';
import { prefix } from '../config.js';
import { Button } from '../button/index.js';
import { Loading } from '../loading/index.js';
import { UPLOAD_NAME, abridgeName, returnFileSize } from './util.js';
import props from './props.js';
import mixins from '../utils/mixins.js';
import getConfigReceiverMixins from '../config-provider/config-receiver.js';
import '../button/button.js';
import '../_chunks/dep-1ec74b8b.js';
import '../utils/classnames.js';
import '../button/props.js';
import '../utils/render-tnode.js';
import '@babel/runtime/helpers/typeof';
import 'vue';
import 'lodash/isObject';
import '../utils/ripple.js';
import '../_common/js/utils/set-style.js';
import '../loading/loading.js';
import '../loading/icon/gradient.js';
import '../_common/js/loading/circle-adapter.js';
import '../_common/js/utils/helper.js';
import '@babel/runtime/helpers/objectWithoutProperties';
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 '../utils/withInstall.js';
import 'lodash/capitalize';
import './style/css.js';
import '../loading/type.js';
import '../loading/plugin.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';

var FlowList = mixins(getConfigReceiverMixins("upload")).extend({
  name: "TUploadFlowList",
  components: {
    TButton: Button,
    TLoading: Loading,
    TimeFilledIcon: TimeFilledIcon,
    CheckCircleFilledIcon: CheckCircleFilledIcon,
    ErrorCircleFilledIcon: ErrorCircleFilledIcon,
    DeleteIcon: DeleteIcon,
    BrowseIcon: BrowseIcon
  },
  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);
      }
    }
  },
  data: function data() {
    return {
      dragActive: false,
      target: null
    };
  },
  computed: {
    showInitial: function showInitial() {
      var isWatingEmpty = !this.waitingUploadFiles || !this.waitingUploadFiles.length;
      return (!this.files || !this.files.length) && isWatingEmpty;
    },
    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(UPLOAD_NAME, "__flow-status")
          }, [h(CheckCircleFilledIcon), h("span", [this.global.progress.successText])]);
          break;

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

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

        case "waiting":
          status = h("div", {
            "class": "".concat(UPLOAD_NAME, "__flow-status")
          }, [h(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);
    },
    renderDrager: function renderDrager() {
      var h = this.$createElement;
      return h("div", {
        "class": "".concat(UPLOAD_NAME, "__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(UPLOAD_NAME, "__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.renderDrager()])]), 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;

      var h = this.$createElement;
      return h("td", [h("span", {
        "class": "".concat(UPLOAD_NAME, "__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(UPLOAD_NAME, "__flow-table__batch-row")
      }, [h("span", {
        "class": "".concat(UPLOAD_NAME, "__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(UPLOAD_NAME, "__flow-card-area")
      }, [this.showInitial && this.renderDrager(), !!this.listFiles.length && h("ul", {
        "class": "".concat(UPLOAD_NAME, "__card clearfix")
      }, [this.listFiles.map(function (file, index) {
        return h("li", {
          "class": "".concat(UPLOAD_NAME, "__card-item")
        }, [h("div", {
          "class": ["".concat(UPLOAD_NAME, "__card-content"), _defineProperty({}, "".concat(prefix, "-is-bordered"), file.status !== "waiting")]
        }, [file.status === "fail" && h("div", {
          "class": "".concat(UPLOAD_NAME, "__card-status-wrap")
        }, [h(ErrorCircleFilledIcon), h("p", [_this5.global.progress.failText])]), file.status === "progress" && h("div", {
          "class": "".concat(UPLOAD_NAME, "__card-status-wrap")
        }, [h(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(UPLOAD_NAME, "__card-image"),
          "attrs": {
            "src": file.url || "//tdesign.gtimg.com/tdesign-default-img.png"
          }
        }), h("div", {
          "class": "".concat(UPLOAD_NAME, "__card-mask")
        }, [file.url && h("span", {
          "class": "".concat(UPLOAD_NAME, "__card-mask-item")
        }, [h(BrowseIcon, {
          "nativeOn": {
            "click": function click(e) {
              return _this5.onViewClick(e, file);
            }
          }
        }), h("span", {
          "class": "".concat(UPLOAD_NAME, "__card-mask-item-divider")
        })]), !_this5.disabled && h("span", {
          "class": "".concat(UPLOAD_NAME, "__card-mask-item"),
          "on": {
            "click": function click(e) {
              return _this5.remove({
                e: e,
                index: index,
                file: file
              });
            }
          }
        }, [h(DeleteIcon)])])]), h("p", {
          "class": "".concat(UPLOAD_NAME, "__card-name")
        }, [abridgeName(file.name)])]);
      })])]);
    }
  },
  render: function render() {
    var _this6 = this;

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

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