<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true">
    <scroll-view class="number-demo-scroll xtf-page-scroll" direction="vertical">
      <view id="number-demo" class="number-demo-page xtf-safe-bottom xtf-page-scroll-content">
        <view class="number-demo-header"><text class="number-demo-title">Number Box</text><text class="number-demo-desc">数量与称重</text></view>

        <view id="scene-shopping" class="number-demo-section">
          <text class="number-demo-heading">01 购物数量</text>
          <text class="number-demo-desc">咖啡豆 · ¥ 28.50 / 袋 · 限购 9 袋</text>
          <view class="number-demo-row">
            <XtfNumberBox id="shopping-box" v-model="count" :min="1" :max="9" :integer="true" @input="logValue('购物', 'input', $event)" @change="logValue('购物', 'change', $event)" @plus="logValue('购物', 'plus', $event)" @minus="logValue('购物', 'minus', $event)" @focus="logFocus('购物')" @blur="logValue('购物', 'blur', $event)" @confirm="logValue('购物', 'confirm', $event)" @overlimit="logLimit('购物', $event)" />
            <text id="shopping-subtotal" class="number-demo-value">小计 ¥ {{ (count * 28.5).toFixed(2) }}</text>
          </view>
        </view>

        <view id="scene-weight" class="number-demo-section">
          <text class="number-demo-heading">02 称重与精度</text>
          <text class="number-demo-desc">¥ 16.80 / kg · 0.50–5.00 kg</text>
          <view class="number-demo-row">
            <XtfNumberBox id="weight-box" v-model="weight" :min="0.5" :max="5" :step="weightStep" :decimal-length="2" theme="success" :input-width="120" @input="logValue('称重', 'input', $event)" @change="logValue('称重', 'change', $event)" @plus="logValue('称重', 'plus', $event)" @minus="logValue('称重', 'minus', $event)" @focus="logFocus('称重')" @blur="logValue('称重', 'blur', $event)" @confirm="logValue('称重', 'confirm', $event)" @overlimit="logLimit('称重', $event)" />
            <text id="weight-result" class="number-demo-value">{{ weight.toFixed(2) }} kg / ¥ {{ (weight * 16.8).toFixed(2) }}</text>
          </view>
          <view class="number-demo-setting"><text class="number-demo-label">步进 {{ weightStep.toFixed(2) }} kg</text><switch id="weight-step-switch" :checked="smallStep" @change="smallStep = $event.detail.value" /></view>
        </view>

        <view id="scene-boundary" class="number-demo-section">
          <text class="number-demo-heading">03 库存边界</text>
          <text class="number-demo-desc">库存范围 0–2</text>
          <view class="number-demo-row">
            <XtfNumberBox id="boundary-box" v-model="stock" :min="0" :max="2" theme="warning" @input="logValue('边界', 'input', $event)" @change="logValue('边界', 'change', $event)" @plus="logValue('边界', 'plus', $event)" @minus="logValue('边界', 'minus', $event)" @focus="logFocus('边界')" @blur="logValue('边界', 'blur', $event)" @confirm="logValue('边界', 'confirm', $event)" @overlimit="logLimit('边界', $event)" />
            <text id="boundary-value" class="number-demo-value">库存 {{ stock }} / 2</text>
          </view>
        </view>

        <view id="scene-state" class="number-demo-section">
          <text class="number-demo-heading">04 禁用与只读</text>
          <view class="number-demo-row">
            <XtfNumberBox id="state-box" v-model="readonlyValue" :min="0" :max="9" :disabled="disabled" :input-readonly="readonly" theme="info" @input="logValue('状态', 'input', $event)" @change="logValue('状态', 'change', $event)" @plus="logValue('状态', 'plus', $event)" @minus="logValue('状态', 'minus', $event)" @focus="logFocus('状态')" @blur="logValue('状态', 'blur', $event)" @confirm="logValue('状态', 'confirm', $event)" @overlimit="logLimit('状态', $event)" />
            <text id="state-value" class="number-demo-value">当前 {{ readonlyValue }}</text>
          </view>
          <view class="number-demo-setting"><text class="number-demo-label">禁用组件</text><switch id="disabled-switch" :checked="disabled" @change="disabled = $event.detail.value" /></view>
          <view class="number-demo-setting"><text class="number-demo-label">输入只读</text><switch id="readonly-switch" :checked="readonly" @change="readonly = $event.detail.value" /></view>
        </view>

        <view id="scene-structure" class="number-demo-section">
          <text class="number-demo-heading">05 输入与按钮显隐</text>
          <view class="number-demo-row">
            <XtfNumberBox id="structure-box" v-model="inputOnly" :min="0" :max="99" :show-input="showInput" :show-minus="showMinus" :show-plus="showPlus" :input-width="120" @input="logValue('结构', 'input', $event)" @change="logValue('结构', 'change', $event)" @plus="logValue('结构', 'plus', $event)" @minus="logValue('结构', 'minus', $event)" @focus="logFocus('结构')" @blur="logValue('结构', 'blur', $event)" @confirm="logValue('结构', 'confirm', $event)" @overlimit="logLimit('结构', $event)" />
            <text id="structure-value" class="number-demo-value">当前 {{ inputOnly }}</text>
          </view>
          <view class="number-demo-setting"><text class="number-demo-label">显示输入框</text><switch id="show-input-switch" :checked="showInput" @change="showInput = $event.detail.value" /></view>
          <view class="number-demo-setting"><text class="number-demo-label">显示减号</text><switch id="show-minus-switch" :checked="showMinus" @change="showMinus = $event.detail.value" /></view>
          <view class="number-demo-setting"><text class="number-demo-label">显示加号</text><switch id="show-plus-switch" :checked="showPlus" @change="showPlus = $event.detail.value" /></view>
        </view>

        <view id="scene-api" class="number-demo-section">
          <text class="number-demo-heading">06 实例方法</text>
          <view class="number-demo-row">
            <XtfNumberBox id="api-box" ref="apiBox" v-model="apiValue" :min="0" :max="10" :disabled="apiDisabled" @input="logValue('实例', 'input', $event)" @update:modelValue="logValue('实例', 'update:modelValue', $event)" @update:value="logValue('实例', 'update:value', $event)" @change="logValue('实例', 'change', $event)" @plus="logValue('实例', 'plus', $event)" @minus="logValue('实例', 'minus', $event)" @focus="logFocus('实例')" @blur="logValue('实例', 'blur', $event)" @confirm="logValue('实例', 'confirm', $event)" @overlimit="logLimit('实例', $event)" />
            <text id="api-value" class="number-demo-value">当前 {{ apiValue }}</text>
          </view>
          <view class="number-demo-setting"><text class="number-demo-label">禁用组件</text><switch id="api-disabled-switch" :checked="apiDisabled" @change="apiDisabled = $event.detail.value" /></view>
          <view class="number-demo-actions">
            <button id="api-increase" class="number-demo-button" size="mini" @click="callApi('increase')">increase()</button>
            <button id="api-decrease" class="number-demo-button" size="mini" @click="callApi('decrease')">decrease()</button>
            <button id="api-set-value" class="number-demo-button" size="mini" @click="callApi('setValue')">setValue(7)</button>
            <button id="api-focus" class="number-demo-button" size="mini" @click="callApi('focus')">focus()</button>
            <button id="api-blur" class="number-demo-button" size="mini" @click="callApi('blur')">blur()</button>
          </view>
        </view>

        <view id="scene-events" class="number-demo-section">
          <view class="number-demo-row"><text class="number-demo-heading">事件日志 {{ events.length }} / 18</text><button id="clear-events" class="number-demo-button" size="mini" @click="events = []">清空</button></view>
          <text v-if="events.length == 0" id="events-empty" class="number-demo-desc">暂无事件</text>
          <view id="event-log" class="number-demo-log"><text v-for="entry in events" :key="entry.id" :id="'event-' + entry.id" class="number-demo-event">{{ entry.id }} · {{ entry.text }}</text></view>
        </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 XtfNumberBox from '@/uni_modules/xtf-linkuiunix/components/xtf-number-box/xtf-number-box.uvue'

const count = ref(1)
const weight = ref(1.5)
const stock = ref(0)
const readonlyValue = ref(4)
const inputOnly = ref(12)
const smallStep = ref(false)
const weightStep = computed((): number => smallStep.value ? 0.1 : 0.25)
const disabled = ref(true)
const readonly = ref(true)
const showInput = ref(true)
const showMinus = ref(false)
const showPlus = ref(false)
const apiValue = ref(2)
const apiDisabled = ref(false)
const apiBox = ref<InstanceType<typeof XtfNumberBox> | null>(null)
type EventEntry = { id: number, text: string }
const events = ref<EventEntry[]>([])
let eventSequence = 0

function appendEvent(text: string): void {
  eventSequence += 1
  events.value.push({ id: eventSequence, text })
  if (events.value.length > 18) events.value.shift()
}
function logValue(scene: string, event: string, value: number): void {
  appendEvent(scene + ' / ' + event + ' = ' + value.toString())
}
function logFocus(scene: string): void { appendEvent(scene + ' / focus') }
function logLimit(scene: string, event: UTSJSONObject): void {
  appendEvent(scene + ' / overlimit ' + (event['type'] as string) + ' = ' + (event['value'] as number).toString())
}
function callApi(method: string): void {
  const instance = apiBox.value
  if (instance == null) { appendEvent('实例未就绪 / ' + method); return }
  // 调用记录与组件回调分开，未改变数值时不会虚构 change 事件。
  appendEvent('调用 / ' + method + (method == 'setValue' ? '(7)' : '()'))
  if (method == 'increase') instance.increase()
  else if (method == 'decrease') instance.decrease()
  else if (method == 'setValue') instance.setValue(7)
  else if (method == 'focus') instance.focus()
  else if (method == 'blur') instance.blur()
}
</script>

<style>
.number-demo-scroll { display: flex; flex-direction: column; flex: 1; width: 100%; height: 100%; min-height: 0; }
.number-demo-page { display: flex; flex-direction: column; width: 100%; max-width: 920px; align-self: center; padding: 16px; background-color: var(--xtf-color-page, #f6f7f9); }
.number-demo-header { display: flex; flex-direction: column; padding: 4px 0 12px; }
.number-demo-title { font-size: 24px; font-weight: 700; color: var(--xtf-color-text, #18202b); }
.number-demo-section { display: flex; flex-direction: column; padding: 16px 0; border-top-width: 1px; border-top-style: solid; border-top-color: var(--xtf-color-border, #dce1e7); }
.number-demo-heading { font-size: 16px; font-weight: 600; color: var(--xtf-color-text, #18202b); }
.number-demo-desc { margin-top: 6px; margin-bottom: 10px; font-size: 13px; color: var(--xtf-color-text-secondary, #617080); line-height: 20px; }
.number-demo-row { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-top: 10px; }
.number-demo-value { margin-top: 6px; margin-right: 8px; font-size: 14px; font-weight: 600; color: #245f4b; line-height: 22px; }
.number-demo-setting { display: flex; flex-direction: row; justify-content: space-between; align-items: center; min-height: 44px; margin-top: 4px; }
.number-demo-label { flex: 1; font-size: 14px; color: var(--xtf-color-text-secondary, #465361); }
.number-demo-actions { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 10px; }
.number-demo-button { margin: 0 8px 8px 0; padding: 0 12px; font-size: 12px; color: var(--xtf-color-text-secondary, #283d53); background-color: var(--xtf-color-surface-muted, #e8edf2); border-radius: 4px; }
.number-demo-log { display: flex; flex-direction: column; margin-top: 8px; min-height: 24px; }
.number-demo-event { padding: 4px 0; font-size: 12px; color: var(--xtf-color-text-secondary, #465361); line-height: 18px; word-break: break-all; }
</style>
