<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true">
    <scroll-view class="xtf-demo-scroll xtf-page-scroll" direction="vertical">
      <view class="xtf-demo-page xtf-page-scroll-content">
        <view class="xtf-demo-hero"><text class="xtf-demo-kicker">XTF LINKUI / COMPONENTS</text><text class="xtf-demo-title">Form</text><text class="xtf-demo-intro">字段校验、规则级触发、格式校验、错误汇总与表单提交。</text></view>
        <view class="xtf-demo-section"><XtfForm ref="formRef" :model="model" :rules="rules" show-error-summary validate-trigger="blur"><XtfFormItem label="姓名" prop="name"><XtfInput v-model="model.name" placeholder="请输入姓名" /></XtfFormItem><XtfFormItem label="邮箱" prop="email" help="请输入常用邮箱"><XtfInput v-model="model.email" placeholder="name@example.com" /></XtfFormItem><view class="xtf-demo-actions"><XtfButton label="校验并提交" @click="submit" /><XtfButton custom-class="form-demo-reset" type="outline" label="重置" @click="reset" /></view></XtfForm></view>
        <view class="xtf-demo-section"><text class="xtf-demo-heading">状态</text><text class="xtf-demo-value">{{ status }}</text></view>
        <view id="form-async-scene" class="xtf-demo-section">
          <text class="xtf-demo-heading">异步校验与取消</text>
          <XtfForm ref="asyncForm" :model="asyncModel" :rules="asyncRules" :scroll-to-error="false" show-error-summary>
            <template #default="formState"><XtfFormItem v-if="showAsyncField" prop="code" label="业务编号"><template #default="field"><XtfInput v-model="asyncModel.code" :disabled="field.disabled" :readonly="field.readonly" @blur="field.triggerValidate('blur')" /></template></XtfFormItem><text id="form-async-loading" class="xtf-demo-value">{{ formState.loading ? '校验中' : '可提交' }}</text></template>
          </XtfForm>
          <view class="form-demo-tools"><button id="form-async-submit" class="form-demo-tool" @click="submitAsync">提交异步表单</button><button id="form-async-resolve" class="form-demo-tool" @click="settleAsync(true)">校验通过</button><button id="form-async-reject" class="form-demo-tool" @click="settleAsync(false)">模拟校验失败</button><button id="form-async-reset" class="form-demo-tool" @click="asyncForm?.reset(); asyncStatus = '已重置，旧校验应失效'">reset()</button><button id="form-async-rules" class="form-demo-tool" @click="asyncRules = { code: [{ required: true, message: '编号必填' }] }; asyncStatus = '已替换规则'">替换规则</button><button id="form-async-hide" class="form-demo-tool" @click="showAsyncField = !showAsyncField">切换字段挂载</button></view>
          <text id="form-async-result" class="xtf-demo-value">{{ asyncStatus }}</text>
        </view>
      </view>
    </scroll-view>
  </XtfConfigProvider>
</template>
<script setup lang="uts">
import { useDemoTheme } from '@/pages/demo-theme.uts'
const demoTheme = useDemoTheme()
import { onBeforeUnmount, ref } from "vue"
import XtfConfigProvider from "../../../uni_modules/xtf-linkuiunix/components/xtf-config-provider/xtf-config-provider.uvue"
import XtfForm from "../../../uni_modules/xtf-linkuiunix/components/xtf-form/xtf-form.uvue"
import XtfFormItem from "../../../uni_modules/xtf-linkuiunix/components/xtf-form-item/xtf-form-item.uvue"
import XtfInput from "../../../uni_modules/xtf-linkuiunix/components/xtf-input/xtf-input.uvue"
import XtfButton from "../../../uni_modules/xtf-linkuiunix/components/xtf-button/xtf-button.uvue"
const formRef = ref<any>(null)
const model = ref({ name: "", email: "" })
const rules = { name: [{ required: true, message: "请输入姓名" }, { min: 2, message: "姓名至少 2 个字符" }], email: [{ required: true, message: "请输入邮箱" }, { pattern: /^[^@\s]+@[^@\s]+\.[^@\s]+$/, message: "邮箱格式不正确" }] }
const status = ref("等待操作")
function submit(): void { formRef.value?.submit((valid: boolean) => { status.value = valid ? "提交成功" : "请完善表单" }).catch(() => {}) }
function reset(): void { formRef.value?.reset(); status.value = "已重置" }
const asyncForm = ref<any>(null)
const asyncModel = ref({ code: "demo" })
const showAsyncField = ref(true)
const asyncStatus = ref("本地模拟：提交后手动决定校验结果")
const pendingChecks = [] as ((value: boolean | string) => void)[]
const asyncRules = ref<any>({ code: [{ validator: (): Promise<boolean | string> => new Promise((resolve) => { pendingChecks.push(resolve); asyncStatus.value = "等待校验结果" }) }] })
async function submitAsync(): Promise<void> { const result = await asyncForm.value?.submit().catch(() => false); asyncStatus.value = result ? "提交成功（本地模拟）" : "提交失败或已取消" }
function settleAsync(valid: boolean): void { pendingChecks.splice(0).forEach((resolve) => resolve(valid ? true : "业务编号校验失败（本地模拟）")) }
onBeforeUnmount(() => settleAsync(false))
</script>
<style>.form-demo-tools{display:flex;flex-direction:row;flex-wrap:wrap;margin-top:16rpx}.form-demo-tool{margin:8rpx 8rpx 0 0;padding:0 16rpx;font-size:22rpx}</style>
<style>.xtf-demo-scroll{flex:1;width:100%;height:100%}.xtf-demo-page{display:flex;flex-direction:column;width:100%;padding:24rpx;background-color:var(--xtf-color-page, #f8fafc)}.xtf-demo-hero{display:flex;flex-direction:column;padding:32rpx;border-radius:16rpx;background-color:#1d4ed8}.xtf-demo-kicker,.xtf-demo-intro{color:#fff;font-size:22rpx}.xtf-demo-title{margin-top:8rpx;color:#fff;font-size:52rpx;font-weight:700}.xtf-demo-intro{margin-top:12rpx}.xtf-demo-section{display:flex;flex-direction:column;margin-top:24rpx;padding:24rpx;border-radius:16rpx;background-color:var(--xtf-color-surface, #fff)}.xtf-demo-heading{margin-bottom:14rpx;color:var(--xtf-color-text, #172033);font-size:30rpx;font-weight:700}.xtf-demo-value{color:var(--xtf-color-text-secondary, #475569);font-size:24rpx}.xtf-demo-actions{display:flex;flex-direction:row;margin-top:18rpx}.form-demo-reset{margin-left:12rpx}</style>
