<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true">
    <scroll-view class="countto-demo-scroll xtf-page-scroll" direction="vertical">
      <view class="countto-demo-page xtf-safe-bottom xtf-page-scroll-content">
        <view class="countto-demo-hero">
          <XtfText class="countto-demo-kicker" level="micro" color="inverse" text="XTF LINKUI / COMPONENTS" />
          <XtfText class="countto-demo-title" level="display" color="inverse" text="Count To" />
          <XtfText class="countto-demo-intro" level="caption" color="inverse" text="统计数值的动画、格式化和手动控制。" />
        </view>
        <view id="countto-format" class="countto-demo-section">
          <text class="countto-demo-section-title">格式与缓动</text>
          <XtfCountTo id="countto-money" :end="12899.5" prefix="$" :decimals="2" color="#0f766e" size="42" bold />
          <XtfCountTo id="countto-percent" :end="98.6" suffix="%" :decimals="1" easing="linear" color="#16a34a" />
          <XtfCountTo id="countto-million" :end="1000000" :duration="1600" separator=" " size="36" />
        </view>
        <view id="countto-nonzero" class="countto-demo-section">
          <text class="countto-demo-section-title">非零起点</text>
          <XtfCountTo :start="120" :end="960" :duration="1200" easing="easeOutCubic" />
        </view>
        <view id="countto-negative" class="countto-demo-section">
          <text class="countto-demo-section-title">负数递减</text>
          <XtfCountTo :start="-10" :end="-1234.5" :decimals="2" :use-easing="false" />
        </view>
        <view id="countto-immediate" class="countto-demo-section">
          <text class="countto-demo-section-title">零时长与相同值</text>
          <XtfCountTo id="countto-zero" :start="12" :end="88" :duration="0" @finished="recordZeroFinish" />
          <XtfCountTo id="countto-equal" :start="42" :end="42" @finished="recordEqualFinish" />
          <text id="countto-immediate-events" class="countto-demo-note">{{ immediateText }}</text>
        </view>
        <view id="countto-separators" class="countto-demo-section">
          <text class="countto-demo-section-title">分隔符</text>
          <XtfCountTo id="countto-no-separator" :end="12345.67" :duration="0" :decimals="2" separator="" />
          <XtfCountTo id="countto-custom-decimal" :end="12345.67" :duration="0" :decimals="2" separator=" " decimal="," />
        </view>
        <view id="countto-styles" class="countto-demo-section">
          <text class="countto-demo-section-title">独立文字样式</text>
          <XtfCountTo id="countto-style-large" :end="128.5" :duration="0" :decimals="1" color="#be123c" :size="48" :line-height="72" bold align="right" />
          <XtfCountTo id="countto-style-small" :end="256" :duration="0" color="#0369a1" size="24" line-height="40" :bold="false" align="center" />
        </view>
        <view id="countto-controls" class="countto-demo-section">
          <text class="countto-demo-section-title">手动控制与事件</text>
          <XtfCountTo id="countto-manual" ref="counter" :start="100" :end="target" :duration="800" :autoplay="false" size="52" bold @mounted="recordMounted" @change="recordChange" @finished="recordFinish" />
          <view class="countto-demo-actions">
            <XtfButton id="countto-start" custom-class="countto-demo-action" label="开始 / 续播" size="sm" @click="start" />
            <XtfButton id="countto-stop" custom-class="countto-demo-action" label="停止" size="sm" type="light" @click="stop" />
            <XtfButton id="countto-reset" custom-class="countto-demo-action" label="重置" size="sm" type="outline" @click="reset" />
            <XtfButton id="countto-end" custom-class="countto-demo-action" label="外部 end" size="sm" @click="changeEnd" />
            <XtfButton id="countto-update" custom-class="countto-demo-action" label="实例 update" size="sm" theme="success" @click="update" />
          </view>
          <text id="countto-target" class="countto-demo-note">{{ 'end：' + target + ' / update：' + updateTarget }}</text>
          <text id="countto-events" class="countto-demo-note">{{ eventText }}</text>
          <text id="countto-finished-count" class="countto-demo-note">{{ 'finished：' + finishedCount }}</text>
          <text id="countto-log" class="countto-demo-note">{{ eventLog.join('\n') }}</text>
        </view>
        <view id="countto-unmount" class="countto-demo-section">
          <text class="countto-demo-section-title">挂载与卸载</text>
          <XtfCountTo v-if="showCounter" id="countto-disposable" :end="9999" :duration="5000" @change="recordDisposableChange" @finished="recordDisposableFinish" />
          <XtfButton id="countto-toggle" label="挂载 / 卸载" size="sm" @click="toggleCounter" />
          <text id="countto-unmount-events" class="countto-demo-note">{{ 'change：' + disposableChanges + ' / finished：' + disposableFinishes + ' / 已挂载：' + showCounter }}</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 XtfButton from "@/uni_modules/xtf-linkuiunix/components/xtf-button/xtf-button.uvue"
import XtfCountTo from "@/uni_modules/xtf-linkuiunix/components/xtf-count-to/xtf-count-to.uvue"
const counter = ref<any>(null)
const target = ref(8888)
const updateTarget = ref(9999)
const eventText = ref("等待播放")
const eventLog = ref<string[]>([])
const finishedCount = ref(0)
const showCounter = ref(true)
const disposableChanges = ref(0)
const disposableFinishes = ref(0)
const immediateText = ref("")
function log(message: string): void { eventLog.value = [message].concat(eventLog.value).slice(0, 10) }
function start(): void { log("start"); counter.value?.start() }
function stop(): void { counter.value?.stop(); log("stop：保留当前值") }
function reset(): void { counter.value?.reset(); log("reset：回到 100") }
function changeEnd(): void { target.value += 1111; log("end：" + target.value) }
function update(): void { updateTarget.value += 1111; log("update：" + updateTarget.value); counter.value?.update(updateTarget.value) }
function recordMounted(): void { log("mounted") }
function recordChange(value: number): void { eventText.value = "change：" + value.toFixed(2) }
function recordFinish(value: number): void { finishedCount.value++; log("finished：" + value); eventText.value = "finished：" + value }
function recordZeroFinish(value: number): void { immediateText.value += "零时长 finished：" + value + "；" }
function recordEqualFinish(value: number): void { immediateText.value += "相同值 finished：" + value + "；" }
function recordDisposableChange(_value: number): void { disposableChanges.value++ }
function recordDisposableFinish(_value: number): void { disposableFinishes.value++ }
function toggleCounter(): void { showCounter.value = !showCounter.value; log(showCounter.value ? "重新挂载" : "卸载") }
</script>
<style>
.countto-demo-scroll { display: flex; flex: 1; flex-direction: column; width: 100%; min-height: 0; }
.countto-demo-page { display: flex; flex-direction: column; width: 100%; padding: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }
.countto-demo-hero { display: flex; flex-direction: column; padding: 32rpx; border-radius: 16rpx; background-color: #0f766e; }
.countto-demo-kicker { color: #ffffff; font-size: 20rpx; font-weight: 600; }
.countto-demo-title { margin-top: 8rpx; color: #ffffff; font-size: 52rpx; font-weight: 700; }
.countto-demo-intro { margin-top: 14rpx; color: #ffffff; font-size: 24rpx; }
.countto-demo-section { display: flex; flex-direction: column; margin-top: 24rpx; padding: 24rpx; border-bottom-width: 1rpx; border-bottom-style: solid; border-bottom-color: var(--xtf-color-border, #cbd5e1); }
.countto-demo-section-title { margin-bottom: 20rpx; color: var(--xtf-color-text, #0f172a); font-size: 30rpx; font-weight: 700; }
.countto-demo-actions { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 20rpx; }
.countto-demo-action { margin-right: 12rpx; margin-bottom: 12rpx; }
.countto-demo-note { margin-top: 12rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; }
</style>
