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

import { TimeFilledIcon, CheckCircleFilledIcon, ErrorCircleFilledIcon, DeleteIcon, BrowseIcon } from '@ldesign/icons-vue';
import { a as abridgeName, r as returnFileSize } from '../../chunks/utils.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/defineProperty-56324511.js';
import '../../chunks/log.js';
import '../button/button.js';
import '../button/props.js';
import '../../utils/render-node.js';
import 'vue';
import 'lodash/camelCase';
import 'lodash/kebabCase';
import '../../utils/ripple.js';
import '../../chunks/set-style.js';
import '../../config.js';
import '../loading/loading.js';
import '../loading/icon/gradient.js';
import '../../chunks/helper2.js';
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/zh_CN.js';
import '../config-provider/type.js';
import '../../utils/with-install.js';
import '../loading/style/css.js';
import '../loading/type.js';
import '../loading/plugin.js';
import '../button/style/css.js';
import '../button/type.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(val) {
        return ["file-flow", "image-flow"].includes(val);
      }

    },
    locale: props.locale
  },

  data() {
    return {
      dragActive: false,
      target: null
    };
  },

  computed: {
    showInitial() {
      const isWaitingEmpty = !this.waitingUploadFiles || !this.waitingUploadFiles.length;
      return (!this.files || !this.files.length) && isWaitingEmpty;
    },

    waitingUploadFiles() {
      const list = [];
      this.toUploadFiles.forEach(item => {
        if (!this.allowUploadDuplicateFile) {
          const r = this.files.filter(t => t.name === item.name);

          if (!r.length) {
            list.push(item);
          }
        } else {
          list.push(item);
        }
      });
      return list;
    },

    listFiles() {
      if (!this.files || !this.files.length) return this.toUploadFiles;
      return this.files.concat(this.waitingUploadFiles);
    },

    failedList() {
      return this.toUploadFiles.filter(file => file.status === "fail");
    },

    processList() {
      return this.toUploadFiles.filter(file => file.status === "progress");
    },

    isUploading() {
      return !!this.processList.length;
    },

    allowUpload() {
      return Boolean(this.waitingUploadFiles && this.waitingUploadFiles.length) && !this.isUploading;
    },

    uploadText() {
      var _this$locale, _this$locale$progress, _this$locale2, _this$locale2$trigger, _this$locale3, _this$locale3$trigger;

      const 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;
      const 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;
      const 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 `${uploadingText}...`;
      return this.failedList && this.failedList.length ? reuploadText : normalText;
    },

    batchRemoveRow() {
      return this.batchUpload && this.files.length > 0;
    }

  },
  methods: {
    renderStatus(file) {
      var _this$locale4, _this$locale4$progres, _this$locale5, _this$locale5$progres, _this$locale6, _this$locale6$progres, _this$locale7, _this$locale7$progres;

      const h = this.$createElement;
      let status = null;
      const {
        TimeFilledIcon: TimeFilledIcon$1,
        CheckCircleFilledIcon: CheckCircleFilledIcon$1,
        ErrorCircleFilledIcon: ErrorCircleFilledIcon$1
      } = this.useGlobalIcon({
        TimeFilledIcon: TimeFilledIcon,
        CheckCircleFilledIcon: CheckCircleFilledIcon,
        ErrorCircleFilledIcon: ErrorCircleFilledIcon
      });

      switch (file.status) {
        case "success":
          status = h("div", {
            "class": `${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": `${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": `${this.componentName}__flow-status`
          }, [h("l-loading"), h("span", [`${((_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} ${Math.min(file.percent, 99)}%`])]));
          break;

        case "waiting":
          status = h("div", {
            "class": `${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(event) {
      event.preventDefault();
      this.$emit("change", event.dataTransfer.files);
      this.$emit("dragleave", event);
      this.dragActive = false;
    },

    handleDragenter(event) {
      this.target = event.target;
      event.preventDefault();
      this.$emit("dragenter", event);
      this.dragActive = true;
    },

    handleDragleave(event) {
      if (this.target !== event.target) return;
      event.preventDefault();
      this.$emit("dragleave", event);
      this.dragActive = false;
    },

    handleDragover(event) {
      event.preventDefault();
    },

    onViewClick(event, file) {
      this.$emit("imgPreview", event, file);
    },

    renderDragger() {
      var _this$locale8, _this$locale8$dragger, _this$locale9, _this$locale9$dragger;

      const h = this.$createElement;
      const 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;
      const 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": `${this.componentName}__flow-empty`,
        "on": {
          "drop": this.handleDrop,
          "dragenter": this.handleDragenter,
          "dragover": this.handleDragover,
          "dragleave": this.handleDragleave
        }
      }, [this.dragActive ? dragDropText : clickAndDragText]);
    },

    renderFileList() {
      var _this$locale10, _this$locale10$file, _this$locale11, _this$locale11$file, _this$locale12, _this$locale12$file, _this$locale13, _this$locale13$file;

      const h = this.$createElement;
      return h("table", {
        "class": `${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((file, index) => {
        const showBatchUploadAction = this.batchUpload && this.toUploadFiles.length === 0;
        return h("tr", [h("td", [abridgeName(file.name, 7, 10)]), h("td", [returnFileSize(file.size)]), h("td", [this.renderStatus(file)]), showBatchUploadAction ? this.renderBatchActionCol(index) : this.renderNormalActionCol(file, index)]);
      })]);
    },

    renderNormalActionCol(file, index) {
      var _this$locale14, _this$locale14$trigge;

      const h = this.$createElement;
      return h("td", [h("span", {
        "class": `${this.componentName}__flow-button`,
        "on": {
          "click": e => this.remove({
            e,
            index,
            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(index) {
      var _this$locale15, _this$locale15$trigge;

      const h = this.$createElement;
      return index === 0 ? h("td", {
        "attrs": {
          "rowspan": this.listFiles.length
        },
        "class": `${this.componentName}__flow-table__batch-row`
      }, [h("span", {
        "class": `${this.componentName}__flow-button`,
        "on": {
          "click": e => this.remove({
            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() {
      const h = this.$createElement;
      const {
        ErrorCircleFilledIcon: ErrorCircleFilledIcon$1,
        DeleteIcon: DeleteIcon$1,
        BrowseIcon: BrowseIcon$1
      } = this.useGlobalIcon({
        ErrorCircleFilledIcon: ErrorCircleFilledIcon,
        DeleteIcon: DeleteIcon,
        BrowseIcon: BrowseIcon
      });
      return h("div", {
        "class": `${this.componentName}__flow-card-area`
      }, [this.showInitial && this.renderDragger(), !!this.listFiles.length && h("ul", {
        "class": `${this.componentName}__card clearfix`
      }, [this.listFiles.map((file, index) => {
        var _this$locale16, _this$locale16$progre, _this$locale17, _this$locale17$progre;

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

  },

  render() {
    var _this$locale18;

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

});

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