<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true">
    <scroll-view class="keyboard-demo-scroll xtf-page-scroll" style="flex: 1" direction="vertical">
      <view class="keyboard-demo-page xtf-safe-bottom xtf-page-scroll-content">
        <view class="keyboard-demo-hero">
          <XtfText class="keyboard-demo-kicker" level="micro" color="inverse" text="XTF LINKUI / COMPONENTS" />
          <XtfText class="keyboard-demo-title" level="display" color="inverse" text="Number Keyboard" />
          <XtfText class="keyboard-demo-intro" level="caption" color="inverse" text="数字、金额、身份证与安全输入的受控键盘。" />
        </view>

        <view class="keyboard-demo-section">
          <XtfText class="keyboard-demo-section-title" level="h3" text="数字与额外按键" />
          <XtfText class="keyboard-demo-section-desc" level="caption" color="secondary" text="支持小数点、00、遮罩关闭和完成事件。" />
           <XtfNumberKeyboard v-model="amount" v-model:show="amountVisible" show-trigger trigger-label="付款金额" trigger-placeholder="点击输入" extra-key="." show-double-zero title="输入金额" @confirm="recordConfirm" @key="recordKey" />
        </view>

        <view class="keyboard-demo-section">
          <XtfText class="keyboard-demo-section-title" level="h3" text="身份证与长度完成" />
          <XtfText class="keyboard-demo-section-desc" level="caption" color="secondary" text="id-card 自动提供 X；六码输入会触发 complete。" />
          <view class="keyboard-demo-value"><text class="keyboard-demo-value-label">身份证末尾</text><text class="keyboard-demo-value-text">{{ idCard }}</text></view>
          <view class="keyboard-demo-action"><XtfButton id="keyboard-open-idcard" label="输入身份证号码" type="outline" block @click="openIdCard" /></view>
          <view class="keyboard-demo-value"><text class="keyboard-demo-value-label">安全码</text><text class="keyboard-demo-value-text">{{ password }}</text></view>
           <view class="keyboard-demo-action"><XtfButton id="keyboard-open-password" label="随机安全键盘" theme="success" type="light" block @click="openPassword" /></view>
           <view class="keyboard-demo-action"><XtfButton id="keyboard-open-province" label="选择车牌省份" type="outline" block @click="openProvince" /></view>
           <view class="keyboard-demo-value"><text class="keyboard-demo-value-label">车牌输入</text><text id="keyboard-province-result" class="keyboard-demo-value-text">{{ province }}</text></view>
        </view>

        <view class="keyboard-demo-section">
          <XtfText class="keyboard-demo-section-title" level="h3" text="实例方法与事件" />
          <XtfText class="keyboard-demo-section-desc" level="caption" color="secondary" text="按钮通过 expose 的 open 方法打开实例，并记录关键操作。" />
          <view class="keyboard-demo-value"><text class="keyboard-demo-value-label">最近事件</text><text class="keyboard-demo-value-text">{{ eventText }}</text></view>
        </view>
      </view>
    </scroll-view>

    <XtfNumberKeyboard ref="idCardKeyboard" v-model="idCard" v-model:show="idCardVisible" keyboard-type="id-card" :maxlength="18" title="身份证号码" :show-close-icon="true" @delete="recordDelete" @close="recordClose" @confirm="recordConfirm" />
    <XtfNumberKeyboard ref="passwordKeyboard" v-model="password" v-model:show="passwordVisible" keyboard-type="password" :maxlength="6" :random-key-order="true" random-all-numbers theme="dark" display-mode="dialog" lock-scroll :secure-mode="true" :close-on-input-complete="true" title="输入六位安全码" @complete="recordComplete" @open="recordOpen" />
    <XtfNumberKeyboard ref="provinceKeyboard" v-model="province" v-model:show="provinceVisible" keyboard-type="province" title="选择车牌省份" subtitle="点击 abc 切换字母；可删除、完成或返回省份" @switch="eventText = '切换到：' + $event" @confirm="recordConfirm" />
  </XtfConfigProvider>
</template>

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

const amount = ref("")
const idCard = ref("")
const password = ref("")
const province = ref("")
const amountVisible = ref(false)
const idCardVisible = ref(false)
const passwordVisible = ref(false)
const provinceVisible = ref(false)
const eventText = ref("等待输入")
const idCardKeyboard = ref(null as any)
const passwordKeyboard = ref(null as any)

function openIdCard(): void { idCardKeyboard.value.open() }
function openPassword(): void { passwordKeyboard.value.open() }
function openProvince(): void { provinceVisible.value = true }
function recordKey(value: string): void { eventText.value = "按键: " + value }
function recordDelete(value: string): void { eventText.value = "删除后: " + value }
function recordConfirm(value: string): void { eventText.value = "完成: " + value }
function recordComplete(value: string): void { eventText.value = "长度完成: " + value }
function recordClose(): void { eventText.value = "键盘已关闭" }
function recordOpen(): void { eventText.value = "键盘已打开" }
</script>

<style>
.keyboard-demo-scroll { flex: 1; width: 100%; height: 100%; min-height: 0; }
.keyboard-demo-page { display: flex; flex-direction: column; width: 100%; padding: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }
.keyboard-demo-hero { display: flex; flex-direction: column; padding: 32rpx; border-radius: 16rpx; background-color: var(--xtf-color-primary, #2563eb); }
.keyboard-demo-kicker { color: #ffffff; font-size: 20rpx; font-weight: 600; }
.keyboard-demo-title { margin-top: 8rpx; color: #ffffff; font-size: 52rpx; font-weight: 700; line-height: 1.1; }
.keyboard-demo-intro { margin-top: 14rpx; color: #ffffff; font-size: 24rpx; line-height: 1.5; opacity: 0.88; }
.keyboard-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: 16rpx; background-color: var(--xtf-color-surface, #ffffff); }
.keyboard-demo-section-title { color: var(--xtf-color-text, #0f172a); font-size: 30rpx; font-weight: 700; }
.keyboard-demo-section-desc { margin-top: 8rpx; margin-bottom: 20rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; line-height: 1.45; }
.keyboard-demo-value { display: flex; flex-direction: row; align-items: center; justify-content: space-between; min-height: 60rpx; padding-left: 16rpx; padding-right: 16rpx; border-radius: 10rpx; background-color: var(--xtf-color-surface-muted, #f1f5f9); }
.keyboard-demo-value-label { color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; }
.keyboard-demo-value-text { color: var(--xtf-color-text, #0f172a); font-size: 24rpx; font-weight: 600; }
.keyboard-demo-action { margin-top: 14rpx; margin-bottom: 14rpx; }
</style>
