<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 style="display: flex;justify-content: space-between;">
				<div class="title2">请就近选择体检机构</div>
				<div style="text-align: right;"><input type="text" v-model="searchInfo" class="orginput"></div>
			</div>
			<div v-if="orgList.length>0">
				<van-radio-group v-model="organization">
					<div v-for=" item in orgList" class="item" :key="item.id" :class="organization==item.id?'active':''"
						@click="organization=item.id">
						<div class="logo"><img src="../assets/image/map.png" /></div>
						<div class="name">
							{{item.org_name}}
							<div>
								<van-radio checked-color="#33cdc9" :name="item.id" style="margin-left: 10px;"></van-radio>
							</div>
							
						</div>
					</div>
				</van-radio-group>
				<van-button v-if="organization" type="primary" class="button" round @click="to(url)">立即进入</van-button>

			</div>
			<van-empty v-else description="暂无信息" />
		</div>


	</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';
	import {
		usePiniaStore
	} from '@/stores/index.js'
	const pinia = usePiniaStore()
	//import Loading from '@/components/Loading.vue'
	const router = useRouter();
	let username = ref('');
	let loading = ref(false)
	let organization = ref('')
	let orgList = ref([])
	let searchInfo = ref('');
	const CheckRecord = () => { //检测是否在本年度体检过
		loading.value = true
		GetPersonRecode().then(res => {
			loading.value = false
			if (res.status) {
				getList()
			} else {
				if (res.msg == '已体检过') {
					showDialog({
						title: '通知',
						message: "您本年度已经体检过，无法继续在本平台预约",
						messageAlign: 'left',
						confirmButtonText: '我已经知晓',
						theme: 'round-button',
						confirmButtonColor: "#33cdc9"
					}).then(() => {

					});
				} else {
					showToast(res.msg);
				}

			}
		})
	}
	let allList = ref([]);
	const getList = () => {
		loading.value = true
		GetOrgEnableList({
			yuyue_type: sessionStorage.getItem('yuyueType')
		}).then(res => {
			loading.value = false
			if (res.status) {
				orgList.value = res.list
				allList.value = res.list
			} else {
				showToast(res.msg);
			}

		})
	}
	const to = (url) => {
		let info = pinia.yuyue_info
		info.org_id = organization.value
		info.yuyue_type=sessionStorage.getItem("yuyueType")
		orgList.value.forEach((v, i) => {
			if (v.id == organization.value) {
				info.org_name = v.org_name
			}
		})
		pinia.ChangeYuYueInfo(info)
		if(sessionStorage.getItem('yuyueType')=='jiankangzheng_mf'){
			router.push('/documentSubmit')
		}else{
			router.push('/selectDate')
		}
		
	}
	watch(searchInfo, (newValue, oldValue) => {
		orgList.value = [];
		if (newValue == '' || newValue == null) {
			orgList.value = allList.value
			return false;
		}
		allList.value.forEach((v, i) => {
			if ((v.jianpin != null && v.jianpin.includes(newValue)) || v.org_name.includes(newValue)) {
				orgList.value.push(v)
			}
		})
	});
	onMounted(() => {
		CheckRecord()
		username.value = sessionStorage.getItem('name')
	})
</script>

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

	.title {
		font-size: 24px;
		font-weight: 900;
		color: #4c7aa5
	}

	.title2 {
		font-size: 14px;
		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: 20px;
		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>