<template>
	<div class="HealthCertificate" v-if="reportinfo">
		<div class="main">
			<div class="title">北京市从业人员健康证明</div>
			<div class="info">
				<div class="left">
					<div class="pic"><img :src="headImage"></div>
					<div class="left_xia">
						<div>类型：{{reportinfo.industry_type}}</div>
						<div>日期：{{reportinfo.tijian_time.substring(0,10)}}</div>
						<!-- <div>编号：1235454546</div> -->
					</div>
				</div>
				<div class="right">
					<div class="right_shang">
						<div class="erweima">
							<!-- <img src="@/assets/image/erweima.jpg"> -->
						</div>
						<div class="userinfo">
							<div class="name">{{reportinfo.name}}<span class="sex" v-if="reportinfo.sex==1">(男)</span><span class="sex" v-if="reportinfo.sex==2">(女)</span></div>
							<div class="sfz">身份证号：{{reportinfo.id_card_num}}</div>
						</div>
					</div>
					<div class="right_xia">
						<table cellpadding="0" cellspacing="0" border="1">
							<tr>
								<td>检查项目</td>
								<td>检查结果</td>
								<td>检查日期</td>
							</tr>
							<tr v-for="(item,index) in reportinfo.items">
								<td>{{item.item_name}}</td>
								<td>合格</td>
								<td>-</td>
							</tr>
							 
						</table>
					</div>
				</div>
			</div>
			<div class="bottom">22</div>
		</div>
		<div class="zhang">
			<!-- <img src="@/assets/image/zhang.png"> -->
		</div>
	</div>
</template>
<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		RouterLink,
		useRouter
	} from 'vue-router';
	import {
		GetPersonReportDetail
	} from "@/api/api.js";
	import {
		showToast,
		showDialog
	} from 'vant';
	const router = useRouter();
	let loading = ref(false)
	document.title = '报告查询'
	let reportinfo=ref('')
	let headImage=ref('');
	const getDetail=()=>{
		let sfz=sessionStorage.getItem('sfz');
		loading.value=true
		GetPersonReportDetail({sfz:sfz}).then(res => {
			 loading.value=false
				if (res.status) {
					 reportinfo.value=res.data.info
					 headImage.value=import.meta.env.VITE_APP_FILE_URL+ reportinfo.value.head_img
				} else {
					showToast(res.msg);
				}
	
			})
	}
	onMounted(()=>{
		getDetail() 
	})
</script>
<style scoped>
	.HealthCertificate {
		background-color: #f5f5f5;
		padding-top: 10px;
	}

	.main {
		aspect-ratio: 158 / 100;
		border-radius: 5%;
		overflow: hidden;
	}

	.title {
		font-size: 6vw;
		height: 15%;
		text-align: center;
		color: #fff;
		background-color: #1b2f60;
	}

	.info {
		display: flex;
		height: 80%;
	}

	.bottom {
		height: 5%;
		background-color: #1b2f60;
	}

	.left {
		width: 30%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.pic {
		width: 80%;
		height: 65%;
		padding-top: 10%;
	}

	.pic img {
		width: 100%;
	}

	.left_xia {
		display: flex;
		flex-direction: column;
		height: 35%;
		justify-content: space-between;
		font-size: 2.5vw;
		padding-top: 10%;
		padding-bottom: 10%;
	}

	.right {
		height: 100%;
		width: 70%;

	}

	.right_shang {
		display: flex;
		height: 33%;


	}

	.erweima {
		width: 30%;
		height: 100%;
		padding: 4%;


	}

	.erweima img {
		width: 100%;
		margin-left: -3%;
	}

	.userinfo {
		width: 70%;
		padding: 5% 10% 0 2%;
	}

	.name {
		font-size: 5vw;
		border-bottom: 1px solid #000;
		font-weight: bolder;

	}

	.sex {
		font-size: 4vw;
	}

	.sfz {
		font-size: 2.5vw;
		margin-top: 3%;
		font-weight: 500;
	}

	.right_xia {
		padding-top: 5%;
		padding-right: 2%;
		padding-left: 2%;
	}

	table {
		width: 100%;
		text-align: center;
		border: 1px solid #000;
		font-size: 2.1vw;

	}

	td {
		border: 1px solid #000;
		padding: 0px;
	}

	tr {
		padding: 0px;
	}

	.zhang {
		position: absolute;
		top: 35vw;
		left: 20%;

	}

	.zhang img {
		width: 21vw;
	}
</style>