/**
 * ldesign v0.4.6
 * (c) 2023 ldesign
 * @license MIT
 */

import { h as helper } from '../../_chunks/dep-c89aafbb.js';
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { defineComponent, toRefs, computed } from '@vue/composition-api';
import classNames from 'classnames';
import { BrowseIcon, DeleteIcon, CheckCircleFilledIcon, ErrorCircleFilledIcon, TimeFilledIcon } from '@ldesign/icons-vue';
import { useGlobalIcon } from '../../hooks/useGlobalIcon.js';
import { ImageViewer } from '../../image-viewer/index.js';
import { commonProps } from '../constants.js';
import { Button } from '../../button/index.js';
import useDrag from '../hooks/useDrag.js';
import { abridgeName, returnFileSize } from '../../_common/js/upload/utils.js';
import { Loading } from '../../loading/index.js';
import { Link } from '../../link/index.js';
import { renderTNodeJSX } from '../../utils/render-tnode.js';
import '../../hooks/useConfig.js';
import '../../config-provider/useConfig.js';
import '../../config-provider/context.js';
import 'lodash/merge';
import 'lodash/mergeWith';
import '../../_common/js/global-config/default-config.js';
import '../../_common/js/global-config/locale/zh_CN.js';
import '@babel/runtime/helpers/typeof';
import '../../_chunks/dep-be599ec8.js';
import 'dayjs';
import '../../_chunks/dep-67ff4010.js';
import '../../config-provider/type.js';
import '../../utils/withInstall.js';
import 'vue';
import 'lodash/capitalize';
import '../../image-viewer/image-viewer.js';
import '@babel/runtime/helpers/slicedToArray';
import '../../hooks/useVModel.js';
import 'lodash/kebabCase';
import '../../hooks/useDefaultValue.js';
import '../../utils/helper.js';
import '@babel/runtime/helpers/objectWithoutProperties';
import 'lodash/camelCase';
import '../../image-viewer/props.js';
import '../../image-viewer/base/Container.js';
import '../../utils/dom.js';
import 'raf';
import 'lodash/isString';
import '../../utils/easing.js';
import '../../image-viewer/base/ImageModalIcon.js';
import '../../hooks/tnode.js';
import 'lodash/isEmpty';
import 'lodash/isFunction';
import '../../hooks/render-tnode.js';
import 'lodash/isObject';
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 '../../_common/js/utils/set-style.js';
import '../../config-provider/config-receiver.js';
import '../../utils/mixins.js';
import '../../utils/event.js';
import '../../popup/container.js';
import '../../popup/utils.js';
import '../../popup/trigger.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.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 '../../hooks/useDestroyOnClose.js';
import '../../_common/js/utils/getScrollbarWidth.js';
import '../../_common/js/utils/helper.js';
import 'lodash/isNull';
import 'lodash/isUndefined';
import 'lodash/isArray';
import '../../dialog/stack.js';
import '../../dialog/props.js';
import '../../dialog/actions.js';
import '../../button/button.js';
import '../../utils/ripple.js';
import '../../config.js';
import '../../button/props.js';
import '../../loading/directive.js';
import 'lodash/mapKeys';
import 'lodash/isEqual';
import '../../loading/plugin.js';
import '../../loading/loading.js';
import '../../loading/props.js';
import '../../loading/icon/gradient.js';
import '../../_common/js/loading/circle-adapter.js';
import '../../loading/style';
import '../../loading/type.js';
import '../../button/style';
import '../../button/type.js';
import '../../dialog/style';
import '../../dialog/type.js';
import '../../dialog/plugin.js';
import '../../config-provider/config-provider.js';
import 'lodash/cloneDeep';
import '../../image-viewer/const.js';
import '../../image-viewer/style';
import '../../image-viewer/type.js';
import '../../_common/js/log/log.js';
import '../../link/link.js';
import '../../link/props.js';
import '../../link/style';
import '../../link/type.js';

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var MultipleFlowList = defineComponent({
  name: "UploadMultipleFlowList",
  props: _objectSpread(_objectSpread({}, commonProps), {}, {
    uploadFiles: Function,
    cancelUpload: Function,
    dragEvents: Object,
    disabled: Boolean,
    isBatchUpload: Boolean,
    draggable: Boolean
  }),
  setup: function setup(props) {
    var _toRefs = toRefs(props),
      locale = _toRefs.locale,
      uploading = _toRefs.uploading,
      classPrefix = _toRefs.classPrefix;
    var uploadPrefix = "".concat(classPrefix.value, "-upload");
    var icons = useGlobalIcon({
      BrowseIcon: BrowseIcon,
      DeleteIcon: DeleteIcon,
      CheckCircleFilledIcon: CheckCircleFilledIcon,
      ErrorCircleFilledIcon: ErrorCircleFilledIcon,
      TimeFilledIcon: TimeFilledIcon
    });
    var drag = useDrag(props.dragEvents);
    var uploadText = computed(function () {
      if (uploading.value) return "".concat(locale.value.progress.uploadingText);
      return locale.value.triggerUploadText.normal;
    });
    var innerDragEvents = computed(function () {
      var draggable = props.draggable === void 0 ? true : props.draggable;
      return draggable ? {
        drop: drag.handleDrop,
        dragenter: drag.handleDragenter,
        dragover: drag.handleDragover,
        dragleave: drag.handleDragleave
      } : {};
    });
    return {
      icons: icons,
      dragActive: drag.dragActive,
      uploadPrefix: uploadPrefix,
      uploadText: uploadText,
      innerDragEvents: innerDragEvents
    };
  },
  methods: {
    getStatusMap: function getStatusMap() {
      var h = this.$createElement;
      var _this$icons = this.icons,
        CheckCircleFilledIcon = _this$icons.CheckCircleFilledIcon,
        ErrorCircleFilledIcon = _this$icons.ErrorCircleFilledIcon,
        TimeFilledIcon = _this$icons.TimeFilledIcon;
      var iconMap = {
        success: h(CheckCircleFilledIcon),
        fail: h(ErrorCircleFilledIcon),
        progress: h(Loading),
        waiting: h(TimeFilledIcon)
      };
      var progress = this.locale.progress;
      var 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: iconMap,
        textMap: textMap
      };
    },
    renderEmpty: function renderEmpty() {
      var h = this.$createElement;
      return h("div", {
        "class": "".concat(this.uploadPrefix, "__flow-empty")
      }, [this.dragActive ? this.locale.dragger.dragDropText : this.locale.dragger.clickAndDragText]);
    },
    renderImgItem: function renderImgItem(file, index) {
      var _this = this;
      var h = this.$createElement;
      var _this$getStatusMap = this.getStatusMap(),
        iconMap = _this$getStatusMap.iconMap,
        textMap = _this$getStatusMap.textMap;
      var _this$icons2 = this.icons,
        BrowseIcon = _this$icons2.BrowseIcon,
        DeleteIcon = _this$icons2.DeleteIcon;
      var fileName = this.abridgeName && file.name ? abridgeName.apply(void 0, [file.name].concat(_toConsumableArray(this.abridgeName))) : file.name;
      return h("li", {
        "class": "".concat(this.uploadPrefix, "__card-item"),
        "key": file.name + index + file.percent + file.status
      }, [h("div", {
        "class": classNames(["".concat(this.uploadPrefix, "__card-content"), _defineProperty({}, "".concat(this.classPrefix, "-is-bordered"), file.status !== "waiting")])
      }, [["fail", "progress"].includes(file.status) && h("div", {
        "class": "".concat(this.uploadPrefix, "__card-status-wrap ").concat(this.uploadPrefix, "__").concat(this.theme, "-").concat(file.status)
      }, [iconMap[file.status], h("p", [textMap[file.status], file.status === "progress" ? " ".concat(file.percent, "%") : ""])]), (["waiting", "success"].includes(file.status) || !file.status && file.url) && h("img", {
        "class": "".concat(this.uploadPrefix, "__card-image"),
        "attrs": {
          "src": file.url || "//tdesign.gtimg.com/tdesign-default-img.png"
        }
      }), h("div", {
        "class": "".concat(this.uploadPrefix, "__card-mask")
      }, [file.url && h("span", {
        "class": "".concat(this.uploadPrefix, "__card-mask-item")
      }, [h(ImageViewer, {
        "attrs": {
          "images": this.displayFiles.map(function (t) {
            return t.url;
          }),
          "defaultIndex": index,
          "trigger": function trigger(h, _ref2) {
            var open = _ref2.open;
            return h(BrowseIcon, {
              "on": {
                "click": function click(_ref3) {
                  var e = _ref3.e;
                  _this.$emit("preview", {
                    file: file,
                    index: index,
                    e: e
                  });
                  open();
                }
              }
            });
          }
        }
      }), h("span", {
        "class": "".concat(this.uploadPrefix, "__card-mask-item-divider")
      })]), !this.disabled && h("span", {
        "class": "".concat(this.uploadPrefix, "__card-mask-item ").concat(this.uploadPrefix, "__delete"),
        "on": {
          "click": function click(e) {
            return _this.onRemove({
              e: e,
              index: index,
              file: file
            });
          }
        }
      }, [h(DeleteIcon)])])]), h("p", {
        "class": "".concat(this.uploadPrefix, "__card-name")
      }, [fileName])]);
    },
    renderStatus: function renderStatus(file) {
      var h = this.$createElement;
      var _this$getStatusMap2 = this.getStatusMap(),
        iconMap = _this$getStatusMap2.iconMap,
        textMap = _this$getStatusMap2.textMap;
      return h("div", {
        "class": "".concat(this.uploadPrefix, "__flow-status")
      }, [iconMap[file.status], h("span", {
        "class": "".concat(this.uploadPrefix, "__").concat(this.theme, "-").concat(file.status)
      }, [textMap[file.status], this.showUploadProgress && file.status === "progress" ? " ".concat(file.percent || 0, "%") : ""])]);
    },
    renderNormalActionCol: function renderNormalActionCol(file, index) {
      var _this$locale,
        _this$locale$triggerU,
        _this2 = this;
      var 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"]
        },
        "class": "".concat(this.uploadPrefix, "__delete"),
        "on": {
          "click": function click(e) {
            return _this2.onRemove({
              e: e,
              index: index,
              file: file
            });
          }
        }
      })]);
    },
    renderBatchActionCol: function renderBatchActionCol(index) {
      var _this$locale2,
        _this$locale2$trigger,
        _this3 = this;
      var h = this.$createElement;
      return index === 0 ? h("td", {
        "attrs": {
          "rowSpan": this.displayFiles.length
        },
        "class": "".concat(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"]
        },
        "class": "".concat(this.uploadPrefix, "__delete"),
        "on": {
          "click": function click(e) {
            return _this3.onRemove({
              e: e,
              index: -1,
              file: void 0
            });
          }
        }
      })]) : null;
    },
    renderFileList: function renderFileList() {
      var _this$locale$file,
        _this$locale$file2,
        _this$locale$file3,
        _this$locale$file4,
        _this4 = this;
      var h = this.$createElement;
      var list = renderTNodeJSX(this, "fileListDisplay", {
        params: {
          files: this.displayFiles,
          dragEvents: this.innerDragEvents
        }
      });
      if (list) return list;
      return h("table", helper([{
        "class": "".concat(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(function (file, index) {
        var _this4$abridgeName;
        var showBatchUploadAction = _this4.isBatchUpload;
        var deleteNode = showBatchUploadAction && _this4.displayFiles.every(function (item) {
          return item.status === "success" || !item.status;
        }) ? _this4.renderBatchActionCol(index) : _this4.renderNormalActionCol(file, index);
        var fileName = (_this4$abridgeName = _this4.abridgeName) !== null && _this4$abridgeName !== void 0 && _this4$abridgeName.length ? abridgeName.apply(void 0, [file.name].concat(_toConsumableArray(_this4.abridgeName))) : file.name;
        return h("tr", {
          "key": file.name + index
        }, [h("td", {
          "class": "".concat(_this4.uploadPrefix, "__file-name")
        }, [file.url ? h(Link, {
          "attrs": {
            "href": file.url,
            "target": "_blank",
            "hover": "color"
          }
        }, [fileName]) : fileName]), h("td", [returnFileSize(file.size)]), h("td", [_this4.renderStatus(file)]), _this4.disabled ? null : deleteNode]);
      })])]);
    },
    renderImageList: function renderImageList() {
      var _this5 = this;
      var h = this.$createElement;
      var customList = renderTNodeJSX(this, "fileListDisplay", {
        params: {
          files: this.displayFiles,
          dragEvents: this.innerDragEvents
        }
      });
      if (customList) return customList;
      return h("ul", {
        "class": "".concat(this.uploadPrefix, "__card clearfix")
      }, [this.displayFiles.map(function (file, index) {
        return _this5.renderImgItem(file, index);
      })]);
    }
  },
  render: function render() {
    var _this$$scopedSlots$de,
      _this$$scopedSlots,
      _this$locale3,
      _this6 = this;
    var h = arguments[0];
    var cardClassName = "".concat(this.uploadPrefix, "__flow-card-area");
    return h("div", {
      "class": "".concat(this.uploadPrefix, "__flow ").concat(this.uploadPrefix, "__flow-").concat(this.theme)
    }, [h("div", {
      "class": "".concat(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": "".concat(this.uploadPrefix, "__flow-placeholder ").concat(this.uploadPrefix, "__placeholder")
    }, [this.placeholder])]), this.theme === "image-flow" && h("div", helper([{
      "class": cardClassName
    }, {
      "on": this.innerDragEvents
    }]), [this.displayFiles.length ? this.renderImageList() : 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": "".concat(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
      },
      "class": "".concat(this.uploadPrefix, "__cancel"),
      "on": {
        "click": function click(e) {
          var _this6$cancelUpload;
          return (_this6$cancelUpload = _this6.cancelUpload) === null || _this6$cancelUpload === void 0 ? void 0 : _this6$cancelUpload.call(_this6, {
            e: e
          });
        }
      }
    }), h(Button, {
      "attrs": {
        "disabled": this.disabled || this.uploading || !this.displayFiles.length,
        "theme": "primary",
        "loading": this.uploading,
        "content": this.uploadText
      },
      "class": "".concat(this.uploadPrefix, "__continue"),
      "on": {
        "click": function click() {
          var _this6$uploadFiles;
          return (_this6$uploadFiles = _this6.uploadFiles) === null || _this6$uploadFiles === void 0 ? void 0 : _this6$uploadFiles.call(_this6);
        }
      }
    })])]);
  }
});

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