<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true"><scroll-view class="loading-demo-scroll xtf-page-scroll" direction="vertical"><view class="loading-demo-page xtf-safe-bottom xtf-page-scroll-content">
    <view class="loading-demo-hero"><XtfText class="loading-demo-kicker" level="micro" color="inverse" text="XTF LINKUI / COMPONENTS" /><XtfText class="loading-demo-title" level="display" color="inverse" text="Loading" /><XtfText class="loading-demo-intro" level="caption" color="inverse" text="内联、全屏和服务模式的加载反馈。" /></view>
    <view class="loading-demo-section"><XtfText class="loading-demo-section-title" level="h3" text="内置动画" /><XtfText class="loading-demo-section-desc" level="caption" color="secondary" text="spinner、ring、dots、orbit、pulse、bars 和 neon。" /><view class="loading-demo-grid"><view class="loading-demo-cell"><XtfLoading type="spinner" text="Spinner" /></view><view class="loading-demo-cell"><XtfLoading type="ring" theme="success" text="Ring" /></view><view class="loading-demo-cell"><XtfLoading type="dots" theme="warning" text="Dots" /></view><view class="loading-demo-cell"><XtfLoading type="orbit" theme="danger" text="Orbit" /></view><view class="loading-demo-cell"><XtfLoading type="pulse" text="Pulse" /></view><view class="loading-demo-cell"><XtfLoading type="bars" theme="success" text="Bars" /></view><view class="loading-demo-cell"><XtfLoading type="neon" theme="info" text="Neon" /></view></view></view>
    <view class="loading-demo-section"><XtfText class="loading-demo-section-title" level="h3" text="声明式与服务模式" /><XtfText class="loading-demo-section-desc" level="caption" color="secondary" text="全屏遮罩由 show 控制；service 宿主响应 loadingManager。" /><view class="loading-demo-actions"><XtfButton id="basic-loading-declarative" custom-class="loading-demo-action" label="声明式加载" size="sm" @click="openDeclarative" /><XtfButton id="basic-loading-service" custom-class="loading-demo-action" label="服务加载" size="sm" theme="success" @click="openService" /></view><XtfLoading :show="declarativeVisible" mode="fullscreen" overlay type="orbit" text="正在保存数据" /><XtfLoading service /></view>
    <view class="loading-demo-section"><XtfText level="h3" text="延迟、暂停与公开方法" /><button id="basic-loading-toggle" @click="shown = !shown">显示 {{ shown }}</button><button id="basic-loading-motion" @click="animated = !animated">动画 {{ animated }}</button><button id="basic-loading-delay" @click="delay = delay == 0 ? 500 : 0">延迟 {{ delay }}ms</button><XtfLoading id="basic-loading-preview" :show="shown" :delay="delay" :animated="animated" type="dots" size="48px" :vertical="false" text="本地同步中" /><button id="basic-loading-open" @click="serviceHost?.open({ text: '公开方法加载', mode: 'inline' })">open()</button><button id="basic-loading-close" @click="serviceHost?.close()">close()</button><XtfLoading ref="serviceHost" id="basic-loading-method" service /></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 XtfText from "@/uni_modules/xtf-linkuiunix/components/xtf-text/xtf-text.uvue"
import XtfLoading from "@/uni_modules/xtf-linkuiunix/components/xtf-loading/xtf-loading.uvue"
import XtfButton from "@/uni_modules/xtf-linkuiunix/components/xtf-button/xtf-button.uvue"
import { XtfLoadingManager } from "@/uni_modules/xtf-linkuiunix/libs/loading-manager.uts"
import type { XtfLoadingOptions } from "@/uni_modules/xtf-linkuiunix/libs/loading-manager.uts"
const declarativeVisible = ref(false)
const shown = ref(true), animated = ref(true), delay = ref(0)
const serviceHost = ref<{ open: (options: XtfLoadingOptions) => void; close: () => void } | null>(null)
let declarativeTimer = 0, serviceTimer = 0
function openDeclarative(): void { if (declarativeTimer > 0) clearTimeout(declarativeTimer); declarativeVisible.value = true; declarativeTimer = setTimeout((): void => { declarativeTimer = 0; declarativeVisible.value = false }, 1000) as number }
function openService(): void { if (serviceTimer > 0) clearTimeout(serviceTimer); XtfLoadingManager.show({ mode: "fullscreen", overlay: true, type: "bars", text: "正在同步数据", delay: 150 }); serviceTimer = setTimeout((): void => { serviceTimer = 0; XtfLoadingManager.hide() }, 1200) as number }
onUnmounted(() => { if (declarativeTimer > 0) clearTimeout(declarativeTimer); if (serviceTimer > 0) clearTimeout(serviceTimer); XtfLoadingManager.hide() })
</script>
<style>
.loading-demo-scroll { flex: 1; flex-direction: column; width: 100%; min-height: 0; }.loading-demo-page { display: flex; flex-direction: column; width: 100%; padding: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }.loading-demo-hero { display: flex; flex-direction: column; padding: 32rpx; border-radius: 16rpx; background-color: #7c3aed; }.loading-demo-kicker { color: #ffffff; font-size: 20rpx; font-weight: 600; }.loading-demo-title { margin-top: 8rpx; color: #ffffff; font-size: 52rpx; font-weight: 700; }.loading-demo-intro { margin-top: 14rpx; color: #ffffff; font-size: 24rpx; }.loading-demo-section { display: flex; flex-direction: column; margin-top: 24rpx; padding: 24rpx; border-width: 1rpx; border-style: solid; border-color: var(--xtf-color-border, #cbd5e1); border-radius: 16rpx; background-color: var(--xtf-color-surface, #ffffff); }.loading-demo-section-title { color: var(--xtf-color-text, #0f172a); font-size: 30rpx; font-weight: 700; }.loading-demo-section-desc { margin-top: 8rpx; margin-bottom: 20rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; }.loading-demo-grid { display: flex; flex-direction: row; flex-wrap: wrap; }.loading-demo-cell { display: flex; flex-direction: row; justify-content: center; width: 50%; min-height: 160rpx; }.loading-demo-actions { display: flex; flex-direction: row; flex-wrap: wrap; }.loading-demo-action { margin-right: 12rpx; margin-bottom: 12rpx; }
</style>
