<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true">
    <scroll-view class="motion-demo-scroll xtf-page-scroll" style="flex: 1" direction="vertical"><view class="motion-demo-page xtf-safe-bottom xtf-page-scroll-content">
      <view class="motion-demo-hero"><XtfText class="motion-demo-kicker" level="micro" color="inverse" text="XTF LINKUI / COMPONENTS" /><XtfText class="motion-demo-title" level="display" color="inverse" text="Motion" /><XtfText class="motion-demo-intro" level="caption" color="inverse" text="用原生 view 动画，为真实业务内容增加节奏、层次与强调。" /></view>
      <view class="motion-demo-section"><XtfText class="motion-demo-section-title" level="h3" text="基础效果" /><XtfText class="motion-demo-section-desc" level="caption" color="secondary" text="淡入、位移、缩放和旋转适合页面进入与状态更新。" /><view class="motion-demo-grid"><XtfMotion custom-class="motion-demo-grid-item" effect="fade-up" :loop="false"><XtfButton label="淡入上移" theme="primary" /></XtfMotion><XtfMotion custom-class="motion-demo-grid-item" effect="zoom-in" :loop="false"><XtfButton label="缩放进入" type="light" theme="success" /></XtfMotion><XtfMotion custom-class="motion-demo-grid-item" effect="rotate-in" :loop="false"><XtfButton label="旋转进入" type="outline" theme="warning" /></XtfMotion><XtfMotion custom-class="motion-demo-grid-item" effect="bounce-in" :loop="false"><XtfButton label="弹跳进入" type="outline" theme="danger" /></XtfMotion></view></view>
       <view class="motion-demo-section"><XtfText class="motion-demo-section-title" level="h3" text="强视觉效果" /><XtfText class="motion-demo-section-desc" level="caption" color="secondary" text="光晕、双环、扫描线、残影、碎片、火花和卫星装饰会按效果自动组合。" /><view class="motion-demo-stack"><XtfMotion custom-class="motion-demo-stack-item" effect="pulse-glow" theme="success" :duration="1400" block><XtfButton label="库存已同步" theme="success" block /></XtfMotion><XtfMotion custom-class="motion-demo-stack-item" effect="laser-sweep" theme="info" :loop="false" block><XtfButton label="查看实时数据" type="neo" block /></XtfMotion><XtfMotion custom-class="motion-demo-stack-item" effect="shockwave" theme="danger" :loop="false" block><XtfButton label="风险提醒" theme="danger" block /></XtfMotion><XtfMotion custom-class="motion-demo-stack-item" effect="satellite-roll" theme="warning" :duration="1600" block><XtfButton label="同步节点" type="light" theme="warning" block /></XtfMotion></view></view>
      <view class="motion-demo-section"><XtfText class="motion-demo-section-title" level="h3" text="组合与播放控制" /><XtfText class="motion-demo-section-desc" level="caption" color="secondary" :text="paused ? '当前状态：已暂停' : '当前状态：播放中'" /><view class="motion-demo-stage"><XtfMotion :key="playKey" :effects="parallelEffects" effects-mode="parallel" :loop="true" :paused="paused"><XtfButton label="处理订单" theme="primary" /></XtfMotion></view><view class="motion-demo-controls"><view class="motion-demo-control"><XtfButton :label="paused ? '继续播放' : '暂停播放'" size="sm" block @click="togglePaused" /></view><view class="motion-demo-control motion-demo-control-second"><XtfButton label="重播组合" size="sm" type="outline" block @click="restart" /></view></view><view class="motion-demo-switch"><XtfButton label="脉冲 + 摇摆" size="sm" type="light" @click="setParallel('pulse-glow,magnetic-swing')" /><XtfButton label="缩放 + 淡入" size="sm" type="light" @click="setParallel('zoom-in,fade-in')" /></view></view>
       <view class="motion-demo-section"><XtfText class="motion-demo-section-title" level="h3" text="顺序、级联与层级" /><XtfText class="motion-demo-section-desc" level="caption" color="secondary" text="顺序组合和多个直接子节点可以独立编排，装饰层支持上下叠放。" /><XtfMotion :key="sequenceKey" :effects="sequenceEffects" effects-mode="sequence" :loop="false" :effects-gap="180" theme="warning" block><view class="motion-demo-cascade"><XtfText class="motion-demo-cascade-title" level="h3" text="订单处理完成" /><XtfText class="motion-demo-cascade-desc" level="caption" color="secondary" text="淡入、脉冲、扫描依次执行。" /><XtfButton label="查看订单" size="sm" type="outline" block /></view></XtfMotion><view class="motion-demo-layer-row"><XtfMotion effect="hologram" overlay-layer="above" aura-layer="above" intensity="1.5"><XtfButton label="上层装饰" theme="info" /></XtfMotion><XtfMotion effect="prism-tilt" overlay-layer="below" radius="8" inset="4"><XtfButton label="紧凑包裹" type="outline" theme="primary" /></XtfMotion></view><view class="motion-demo-replay"><XtfButton label="再次执行顺序动画" size="sm" block @click="restartSequence" /></view></view>
       <view class="motion-demo-section"><XtfText class="motion-demo-section-title" level="h3" text="主题、强度与装饰开关" /><XtfText class="motion-demo-section-desc" level="caption" color="secondary" text="这些参数对应旧版 Motion 的视觉配置，蒸汽模式用原生层和颜色稳定降级。" /><XtfMotion :key="visualKey" effect="cyber-pulse" :theme="visualTheme" accent-color="#0ea5e9" accent-color-2="#22c55e" :overlay="overlayEnabled" :overlay-layer="layerMode" :aura-layer="layerMode" :intensity="intensityValue" :radius="radiusValue" :inset="insetValue" :duration="1800" block><XtfButton label="可配置视觉容器" theme="info" block /></XtfMotion><view class="motion-demo-controls"><view class="motion-demo-control"><XtfButton label="蓝色主题" size="sm" block @click="setVisual('primary')" /></view><view class="motion-demo-control motion-demo-control-second"><XtfButton label="绿色主题" size="sm" type="light" block @click="setVisual('success')" /></view></view><view class="motion-demo-controls"><view class="motion-demo-control"><XtfButton :label="overlayEnabled ? '关闭装饰层' : '打开装饰层'" size="sm" type="outline" block @click="toggleOverlay" /></view><view class="motion-demo-control motion-demo-control-second"><XtfButton :label="layerMode == 'above' ? '切换到下层' : '切换到上层'" size="sm" type="outline" block @click="toggleLayer" /></view></view></view>
      <view class="motion-demo-section"><XtfText class="motion-demo-section-title" level="h3" text="级联现有组件" /><XtfText class="motion-demo-section-desc" level="caption" color="secondary" text="默认插槽中的按钮、文本和状态块都可以参与级联。" /><XtfMotion :key="cascadeKey" effect="fade-up" :loop="false" block cascade :cascade-step="140"><XtfButton label="第一步：校验" type="light" block /><view class="motion-demo-status"><XtfText class="motion-demo-status-title" level="h3" text="第二步：同步" /><XtfText class="motion-demo-status-desc" level="caption" text="数据正在更新" /></view><XtfButton label="第三步：完成" theme="success" block /></XtfMotion></view>
      <view class="motion-demo-section"><XtfText class="motion-demo-section-title" level="h3" text="点击与暴露方法" /><XtfText class="motion-demo-section-desc" level="caption" color="secondary" :text="'容器点击次数：' + clickCount.toString()" /><XtfMotion effect="tada" :loop="false" block @click="countClick"><XtfButton label="点击动画容器" theme="warning" block /></XtfMotion></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 XtfButton from "@/uni_modules/xtf-linkuiunix/components/xtf-button/xtf-button.uvue"
import XtfMotion from "@/uni_modules/xtf-linkuiunix/components/xtf-motion/xtf-motion.uvue"
const paused = ref(false)
const playKey = ref(0)
const sequenceKey = ref(0)
const cascadeKey = ref(0)
const clickCount = ref(0)
const visualKey = ref(0)
const visualTheme = ref("primary")
const overlayEnabled = ref(true)
const layerMode = ref("below")
const intensityValue = ref("1.2")
const radiusValue = ref("28")
const insetValue = ref("10")
const parallelEffects = ref("pulse-glow,magnetic-swing")
const sequenceEffects = ref("fade-up,pulse-glow,laser-sweep")
function togglePaused(): void { paused.value = !paused.value }
function restart(): void { paused.value = false; playKey.value++ }
function setParallel(value: string): void { parallelEffects.value = value; playKey.value++ }
function restartSequence(): void { sequenceKey.value++ }
function countClick(): void { clickCount.value++ }
function setVisual(value: string): void { visualTheme.value = value; visualKey.value++ }
function toggleOverlay(): void { overlayEnabled.value = !overlayEnabled.value; visualKey.value++ }
function toggleLayer(): void { layerMode.value = layerMode.value == "above" ? "below" : "above"; visualKey.value++ }
defineOptions({ styleIsolation: "isolated" })
</script>

<style>
.motion-demo-scroll { display: flex; flex-direction: column; flex: 1; width: 100%; height: 100%; min-height: 0; }.motion-demo-page { display: flex; flex-direction: column; width: 100%; padding: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }.motion-demo-hero { display: flex; flex-direction: column; padding: 32rpx; border-radius: 16rpx; background-color: #1d4ed8; }.motion-demo-kicker { color: #ffffff; font-size: 20rpx; font-weight: 600; }.motion-demo-title { margin-top: 8rpx; color: #ffffff; font-size: 52rpx; font-weight: 700; line-height: 1.1; }.motion-demo-intro { margin-top: 14rpx; color: #ffffff; font-size: 24rpx; line-height: 1.5; opacity: 0.88; }
.motion-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: 12rpx; background-color: var(--xtf-color-surface, #ffffff); }.motion-demo-section-title { color: var(--xtf-color-text, #0f172a); font-size: 30rpx; font-weight: 700; }.motion-demo-section-desc { margin-top: 8rpx; margin-bottom: 20rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; line-height: 1.45; }.motion-demo-grid { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; }.motion-demo-grid-item { width: 48%; margin-bottom: 16rpx; }.motion-demo-stack { display: flex; flex-direction: column; }.motion-demo-stack-item { margin-bottom: 18rpx; }.motion-demo-stage { display: flex; flex-direction: row; align-items: center; justify-content: center; min-height: 140rpx; padding: 24rpx; border-radius: 12rpx; background-color: var(--xtf-color-surface-muted, #f1f5f9); }.motion-demo-controls, .motion-demo-switch, .motion-demo-layer-row { display: flex; flex-direction: row; margin-top: 18rpx; }.motion-demo-control { display: flex; flex-direction: column; flex: 1; min-width: 0; }.motion-demo-control-second { margin-left: 14rpx; }.motion-demo-switch { justify-content: space-between; }.motion-demo-layer-row { justify-content: space-between; }.motion-demo-cascade, .motion-demo-status { display: flex; flex-direction: column; width: 100%; padding: 20rpx; border-radius: 10rpx; background-color: var(--xtf-color-surface-muted, #f1f5f9); }.motion-demo-cascade-title, .motion-demo-status-title { color: var(--xtf-color-text, #0f172a); font-size: 28rpx; font-weight: 700; }.motion-demo-cascade-desc, .motion-demo-status-desc { margin-top: 8rpx; margin-bottom: 18rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; }.motion-demo-replay { margin-top: 18rpx; }
</style>
