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

'use strict';

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

var helper = require('../../_chunks/dep-c3e1ffac.js');
var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var VueCompositionAPI = require('@vue/composition-api');
var classNames = require('classnames');
var iconsVue = require('@ldesign/icons-vue');
var hooks_useGlobalIcon = require('../../hooks/useGlobalIcon.js');
var imageViewer_index = require('../../image-viewer/index.js');
var upload_constants = require('../constants.js');
var button_index = require('../../button/index.js');
var upload_hooks_useDrag = require('../hooks/useDrag.js');
var _common_js_upload_utils = require('../../_common/js/upload/utils.js');
var loading_index = require('../../loading/index.js');
var link_index = require('../../link/index.js');
var utils_renderTnode = require('../../utils/render-tnode.js');
require('../../config-provider/useConfig.js');
require('../../config-provider/context.js');
require('lodash/merge');
require('lodash/mergeWith');
require('../../_common/js/global-config/default-config.js');
require('../../_common/js/global-config/locale/zh_CN.js');
require('@babel/runtime/helpers/typeof');
require('../../_chunks/dep-7c884501.js');
require('dayjs');
require('../../utils/withInstall.js');
require('vue');
require('lodash/capitalize');
require('../../image-viewer/image-viewer.js');
require('@babel/runtime/helpers/slicedToArray');
require('../../hooks/useVModel.js');
require('lodash/kebabCase');
require('../../hooks/useDefaultValue.js');
require('../../hooks/useConfig.js');
require('../../utils/helper.js');
require('@babel/runtime/helpers/objectWithoutProperties');
require('lodash/camelCase');
require('../../image-viewer/props.js');
require('../../image-viewer/base/Container.js');
require('../../utils/dom.js');
require('raf');
require('lodash/isString');
require('../../utils/easing.js');
require('../../image-viewer/base/ImageModalIcon.js');
require('../../hooks/tnode.js');
require('lodash/isEmpty');
require('lodash/isFunction');
require('../../hooks/render-tnode.js');
require('lodash/isObject');
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('../../_common/js/utils/set-style.js');
require('../../config-provider/config-receiver.js');
require('../../utils/mixins.js');
require('../../utils/event.js');
require('../../popup/container.js');
require('../../popup/utils.js');
require('../../popup/trigger.js');
require('../../tooltip/props.js');
require('../../image-viewer/utils.js');
require('../../image-viewer/base/ImageItem.js');
require('../../image-viewer/hooks.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('../../hooks/useDestroyOnClose.js');
require('../../_common/js/utils/getScrollbarWidth.js');
require('../../_common/js/utils/helper.js');
require('lodash/isNull');
require('lodash/isUndefined');
require('lodash/isArray');
require('../../dialog/stack.js');
require('../../dialog/props.js');
require('../../dialog/actions.js');
require('../../button/button.js');
require('../../utils/ripple.js');
require('../../config.js');
require('../../button/props.js');
require('../../loading/directive.js');
require('lodash/mapKeys');
require('lodash/isEqual');
require('../../loading/plugin.js');
require('../../loading/loading.js');
require('../../loading/props.js');
require('../../loading/icon/gradient.js');
require('../../_common/js/loading/circle-adapter.js');
require('../../dialog/plugin.js');
require('../../config-provider/config-provider.js');
require('lodash/cloneDeep');
require('../../image-viewer/const.js');
require('../../_common/js/log/log.js');
require('../../link/link.js');
require('../../link/props.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);

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__default["default"](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 = VueCompositionAPI.defineComponent({
  name: "UploadMultipleFlowList",
  props: _objectSpread(_objectSpread({}, upload_constants.commonProps), {}, {
    uploadFiles: Function,
    cancelUpload: Function,
    dragEvents: Object,
    disabled: Boolean,
    isBatchUpload: Boolean,
    draggable: Boolean
  }),
  setup: function setup(props) {
    var _toRefs = VueCompositionAPI.toRefs(props),
      locale = _toRefs.locale,
      uploading = _toRefs.uploading,
      classPrefix = _toRefs.classPrefix;
    var uploadPrefix = "".concat(classPrefix.value, "-upload");
    var icons = hooks_useGlobalIcon.useGlobalIcon({
      BrowseIcon: iconsVue.BrowseIcon,
      DeleteIcon: iconsVue.DeleteIcon,
      CheckCircleFilledIcon: iconsVue.CheckCircleFilledIcon,
      ErrorCircleFilledIcon: iconsVue.ErrorCircleFilledIcon,
      TimeFilledIcon: iconsVue.TimeFilledIcon
    });
    var drag = upload_hooks_useDrag["default"](props.dragEvents);
    var uploadText = VueCompositionAPI.computed(function () {
      if (uploading.value) return "".concat(locale.value.progress.uploadingText);
      return locale.value.triggerUploadText.normal;
    });
    var innerDragEvents = VueCompositionAPI.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_index.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 ? _common_js_upload_utils.abridgeName.apply(void 0, [file.name].concat(_toConsumableArray__default["default"](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__default["default"](["".concat(this.uploadPrefix, "__card-content"), _defineProperty__default["default"]({}, "".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_index.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_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"]
        },
        "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_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"]
        },
        "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 = utils_renderTnode.renderTNodeJSX(this, "fileListDisplay", {
        params: {
          files: this.displayFiles,
          dragEvents: this.innerDragEvents
        }
      });
      if (list) return list;
      return h("table", helper.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 ? _common_js_upload_utils.abridgeName.apply(void 0, [file.name].concat(_toConsumableArray__default["default"](_this4.abridgeName))) : file.name;
        return h("tr", {
          "key": file.name + index
        }, [h("td", {
          "class": "".concat(_this4.uploadPrefix, "__file-name")
        }, [file.url ? h(link_index.Link, {
          "attrs": {
            "href": file.url,
            "target": "_blank",
            "hover": "color"
          }
        }, [fileName]) : fileName]), h("td", [_common_js_upload_utils.returnFileSize(file.size)]), h("td", [_this4.renderStatus(file)]), _this4.disabled ? null : deleteNode]);
      })])]);
    },
    renderImageList: function renderImageList() {
      var _this5 = this;
      var h = this.$createElement;
      var customList = utils_renderTnode.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.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.helper([{
      "class": cardClassName
    }, {
      "on": this.innerDragEvents
    }]), [this.renderEmpty()])), !this.autoUpload && h("div", {
      "class": "".concat(this.uploadPrefix, "__flow-bottom")
    }, [h(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
      },
      "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_index.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);
        }
      }
    })])]);
  }
});

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