<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true"><scroll-view class="load-more-demo-scroll xtf-page-scroll" direction="vertical"><view class="load-more-demo-page xtf-page-scroll-content">
    <text class="load-more-demo-title">LoadMore 加载更多</text>
    <view class="load-more-demo-section">
      <text class="load-more-demo-heading">订单分页</text>
      <view v-for="item in items" :key="item" class="load-more-demo-row"><text class="load-more-demo-label">订单 A{{ item }} · 待发货</text></view>
      <XtfLoadMore id="load-request" :status="status" :content-text="contentText" @click-load-more="load" />
      <text id="load-state" class="load-more-demo-state">状态={{ status }} 请求={{ requests }} 条数={{ items.length }}</text>
      <text id="load-event" class="load-more-demo-state">{{ eventText }}</text>
      <button id="load-reset" class="load-more-demo-control" size="mini" @click="reset">重置分页</button>
    </view>
    <view class="load-more-demo-section">
      <text class="load-more-demo-heading">状态与文案</text>
      <view class="load-more-demo-controls"><button v-for="item in statuses" :id="'load-status-' + item" :key="item" class="load-more-demo-control" size="mini" @click="preview = item">{{ item }}</button></view>
      <view class="load-more-demo-setting"><text class="load-more-demo-label">自定义文案</text><switch id="load-copy" :checked="customCopy" @change="customCopy = !customCopy" /></view>
      <view class="load-more-demo-setting"><text class="load-more-demo-label">显示图标</text><switch id="load-icon" :checked="showIcon" @change="showIcon = !showIcon" /></view>
      <view class="load-more-demo-setting"><text class="load-more-demo-label">显示文字</text><switch id="load-text" :checked="showText" @change="showText = !showText" /></view>
      <view class="load-more-demo-setting"><text class="load-more-demo-label">圆环图标</text><switch id="load-circle" :checked="circle" @change="circle = !circle" /></view>
      <XtfLoadMore id="load-preview" custom-class="load-preview-custom" :status="preview" :show-icon="showIcon" :show-text="showText" :icon-type="circle ? 'circle' : 'auto'" :content-text="customCopy ? contentText : emptyText" :color="customCopy ? '#15803d' : '#777777'" :theme="customCopy ? 'success' : 'primary'" @click-load-more="record" />
      <text id="load-preview-event" class="load-more-demo-state">预览事件={{ previewCount }} {{ previewEvent }}</text>
    </view>
  </view></scroll-view></XtfConfigProvider>
</template>
<script setup lang="uts">
import { useDemoTheme } from '@/pages/demo-theme.uts'
const demoTheme = useDemoTheme()
import { ref, onUnmounted } from "vue"
import XtfConfigProvider from "@/uni_modules/xtf-linkuiunix/components/xtf-config-provider/xtf-config-provider.uvue"
import XtfLoadMore from "@/uni_modules/xtf-linkuiunix/components/xtf-load-more/xtf-load-more.uvue"
const items = ref([1, 2, 3]), status = ref('more'), requests = ref(0), eventText = ref('等待加载')
const statuses = ['more', 'loading', 'noMore', 'error', 'finished', 'unknown'], preview = ref('loading')
const customCopy = ref(false), showIcon = ref(true), showText = ref(true), circle = ref(false), previewCount = ref(0), previewEvent = ref('')
const contentText = { contentdown: '加载下一页订单', contentrefresh: '正在获取订单...', contentnomore: '全部订单已加载', contenterror: '请求失败，点击重试' }, emptyText = {}
let timer = 0
function load(event: any): void {
  // 两个兼容事件可能命中同一个监听器；请求锁必须同步设置。
  if (status.value == 'loading' || status.value == 'noMore') return
  eventText.value = JSON.stringify(event); status.value = 'loading'; requests.value++
  timer = setTimeout((): void => {
    timer = 0
    if (requests.value == 2) { status.value = 'error'; return }
    const start = items.value.length + 1
    for (let i = start; i < start + 3; i++) items.value.push(i)
    status.value = items.value.length >= 9 ? 'noMore' : 'more'
  }, 700) as number
}
function reset(): void { if (timer > 0) clearTimeout(timer); timer = 0; items.value = [1, 2, 3]; status.value = 'more'; requests.value = 0; eventText.value = '等待加载' }
function record(event: any): void { previewCount.value++; previewEvent.value = JSON.stringify(event) }
onUnmounted(() => { if (timer > 0) clearTimeout(timer) })
</script>
<style>
.load-more-demo-scroll { display: flex; flex-direction: column; flex: 1; width: 100%; min-height: 0; }
.load-more-demo-page { display: flex; flex-direction: column; padding: 16px; background-color: var(--xtf-color-page, #f8fafc); }
.load-more-demo-title { font-size: 26px; font-weight: 700; color: var(--xtf-color-text, #172033); }
.load-more-demo-section { display: flex; flex-direction: column; margin-top: 12px; padding: 16px 0; border-top: 1px solid var(--xtf-color-border, #dbe2ea); }
.load-more-demo-heading { font-size: 18px; font-weight: 600; margin-bottom: 12px; color: var(--xtf-color-text, #172033); }
.load-more-demo-row { display: flex; flex-direction: row; padding: 12px 0; border-bottom: 1px solid var(--xtf-color-border, #e2e8f0); }
.load-more-demo-label { font-size: 15px; color: var(--xtf-color-text-secondary, #334155); }
.load-more-demo-state { font-size: 14px; line-height: 1.6; color: var(--xtf-color-text-secondary, #475569); margin-top: 8px; }
.load-more-demo-control { margin: 4px; font-size: 14px; }
.load-more-demo-controls { display: flex; flex-direction: row; flex-wrap: wrap; }
.load-more-demo-setting { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin: 8px 0; }
</style>
