<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme">
  <scroll-view class="lab-scroll xtf-page-scroll" direction="vertical"><view class="lab-page xtf-page-scroll-content">
    <view class="lab-header"><text class="lab-eyebrow">MOTION / 05</text><text class="lab-title">Marquee 滚动公告</text></view>
    <view class="lab-section"><text class="lab-heading">服务公告</text><XtfMarquee :items="notices" label="公告" variant="notice" :autoplay="playing" :direction="reverse ? 'right' : 'left'" :duration="duration" pause-on-hover clickable @item-click="selectNotice" /><view class="lab-row"><text class="lab-label">自动播放</text><switch :checked="playing" color="#17796b" @change="playing = $event.detail.value" /></view><view class="lab-row"><text class="lab-label">向右滚动</text><switch :checked="reverse" color="#17796b" @change="reverse = $event.detail.value" /></view><view class="lab-row"><text class="lab-label">循环时长</text><text class="lab-caption">{{ duration }} 秒</text></view><slider :value="duration" :min="6" :max="30" :step="2" activeColor="#17796b" @change="duration = $event.detail.value" /><text class="lab-result">{{ selected }}</text></view>
    <view class="lab-section"><text class="lab-heading">实时动态</text><XtfMarquee :items="updates" mode="step" variant="soft" :autoplay="playing" :step-interval="2000" :item-height="80" clickable @change="step = $event.index + 1" @item-click="selectNotice" /><text class="lab-result">{{ step }} / {{ updates.length }}</text></view>
    <view class="lab-section"><text class="lab-heading">纵向信息流</text><XtfMarquee :items="updates" direction="up" :duration="12" :autoplay="playing" :item-height="72" /></view>
    <view class="lab-section"><text class="lab-heading">简洁通知</text><XtfMarquee text="营业时间 09:00–18:00，节假日正常营业。" variant="pill" :autoplay="playing" :duration="18" /></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 { ref } from "vue"
import XtfMarquee from "@/uni_modules/xtf-linkuiunix/components/xtf-marquee/xtf-marquee.uvue"
const playing = ref(true)
const reverse = ref(false)
const duration = ref(16)
const step = ref(1)
const selected = ref("暂无选中的公告")
const notices = [{ text: "国庆期间订单正常发货", tag: "物流" }, { text: "会员积分将于月底结算", tag: "会员" }, { text: "系统维护已完成，服务正常", tag: "服务" }]
const updates = [{ text: "09:42 · 新订单已进入处理队列" }, { text: "09:40 · 仓库完成今日第一批出库" }, { text: "09:35 · 售后申请已处理" }]
function selectNotice(event: any): void { selected.value = event.item.text }
</script>
<style>@import "../demo-workbench.css";</style>
