<template>
<div>


	<ks-dialog
		querykey='memberTest'
		title = '关联成员'
		>
		<Form ref="formRef" labelWidth="80">
			<FormItem
			label="用户名"
			:value="userInfo.user"
			:rules="{ required: true }"
			:messages="{ required: '请输入用户名' }">
			<Input v-model="userInfo.user" class="input-style" placeholder="请输入用户名" />
			</FormItem>

		</Form>
		<!-- <Form @submit="submitForm" ref="formRef" labelWidth="80">
			<FormItem
				label="用户名"
				:value="userInfo.user"
				:rules="{ required: true }"
				:messages="{ required: '请输入用户名' }">
				<Input v-model="userInfo.user" class="input-style" placeholder="请输入用户名" />
			</FormItem>
			<FormItem
				label="密码"
				:value="userInfo.pwd"
				:rules="{ required: true, passwordVerify: true }"
				:messages="{ required: '请输入密码' }">
				<Input
					type="password"
					showPassword
					v-model="userInfo.pwd"
					class="input-style"
					placeholder="请输入密码" />
			</FormItem>
			<FormItem
				label="姓名"
				:value="userInfo.name"
				:rules="{ required: true }"
				:messages="{ required: '请输入姓名' }">
				<Input
					showCount
					maxlength="20"
					v-model="userInfo.name"
					class="input-style"
					placeholder="请输入姓名" />
			</FormItem>
			<FormItem
				label="邮箱"
				:value="userInfo.email"
				:rules="{ required: true, emailVerify: true }"
				:messages="{ required: '请输入邮箱' }">
				<Input v-model="userInfo.email" class="input-style" placeholder="请输入邮箱" />
			</FormItem>
			<FormItem
				label="电话"
				:value="userInfo.phone"
				:rules="{ required: true, phoneVerify: true }"
				:messages="{ required: '请输入手机号' }">
				<Input v-model="userInfo.phone" class="input-style" placeholder="请输入手机号" />
			</FormItem>
		</Form> -->
		
		</ks-dialog>
		<ks-dialog
			querykey='memberTest2'
			title = '关联成员'
			@onSubmit='onSubmit'
		>
			我是测试：
			<Form ref="formRef" labelWidth="80">
			<FormItem
				label="用户名"
				:value="userInfo.user"
				:rules="{ required: true }"
				:messages="{ required: '请输入用户名' }">
			<Input v-model="userInfo.user" class="input-style" placeholder="请输入用户名" />
			</FormItem>

			</Form>
			
		</ks-dialog>
			<Button class="app-project-delete" @Click='onTest'>测试form</Button>
			<Button class="app-project-delete" @Click='onTest2'>测试form2</Button>
      </div>
</template>
<script setup>
import { ref, watch,reactive } from 'vue';
import { Input, Button, Form, FormItem, Message } from '@king-design/vue';
import { KsDialog } from '@ksconsole/components';
import {QueryChange} from "@ksconsole/hooks";
import { useRouter, useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();
const queryChange = new QueryChange(router,route)
const userInfo = reactive({
	user:''
})

const onTest = () => {
	queryChange._toDetails('','memberTest')
}
const onTest2 = () => {
	queryChange._toDetails('','memberTest2')
}
const onSubmit = () => {
	console.log('我是确认')
	let isClose = true
	setTimeout(() => {
		isClose = false
		if(!isClose) {
			Message.error('操作失败')
		}else {
			queryChange._backDetails('memberTest2')
		}
	})

}

</script>
<style lang="less" scoped>
.dialog-input-style {
	.k-input {
		width: 400px;
	}
}
</style>
