/**
 * ldesign v0.2.14
 * (c) 2022/11/2 16:16 built by swimly
 * @license MIT
 */

'use strict';

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

var helper = require('../../../chunks/helper.js');
var VueCompositionAPI = require('@vue/composition-api');
var iconsVue = require('@ldesign/icons-vue');
var utils = require('../../../chunks/utils2.js');
var hooks_useGlobalIcon = require('../../../hooks/use-global-icon.js');
var components_imageViewer_index = require('../../image-viewer/index.js');
var components_upload_const = require('../const.js');
var components_button_index = require('../../button/index.js');
var components_upload_hooks_useDrag = require('../hooks/use-drag.js');
var components_loading_index = require('../../loading/index.js');
var components_link_index = require('../../link/index.js');
require('../../../chunks/log.js');
require('../../../chunks/_commonjsHelpers-2e6815bd.js');
require('../../config-provider/useConfig.js');
require('../../config-provider/context.js');
require('lodash');
require('../../../chunks/zh_CN.js');
require('../../../utils/with-install.js');
require('vue');
require('../../../config.js');
require('../../image-viewer/image-viewer.js');
require('lodash/kebabCase');
require('../../../hooks/use-default-value.js');
require('../../../hooks/use-config.js');
require('../../../utils/render-node.js');
require('../../image-viewer/props.js');
require('../../image-viewer/base/ImageModalIcon.js');
require('../../../hooks/lnode.js');
require('lodash/isEmpty');
require('lodash/isFunction');
require('lodash/camelCase');
require('../../../hooks/render-lnode.js');
require('../../image-viewer/base/ImageViewerUtils.js');
require('../../tooltip/index.js');
require('../../../utils/map-props.js');
require('../../tooltip/tooltip.js');
require('../../popup/props.js');
require('../../popup/popup.js');
require('@popperjs/core');
require('../../../chunks/set-style.js');
require('../../../utils/dom.js');
require('raf');
require('lodash/isString');
require('../../../utils/easing.js');
require('../../../utils/helper.js');
require('../../config-provider/config-receiver.js');
require('lodash/mergeWith');
require('../../../utils/mixins.js');
require('../../popup/container.js');
require('../../tooltip/props.js');
require('../../image-viewer/utils.js');
require('../../image-viewer/base/ImageItem.js');
require('../../image-viewer/hooks/index.js');
require('../../image-viewer/base/ImageViewerModal.js');
require('../../dialog/index.js');
require('../../dialog/dialog.js');
require('lodash/isNumber');
require('lodash/throttle');
require('../../../utils/transfer-dom.js');
require('../../../utils/event.js');
require('../../../hooks/use-destroy-onclose.js');
require('../../dialog/props.js');
require('../../dialog/mixins/action.js');
require('lodash/isObject');
require('../../button/button.js');
require('../../../utils/ripple.js');
require('../../button/props.js');
require('../../loading/loading.js');
require('../../loading/props.js');
require('../../loading/icon/gradient.js');
require('../../../chunks/defineProperty-838e4192.js');
require('../../../chunks/helper2.js');
require('../../loading/plugin.js');
require('../../dialog/stack.js');
require('../../dialog/plugin.js');
require('../../image-viewer/const.js');
require('../../image-viewer/base/Container.js');
require('../../link/link.js');
require('../../link/props.js');

var MultipleFlowList = VueCompositionAPI.defineComponent({
  name: "UploadMultipleFlowList",
  props: {
    ...components_upload_const.commonProps,
    uploadFiles: Function,
    cancelUpload: Function,
    dragEvents: Object,
    disabled: Boolean,
    isBatchUpload: Boolean,
    draggable: Boolean,
    onPreview: Function
  },
  setup(props) {
    const {
      locale,
      uploading,
      classPrefix
    } = VueCompositionAPI.toRefs(props);
    const uploadPrefix = `${classPrefix.value}-upload`;
    const icons = hooks_useGlobalIcon.useGlobalIcon({
      BrowseIcon: iconsVue.BrowseIcon,
      DeleteIcon: iconsVue.DeleteIcon,
      CheckCircleFilledIcon: iconsVue.CheckCircleFilledIcon,
      ErrorCircleFilledIcon: iconsVue.ErrorCircleFilledIcon,
      TimeFilledIcon: iconsVue.TimeFilledIcon
    });
    const drag = components_upload_hooks_useDrag["default"](props.dragEvents);
    const uploadText = VueCompositionAPI.computed(() => {
      if (uploading.value) return `${locale.value.progress.uploadingText}`;
      return locale.value.triggerUploadText.normal;
    });
    const innerDragEvents = VueCompositionAPI.computed(() => {
      const draggable = props.draggable === void 0 ? true : props.draggable;
      return draggable ? {
        drop: drag.handleDrop,
        dragenter: drag.handleDragenter,
        dragover: drag.handleDragover,
        dragleave: drag.handleDragleave
      } : {};
    });
    return {
      icons,
      dragActive: drag.dragActive,
      uploadPrefix,
      uploadText,
      innerDragEvents
    };
  },
  methods: {
    getStatusMap() {
      const h = this.$createElement;
      const {
        CheckCircleFilledIcon,
        ErrorCircleFilledIcon,
        TimeFilledIcon
      } = this.icons;
      const iconMap = {
        success: h(CheckCircleFilledIcon),
        fail: h(ErrorCircleFilledIcon),
        progress: h(components_loading_index.Loading),
        waiting: h(TimeFilledIcon)
      };
      const {
        progress
      } = this.locale;
      const textMap = {
        success: progress === null || progress === void 0 ? void 0 : progress.successText,
        fail: progress === null || progress === void 0 ? void 0 : progress.failText,
        progress: progress === null || progress === void 0 ? void 0 : progress.uploadingText,
        waiting: progress === null || progress === void 0 ? void 0 : progress.waitingText
      };
      return {
        iconMap,
        textMap
      };
    },
    renderEmpty() {
      const h = this.$createElement;
      return h("div", {
        "class": `${this.uploadPrefix}__flow-empty`
      }, [this.dragActive ? this.locale.dragger.dragDropText : this.locale.dragger.clickAndDragText]);
    },
    renderImgItem(file, index) {
      const h = this.$createElement;
      const {
        iconMap,
        textMap
      } = this.getStatusMap();
      const {
        BrowseIcon,
        DeleteIcon
      } = this.icons;
      return h("li", {
        "class": `${this.uploadPrefix}__card-item`,
        "key": file.name + index + file.percent + file.status
      }, [h("div", {
        "class": [`${this.uploadPrefix}__card-content`, {
          [`${this.classPrefix}-is-bordered`]: file.status !== "waiting"
        }]
      }, [["fail", "progress"].includes(file.status) && h("div", {
        "class": `${this.uploadPrefix}__card-status-wrap`
      }, [iconMap[file.status], h("p", [textMap[file.status], file.status === "progress" ? ` ${file.percent}%` : ""])]), (["waiting", "success"].includes(file.status) || !file.status && file.url) && h("img", {
        "class": `${this.uploadPrefix}__card-image`,
        "attrs": {
          "src": file.url || "//tdesign.gtimg.com/tdesign-default-img.png"
        }
      }), h("div", {
        "class": `${this.uploadPrefix}__card-mask`
      }, [file.url && h("span", {
        "class": `${this.uploadPrefix}__card-mask-item`
      }, [h(components_imageViewer_index.ImageViewer, {
        "attrs": {
          "images": this.displayFiles.map(t => t.url),
          "defaultIndex": index,
          "trigger": (h2, _ref) => {
            let {
              open
            } = _ref;
            return h(BrowseIcon, {
              "on": {
                "click": _ref2 => {
                  var _this$onPreview;
                  let {
                    e
                  } = _ref2;
                  (_this$onPreview = this.onPreview) === null || _this$onPreview === void 0 ? void 0 : _this$onPreview.call(this, {
                    file,
                    index,
                    e
                  });
                  open();
                }
              }
            });
          }
        }
      }), h("span", {
        "class": `${this.uploadPrefix}__card-mask-item-divider`
      })]), !this.disabled && h("span", {
        "class": `${this.uploadPrefix}__card-mask-item`,
        "on": {
          "click": e => this.onRemove({
            e,
            index,
            file
          })
        }
      }, [h(DeleteIcon)])])]), h("p", {
        "class": `${this.uploadPrefix}__card-name`
      }, [utils.abridgeName(file.name)])]);
    },
    renderStatus(file) {
      const h = this.$createElement;
      const {
        iconMap,
        textMap
      } = this.getStatusMap();
      return h("div", {
        "class": `${this.uploadPrefix}__flow-status`
      }, [iconMap[file.status], h("span", [textMap[file.status], file.status === "progress" ? ` ${file.percent}%` : ""])]);
    },
    renderNormalActionCol(file, index) {
      var _this$locale, _this$locale$triggerU;
      const h = this.$createElement;
      return h("td", [h(components_button_index.Button, {
        "attrs": {
          "theme": "primary",
          "variant": "text",
          "content": (_this$locale = this.locale) === null || _this$locale === void 0 ? void 0 : (_this$locale$triggerU = _this$locale.triggerUploadText) === null || _this$locale$triggerU === void 0 ? void 0 : _this$locale$triggerU.delete
        },
        "on": {
          "click": e => this.onRemove({
            e,
            index,
            file
          })
        }
      })]);
    },
    renderBatchActionCol(index) {
      var _this$locale2, _this$locale2$trigger;
      const h = this.$createElement;
      return index === 0 ? h("td", {
        "attrs": {
          "rowSpan": this.displayFiles.length
        },
        "class": `${this.uploadPrefix}__flow-table__batch-row`
      }, [h(components_button_index.Button, {
        "attrs": {
          "theme": "primary",
          "variant": "text",
          "content": (_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.delete
        },
        "on": {
          "click": e => this.onRemove({
            e,
            index: -1,
            file: null
          })
        }
      })]) : null;
    },
    renderFileList() {
      var _this$locale$file, _this$locale$file2, _this$locale$file3, _this$locale$file4;
      const h = this.$createElement;
      if (this.fileListDisplay) {
        return this.fileListDisplay(h, {
          files: this.displayFiles,
          dragEvents: this.innerDragEvents
        });
      }
      return h("table", helper.helper([{
        "class": `${this.uploadPrefix}__flow-table`
      }, {
        "on": this.innerDragEvents
      }]), [h("thead", [h("tr", [h("th", [(_this$locale$file = this.locale.file) === null || _this$locale$file === void 0 ? void 0 : _this$locale$file.fileNameText]), h("th", {
        "style": {
          width: "120px"
        }
      }, [(_this$locale$file2 = this.locale.file) === null || _this$locale$file2 === void 0 ? void 0 : _this$locale$file2.fileSizeText]), h("th", {
        "style": {
          width: "120px"
        }
      }, [(_this$locale$file3 = this.locale.file) === null || _this$locale$file3 === void 0 ? void 0 : _this$locale$file3.fileStatusText]), this.disabled ? null : h("th", [(_this$locale$file4 = this.locale.file) === null || _this$locale$file4 === void 0 ? void 0 : _this$locale$file4.fileOperationText])])]), h("tbody", [!this.displayFiles.length && h("tr", [h("td", {
        "attrs": {
          "colSpan": 4
        }
      }, [this.renderEmpty()])]), this.displayFiles.map((file, index) => {
        var _this$abridgeName;
        const showBatchUploadAction = this.isBatchUpload;
        const deleteNode = showBatchUploadAction && !this.displayFiles.find(item => item.status !== "success") ? this.renderBatchActionCol(index) : this.renderNormalActionCol(file, index);
        const fileName = (_this$abridgeName = this.abridgeName) !== null && _this$abridgeName !== void 0 && _this$abridgeName.length ? utils.abridgeName(file.name, ...this.abridgeName) : file.name;
        return h("tr", {
          "key": file.name + index
        }, [h("td", [file.url ? h(components_link_index.Link, {
          "attrs": {
            "href": file.url,
            "target": "_blank",
            "hover": "color"
          }
        }, [fileName]) : fileName]), h("td", [utils.returnFileSize(file.size)]), h("td", [this.renderStatus(file)]), this.disabled ? null : deleteNode]);
      })])]);
    }
  },
  render() {
    var _this$$scopedSlots$de, _this$$scopedSlots, _this$locale3;
    const h = arguments[0];
    const cardClassName = `${this.uploadPrefix}__flow-card-area`;
    return h("div", {
      "class": `${this.uploadPrefix}__flow ${this.uploadPrefix}__flow-${this.theme}`
    }, [h("div", {
      "class": `${this.uploadPrefix}__flow-op`
    }, [(_this$$scopedSlots$de = (_this$$scopedSlots = this.$scopedSlots).default) === null || _this$$scopedSlots$de === void 0 ? void 0 : _this$$scopedSlots$de.call(_this$$scopedSlots, null), this.placeholder && h("small", {
      "class": `${this.uploadPrefix}__flow-placeholder ${this.uploadPrefix}__placeholder`
    }, [this.placeholder])]), this.theme === "image-flow" && h("div", helper.helper([{
      "class": cardClassName
    }, {
      "on": this.innerDragEvents
    }]), [this.displayFiles.length ? h("ul", {
      "class": `${this.uploadPrefix}__card clearfix`
    }, [this.displayFiles.map((file, index) => this.renderImgItem(file, index))]) : this.renderEmpty()]), this.theme === "file-flow" && (this.displayFiles.length ? this.renderFileList() : h("div", helper.helper([{
      "class": cardClassName
    }, {
      "on": this.innerDragEvents
    }]), [this.renderEmpty()])), !this.autoUpload && h("div", {
      "class": `${this.uploadPrefix}__flow-bottom`
    }, [h(components_button_index.Button, {
      "attrs": {
        "theme": "default",
        "disabled": this.disabled || !this.uploading,
        "content": (_this$locale3 = this.locale) === null || _this$locale3 === void 0 ? void 0 : _this$locale3.cancelUploadText
      },
      "on": {
        "click": e => {
          var _this$cancelUpload;
          return (_this$cancelUpload = this.cancelUpload) === null || _this$cancelUpload === void 0 ? void 0 : _this$cancelUpload.call(this, {
            e
          });
        }
      }
    }), h(components_button_index.Button, {
      "attrs": {
        "disabled": this.disabled || this.uploading || !this.displayFiles.length,
        "theme": "primary",
        "loading": this.uploading,
        "content": this.uploadText
      },
      "on": {
        "click": () => {
          var _this$uploadFiles;
          return (_this$uploadFiles = this.uploadFiles) === null || _this$uploadFiles === void 0 ? void 0 : _this$uploadFiles.call(this);
        }
      }
    })])]);
  }
});

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