/**
 * tdesign v0.32.0
 * (c) 2021 tdesign
 * @license MIT
 */

import _defineProperty from '@babel/runtime/helpers/defineProperty';
import Vue from 'vue';
import { CheckCircleFilledIcon, TimeFilledIcon, ErrorCircleFilledIcon, BrowseIcon, DeleteIcon } 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 '../button/button.js';
import '../utils/classnames.js';
import '../button/props.js';
import '../utils/render-tnode.js';
import '@babel/runtime/helpers/typeof';
import '../utils/ripple.js';
import '../utils/set-style.js';
import '../loading/loading.js';
import '../loading/icon/gradient.js';
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/index.js';
import '../loading/type.js';
import '../loading/plugin.js';
import '../button/type.js';

var FlowList = Vue.extend({
  name: "TUploadFlowList",
  components: {
    TButton: Button,
    TLoading: Loading,
    TIconCheckCircleFilled: CheckCircleFilledIcon,
    TIconTimeFilled: TimeFilledIcon,
    TIconErrorCircleFilled: ErrorCircleFilledIcon,
    TIconBrowse: BrowseIcon,
    TIconDelete: DeleteIcon
  },
  props: {
    showUploadProgress: props.showUploadProgress,
    files: Array,
    toUploadFiles: Array,
    placeholder: String,
    autoUpload: 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) {
        var r = _this.files.filter(function (t) {
          return t.name === item.name;
        });

        if (!r.length) {
          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 "\u4E0A\u4F20\u4E2D...";
      return this.failedList && this.failedList.length ? "\u91CD\u65B0\u4E0A\u4F20" : "\u5F00\u59CB\u4E0A\u4F20";
    }
  },
  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", ["\u4E0A\u4F20\u6210\u529F"])]);
          break;

        case "fail":
          status = h("div", {
            "class": "".concat(UPLOAD_NAME, "__flow-status")
          }, [h(ErrorCircleFilledIcon), h("span", ["\u4E0A\u4F20\u5931\u8D25"])]);
          break;

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

        case "waiting":
          status = h("div", {
            "class": "".concat(UPLOAD_NAME, "__flow-status")
          }, [h(TimeFilledIcon), h("span", ["\u5F85\u4E0A\u4F20"])]);
          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 ? "\u91CA\u653E\u9F20\u6807" : "\u70B9\u51FB\u4E0A\u65B9\u201C\u9009\u62E9\u6587\u4EF6\u201D\u6216\u5C06\u6587\u4EF6\u62D6\u62FD\u5230\u6B64\u533A\u57DF"]);
    },
    renderFileList: function renderFileList() {
      var _this2 = this;

      var h = this.$createElement;
      return h("table", {
        "class": "".concat(UPLOAD_NAME, "__flow-table")
      }, [h("tr", [h("th", ["\u6587\u4EF6\u540D"]), h("th", ["\u5927\u5C0F"]), h("th", ["\u72B6\u6001"]), h("th", ["\u64CD\u4F5C"])]), this.showInitial && h("tr", [h("td", {
        "attrs": {
          "colspan": 4
        }
      }, [this.renderDrager()])]), this.listFiles.map(function (file, index) {
        return h("tr", [h("td", [abridgeName(file.name, 7, 10)]), h("td", [returnFileSize(file.size)]), h("td", [_this2.renderStatus(file)]), h("td", [h("span", {
          "class": "".concat(UPLOAD_NAME, "__flow-button"),
          "on": {
            "click": function click(e) {
              return _this2.remove({
                e: e,
                index: index,
                file: file
              });
            }
          }
        }, ["\u5220\u9664"])])]);
      })]);
    },
    renderImgList: function renderImgList() {
      var _this3 = 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", ["\u4E0A\u4F20\u5931\u8D25"])]), file.status === "progress" && h("div", {
          "class": "".concat(UPLOAD_NAME, "__card-status-wrap")
        }, [h(Loading), h("p", ["\u4E0A\u4F20\u4E2D ", 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 _this3.onViewClick(e, file);
            }
          }
        }), h("span", {
          "class": "".concat(UPLOAD_NAME, "__card-mask-item-divider")
        })]), h("span", {
          "class": "".concat(UPLOAD_NAME, "__card-mask-item"),
          "on": {
            "click": function click(e) {
              return _this3.remove({
                e: e,
                index: index,
                file: file
              });
            }
          }
        }, [h(DeleteIcon)])])]), h("p", {
          "class": "".concat(UPLOAD_NAME, "__card-name")
        }, [abridgeName(file.name)])]);
      })])]);
    }
  },
  render: function render() {
    var _this4 = 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
      }
    }, ["\u53D6\u6D88"]), h(Button, {
      "attrs": {
        "disabled": !this.allowUpload,
        "theme": "primary"
      },
      "on": {
        "click": function click(e) {
          return _this4.upload(_this4.waitingUploadFiles, e);
        }
      }
    }, [this.uploadText])])]);
  }
});

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