<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme">
  <view class="refresh-page">
    <view class="refresh-header"><view class="lab-header"><text class="lab-eyebrow">GESTURE / 04</text><text class="lab-title">Pull Refresh 下拉刷新</text></view><view class="lab-row"><text class="lab-label">模拟下次请求失败</text><switch :checked="failNext" :disabled="triggered" color="#c64350" @change="failNext = $event.detail.value" /></view><view class="lab-tools"><button class="lab-button" :disabled="triggered" @click="refresh">{{ triggered ? '更新中' : '刷新列表' }}</button></view><text class="lab-result" :class="failed ? 'lab-error' : ''">{{ status }}</text></view>
    <view class="refresh-body"><XtfPullRefresh :triggered="triggered" background-color="#f6f7f9" @refresh="refresh" @pulling="phase = '下拉中'" @restore="phase = '待刷新'" @abort="phase = '已取消下拉'">
      <view class="refresh-list"><view class="lab-row"><text class="lab-caption">团队动态 · {{ phase }}</text><text class="lab-caption">{{ rows.length }} 条</text></view><view v-for="item in rows" :key="item.id" class="lab-list-row"><view class="lab-copy"><text class="lab-item-title">{{ item.title }}</text><text class="lab-item-meta">{{ item.time }}</text></view><text class="lab-status">{{ item.tag }}</text></view><view v-if="failed" class="lab-tools"><button class="lab-button" @click="refresh">重新加载</button></view></view>
    </XtfPullRefresh></view>
  </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 { onUnmounted, ref } from "vue"
import XtfPullRefresh from "@/uni_modules/xtf-linkuiunix/components/xtf-pull-refresh/xtf-pull-refresh.uvue"
const triggered = ref(false)
const failNext = ref(false)
const failed = ref(false)
const phase = ref("待刷新")
const status = ref("本地模拟数据 · 最近更新 09:30")
const rows = ref([{ id: 1, title: "移动端交互规范已更新", time: "今天 09:30", tag: "设计" }, { id: 2, title: "商品详情页验收完成", time: "今天 09:10", tag: "项目" }, { id: 3, title: "新一轮组件测试已开始", time: "今天 08:45", tag: "测试" }, { id: 4, title: "周会纪要已归档", time: "昨天 18:00", tag: "团队" }, { id: 5, title: "图标资源更新", time: "昨天 16:20", tag: "设计" }])
let timer: number | null = null
let sequence = 5
function refresh(): void {
  if (triggered.value) return
  triggered.value = true; failed.value = false; phase.value = "刷新中"; status.value = "正在同步本地演示数据"
  const shouldFail = failNext.value
  timer = setTimeout(() => {
    timer = null; triggered.value = false; failNext.value = false; failed.value = shouldFail; phase.value = "待刷新"
    if (shouldFail) { status.value = "模拟请求失败，原有数据已保留"; return }
    sequence += 1
    rows.value.unshift({ id: sequence, title: "第 " + (sequence - 5).toString() + " 次同步完成", time: "刚刚", tag: "新增" })
    status.value = "刷新成功 · 新增 1 条动态"
  }, 900)
}
onUnmounted(() => { if (timer != null) clearTimeout(timer) })
</script>
<style>
@import "../demo-workbench.css";
.refresh-page { display: flex; flex-direction: column; flex: 1; width: 100%; height: 100%; min-height: 0; background-color: var(--xtf-color-page, #f6f7f9); }.refresh-header { display: flex; flex-direction: column; padding: 24rpx 28rpx; }.refresh-body { flex: 1; min-height: 0; }.refresh-list { display: flex; flex-direction: column; padding: 0 28rpx 64rpx; }
</style>
