function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import React, { isValidElement, cloneElement } from 'react';
import "./WaterfallList.less";
var WaterfallList = function WaterfallList(props) {
  var layout = props.layout,
    layoutDirection = props.layoutDirection,
    columnGap = props.columnGap,
    rowGap = props.rowGap,
    columns = props.columns,
    rows = props.rows,
    registerItemRef = props.registerItemRef,
    children = props.children,
    renderItem = props.renderItem;
  var hasChildren = children && React.Children.count(children) > 0;
  return /*#__PURE__*/React.createElement("div", {
    className: "waterfall-container",
    style: _objectSpread({
      display: 'flex',
      // 垂直模式：轨道间距用列间距，水平模式：轨道间距用行间距
      gap: layoutDirection === 'vertical' ? "".concat(columnGap, "px") : "".concat(rowGap, "px"),
      width: '100%',
      flexDirection: layoutDirection === 'vertical' ? 'row' : 'column',
      // 垂直模式时轨道横向排列，水平模式时轨道纵向排列
      alignItems: 'flex-start'
    }, layoutDirection === 'horizontal' && {
      minHeight: 'fit-content',
      height: 'auto'
    })
  }, false && /*#__PURE__*/React.createElement("div", {
    style: {
      position: 'absolute',
      top: '-30px',
      left: 0,
      fontSize: '12px',
      color: '#666',
      background: '#f0f0f0',
      padding: '4px 8px',
      borderRadius: '4px',
      zIndex: 1000
    }
  }, "\u8F68\u9053\u6570: ", layout.tracks.length, " | \u6A21\u5F0F: ", layoutDirection, " | ", layoutDirection === 'vertical' ? "Columns: ".concat(columns) : "Rows: ".concat(rows)), layout.tracks.map(function (track, trackIndex) {
    // 计算全局索引起点
    var globalIndex = 0;
    for (var i = 0; i < trackIndex; i++) {
      globalIndex += layout.tracks[i].items.length;
    }
    return /*#__PURE__*/React.createElement("div", {
      key: trackIndex,
      className: "waterfall-track waterfall-track-".concat(layoutDirection),
      style: _objectSpread({
        // 垂直模式：每列等宽不收缩，水平模式：每行自适应高度
        flex: layoutDirection === 'vertical' ? '1 0 0' : '0 0 auto',
        display: 'flex',
        flexDirection: layoutDirection === 'vertical' ? 'column' : 'row',
        // 垂直模式时轨道内垂直排列，水平模式时轨道内水平排列
        // 垂直模式：轨道内用行间距，水平模式：轨道内用列间距
        gap: layoutDirection === 'vertical' ? "".concat(rowGap, "px") : "".concat(columnGap, "px")
      }, layoutDirection === 'horizontal' && {
        width: '100%',
        minHeight: '120px',
        // 确保行有最小高度
        alignItems: 'flex-start'
      })
    }, track.items.map(function (item, trackItemIndex) {
      var itemIndex = globalIndex + trackItemIndex;
      return /*#__PURE__*/React.createElement("div", {
        key: item.id || "".concat(trackIndex, "-").concat(trackItemIndex),
        className: "list-item waterfall-item",
        ref: function ref(el) {
          return registerItemRef(item.id || "".concat(trackIndex, "-").concat(trackItemIndex), el);
        },
        style: _objectSpread({}, layoutDirection === 'vertical' ? {
          width: '100%',
          height: item.height ? "".concat(item.height, "px") : 'auto',
          minHeight: 'unset',
          maxHeight: 'none',
          flexShrink: 0,
          flexGrow: 0,
          boxSizing: 'border-box',
          overflow: 'hidden',
          // 防止内容溢出
          position: 'relative' // 为调试信息定位
        } // 垂直模式：项目填满列宽并设置高度
        : {
          width: item.width ? "".concat(item.width, "px") : 'auto',
          flexShrink: 0 // 水平模式：保持预设宽度，不收缩
        })
      }, false && layoutDirection === 'vertical' && /*#__PURE__*/React.createElement("div", {
        style: {
          position: 'absolute',
          top: '4px',
          right: '4px',
          backgroundColor: 'rgba(0, 255, 0, 0.8)',
          color: 'white',
          fontSize: '10px',
          padding: '2px 4px',
          borderRadius: '2px',
          zIndex: 1000
        }
      }, "\u5BB9\u5668: ", item.height, "px"), hasChildren ? React.Children.map(children, function (child, childIndex) {
        if ( /*#__PURE__*/isValidElement(child)) {
          return /*#__PURE__*/cloneElement(child, _objectSpread(_objectSpread({}, child.props), {}, {
            item: item,
            index: itemIndex,
            key: "".concat(item.id || "".concat(trackIndex, "-").concat(trackItemIndex), "-").concat(childIndex)
          }));
        }
        return child;
      }) : renderItem ? renderItem(item, itemIndex) :
      /*#__PURE__*/
      // 瀑布流的默认渲染 - 高度由容器控制
      React.createElement("div", {
        className: "default-waterfall-item",
        style: _objectSpread(_objectSpread({}, layoutDirection === 'horizontal' && {
          width: item.width ? "".concat(item.width, "px") : '200px',
          minHeight: '120px',
          flexShrink: 0
        }), {}, {
          padding: '16px',
          backgroundColor: '#fff',
          borderRadius: '8px',
          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
          border: '1px solid #f0f0f0',
          display: 'flex',
          flexDirection: 'column',
          // 调试用：显示实际高度
          position: 'relative',
          // 填充容器高度
          height: '100%',
          boxSizing: 'border-box'
        })
      }, item.title && /*#__PURE__*/React.createElement("h3", {
        style: {
          margin: '0 0 12px 0',
          fontSize: '16px',
          fontWeight: 500,
          color: '#333'
        }
      }, item.title), item.name && !item.title && /*#__PURE__*/React.createElement("h3", {
        style: {
          margin: '0 0 12px 0',
          fontSize: '16px',
          fontWeight: 500,
          color: '#333'
        }
      }, item.name), item.content && /*#__PURE__*/React.createElement("p", {
        style: {
          margin: 0,
          fontSize: '14px',
          lineHeight: '1.5',
          color: '#666'
        }
      }, item.content), item.description && !item.content && /*#__PURE__*/React.createElement("p", {
        style: {
          margin: 0,
          fontSize: '14px',
          lineHeight: '1.5',
          color: '#666'
        }
      }, item.description), !item.title && !item.name && !item.content && !item.description && /*#__PURE__*/React.createElement("div", {
        style: {
          fontSize: '14px',
          color: '#999',
          wordBreak: 'break-all'
        }
      }, _typeof(item) === 'object' ? Object.entries(item).slice(0, 3).map(function (_ref) {
        var _ref2 = _slicedToArray(_ref, 2),
          key = _ref2[0],
          value = _ref2[1];
        return /*#__PURE__*/React.createElement("div", {
          key: key,
          style: {
            marginBottom: '4px'
          }
        }, /*#__PURE__*/React.createElement("strong", null, key, ":"), " ", String(value));
      }) : String(item))));
    }));
  }));
};
export default WaterfallList;