<template>
  <scroll-view class="waterfall" scroll-y="true" :lower-threshold="100" @scrolltolower="onLoadMore">
    <view class="columns">
      <view class="col" v-for="(colItems, idx) in columns" :key="idx">
        <block v-for="(item, i) in colItems" :key="item.id || i">
          <slot name="item" :item="item"></slot>
        </block>
      </view>
    </view>
    <view v-if="loading" class="loading">加载中...</view>
    <view v-if="!loading && noMore" class="no-more">没有更多了</view>
  </scroll-view>
</template>

<script lang="uts">
export default {
  props: {
    items: { type: Array, default: () => [] },
    columnsCount: { type: Number, default: 2 },
    loading: { type: Boolean, default: false },
    noMore: { type: Boolean, default: false }
  },
  data() { return { columns: [] } },
  watch: {
    items: { handler() { this.reflow() }, deep: true }
  },
  created() { this.reflow() },
  methods: {
    reflow() {
      const cols = []
      for (let i = 0; i < this.columnsCount; i++) cols.push([])
      for (let i = 0; i < this.items.length; i++) {
        cols[i % this.columnsCount].push(this.items[i])
      }
      this.columns = cols
    },
    onLoadMore() { this.$emit('loadMore') }
  }
}
</script>

<style scoped>
.waterfall { padding:16rpx; background:transparent }
.columns { display:flex; gap:16rpx }
.col { flex:1; display:flex; flex-direction:column; gap:16rpx }
.loading, .no-more { text-align:center; color:#999; padding:20rpx }
</style>
