<template>
  <view class="waterfall-layout">
    <!-- 瀑布流容器 -->
    <view
      class="waterfall-container"
      :style="{ height: containerHeight + 'rpx' }"
    >
      <view
        class="waterfall-item"
        v-for="(item, index) in positionedItems"
        :key="item.id"
        :style="{
          position: 'absolute',
          left: item.left + 'rpx',
          top: item.top + 'rpx',
          width: item.width + 'rpx',
        }"
        @click="handleItemClick(item)"
      >
        <!-- 图片 -->
        <image
          v-if="item.image"
          :src="item.image"
          class="item-image"
          mode="aspectFill"
        />
        <!-- 内容区域 -->
        <view class="item-content">
          <text v-if="item.title" class="item-title">{{ item.title }}</text>
          <text v-if="item.description" class="item-desc">{{
            item.description
          }}</text>
          <view v-if="item.tags && item.tags.length" class="item-tags">
            <text class="tag" v-for="tag in item.tags" :key="tag">{{
              tag
            }}</text>
          </view>
          <!-- 用户信息和点赞 -->
          <view v-if="item.user" class="item-footer">
            <view class="user-info">
              <image
                :src="item.user.avatar"
                class="user-avatar"
                mode="aspectFill"
              />
              <text class="username">{{ item.user.name }}</text>
            </view>
            <view class="like-info">
              <text class="like-icon">♥</text>
              <text class="like-count">{{ item.likes }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "WaterfallLayout",
  props: {
    // 数据源
    items: {
      type: Array,
      default: () => [],
    },
    // 列数
    columnCount: {
      type: Number,
      default: 2,
    },
    // 列间距（rpx）
    columnGap: {
      type: Number,
      default: 16,
    },
    // 项目间距（rpx）
    itemGap: {
      type: Number,
      default: 16,
    },
  },
  data() {
    return {
      positionedItems: [],
      containerHeight: 0,
      columnHeights: [],
    };
  },
  watch: {
    items: {
      handler() {
        this.$nextTick(() => {
          this.calculateLayout();
        });
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {
    this.calculateLayout();
  },
  methods: {
    // 计算布局
    calculateLayout() {
      if (!this.items.length) {
        this.positionedItems = [];
        this.containerHeight = 0;
        return;
      }

      // 初始化列高度
      this.columnHeights = new Array(this.columnCount).fill(0);
      this.positionedItems = [];

      // 逐个处理项目
      this.items.forEach((item, index) => {
        this.calculateItemPosition(item, index);
      });

      // 设置容器高度
      this.containerHeight = Math.max(...this.columnHeights) + this.itemGap;
    },

    // 计算单个项目位置
     calculateItemPosition(item, index) {
       // 找到最短的列
       const shortestColumnIndex = this.columnHeights.indexOf(Math.min(...this.columnHeights))
       
       // 协调的间距计算：左右边距20rpx，列间距16rpx
       const sideMargin = 20 // 左右边距
       const columnGap = 16 // 列间距
       // 确保左右边距都是20rpx的计算方式
       const availableWidth = 750 - 2 * sideMargin // 可用宽度 = 750 - 40 = 710rpx
       const itemWidth = Math.floor((availableWidth - (this.columnCount - 1) * columnGap) / this.columnCount)
       
       // 计算位置 - 确保左右边距都是20rpx
       const left = sideMargin + shortestColumnIndex * (itemWidth + columnGap)
       // 修正top计算：第一行距离顶部itemGap，后续项目距离上一个项目itemGap
       const top = this.columnHeights[shortestColumnIndex] === 0 ? this.itemGap : this.columnHeights[shortestColumnIndex] + this.itemGap;

      // 估算项目高度
      const estimatedHeight = this.estimateItemHeight(item);

      // 添加到定位项目数组
      this.positionedItems.push({
        ...item,
        left,
        top,
        width: itemWidth,
      });

      // 更新列高度
      this.columnHeights[shortestColumnIndex] = top + estimatedHeight;
    },

    // 估算项目高度
    estimateItemHeight(item) {
      let height = 0;

      // 图片高度
      if (item.image) {
        height += 300; // 图片固定高度
      }

      // 内容区域padding
      height += 32; // 上下padding各16rpx

      // 标题高度 - 更精确的计算
      if (item.title) {
        // 基于字符数和换行估算，考虑中英文混合
        const titleLength = item.title.length;
        const charsPerLine = 12; // 每行大约12个字符（考虑中文字符较宽）
        const titleLines = Math.min(Math.ceil(titleLength / charsPerLine), 2);
        height += titleLines * 40 + 12; // 行高40rpx（稍微增加） + 底部间距
      }

      // 描述高度 - 更精确的计算
      if (item.description) {
        const descLength = item.description.length;
        const charsPerLine = 15; // 描述文字稍小，每行约15个字符
        const descLines = Math.min(Math.ceil(descLength / charsPerLine), 2);
        height += descLines * 36 + 16; // 行高36rpx + 底部间距
      }

      // 标签高度 - 考虑多行标签
      if (item.tags && item.tags.length) {
        // 估算标签可能占用的行数
        const tagRows = Math.ceil(item.tags.length / 3); // 假设每行最多3个标签
        height += tagRows * 36 + 16; // 每行标签高度36rpx + 底部间距
      }

      // 用户信息区域
      if (item.user) {
        height += 48 + 16; // 用户信息高度 + 底部间距
      }

      return height;
    },

    // 清空所有项目
    clearItems() {
      this.positionedItems = [];
      this.containerHeight = 0;
      this.columnHeights = new Array(this.columnCount).fill(0);
      this.$emit("items-cleared");
    },

    // 处理项目点击
    handleItemClick(item) {
      this.$emit("item-click", item);
    },

    // 获取所有项目
    getAllItems() {
      return this.positionedItems;
    },

    // 移除项目
    removeItem(itemId) {
      const index = this.positionedItems.findIndex(
        (item) => item.id === itemId
      );
      if (index !== -1) {
        this.positionedItems.splice(index, 1);
        this.calculateLayout(); // 重新计算布局
      }
      this.$emit("item-removed", itemId);
    },
  },
};
</script>

<style scoped>
.waterfall-layout {
  width: 100%;
  box-sizing: border-box;
}

.waterfall-container {
  position: relative;
  width: 100%;
  padding: 0 20rpx;
  box-sizing: border-box;
}

.waterfall-item {
  box-sizing: border-box;
  border-radius: 12rpx;
  background: #fff;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.2s ease;
}

.waterfall-item:active {
  transform: scale(0.98);
}

.item-image {
  width: 100%;
  height: 300rpx;
  object-fit: cover;
}

.item-content {
  padding: 16rpx;
}

.item-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  line-height: 1.3;
  margin-bottom: 12rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-desc {
  font-size: 24rpx;
  color: #666;
  line-height: 1.4;
  margin-bottom: 16rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8rpx;
  margin-bottom: 16rpx;
}

.tag {
  padding: 4rpx 12rpx;
  background: #f5f5f5;
  color: #666;
  font-size: 20rpx;
  border-radius: 12rpx;
  white-space: nowrap;
}

.item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16rpx;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.user-avatar {
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
}

.username {
  font-size: 22rpx;
  color: #666;
}

.like-info {
  display: flex;
  align-items: center;
  gap: 6rpx;
}

.like-icon {
  font-size: 24rpx;
  color: #ff6b6b;
}

.like-count {
  font-size: 22rpx;
  color: #666;
}
</style>
