<template>
	<div class="SelectOrganization">
		<LoadingD :status="loading"></LoadingD>
		<div style="display: flex;justify-content: space-between;width: 100%;padding: 8px;">
			<div></div>
			<div v-if="username" style="font-size: 16px;font-weight: 700; color: #277d7b;"><van-icon name="manager"
					size="18" style="margin-right: 4px;" />{{username}}</div>
		</div>
		<div>
			<div class="title">请选择要预约的体检类型</div>
		</div>
		<van-radio-group v-model="selectedCheckType">
			<div v-for=" item in CheckTypeList" class="item" :key="item.id" :class="selectedCheckType==item.id?'active':''"
				@click="selectedCheckType=item.id">
				<!-- <div class="logo"><img src="../assets/image/map.png" /></div> -->
				<div class="name">
					{{item.name}}
					<van-radio checked-color="#33cdc9" :name="item.id" style="margin-left: 10px;"></van-radio>
				</div>
			</div>
		</van-radio-group>
		<van-button v-if="selectedCheckType" type="primary" class="button" round @click="to('jiankangzheng')">立即进入</van-button>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted,
		watch
	} from 'vue';
	import {
		useRouter
	} from "vue-router"
	import {
		GetOrgEnableList,
		GetPersonRecode
	} from "@/api/api.js";
	import {
		showToast,
		showDialog
	} from 'vant';
	const router = useRouter();
	let username = ref('');
	let loading = ref(false)
	let selectedCheckType=ref('');
	let CheckTypeList=ref([]);
	CheckTypeList.value=[{
		id:1,
		name:"健康证体检(自费)"
	}]
	const to=(code)=>{
		if(code=="jiankangzheng"){
			router.push('/selectOrganization')
		}
	}
	onMounted(()=>{
		sessionStorage.setItem('is_zifei', 'zifei');
	})
</script>

<style scoped>
	.SelectOrganization {
		padding: 20px 20px 80px 20px;
	}

	.title {
		font-size: 24px;
		font-weight: 900;
		color: #4c7aa5
	}
	.item {
		display: flex;
		border: 1px solid #c7f3f6;
		border-radius: 10px;
		height: 70px;
		background: linear-gradient(to right, #a8f1ef, #fff);
		margin-top: 20px;
	}
	
	.active {
		border: 2px solid #33cdc9;
	}
	
	.item .logo {
		width: 30%;
		display: flex;
		align-items: center;
		justify-content: center;
	
	}
	
	.item .logo img {
		height: 70px;
		position: relative;
		top: -10px;
	}
	
	.item .name {
		width: 70%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding-right: 40px;
		font-size: 16px;
		font-weight: 700;
		color: #414141;
	}
	
	.button {
		width: calc(100vw - 40px);
		background-color: #33cdc9;
		border: 0px;
		/* position: fixed; */
		bottom: 20px;
	
	
		margin-top: 50px;
	}
	
	.orginput {
		border: 1px solid #90d4ec;
		height: 30px;
		border-radius: 15px;
		padding-left: 18px;
	}
</style>