<template>
	<div class="app-field-box">
		<h3>1. form表单基本使用</h3>
		<KsFormModal title="我是测试" querykey="formmodal" @mysubmit="submit">
			<KsField entityKey="name" @change="onChange" showCount maxlength="10" />
			<KsField entityKey="textarea" @change="onChange" type="textarea"/>
			<KsField entityKey="password" @change="onChange" type="password" showPassword/>
			<KsField entityKey="singletype" @change="onChange"/>
			<KsField entityKey="multipletype" multiple/>
			<KsField entityKey="switchType" on="11" off="22"/>
			<KsField entityKey="switchType2" @change="onChange"/>
			<KsField entityKey="radioType" @change="onChange"/>
			<KsField entityKey="checkboxType" @change="onChange"/>
			<KsField entityKey="slider" @change="onChange" unit="MB" class="zy-demo"/>
			<KsField entityKey="time" @change="onChange" range type="datetime" clearable/>
			<KsField entityKey="buttonGroup" seperate @change="onChange"/>
			<KsField entityKey="buttonGroup2" checkType="checkbox" @change="onChange"/>
		</KsFormModal>
	</div>
</template>
<script setup>
import { reactive, provide } from 'vue';
// import { Form, FormItem, Input,Button,Message } from '@king-design/vue';
import { PageEntity } from './entity';
// import { KsFormModal,KsField } from '@ksconsole/components'

const formState = reactive({
	name: undefined,
	password: undefined,
	textarea: undefined,
	singletype: '1',
	multipletype: ['1', '2'],
	switchType: true,
	switchType2: false,
	radioType: '1',
	checkboxType: ['1', '2'],
	slider: 2,
	time: null,
	buttonGroup: undefined,
	buttonGroup2: [],
	transfer: [],
	zyinput: 1,
	name3: undefined,
});

provide('formInfo', {
	formState,
	PageEntity
});

const onChange = (v) => {
	console.log('🚀 ~ onChange ~ v:', v);
};

const submit = (formState) => {
	console.log("🚀 ~ submit ~ formState:", formState)
	Message.info({
		content: JSON.stringify(formState),
		duration: 10000,
		closable: true
	});
}
</script>

<style scoped lang="less">
.p {
	line-height: 18px !important;
}
.app-field-line {
	margin: 24px;
	border-bottom: 1px dashed rgb(159, 223, 159);
}
.app-field-box {
	padding: 24px;
	h3 {
		margin-bottom: 20px;
	}
}
</style>
