<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">INPUT / 03</text><text class="lab-title">Password Input 密码输入</text></view>
    <view class="lab-section"><text class="lab-heading">支付密码</text><view class="password-amount"><text class="lab-caption">模拟支付金额</text><text class="password-price">¥ 128.00</text></view><XtfPasswordInput ref="passwordRef" v-model="password" :mask="masked" @complete="status = '六位密码已输入完成（未发起支付）'" @focus="status = '正在输入'" /><view class="lab-row"><text class="lab-label">隐藏密码</text><switch :checked="masked" color="#17796b" @change="masked = $event.detail.value" /></view><view class="lab-tools"><button class="lab-button" @click="resetPassword">重新输入</button></view><text class="lab-result">{{ status }}</text></view>
    <view class="lab-section"><text class="lab-heading">短信验证</text><XtfPasswordInput v-model="code" :length="4" :mask="false" variant="filled" :error-info="error" @input="error = ''; codeStatus = ''" @complete="verify" /><text class="lab-caption">演示验证码：2468</text><text class="lab-result">{{ codeStatus }}</text></view>
    <view class="lab-section"><text class="lab-heading">下划线与动态约束</text><XtfPasswordInput id="password-dynamic" v-model="minimal" :length="dynamicLength" :disabled="dynamicDisabled" :readonly="dynamicReadonly" :mask="false" variant="minimal" size="lg" @complete="dynamicStatus = '完成：' + $event" /><view class="lab-tools"><button id="password-fill" class="lab-button" @click="minimal = '1234'">外部填入1234</button><button id="password-length" class="lab-button" @click="dynamicLength = dynamicLength == 6 ? 4 : 6">长度 {{ dynamicLength }} / 切换</button><button id="password-disable" class="lab-button" @click="dynamicDisabled = !dynamicDisabled">{{ dynamicDisabled ? '启用' : '禁用' }}</button><button id="password-readonly" class="lab-button" @click="dynamicReadonly = !dynamicReadonly">{{ dynamicReadonly ? '允许输入' : '只读' }}</button><button id="password-clear" class="lab-button" @click="minimal = ''; dynamicStatus = '外部清空'">外部清空</button></view><text id="password-dynamic-status" class="lab-result">{{ dynamicStatus }}</text></view>
    <view class="lab-section"><text class="lab-heading">只读与禁用</text><XtfPasswordInput model-value="123456" readonly size="sm" /><view class="lab-gap" /><XtfPasswordInput model-value="12" :length="4" disabled :mask="false" /></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 { nextTick, ref } from "vue"
import XtfPasswordInput from "@/uni_modules/xtf-linkuiunix/components/xtf-password-input/xtf-password-input.uvue"
const passwordRef = ref<any>(null)
const password = ref("")
const masked = ref(true)
const code = ref("")
const minimal = ref("12")
const dynamicLength = ref(6)
const dynamicDisabled = ref(false)
const dynamicReadonly = ref(false)
const dynamicStatus = ref("填入四位后将长度改为4，可观察complete事件")
const error = ref("")
const status = ref("尚未输入")
const codeStatus = ref("")
function verify(value: string): void { error.value = value == "2468" ? "" : "验证码不正确，请重新输入"; codeStatus.value = value == "2468" ? "验证成功（本地演示）" : "" }
async function resetPassword(): Promise<void> { password.value = ""; status.value = "尚未输入"; await nextTick(); passwordRef.value?.focus() }
</script>
<style>
@import "../demo-workbench.css";
.password-amount { display: flex; flex-direction: column; align-items: center; padding: 8rpx 0 28rpx; }.password-price { color: var(--xtf-color-text, #232d2b); font-size: 48rpx; font-weight: 700; margin-top: 8rpx; }
</style>
