<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme">
  <scroll-view class="demo-scroll" direction="vertical">
    <view class="demo-page">
      <view class="demo-hero">
        <text class="demo-kicker">XTF LINKUI / COMPONENTS</text>
        <text class="demo-title">Waterfall</text>
        <text class="demo-intro">默认图文、字段映射、自定义模板与动态列间距。</text>
      </view>

      <view class="demo-section">
        <view class="section-heading"><text class="section-title">默认模板</text><text class="section-note">{{ items.length }} 项 · {{ autoBalance ? '实际高度平衡' : '顺序分配' }}</text></view>
        <view class="demo-controls">
          <button class="control-button" @tap="setColumns(2)">2 列</button>
          <button class="control-button" @tap="setColumns(3)">3 列</button>
          <button class="control-button" @tap="setGap(8)">紧凑间距</button>
          <button class="control-button" @tap="setGap(20)">宽间距</button>
        </view>
        <view class="balance-row"><text class="balance-label">autoBalance：{{ autoBalance ? '开' : '关' }}</text><switch class="balance-switch" :checked="autoBalance" @change="toggleBalance" /></view>
        <XtfWaterfall :list="items" :columns="columns" :column-gap="gap" :item-gap="gap" :auto-balance="autoBalance" image-key="cover" title-key="name" meta-key="desc" height-key="size" @item-click="onClick" />
      </view>

      <view class="demo-section">
        <view class="section-heading"><text class="section-title">自定义模板</text><text class="section-note">字段映射</text></view>
        <XtfWaterfall ref="customWaterfall" :list="customItems" :columns="2" :column-gap="12" :item-gap="12" :auto-balance="autoBalance" image-key="photo" title-key="label" meta-key="detail" height-key="blockHeight" item-key="code" @item-click="onClick">
          <template #item="scope">
            <view class="custom-item">
              <view class="custom-cover" :style="{ height: scope.item.visualHeight.toString() + 'rpx' }"><image class="custom-image" :src="scope.item.photo" mode="aspectFill" @load="onCustomImageLoad" /><text class="custom-badge">{{ scope.item.tag }}</text></view>
              <text class="custom-title">{{ scope.item.label }}</text>
              <text class="custom-meta">{{ scope.item.detail }} · 第 {{ scope.column + 1 }} 列</text>
            </view>
          </template>
        </XtfWaterfall>
      </view>

      <view class="demo-actions">
        <button class="action-button action-primary" @tap="appendItem">追加一项</button>
        <button class="action-button action-secondary" @tap="resetItems">重置数据</button>
      </view>
      <text class="demo-result">{{ result }}</text>
    </view>
  </scroll-view>
  </XtfConfigProvider>
</template>

<script setup lang="uts">
import { useDemoTheme } from '@/pages/demo-theme.uts'
import XtfConfigProvider from '@/uni_modules/xtf-linkuiunix/components/xtf-config-provider/xtf-config-provider.uvue'
const demoTheme = useDemoTheme()
import { ref } from "vue"
import XtfWaterfall from "@/uni_modules/xtf-linkuiunix/components/xtf-waterfall/xtf-waterfall.uvue"

const baseItems = [{ id: 1, cover: "/static/logo.png", name: "春季新品", desc: "轻量外套", size: 210 }, { id: 2, cover: "/static/logo.png", name: "会员专享", desc: "满减优惠", size: 280 }, { id: 3, cover: "/static/logo.png", name: "城市通勤", desc: "基础款合集", size: 170 }, { id: 4, cover: "/static/logo.png", name: "周末出行", desc: "户外装备", size: 250 }, { id: 5, cover: "/static/logo.png", name: "简约生活", desc: "家居好物", size: 190 }] as Array<any>
const items = ref<Array<any>>(baseItems.slice())
const customItems = [{ code: "a", photo: "/static/logo.png", label: "本地图片模板", detail: "自定义卡片", tag: "LOCAL", blockHeight: 280, visualHeight: 280 }, { code: "b", photo: "/static/logo.png", label: "字段映射案例", detail: "photo / label", tag: "MAP", blockHeight: 160, visualHeight: 160 }, { code: "c", photo: "/static/logo.png", label: "插槽内容案例", detail: "自由布局", tag: "SLOT", blockHeight: 190, visualHeight: 190 }, { code: "d", photo: "/static/logo.png", label: "事件回显案例", detail: "item-click", tag: "EVENT", blockHeight: 250, visualHeight: 250 }] as Array<any>
const columns = ref<number>(2)
const gap = ref<number>(16)
const autoBalance = ref<boolean>(true)
const customWaterfall = ref<any>(null)
const result = ref<string>("等待操作")

function setColumns(value: number): void { columns.value = value; result.value = "已切换为 " + value.toString() + " 列" }
function setGap(value: number): void { gap.value = value; result.value = "列间距与卡片间距：" + value.toString() + "rpx" }
function toggleBalance(event: any): void { autoBalance.value = event.detail.value == true; result.value = autoBalance.value ? "已开启实际高度平衡" : "已切换为顺序分配" }
function appendItem(): void { const next = items.value.length + 1; items.value = items.value.concat([{ id: next, cover: "/static/logo.png", name: "追加项目 " + next.toString(), desc: "动态追加", size: 180 + next * 10 }]); result.value = "已追加第 " + next.toString() + " 项" }
function resetItems(): void { items.value = baseItems.slice(); result.value = "已重置为默认数据" }
function onCustomImageLoad(): void { customWaterfall.value?.reflow() }
function onClick(payload: any): void { const label = payload.item.name == null ? payload.item.label : payload.item.name; result.value = "已点击：" + label.toString() + "（原始索引 " + payload.index.toString() + "）" }
</script>

<style>
.demo-scroll { flex: 1; width: 100%; }
.demo-page { display: flex; flex-direction: column; padding: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }
.demo-hero { display: flex; flex-direction: column; padding: 30rpx; border-radius: 16rpx; background-color: #0f766e; }
.demo-kicker, .demo-intro { color: #d1fae5; font-size: 22rpx; }
.demo-title { margin-top: 8rpx; color: #ffffff; font-size: 48rpx; font-weight: 700; }
.demo-intro { margin-top: 10rpx; }
.demo-section { display: flex; flex-direction: column; margin-top: 18rpx; padding: 22rpx; border-radius: 14rpx; background-color: var(--xtf-color-surface, #ffffff); }
.section-heading { display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
.section-title { color: var(--xtf-color-text, #0f172a); font-size: 30rpx; font-weight: 700; }
.section-note { color: var(--xtf-color-text-secondary, #64748b); font-size: 22rpx; }
.demo-controls, .demo-actions { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 16rpx; }
.balance-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-top: 8rpx; }
.balance-label { color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; }
.balance-switch { transform: scale(0.8); transform-origin: right center; }
.control-button, .action-button { margin: 0 10rpx 10rpx 0; padding: 0 18rpx; border: 1rpx solid var(--xtf-color-border, #cbd5e1); border-radius: 8rpx; color: var(--xtf-color-text-secondary, #334155); background-color: var(--xtf-color-surface-muted, #f8fafc); font-size: 22rpx; line-height: 64rpx; }
.action-button { flex: 1; margin: 0 8rpx 0 0; text-align: center; }
.action-primary { color: #ffffff; border-color: #0f766e; background-color: #0f766e; }
.action-secondary { color: #0f766e; border-color: #99f6e4; background-color: #f0fdfa; }
.custom-item { display: flex; flex-direction: column; padding-bottom: 4rpx; }
.custom-cover { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 12rpx; background-color: #ccfbf1; }
.custom-image { width: 100%; height: 100%; }
.custom-badge { position: absolute; left: 12rpx; top: 12rpx; padding: 4rpx 10rpx; border-radius: 6rpx; color: #115e59; background-color: #ccfbf1; font-size: 18rpx; }
.custom-title { margin-top: 10rpx; color: var(--xtf-color-text, #0f172a); font-size: 26rpx; font-weight: 700; }
.custom-meta { margin-top: 5rpx; color: var(--xtf-color-text-secondary, #64748b); font-size: 21rpx; }
.demo-result { margin: 18rpx 4rpx 28rpx; color: #0f766e; font-size: 23rpx; }
</style>
