<template>
	<div>
		<LoadingD :status="loading"></LoadingD>
		<div class="showreport" v-if="reportinfo !=''">
			<div class="top">
				<van-row class="title">
					<van-col span="6">姓名：</van-col>
					<van-col span="18">{{reportinfo.name}}</van-col>
				</van-row>
				<van-row class="title">
					<van-col span="6">电话：</van-col>
					<van-col span="18">{{reportinfo.tel}}</van-col>
				</van-row>
				<!-- <van-row class="title">
					<van-col span="6">性别：</van-col>
					<van-col span="18" v-if="reportinfo.sex==0">女</van-col>
					<van-col span="18" v-if="reportinfo.sex==1">男</van-col>
				</van-row> -->
				<van-row class="title">
					<van-col span="6">身份证：</van-col>
					<van-col span="18">{{reportinfo.id_card_num}}</van-col>
				</van-row>
				<van-row class="button">
					<!-- <van-col span="12"><van-button @click="gotoHealthCertificate" size="small" plain>查看健康证</van-button></van-col> -->
					<van-col span="24"><van-button  @click="previewReport" plain>查看报告</van-button></van-col>
				</van-row>
				<div class="title1">{{title}}</div>
			</div>
			<div class="bottom" v-if="reportinfo.items.length>0">
				<van-row style="margin-top: 20px;color: #9e9e9e;">
					<van-col span="4"></van-col>
					<van-col span="16">项目</van-col>
					<van-col span="4">结果</van-col>
				</van-row>
				<van-row v-for="(item, index) in reportinfo.items" :key="index" class="list">
					<van-col v-if="item.flag == '' || item.flag == null" span="4"><van-icon name="checked"
							color="#4dde79" size="20px" /></van-col>
					<van-col v-else span="4"><van-icon name="warning" color="#de554d" size="20px" /></van-col>
					<van-col span="16">{{ item.item_name }}</van-col>
					<van-col v-if="item.flag == '' || item.flag == null" span="4"><span
							style="color: #ccc;">合格</span></van-col>
					<van-col v-else span="4">{{item.item_result}}</van-col>
				</van-row>

			</div>
		</div>

		<van-popup v-model:show="showPicker" round position="bottom">
			<van-picker :columns="columns" @cancel="showPicker = false" @confirm="selectPDF" />
		</van-popup>
		<div class="tankuang" v-if="tijian_count>1 &&tijian_dialog_show==true">
			<div class="baikuang">
				<div style="font-size: 16px;font-weight: 700;margin-bottom: 8px;">请选择要查看的报告</div>
				<van-radio-group v-model="selectedTijianNum"  >
				  <van-radio class="radio_item" v-for="(item,index) in tijian_list" :key="index" :name="item.tijian_num">{{item.tijian_time.substring(0,10)}} 报告</van-radio>
				</van-radio-group>
				<div style="width: 100%;text-align: center;">
					<van-button type="primary" size="small" style="width: 150px;" @click="xuanZeTiJian()">查 看</van-button>
				</div>
				
			</div>
		</div>
	</div>
</template>
<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		RouterLink,
		useRouter,
		useRoute,
	} from 'vue-router';
	import {
		GetPersonReportDetail
	} from "@/api/api.js";
	import {
		showToast,
		showDialog
	} from 'vant';
	const route = useRoute()
	const router = useRouter();
	let type=route.query.type
	let loading = ref(false)
	let title=ref("");
	let selectedTijianNum=ref('');
	let tijian_count=ref(0);
	let tijian_list=ref([])
	let tijian_dialog_show=ref(false)
	let list = [{
			name: "细菌性痢疾",
			value: "无"
		}, {
			name: "伤寒和副伤赛",
			value: "无"
		}, {
			name: "病毒性肝炎(甲型、戌型)",
			value: "无"
		}, {
			name: "活动性肺结核",
			value: "无"
		},
		{
			name: "化脓性或渗出性皮肤病",
			value: "无"
		}, {
			name: "手部真菌感染性疾病(如手癣、指甲癣等)",
			value: "无"
		}, {
			name: "霍乱",
			value: "无"
		}, {
			name: "阿米巴性痢疾",
			value: "无"
		}, {
			name: "手部湿疹",
			value: "无"
		}, {
			name: "手部的银屑病或者鳞屑",
			value: "无"
		},
	]
	document.title = '报告查询'
	let reportinfo = ref('')
	
	const getDetail = () => {
		let sfz = sessionStorage.getItem('sfz');
		loading.value = true
		GetPersonReportDetail({
			sfz: sfz,
			type:type
		}).then(res => {
			loading.value = false
			if (res.status) {
				tijian_count.value=res.data.tijian_count
				res.data.list.forEach((v,i)=>{
					if(v!==false){
						tijian_list.value.push({
							id:v.id,
							name:v.name,
							tel:v.tel,
							id_card_num:v.id_card_num,
							tijian_time:v.tijian_time,
							tijian_num:v.tijian_num,
							items:v.items,
							pdfs:v.pdfs,
							biao:v.biao //从哪个表查出的数据
						})
					}
				})
				if(tijian_list.value.length==1){
					selectedTijianNum.value=tijian_list.value[0].tijian_num
						xuanZeTiJian()
				}
				if(tijian_list.value.length>1){
					tijian_dialog_show.value=true
				}
			
				// if(tijian_count.value==1){
				// 	reportinfo.value = res.data.info
				// 	if(reportinfo.value.type==1){
				// 		title.value="北京市从业人员体检结果"
				// 	}
				// 	if(reportinfo.value.type==2){
				// 		title.value="老年人体检报告查询"
				// 	}
				// 	for (var i = 0; i < reportinfo.value.pdfs; i++) {
				// 		let ii = 0;
				// 		ii = i + 1;
				// 		console.log(999)
				// 		columns.value.push({
				// 			text: '报告' + ii,
				// 			value: i
				// 		});
				// 	}
				// } 
				

				console.log(columns.value);
			} else {
				showToast(res.msg);
			}

		})
	}
 
	const xuanZeTiJian=()=>{
		tijian_list.value.forEach((v,i)=>{
			console.log(selectedTijianNum.value)
			 if(v.tijian_num==selectedTijianNum.value){
				 reportinfo.value = v
				 if(reportinfo.value.type==1){
				 	title.value="北京市从业人员体检结果"
				 }
				 if(reportinfo.value.type==2){
				 	title.value="老年人体检报告查询"
				 }
				 for (var i = 0; i < reportinfo.value.pdfs; i++) {
				 	let ii = 0;
				 	ii = i + 1;
				 	console.log(999)
				 	columns.value.push({
				 		text: '报告' + ii,
				 		value: i
				 	});
				 }
			 }
		})
		tijian_dialog_show.value=false
	}
	//跳转查看报告
	const previewReport = () => {
		// if(reportinfo.value.report_file !=undefined &&   reportinfo.value.report_file.length>2){
		// 	//router.push('/previewReport?tijian_num='+reportinfo.value.report_file)
		// 	  window.location.href=import.meta.env.VITE_APP_FILE_URL+  reportinfo.value.report_file
		// }else{
		// 	showDialog({
		// 		title: '通知',
		// 		message: "暂无报告可查询",
		// 		messageAlign: 'left',
		// 		confirmButtonText: '好的',
		// 		theme: 'round-button',
		// 		confirmButtonColor: "#33cdc9"
		// 	}).then(() => {

		// 	});
		// }
		if (reportinfo.value.pdfs > 0) {
			showPicker.value = true;


		} else {
			showDialog({
				title: '通知',
				message: "暂无报告可查询",
				messageAlign: 'left',
				confirmButtonText: '好的',
				theme: 'round-button',
				confirmButtonColor: "#33cdc9"
			}).then(() => {

			});
		}
	}
	const gotoHealthCertificate = () => {
		if (reportinfo.value.result_status == 1) {
			router.push('/healthCertificate')
		} else {
			showToast('暂无对应此次体检结果的健康证');
		}
	}
	let showPicker = ref(false);
	let columns = ref([])
	const selectPDF = ({
		selectedOptions
	}) => {
		showPicker.value = false;
		console.log(selectedOptions[0].value);

		router.push('/previewReport?recordid=' + reportinfo.value.id + '&pdf_num=' + selectedOptions[0].value+'&biao='+reportinfo.value.biao)
	}
	onMounted(() => {
		getDetail()
	})
</script>
<style scoped>
	.tankuang{
		position: absolute;
		top:0px;
		z-index: 999;
		width: 100%;
		height: 100vh;
		background-color: #efefef;
		padding: 20px;
	}
	.baikuang{
		background-color: #fff;
		padding: 10px;
		margin-top: 50%;
		border-radius: 8px;
	}
	.radio_item{
		margin-bottom: 8px;
	}
	.showreport {
		height: 100vh;
		background: radial-gradient(circle at top center, #33cdc9 30%, #e3e3e3, transparent 2%);
		padding-top: 20px;
	}

	.title1 {
		text-align: center;
		font-size: 18px;
		background-color: #fff;
		padding: 10px 40px;
		border-radius: 20px;
		box-shadow: 0px 5px 5px #add2d1;
		color: #333;

		transform: translateY(20px);
		white-space: nowrap;
	}

	.top {
		color: #ffffff;
		background-color: #33cdc9;
		border: 1px solid #fff;
		margin: auto 10px;
		border-radius: 20px;
		padding: 20px 20px 0px 20px;


	}

	.top .button {
		margin-top: 10px;
	}

	.top .button .van-col {
		padding-left: 10px;
		padding-right: 10px;
	}

	.top .button .van-button {
		width: 100%;
	}

	.top .title {
		text-align: center;
		font-size: 18px;
		font-weight: 900;
		text-align: right;
		margin-top: 10px;

	}

	.top .title .van-col:last-child {
		text-align: left;
		padding-left: 10px;

	}

	.bottom {
		background-color: #fff;
		padding: 20px;


	}

	.bottom .list {
		margin-top: 10px;
		padding-bottom: 10px;
		border-bottom: 1px dotted #ddd;
	}
</style>