<template>
	<div class="Register">
		<LoadingD :status="loading"></LoadingD>
		<div class="r_head">
			<div>您好，</div>
			<div>欢迎您的到来</div>
			<!-- <div>您是第一次到来，请完善以下信息</div> -->
		</div>
		<div class="info">
			<div class="tip">您是第一次到来，请完善以下信息</div>
			<div class="label">姓名</div>
			<div>
				<van-field v-model="info.name" placeholder="请输入用户名" />
			</div>
			<div class="label">性别</div>
			<div style=" margin-top: 15px;  margin-left: 10px;">
				<van-radio-group v-model="info.sex" direction="horizontal">
					<van-radio checked-color="#33cdc9" name="0">女</van-radio>
					<van-radio checked-color="#33cdc9" name="1">男</van-radio>
				</van-radio-group>
			</div>
			<div class="label">电话</div>
			<div>
				<van-field v-model="info.tel" placeholder="请输入用户名" />
			</div>
			<div class="label">身份证号码</div>
			<div>
				<van-field v-model="info.sfz" placeholder="请输入用户名" />
			</div>
			<van-button type="primary" class="button" round   @click="Reg()">注 册</van-button>
		</div>

	</div>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		mH5Register
	} from "@/api/api.js";
	import {
		showDialog,showToast
	} from 'vant';
	import {
		useRouter
	} from "vue-router"
	let loading=ref(false)
	const router = useRouter();
	let info = ref({
		name: '',
		sex: 0,
		tel: '',
		sfz: '',
	})
	const Reg = () => {
		console.log(info.value.sfz)
		if(info.value.sfz=='' || info.value.name==''){
			showToast("请填写全部信息"); 
			return false;
		} 
		loading.value=true
		mH5Register({
			info: info.value
		}).then(res => {
			loading.value=false
			if (res.status == true) {
				showDialog({
					title: '提示',
					message: '添加人员信息成功',
				}).then(() => {
					//添加成功后，跳转选择体检机构
				//	window.location.href = "./#/selectOrganization"
					router.replace('/selectOrganization')
				});
			} else {
				showToast(res.msg);
			}
		})
	}
</script>

<style scoped>


	.r_head {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 60px 20px;
		background-image: url('../assets/image/r_head.jpg');
		background-size: cover;
		background-position: 100% 100%;
	}
	.tip{
		font-size: 14px;
		color:#33cdc9;
		font-weight: 500;
	}
	.r_head div{
		color: #3f3f3f;
		font-size: 24px;
		font-weight: 700;
	}

	.info {
		position: relative;
		top: -10px;
		/* border: 1px solid red; */
		border-radius: 10px;
		background-color: #fff;
		padding: 20px 20px;

	}

	.info .van-field {
		border-bottom: 1px solid #ccc;
	}
	.info .label{
		font-size: 18px;
		color: #3f3f3f;
		font-weight: 700;
		margin: 20px auto 0px auto;
	}
	.button{
		width: 100%;
		background-color: #33cdc9;
		border: 0px;
		margin-top: 40px;
	}
</style>