<template>
  <view class="pdd-demo-page">
    <view class="pdd-demo-header">
      <text class="pdd-demo-title">{{ pageTitle }}</text>
      <text class="pdd-demo-subtitle">{{ pageSubtitle }}</text>
    </view>

    <PddWaterfallFeed
      class="pdd-demo-feed"
      :items="visibleProducts"
      :loading="loading"
      :noMore="noMore"
      @loadMore="handleLoadMore"
      @select="handleSelectProduct"
    />
  </view>
</template>

<script setup lang="uts">
import { ref, onMounted } from 'vue'
import PddWaterfallFeed from '@/components/consumer/PddWaterfallFeed.uvue'
import { createPddMockProducts } from '@/utils/mock-pdd-waterfall-data.uts'
import type { PddMockProduct } from '@/utils/mock-pdd-waterfall-data.uts'

const allProducts = ref<PddMockProduct[]>([])
const visibleProducts = ref<PddMockProduct[]>([])
const loading = ref(false)
const noMore = ref(false)
const pageTitle = '\u62FC\u591A\u591A\u98CE\u683C\u5546\u54C1\u6D41'
const pageSubtitle = '\u53CC\u5217\u9AD8\u5BC6\u5EA6\u4FE1\u606F\u6D41 / \u61D2\u52A0\u8F7D / \u865A\u62DF\u5217\u8868'

const pageSize = 18
const currentPage = ref(0)

function appendNextPage(): void {
  const source = allProducts.value
  const nextPage = currentPage.value + 1
  const nextEnd = nextPage * pageSize
  const nextList = source.slice(0, nextEnd)
  visibleProducts.value = nextList
  currentPage.value = nextPage
  noMore.value = nextList.length >= source.length
}

function initMockFeed(): void {
  allProducts.value = createPddMockProducts(72)
  visibleProducts.value = []
  currentPage.value = 0
  noMore.value = false
  appendNextPage()
}

function handleLoadMore(): void {
  if (loading.value || noMore.value) return
  loading.value = true
  setTimeout(() => {
    appendNextPage()
    loading.value = false
  }, 260)
}

function handleSelectProduct(product: PddMockProduct): void {
  uni.showToast({
    title: product.title,
    icon: 'none'
  })
}

onMounted(() => {
  initMockFeed()
})
</script>

<style scoped>
.pdd-demo-page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.pdd-demo-header {
  padding: 18rpx 20rpx 12rpx;
  background: linear-gradient(180deg, #ffffff 0%, #fff7f3 100%);
  border-bottom-width: 1rpx;
  border-bottom-style: solid;
  border-bottom-color: #f3d7ca;
}

.pdd-demo-title {
  font-size: 34rpx;
  color: #e1251b;
  font-weight: 800;
  line-height: 1.2;
}

.pdd-demo-subtitle {
  margin-top: 6rpx;
  font-size: 22rpx;
  color: #8b6a5c;
  line-height: 1.3;
}

.pdd-demo-feed {
  flex: 1;
  min-height: 0;
}
</style>
