<template><XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true"><scroll-view class="xtf-demo-scroll xtf-page-scroll" direction="vertical"><view class="xtf-demo-page xtf-page-scroll-content"><view class="xtf-demo-hero"><text class="xtf-demo-kicker">XTF LINKUI / COMPONENTS</text><text class="xtf-demo-title">List</text><text class="xtf-demo-intro">分组列表、开关、侧滑操作和加载更多。</text></view><view class="xtf-demo-section"><XtfList grouped :groups="groups" :load-more="loadState" @item-click="itemClick" @switch-change="switchChange" @swipe-action="actionClick" @load-more="loadMore" @retry-load-more="loadMore" /><text class="xtf-demo-value demo-list-state">{{ status }}</text><button class="demo-load-error" size="mini" @click="failNext = true; status = '下次加载将失败，可点击重试'">模拟下次加载失败</button><button class="demo-list-reset" size="mini" @click="reset">重置列表</button></view></view></scroll-view></XtfConfigProvider></template>
<script setup lang="uts">
import { useDemoTheme } from '@/pages/demo-theme.uts'
const demoTheme = useDemoTheme()
import { onUnmounted, ref } from "vue"
import XtfConfigProvider from "@/uni_modules/xtf-linkuiunix/components/xtf-config-provider/xtf-config-provider.uvue"
import XtfList from "@/uni_modules/xtf-linkuiunix/components/xtf-list/xtf-list.uvue"
const status = ref("等待操作")
function initialGroups(): Array<any> { return [{ key: "orders", title: "订单设置", desc: "选择需要接收的提醒", items: [{ id: "notice", title: "订单提醒", switchable: true, checked: true }, { id: "delivery", title: "物流通知", value: "已开启", arrow: true, swipeActions: [{ text: "置顶", color: "#2563eb" }, { text: "删除", color: "#dc2626" }] }] }, { key: "other", title: "其他", items: [{ id: "cache", title: "清理缓存", value: "12 MB", arrow: true }] }] }
const groups = ref(initialGroups())
const loadState = ref("more")
const failNext = ref(false)
let loaded = 0
let timer = 0
function itemClick(payload: any): void { status.value = "点击了 " + payload.item.title }
function switchChange(payload: any): void { payload.item.checked = payload.checked; status.value = payload.item.title + (payload.checked ? " 已开启" : " 已关闭") }
function actionClick(payload: any): void {
  for (const group of groups.value) {
    const index = group.items.findIndex((item: any): boolean => item === payload.item)
    if (index < 0) continue
    const item = group.items.splice(index, 1)[0]
    if (payload.action.text == "置顶") group.items.unshift(item)
    status.value = payload.action.text + "：" + item.title
    break
  }
}
function loadMore(): void {
  if (loadState.value == "loading" || loadState.value == "finished") return
  loadState.value = "loading"
  timer = setTimeout(() => {
    timer = 0
    if (failNext.value) { failNext.value = false; loadState.value = "error"; status.value = "加载失败，请点击重试"; return }
    loaded++
    groups.value[1].items.push({ id: "extra-" + loaded, title: "历史通知 " + loaded, value: "已加载", swipeActions: [{ text: "删除", color: "#dc2626" }] })
    loadState.value = loaded >= 3 ? "finished" : "more"
    status.value = "已追加 " + loaded + " 条通知"
  }, 500)
}
function reset(): void { if (timer != 0) clearTimeout(timer); timer = 0; groups.value = initialGroups(); loaded = 0; failNext.value = false; loadState.value = "more"; status.value = "已重置列表" }
onUnmounted(() => { if (timer != 0) clearTimeout(timer) })
</script>
<style>.xtf-demo-scroll{flex:1;width:100%;height:100%}.xtf-demo-page{display:flex;flex-direction:column;width:100%;padding:24rpx;background-color:var(--xtf-color-page, #f8fafc)}.xtf-demo-hero{display:flex;flex-direction:column;padding:32rpx;border-radius:16rpx;background-color:#334155}.xtf-demo-kicker,.xtf-demo-intro{color:#fff;font-size:22rpx}.xtf-demo-title{margin-top:8rpx;color:#fff;font-size:48rpx;font-weight:700}.xtf-demo-intro{margin-top:12rpx}.xtf-demo-section{display:flex;flex-direction:column;margin-top:24rpx;padding:24rpx;border-radius:16rpx;background-color:var(--xtf-color-surface, #fff)}.xtf-demo-value{margin-top:16rpx;color:var(--xtf-color-text-secondary, #475569);font-size:24rpx}</style>
