<template>
	<view class="fenzhen_info">
		 <view class="header">
			 <view class="name">{{userInfo.name}} <span style="font-size: 30rpx;"> {{userInfo.sex}} | {{userInfo.age}}岁</span></view>
			 <view class="riqi">体检套餐：{{userInfo.comboName}}</view>
			 <view class="riqi">体检日期：{{userInfo.appointment_date}}</view>
		 </view>
		 <view class="tiaoma" >
			 <view class="tiaoma2"  v-html="userInfo.tiaoma">
			 </view>
			 <view  >
			 	{{userInfo.tiaoma_num}}
			 </view>
		 </view>
		
		 <view class="xia">
			 <view class="xia_row1">
				  <view class="xia_title">体检科室 <span style="font-size: 30rpx;color: #7D7D7D;">共 <span class="lanzi">{{keshi_ids.length}}</span> 个</span></view>
				  <view style="color: #7D7D7D;">
					已检查 <span class="lanzi">{{wancheng_count}}</span> 个
				  </view>
			 </view>
			 <view v-for="(item,index) in fenzhen_list" :key="index">
				 <view class="zhuangtai"  v-if="item.status==1">
				 	<view class="zhuangtai_left bakcolor3" >待 排 队</view>
				 	<view class="zhuangtai_right">
				 		<view>
				 			<view class="keshiname">{{item.item_name}}</view>
				 		</view>
				 	</view>
				 </view>
				 <view class="zhuangtai" v-if="item.status==2">
				 	<view class="zhuangtai_left bakcolor2" >队 列 中</view>
				 	<view class="zhuangtai_right">
				 		<view>
				 			<view class="keshiname">{{item.depart_name}}</view>
				 			<view class="zhenshiname">{{item.clinic_name}}</view>
				 		</view>
				 		<view style="color: #7D7D7D;">序号{{item.wait_count}}</view>
				 	</view>
				 </view>
				 <view class="zhuangtai"  v-if="item.status==3">
				 	<view class="zhuangtai_left bakcolor1">就 诊 中</view>
				 	<view class="zhuangtai_right">
				 		<view>
				 			<view class="keshiname">{{item.depart_name}}</view>
				 			<view class="zhenshiname">{{item.clinic_name}}</view>
				 		</view>
				 		<view style="color: #7D7D7D;">序号{{item.wait_count}}</view>
				 	</view>
				 </view>
				 
				
			 </view>
			
		 </view>
	</view>
</template>

<script setup>
	import {
		ref,onMounted, nextTick
	} from 'vue'
	import {
		onShow,onLoad
	} from '@dcloudio/uni-app'
	import {
		FenzhenChaXunAction,
		$response
	} from '@/api'

	
	let sfz=ref('');
	let userInfo=ref('');
	let fenzhen_list=ref([]);
	let wancheng_count=ref(0);
	let keshi_ids=ref([])
	const ChaXunFenZhenInfo= async(info)=>{
		uni.showLoading({
			title: '加载中'
		});
		const response = await FenzhenChaXunAction( {sfz:sfz.value})
		$response(response, () => {
			uni.hideLoading();
			userInfo.value=response.data.user_info
		    fenzhen_list.value=response.data.list
			fenzhen_list.value.forEach(function(item,index){
				if(item.status==4){
					wancheng_count.value++
				}
				if (keshi_ids.value.includes(item.department_id)) {
					
				}else{
					keshi_ids.value.push(item.department_id)
				}
			})
			console.log(keshi_ids.value)
		})
	}
 
	onMounted(()=>{		
		
	})
	onLoad((option)=>{
		sfz.value=option.sfz
		console.log(option)
			ChaXunFenZhenInfo()
	
	})
	
</script>

<style scoped>
	.fenzhen_info{
		padding: 30rpx;
	}
	.header{
		background-color:#30c5be ;
		border-radius: 20rpx;
		padding: 30rpx 40rpx;
		color:#fff;
	 
	}
	.name{
		font-size: 50rpx;
	}
	.riqi{
		font-size: 26rpx;
		margin-top: 18rpx;
	}
	.tiaoma{
		border-radius: 20rpx;
		 
		padding: 30rpx 40rpx;
		box-shadow: 0px 5px 5px #ccc;
	}
	.xia{
		padding: 40rpx 0;
	}
	.xia_title{
		font-size: #222222;
		font-size: 40rpx;
	}
	.xia_row1{
		display: flex;
		justify-content: space-between;
		line-height: 40rpx;
		margin-bottom: 30rpx;
		margin-top: 20rpx;
	}
	.zhuangtai{
		display: flex;
		  box-shadow: 0px 5px 5px #ccc;
		   border-radius: 20rpx ;
		   border: 1px solid #e2e2e2;
		   margin-top: 20rpx;
	}
	.zhuangtai_left{
		
		 color:#fff;
		padding: 30rpx 20rpx;
	  text-align: center; /* 文字居中对齐 */
	     white-space: nowrap; /* 防止文字换行 */
		 writing-mode:tb-rl;
		 font-size: 30rpx ;
		 border-radius: 20rpx 0 0 20rpx;
		
	}
	.bakcolor1{
		background-color: #fc924a;
	}
	.bakcolor2{
		background-color: #01cfde ;
	}
	.bakcolor3{
		background-color: #c6c6c6;
	}
	.lanzi{
		color:#01cfde;
	}
	
	.zhuangtai_right{
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: 40rpx;
	}
	.keshiname{
		font-weight: 500;
		font-size: 40rpx;
		color: #222222;
	}
	.zhenshiname{
		font-weight: 500;
		font-size: 30rpx;
		color: #6E6E6E;
		margin-top: 12rpx;
	}
	.tiaoma{
		 
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.tiaoma2{
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-bottom: 15rpx;
	}
</style>
