<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true">
    <scroll-view class="statistic-demo-scroll xtf-page-scroll" direction="vertical">
      <view class="statistic-demo-page xtf-safe-bottom xtf-page-scroll-content">
        <view class="statistic-demo-hero">
          <text class="statistic-demo-kicker">XTF LINKUI / COMPONENTS</text>
          <text class="statistic-demo-title">Statistic</text>
          <text class="statistic-demo-intro">经营指标</text>
        </view>
        <view id="statistic-format" class="statistic-demo-section">
          <text class="statistic-demo-heading">精度与分隔符</text>
          <XtfStatistic id="statistic-money" label="成交额" value="12345.625" :precision="precision" :separator="separator" prefix="¥" suffix="元" :animation="false" />
          <view class="statistic-demo-actions">
            <XtfButton id="statistic-precision" class="statistic-demo-action" label="切换精度" size="sm" @click="changePrecision" />
            <XtfButton id="statistic-separator" class="statistic-demo-action" label="切换分隔符" size="sm" @click="changeSeparator" />
          </view>
          <text id="statistic-format-state" class="statistic-demo-state">{{ 'precision：' + precision + ' / separator：[' + separator + ']' }}</text>
          <XtfStatistic id="statistic-custom-format" label="预算完成率" :value="rate" :format="formatRate" prefix="本月" suffix="%" :animation="false" />
          <XtfButton id="statistic-rate" label="更新完成率" size="sm" @click="rate = rate == 72.5 ? 96.8 : 72.5" />
          <text id="statistic-context" class="statistic-demo-state">{{ formatContext }}</text>
        </view>
        <view id="statistic-animation" class="statistic-demo-section">
          <text class="statistic-demo-heading">动态订单</text>
          <XtfStatistic id="statistic-orders" label="订单数" :value="orders" :animation="animation" :duration="duration" :trend="trend" note="实时经营数据" />
          <view class="statistic-demo-actions">
            <XtfButton id="statistic-increase" class="statistic-demo-action" label="增加 360" size="sm" @click="orders += 360" />
            <XtfButton id="statistic-decrease" class="statistic-demo-action" label="减少 360" size="sm" @click="orders -= 360" />
            <XtfButton id="statistic-reset" class="statistic-demo-action" label="归零" size="sm" @click="orders = 0" />
            <XtfButton id="statistic-trend" class="statistic-demo-action" label="切换趋势" size="sm" @click="changeTrend" />
          </view>
          <view class="statistic-demo-setting">
            <text class="statistic-demo-label">动画</text>
            <switch id="statistic-animation-switch" :checked="animation" @change="toggleAnimation" />
          </view>
          <view class="statistic-demo-setting">
            <text class="statistic-demo-label">时长 ms</text>
            <input id="statistic-duration" class="statistic-demo-input" type="number" :value="duration.toString()" @input="changeDuration" />
          </view>
          <text id="statistic-dynamic-state" class="statistic-demo-state">{{ '目标：' + orders + ' / duration：' + duration + ' / trend：' + (trend == '' ? 'auto' : trend) }}</text>
        </view>
        <view id="statistic-appearance" class="statistic-demo-section">
          <text class="statistic-demo-heading">尺寸、前后缀与加载</text>
          <XtfStatistic id="statistic-appearance-value" label="账户余额" note="人民币账户" :value="12896.5" :precision="2" :size="size" :loading="loading" :prefix="affixes ? '¥' : ''" :suffix="affixes ? '元' : ''" :custom-style="appearanceStyle" />
          <view class="statistic-demo-actions">
            <XtfButton id="statistic-size" class="statistic-demo-action" label="切换尺寸" size="sm" @click="changeSize" />
            <XtfButton id="statistic-affixes" class="statistic-demo-action" label="切换前后缀" size="sm" @click="affixes = !affixes" />
          </view>
          <view class="statistic-demo-setting">
            <text class="statistic-demo-label">加载中</text>
            <switch id="statistic-loading" :checked="loading" @change="toggleLoading" />
          </view>
          <text id="statistic-size-state" class="statistic-demo-state">{{ 'size：' + size }}</text>
        </view>
        <view id="statistic-boundaries" class="statistic-demo-section">
          <text class="statistic-demo-heading">边界数值</text>
          <XtfStatistic id="statistic-boundary-value" :label="boundaryLabel" :value="boundaryValue" :precision="boundaryPrecision" :animation="false" size="sm" />
          <XtfButton id="statistic-boundary-next" label="下一个边界" size="sm" @click="changeBoundary" />
          <text id="statistic-boundary-state" class="statistic-demo-state">{{ '原值：[' + boundaryValue + '] / precision：' + boundaryPrecision }}</text>
        </view>
        <view id="statistic-unmount" class="statistic-demo-section">
          <text class="statistic-demo-heading">挂载与卸载</text>
          <XtfStatistic v-if="mounted" id="statistic-disposable" label="累计访问" :value="visits" :duration="5000" />
          <view class="statistic-demo-actions">
            <XtfButton id="statistic-visits" class="statistic-demo-action" label="增加访问" size="sm" @click="visits += 10000" />
            <XtfButton id="statistic-mount" class="statistic-demo-action" label="挂载 / 卸载" size="sm" @click="mounted = !mounted" />
          </view>
          <text id="statistic-mount-state" class="statistic-demo-state">{{ '已挂载：' + mounted + ' / 目标：' + visits }}</text>
        </view>
      </view>
    </scroll-view>
  </XtfConfigProvider>
</template>

<script setup lang="uts">
import { useDemoTheme } from '@/pages/demo-theme.uts'
const demoTheme = useDemoTheme()
import { computed, ref } from "vue"
import XtfConfigProvider from "@/uni_modules/xtf-linkuiunix/components/xtf-config-provider/xtf-config-provider.uvue"
import XtfButton from "@/uni_modules/xtf-linkuiunix/components/xtf-button/xtf-button.uvue"
import XtfStatistic from "@/uni_modules/xtf-linkuiunix/components/xtf-statistic/xtf-statistic.uvue"

const precision = ref(2)
const separator = ref(",")
const rate = ref(72.5)
const orders = ref(1280)
const animation = ref(true)
const duration = ref(900)
const trend = ref("")
const size = ref("lg")
const loading = ref(false)
const affixes = ref(true)
const mounted = ref(true)
const visits = ref(100)
const appearanceStyle = { padding: "12px", backgroundColor: "#ecfdf5" } as UTSJSONObject
const formatContext = ref("")
function formatRate(value: number, context: UTSJSONObject): string { formatContext.value = JSON.stringify(context); return value.toFixed(1) }
function changePrecision(): void { precision.value = precision.value == 2 ? 0 : precision.value == 0 ? 3 : 2 }
function changeSeparator(): void { separator.value = separator.value == ',' ? '' : separator.value == '' ? ' ' : separator.value == ' ' ? '$&' : ',' }
function changeTrend(): void { trend.value = trend.value == '' ? 'up' : trend.value == 'up' ? 'down' : trend.value == 'down' ? 'flat' : '' }
function changeSize(): void { size.value = size.value == 'lg' ? 'sm' : size.value == 'sm' ? 'md' : 'lg' }
function toggleAnimation(event: UniSwitchChangeEvent): void { animation.value = event.detail.value }
function toggleLoading(event: UniSwitchChangeEvent): void { loading.value = event.detail.value }
function changeDuration(event: UniInputEvent): void { const value = Number(event.detail.value); duration.value = isFinite(value) ? value : 0 }
const boundaryIndex = ref(0)
const boundaryLabels = ['零', '负小数', '数字字符串', '空字符串', '无效字符串', '非有限数', '负精度', '小数精度', '超大精度', '非有限精度', '科学计数']
const boundaryValues: (string | number)[] = [0, -1234.625, '001234.50', '', 'invalid', Infinity, 12.5, 12.5, 1.25, 12.5, 1e21]
const boundaryPrecisions = [2, 2, 2, 2, 2, 2, -2, 2.9, 1000, Infinity, 2]
const boundaryLabel = computed((): string => boundaryLabels[boundaryIndex.value])
const boundaryValue = computed((): string | number => boundaryValues[boundaryIndex.value])
const boundaryPrecision = computed((): number => boundaryPrecisions[boundaryIndex.value])
function changeBoundary(): void { boundaryIndex.value = (boundaryIndex.value + 1) % boundaryValues.length }
</script>

<style>
.statistic-demo-scroll { display: flex; flex-direction: column; flex: 1; width: 100%; min-height: 0; }
.statistic-demo-page { display: flex; flex-direction: column; width: 100%; padding: 16px; background-color: var(--xtf-color-page, #f8fafc); }
.statistic-demo-hero { display: flex; flex-direction: column; padding: 20px; border-radius: 8px; background-color: #0f766e; }
.statistic-demo-kicker { color: #ffffff; font-size: 11px; }
.statistic-demo-title { margin-top: 4px; color: #ffffff; font-size: 28px; font-weight: 700; }
.statistic-demo-intro { margin-top: 8px; color: #ffffff; font-size: 13px; }
.statistic-demo-section { display: flex; flex-direction: column; margin-top: 16px; padding-top: 16px; padding-bottom: 16px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--xtf-color-border, #cbd5e1); }
.statistic-demo-heading { margin-bottom: 12px; color: var(--xtf-color-text, #172033); font-size: 16px; font-weight: 700; }
.statistic-demo-actions { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 12px; }
.statistic-demo-action { margin-right: 8px; margin-bottom: 8px; }
.statistic-demo-state { margin-top: 10px; margin-bottom: 12px; color: var(--xtf-color-text-secondary, #475569); font-size: 12px; }
.statistic-demo-setting { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-top: 12px; }
.statistic-demo-label { color: var(--xtf-color-text, #172033); font-size: 14px; }
.statistic-demo-input { width: 110px; height: 36px; padding: 6px; border-width: 1px; border-style: solid; border-color: var(--xtf-color-border, #94a3b8); color: var(--xtf-color-text, #172033); font-size: 14px; }
</style>
