<template>
	<div class="app-field-box">
    <KsForm querykey="edit" nofooter ref='zydemo' >
      <KsField entityKey="checkboxType" checkType="radio" />
      <KsField entityKey="multipletype" multiple />
      <KsField entityKey="name"  showCount maxlength="10" />
      <KsField entityKey="password"  type="password" showPassword/>
      <KsField entityKey="singletype" />
      <KsField entityKey="radioType" />
    </KsForm>
    <Button @click='onClick'>确认</Button>
	</div>
</template>
<script setup>
import { ref,reactive, provide } from 'vue';
import { Message,Button } from '@king-design/vue';
import { PageEntity } from './controllers/entity';
import { KsForm,KsField } from '@ksconsole/components'
const formState = reactive({
	name: '',
	singletype: 's1',
	multipletype: ['1', '2'],
	radioType: '1',
	checkboxType: '1',
});

provide('formInfo', {
	formState,
	PageEntity,
	formType: 'details'
});
const zydemo = ref(null)

const onClick = async ()=> {
	const bool = await zydemo.value.validate()
	console.log("🚀 ~ onClick ~ bool:", bool)
}
const onSubmit = (formState) => {
	console.log("表单提交:", formState)
	Message.info({
		content: JSON.stringify(formState),
		duration: 10000,
		closable: true
	});
}
</script>
<style scoped lang="less">
.app-field-box {
  margin: 10px;
	padding: 24px;
  width: 500px;
  border: 1px solid #e8e8e8;
}
</style>
