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

import { h as helper } from '../../../chunks/helper.js';
import { defineComponent, toRefs, computed } from '@vue/composition-api';
import { BrowseIcon, DeleteIcon, CheckCircleFilledIcon, ErrorCircleFilledIcon, TimeFilledIcon } from '@ldesign/icons-vue';
import { a as abridgeName, r as returnFileSize } from '../../../chunks/utils2.js';
import { useGlobalIcon } from '../../../hooks/use-global-icon.js';
import { ImageViewer } from '../../image-viewer/index.js';
import { commonProps } from '../const.js';
import { Button } from '../../button/index.js';
import useDrag from '../hooks/use-drag.js';
import { Loading } from '../../loading/index.js';
import { Link } from '../../link/index.js';
import '../../../chunks/_commonjsHelpers.js';
import '../../../chunks/defineProperty-838e4192.js';
import '../../../chunks/log.js';
import '../../../chunks/_commonjsHelpers-2e6815bd.js';
import '../../../hooks/use-config.js';
import '../../config-provider/useConfig.js';
import '../../config-provider/context.js';
import 'lodash';
import '../../../chunks/zh_CN.js';
import '../../config-provider/type.js';
import '../../../utils/with-install.js';
import 'vue';
import '../../../config.js';
import '../../image-viewer/image-viewer.js';
import 'lodash/kebabCase';
import '../../../hooks/use-default-value.js';
import '../../../utils/render-node.js';
import '../../image-viewer/props.js';
import '../../image-viewer/base/ImageModalIcon.js';
import '../../../hooks/lnode.js';
import 'lodash/isEmpty';
import 'lodash/isFunction';
import 'lodash/camelCase';
import '../../../hooks/render-lnode.js';
import '../../image-viewer/base/ImageViewerUtils.js';
import '../../tooltip/index.js';
import '../../../utils/map-props.js';
import '../../tooltip/tooltip.js';
import '../../popup/props.js';
import '../../popup/popup.js';
import '@popperjs/core';
import '../../../chunks/set-style.js';
import '../../../utils/dom.js';
import 'raf';
import 'lodash/isString';
import '../../../chunks/index.js';
import '../../../utils/easing.js';
import '../../../utils/helper.js';
import '../../config-provider/config-receiver.js';
import 'lodash/mergeWith';
import '../../../utils/mixins.js';
import '../../popup/container.js';
import '../../tooltip/props.js';
import '../../tooltip/style';
import '../../tooltip/type.js';
import '../../image-viewer/utils.js';
import '../../image-viewer/base/ImageItem.js';
import '../../image-viewer/hooks/index.js';
import '../../image-viewer/base/ImageViewerModal.js';
import '../../dialog/index.js';
import '../../dialog/dialog.js';
import 'lodash/isNumber';
import 'lodash/throttle';
import '../../../utils/transfer-dom.js';
import '../../../utils/event.js';
import '../../../hooks/use-destroy-onclose.js';
import '../../dialog/props.js';
import '../../dialog/mixins/action.js';
import 'lodash/isObject';
import '../../button/button.js';
import '../../../utils/ripple.js';
import '../../button/props.js';
import '../../loading/loading.js';
import '../../loading/props.js';
import '../../loading/icon/gradient.js';
import '../../../chunks/helper2.js';
import '../../loading/style';
import '../../loading/type.js';
import '../../loading/plugin.js';
import '../../button/style';
import '../../button/type.js';
import '../../dialog/stack.js';
import '../../dialog/style';
import '../../dialog/type.js';
import '../../dialog/plugin.js';
import '../../image-viewer/const.js';
import '../../image-viewer/base/Container.js';
import '../../image-viewer/style';
import '../../image-viewer/type.js';
import '../../link/link.js';
import '../../link/props.js';
import '../../link/style';
import '../../link/type.js';

var MultipleFlowList = defineComponent({
  name: "UploadMultipleFlowList",
  props: {
    ...commonProps,
    uploadFiles: Function,
    cancelUpload: Function,
    dragEvents: Object,
    disabled: Boolean,
    isBatchUpload: Boolean,
    draggable: Boolean,
    onPreview: Function
  },
  setup(props) {
    const {
      locale,
      uploading,
      classPrefix
    } = toRefs(props);
    const uploadPrefix = `${classPrefix.value}-upload`;
    const icons = useGlobalIcon({
      BrowseIcon: BrowseIcon,
      DeleteIcon: DeleteIcon,
      CheckCircleFilledIcon: CheckCircleFilledIcon,
      ErrorCircleFilledIcon: ErrorCircleFilledIcon,
      TimeFilledIcon: TimeFilledIcon
    });
    const drag = useDrag(props.dragEvents);
    const uploadText = computed(() => {
      if (uploading.value) return `${locale.value.progress.uploadingText}`;
      return locale.value.triggerUploadText.normal;
    });
    const innerDragEvents = 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(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(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`
      }, [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(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(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([{
        "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 ? abridgeName(file.name, ...this.abridgeName) : file.name;
        return h("tr", {
          "key": file.name + index
        }, [h("td", [file.url ? h(Link, {
          "attrs": {
            "href": file.url,
            "target": "_blank",
            "hover": "color"
          }
        }, [fileName]) : fileName]), h("td", [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([{
      "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([{
      "class": cardClassName
    }, {
      "on": this.innerDragEvents
    }]), [this.renderEmpty()])), !this.autoUpload && h("div", {
      "class": `${this.uploadPrefix}__flow-bottom`
    }, [h(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(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);
        }
      }
    })])]);
  }
});

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