<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme">
  <scroll-view class="demo-scroll" direction="vertical">
    <view class="demo-page">
      <view class="demo-section demo-list">
        <text class="demo-title">完整分页 · 订单列表</text>
        <view class="demo-actions">
          <button class="demo-action demo-total-full" @click="total = 128">128 条</button>
          <button class="demo-action demo-total-small" @click="total = 12">12 条</button>
          <button class="demo-action demo-total-zero" @click="total = 0">空列表</button>
          <button class="demo-action demo-size-external" @click="pageSize = pageSize === 10 ? 20 : 10">切换每页条数</button>
        </view>
        <view v-for="row in visibleRows" :key="row.id" class="demo-row">
          <text class="demo-order">{{ row.id }} · {{ row.name }}</text>
          <text class="demo-amount">¥ {{ row.amount }}</text>
        </view>
        <text v-if="visibleRows.length === 0" class="demo-empty">暂无订单</text>
        <XtfPagination v-model="page" v-model:pageSize="pageSize" :total="total" show-page-list show-jumper :page-button-count="3" @change="record('列表 change', $event)" @page-size-change="record('列表 page-size-change', $event)" />
        <text class="demo-state demo-list-state">第 {{ page }} 页 · 每页 {{ pageSize }} 条 · 共 {{ total }} 条 · 当前 {{ visibleRows.length }} 条</text>
      </view>
      <view class="demo-section demo-modes">
        <text class="demo-title">简洁 / mini 模式</text>
        <XtfPagination v-model="simplePage" mode="simple" :total="86" @change="record('simple', $event)" />
        <view class="demo-spacing" />
        <XtfPagination v-model="miniPage" mode="mini" :total="86" show-page-list show-total show-jumper @change="record('mini', $event)" />
      </view>
      <view class="demo-section demo-window">
        <text class="demo-title">页码窗口 / 跳转</text>
        <view class="demo-actions">
          <button v-for="size in buttonCounts" :key="size" class="demo-action" :class="{ 'demo-selected': buttonCount === size }" @click="buttonCount = size">{{ size }} 个页码</button>
          <button class="demo-action demo-window-first" @click="windowPage = 1">首页</button>
          <button class="demo-action demo-window-middle" @click="windowPage = 10">中间</button>
          <button class="demo-action demo-window-last" @click="windowPage = 20">尾页</button>
        </view>
        <XtfPagination v-model="windowPage" :total="200" :page-button-count="buttonCount" show-page-list show-jumper :page-size-options="[]" @change="record('窗口', $event)" />
        <text class="demo-state">第 {{ windowPage }} / 20 页</text>
      </view>
      <view class="demo-section demo-boundary">
        <text class="demo-title">pageCount / 外部页码边界</text>
        <view class="demo-actions">
          <button class="demo-action demo-count-explicit" @click="explicitCount = 4">pageCount = 4</button>
          <button class="demo-action demo-count-auto" @click="explicitCount = 0">按 total 计算</button>
          <button class="demo-action demo-external-over" @click="boundaryPage = 999">页码 999</button>
          <button class="demo-action demo-external-negative" @click="boundaryPage = -3">页码 -3</button>
          <button class="demo-action demo-external-nan" @click="boundaryPage = Number('invalid')">NaN</button>
          <button class="demo-action demo-external-infinity" @click="boundaryPage = Number('Infinity')">Infinity</button>
        </view>
        <XtfPagination v-model="boundaryPage" :total="95" :page-count="explicitCount" show-page-list show-jumper :page-size-options="[]" @change="record('边界', $event)" />
        <text class="demo-state demo-boundary-state">total 95 · pageCount {{ explicitCount }} · 当前 {{ boundaryPage }} / {{ explicitCount > 0 ? explicitCount : 10 }} 页</text>
      </view>
      <view class="demo-section demo-disabled">
        <text class="demo-title">禁用 / 空数据</text>
        <view class="demo-actions">
          <text class="demo-state">禁用</text><switch :checked="disabled" @change="disabled = $event.detail.value" />
        </view>
        <XtfPagination v-model="disabledPage" v-model:pageSize="disabledSize" :total="88" :disabled="disabled" show-page-list show-jumper :page-button-count="3" @change="record('禁用场景', $event)" />
        <text class="demo-state demo-disabled-state">第 {{ disabledPage }} 页 · 每页 {{ disabledSize }} 条</text>
        <view class="demo-spacing" />
        <XtfPagination :total="0" :page-size-options="[]" />
      </view>
      <view class="demo-section demo-variants">
        <text class="demo-title">样式变体 / 自定义选中样式</text>
        <view v-for="(variant, index) in variants" :key="variant" class="demo-variant">
          <text class="demo-state">{{ variant }}</text>
          <XtfPagination v-model="variantPages[index]" :variant="variant" :total="50" show-page-list :page-button-count="3" :page-size-options="[]" prev-text="‹" next-text="›" @change="record(variant, $event)" />
        </view>
        <XtfPagination v-model="customPage" :total="30" show-page-list :page-size-options="[]" page-shape="circle" :active-page-style="{ backgroundColor: '#0f766e', color: '#ffffff' }" @change="record('自定义', $event)" />
      </view>
      <view class="demo-section demo-events">
        <view class="demo-actions"><text class="demo-title">事件回显 · {{ eventCount }}</text><button class="demo-action demo-clear-events" @click="clearEvents">清空</button></view>
        <text v-if="logs.length === 0" class="demo-state">暂无事件</text>
        <text v-for="entry in logs" :key="entry" class="demo-state demo-event">{{ entry }}</text>
      </view>
    </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 { computed, ref } from 'vue'
import XtfPagination from '@/uni_modules/xtf-linkuiunix/components/xtf-pagination/xtf-pagination.uvue'

const page = ref(1)
const pageSize = ref(10)
const total = ref(128)
const orders = Array.from({ length: 128 }, (_, index) => ({
  id: 'ORD-' + (1001 + index), name: ['日用百货', '办公用品', '数码配件', '家居收纳'][index % 4], amount: (29 + index * 3.5).toFixed(2)
}))
const visibleRows = computed(() => orders.slice(0, total.value).slice((page.value - 1) * pageSize.value, page.value * pageSize.value))
const simplePage = ref(1)
const miniPage = ref(1)
const windowPage = ref(10)
const buttonCounts = [3, 5, 7]
const buttonCount = ref(5)
const boundaryPage = ref(2)
const explicitCount = ref(4)
const disabled = ref(true)
const disabledPage = ref(2)
const disabledSize = ref(10)
const customPage = ref(2)
const variants = ['compact', 'outline', 'elevated', 'underlined', 'pill', 'minimal', 'square', 'segmented']
const variantPages = ref(variants.map(() => 2))
const logs = ref<string[]>([])
const eventCount = ref(0)
function record(source: string, payload: any): void {
  eventCount.value += 1
  logs.value = [eventCount.value + ' · ' + source + ' ' + (JSON.stringify(payload) ?? ''), ...logs.value].slice(0, 12)
}
function clearEvents(): void { logs.value = []; eventCount.value = 0 }
</script>
<style>
.demo-scroll { flex: 1; width: 100%; background-color: var(--xtf-color-page, #fcf8ff); }
.demo-page { display: flex; flex-direction: column; padding: 24rpx; }
.demo-section { display: flex; flex-direction: column; margin-bottom: 32rpx; }
.demo-title { margin-bottom: 18rpx; color: var(--xtf-color-text, #1b1b23); font-size: 30rpx; font-weight: 700; }
.demo-state { margin-top: 12rpx; color: var(--xtf-color-text-secondary, #464554); font-size: 24rpx; line-height: 36rpx; word-break: break-all; }
.demo-actions { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; margin-bottom: 16rpx; }
.demo-action { margin: 4rpx 8rpx 4rpx 0; padding: 8rpx 16rpx; font-size: 22rpx; line-height: 36rpx; color: #245c63; background-color: #e5f3f1; border-radius: 8rpx; }
.demo-selected { background-color: #bde3dc; }
.demo-row { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 14rpx 0; border-bottom: 1rpx solid var(--xtf-color-border, #e2e5e8); }
.demo-order { flex: 1; min-width: 0; color: var(--xtf-color-text, #1b1b23); font-size: 24rpx; }
.demo-amount { flex-shrink: 0; margin-left: 12rpx; color: #0f766e; font-size: 24rpx; }
.demo-empty { padding: 32rpx 0; text-align: center; color: var(--xtf-color-text-secondary, #696978); font-size: 26rpx; }
.demo-spacing { height: 16rpx; }
.demo-variant { display: flex; flex-direction: column; margin-bottom: 20rpx; }
</style>
