<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true"><scroll-view class="sticky-demo-scroll xtf-page-scroll" direction="vertical"><view class="sticky-demo-page xtf-safe-bottom xtf-page-scroll-content">
    <view class="sticky-demo-hero"><XtfText class="sticky-demo-kicker" level="micro" color="inverse" text="XTF LINKUI / COMPONENTS" /><XtfText class="sticky-demo-title" level="display" color="inverse" text="Sticky" /><XtfText class="sticky-demo-intro" level="caption" color="inverse" text="viewport 固定、滚动容器内平移与原生分组吸顶。" /></view>
    <view class="sticky-demo-section"><XtfText class="sticky-demo-section-title" level="h3" text="Viewport 吸顶" /><XtfText class="sticky-demo-section-desc" level="caption" color="secondary" text="向上滚动，工具栏越过 12rpx 偏移后固定到屏幕。事件状态会实时更新。" /><view class="sticky-demo-spacer"><XtfText class="sticky-demo-note" level="caption" color="secondary" text="继续向上滚动以触发固定状态" /></view><XtfSticky :offset-top="12" :z-index="20" @scroll="onStickyScroll" @change="onStickyChange"><view class="sticky-demo-toolbar"><XtfIcon name="push_pin" size="sm" theme="primary" /><XtfText class="sticky-demo-toolbar-text" level="label" text="XtfSticky viewport" /><XtfBadge standalone :text="fixed ? '固定中' : '普通流'" :theme="fixed ? 'success' : 'info'" variant="soft" /></view></XtfSticky><view class="sticky-demo-content"><view v-for="item in viewportItems" :key="item" class="sticky-demo-content-item"><XtfText class="sticky-demo-content-title" level="label" :text="'内容 ' + item.toString()" /><XtfText class="sticky-demo-content-text" level="caption" color="secondary" text="这是普通 scroll-view 内容，用于验证 viewport 固定后的占位高度和位置。" /></view></view><view class="sticky-demo-state"><XtfText class="sticky-demo-state-label" level="label" color="secondary" text="Fixed / Top" /><XtfText class="sticky-demo-state-value" level="h3" color="primary" :text="(fixed ? 'true' : 'false') + ' / ' + viewportTop.toString()" /></view></view>
    <view class="sticky-demo-section"><XtfText class="sticky-demo-section-title" level="h3" text="容器原生吸顶示例" /><XtfText class="sticky-demo-section-desc" level="caption" color="secondary" text="此处保留 list-view、sticky-section 和 sticky-header 的原生分组示例，具体支持以运行平台为准。" /><list-view class="sticky-demo-list" :scroll-y="true"><sticky-section v-for="section in nativeSections" :key="section"><sticky-header><view class="sticky-demo-native-header"><XtfText class="sticky-demo-native-header-text" level="label" :text="section" /></view></sticky-header><list-item v-for="item in nativeItems" :key="section + '-' + item.toString()" class="sticky-demo-list-item"><XtfText class="sticky-demo-list-title" level="body" :text="section + ' / 条目 ' + item.toString()" /><XtfText class="sticky-demo-list-desc" level="caption" color="secondary" text="原生 sticky-section 内容。" /></list-item></sticky-section></list-view></view>
    <view class="sticky-demo-section"><XtfText class="sticky-demo-section-title" level="h3" text="滚动容器内吸顶" /><button class="demo-sticky-disabled" size="mini" @click="containerDisabled = !containerDisabled">{{ containerDisabled ? '启用' : '禁用' }}容器吸顶</button><button class="demo-sticky-offset" size="mini" @click="pixelOffset = !pixelOffset">偏移 {{ pixelOffset ? '12px' : '12rpx' }}</button><scroll-view id="demo-sticky-host" class="sticky-demo-container" direction="vertical"><view class="sticky-demo-content"><view class="sticky-demo-spacer"><text>在此容器内向上滚动</text></view><XtfSticky container="demo-sticky-host" :disabled="containerDisabled" :offset-top="pixelOffset ? '12px' : '12rpx'" @change="containerFixed = $event.fixed"><view class="sticky-demo-toolbar"><text>容器工具栏</text></view></XtfSticky><view v-for="item in 16" :key="item" class="sticky-demo-list-item"><text>容器内容 {{ item }}</text></view></view></scroll-view><text class="demo-sticky-container-state">{{ containerDisabled ? '已禁用' : (containerFixed ? '吸顶中' : '普通流') }}</text></view>
  </view></scroll-view></XtfConfigProvider>
</template>
<script setup lang="uts">
import { useDemoTheme } from '@/pages/demo-theme.uts'
const demoTheme = useDemoTheme()
import { ref } from "vue"
import XtfConfigProvider from "@/uni_modules/xtf-linkuiunix/components/xtf-config-provider/xtf-config-provider.uvue"
import XtfText from "@/uni_modules/xtf-linkuiunix/components/xtf-text/xtf-text.uvue"
import XtfSticky from "@/uni_modules/xtf-linkuiunix/components/xtf-sticky/xtf-sticky.uvue"
import XtfIcon from "@/uni_modules/xtf-linkuiunix/components/xtf-icon/xtf-icon.uvue"
import XtfBadge from "@/uni_modules/xtf-linkuiunix/components/xtf-badge/xtf-badge.uvue"
const containerDisabled = ref(false)
const pixelOffset = ref(false)
const containerFixed = ref(false)
const fixed = ref(false); const viewportTop = ref(0); const viewportItems = [1, 2, 3, 4, 5, 6] as Array<number>; const nativeSections = ["分组 A", "分组 B", "分组 C"] as Array<string>; const nativeItems = [1, 2, 3, 4] as Array<number>
function onStickyScroll(detail: UTSJSONObject): void { const top = detail["top"] as number; viewportTop.value = Math.round(top) }
function onStickyChange(detail: UTSJSONObject): void { fixed.value = detail["fixed"] as boolean }
</script>
<style>
.sticky-demo-container { display: flex; flex-direction: column; height: 360px; width: 100%; }
.sticky-demo-scroll { flex: 1; width: 100%; height: 100%; min-height: 0; }.sticky-demo-page { display: flex; flex-direction: column; width: 100%; padding: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }.sticky-demo-hero { display: flex; flex-direction: column; padding: 32rpx; border-radius: 16rpx; background-color: #b45309; }.sticky-demo-kicker { color: #ffffff; font-size: 20rpx; font-weight: 600; }.sticky-demo-title { margin-top: 8rpx; color: #ffffff; font-size: 52rpx; font-weight: 700; }.sticky-demo-intro { margin-top: 14rpx; color: #ffffff; font-size: 24rpx; }.sticky-demo-section { display: flex; flex-direction: column; margin-top: 24rpx; padding: 24rpx; background-color: var(--xtf-color-surface, #ffffff); border-width: 1rpx; border-style: solid; border-color: var(--xtf-color-border, #cbd5e1); border-radius: 16rpx; }.sticky-demo-section-title { color: var(--xtf-color-text, #0f172a); font-size: 30rpx; font-weight: 700; }.sticky-demo-section-desc { margin-top: 8rpx; margin-bottom: 20rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; line-height: 1.45; }.sticky-demo-spacer { display: flex; flex-direction: column; height: 210rpx; align-items: center; justify-content: center; background-color: #fff7ed; border-radius: 12rpx; }.sticky-demo-note { color: #9a3412; font-size: 22rpx; }.sticky-demo-toolbar { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 18rpx; background-color: var(--xtf-color-surface, #ffffff); border-width: 1rpx; border-style: solid; border-color: #fdba74; border-radius: 12rpx; box-shadow: 0 4rpx 12rpx rgba(15, 23, 42, 0.1); }.sticky-demo-toolbar-text { margin-left: 10rpx; color: var(--xtf-color-text, #0f172a); font-size: 24rpx; font-weight: 700; flex: 1; }.sticky-demo-content { display: flex; flex-direction: column; }.sticky-demo-content-item { display: flex; flex-direction: column; padding: 22rpx 0rpx; border-bottom-width: 1rpx; border-bottom-style: solid; border-bottom-color: var(--xtf-color-border, #e2e8f0); }.sticky-demo-content-title { color: var(--xtf-color-text, #0f172a); font-size: 24rpx; font-weight: 700; }.sticky-demo-content-text { margin-top: 7rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 21rpx; line-height: 1.4; }.sticky-demo-state { display: flex; flex-direction: row; align-items: center; margin-top: 16rpx; padding: 16rpx; background-color: #fff7ed; border-radius: 12rpx; }.sticky-demo-state-label { color: #9a3412; font-size: 22rpx; }.sticky-demo-state-value { margin-left: 10rpx; color: #b45309; font-size: 26rpx; font-weight: 700; }.sticky-demo-list { width: 100%; height: 620rpx; border-width: 1rpx; border-style: solid; border-color: var(--xtf-color-border, #cbd5e1); border-radius: 12rpx; }.sticky-demo-native-header { display: flex; flex-direction: row; align-items: center; height: 70rpx; padding-left: 20rpx; padding-right: 20rpx; background-color: #fef3c7; }.sticky-demo-native-header-text { color: #92400e; font-size: 24rpx; font-weight: 700; }.sticky-demo-list-item { display: flex; flex-direction: column; padding: 20rpx; border-bottom-width: 1rpx; border-bottom-style: solid; border-bottom-color: var(--xtf-color-border, #e2e8f0); background-color: var(--xtf-color-surface, #ffffff); }.sticky-demo-list-title { color: var(--xtf-color-text, #0f172a); font-size: 24rpx; }.sticky-demo-list-desc { margin-top: 6rpx; color: var(--xtf-color-text-secondary, #64748b); font-size: 20rpx; }
</style>
