<template>
	<view class="fenzhen_info" v-if="userInfo">
		<view class="header">
			<view class="name">{{userInfo.name}} <span style="font-size: 30rpx;">
					{{userInfo.sex==1?'男':userInfo.sex==2?'女':''}} | {{userInfo.age}}岁</span> <span
					style="font-size: 30rpx;" v-if=" userInfo.reg_number">卡号：{{userInfo.reg_number}}</span></view>
					<view class="daohang_button" @click="daohang()">导航</view>
			<!-- 	 <view class="riqi">体检套餐：{{userInfo.comboName}}</view>
			 <view class="riqi">体检日期：{{userInfo.appointment_date}}</view> -->
		</view>
		<!-- 	  
			<view class="tiaoma" v-if="userInfo.reg_number">
				<w-barcode :options="{
				  width:600,
				  height:160,
				  code: userInfo.reg_number?userInfo.reg_number:'' ,
				}"></w-barcode>
			
			</view> -->

		<view
			style="font-size: 26rpx;margin-top: 50rpx;color: #d46767;font-weight: 700; border: 1px solid #83c5c5; padding: 30rpx;border-radius: 20rpx;">
			<view v-for="(item,index) in tip">
				{{item}}
			</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" v-if="item.clinic">{{item.clinic}}</view>

							<view class="item_k" v-for="(item2,index2) in item.items">
								<view class="zhenshiname">{{item2.name}}</view>
								<view class="itemdesc">{{item2.desc}}</view>
							</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.clinic}}</view>

							<view class="item_k" v-for="(item2,index2) in item.items">
								<view class="zhenshiname">{{item2.name}}</view>
								<view class="itemdesc">{{item2.desc}}</view>
							</view>
							<view style="display: flex; flex-direction: column; ">
								<view style="display: flex;">
									<view style="color: #7D7D7D;"> <span class="shuzi">{{item.wait}}</span>人排队</view>
									<view v-if="item.time > 60" style="color: #7D7D7D;margin-left: 20rpx;"> 预计等待时间大于60分钟</view>
									<view v-else style="color: #7D7D7D;margin-left: 20rpx;"> 预计等待<span
											class="shuzi">{{item.time}}</span>分钟</view>
								</view>
								<view style="color: #999; font-size: 24rpx; margin-top: 10rpx;">具体等待时间以实际叫号为准</view>
							</view>
						</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.clinic}}</view>
							<view class="item_k" v-for="(item2,index2) in item.items">
								<view class="zhenshiname">{{item2.name}}</view>
								<view class="itemdesc">{{item2.desc}}</view>
							</view>
						</view>
						<!-- <view style="color: #7D7D7D;">序号{{item.wait_count}}</view> -->
					</view>
				</view>
				<view class="zhuangtai" v-if="item.status==4">
					<view class="zhuangtai_left bakcolor1">已 完 成</view>
					<view class="zhuangtai_right">
						<view>
							<view class="keshiname">{{item.clinic}}</view>
							<view class="item_k" v-for="(item2,index2) in item.items">
								<view class="zhenshiname">{{item2.name}}</view>
								<view class="itemdesc">{{item2.desc}}</view>
							</view>
						</view>
						<!-- <view style="color: #7D7D7D;"> {{item.wait_count}}</view> -->
					</view>
				</view>

			</view>

		</view>
		<uni-popup ref="TiShiPopupRef" style="z-index: 999;">
			<view class="tishi_main">
				<view class="tishi_title">选择区域</view>
				 <view class="quyu_button" style="background-color: #fc924a;" @click="toMap(1)">男宾区</view>
				 <view class="quyu_button"  @click="toMap(2)">女宾区</view>
			</view>
		</uni-popup>
	</view>
</template>

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


	let id_number = ref('');
	let userInfo = ref('');
	let fenzhen_list = ref([]);
	let wancheng_count = ref(0);
	let keshi_ids = ref([])
	let hospital = ref('')
	let refreshInterval = ref(null) // 用于保存定时器引用
	let tip = ref([]);
	let TiShiPopupRef=ref(null)
	const ChaXunFenZhenInfo = async (info) => {
		wancheng_count.value = 0;
		FenZhenGetTiJianLine({
			id_number: id_number.value
		}).then(res => {

			if (res.status) {
				fenzhen_list.value = res.data.list
				userInfo.value = res.data.info
				tip.value = res.data.tip.split('\r\n');
				fenzhen_list.value.forEach(function(item, index) {
					if (item.status == 4) {
						wancheng_count.value++
					}
					if (keshi_ids.value.includes(item.clinic)) {

					} else {
						keshi_ids.value.push(item.clinic)
					}
				})
			}

		})
	}
	// 开始定时刷新
	const startAutoRefresh = () => {
		if (refreshInterval.value) clearInterval(refreshInterval.value) // 防止重复启动
		refreshInterval.value = setInterval(() => {
			ChaXunFenZhenInfo()
		}, 10000) // 每5秒刷新一次
	}
	const daohang=()=>{
		 if(userInfo.value.sex==1){
			 window.location.href='https://ccty-fz.sixinyun.com/map/nan.jpg' 
		 }
		 if(userInfo.value.sex==2){
		 	window.location.href='https://ccty-fz.sixinyun.com/map/nv.jpg'
		 }
	}
	const toMap=(type)=>{
		// uni.navigateTo({
		// 	url:'/pages/fenzhen/map?type='+type
		// })
		if(type==1){
			window.location.href='https://ccty-fz.sixinyun.com/map/nan.jpg'
		}
		if(type==2){
			window.location.href='https://ccty-fz.sixinyun.com/map/nv.jpg'
		}
		
	}
	onMounted(() => {

	})
	onLoad((option) => {

		id_number.value = option.id_number

		console.log(option)
		ChaXunFenZhenInfo()
		startAutoRefresh()

	})
	// 组件卸载时清除定时器
	onUnmounted(() => {
		if (refreshInterval.value) {
			clearInterval(refreshInterval.value)
			refreshInterval.value = null
		}
	})
</script>

<style scoped>

	.fenzhen_info {
		padding: 30rpx;
	}

	.header {
		background-color: #30c5be;
		border-radius: 20rpx;
		padding: 30rpx 40rpx;
		color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;

	}
	.daohang_button{
		width: 100rpx;
		border: 1px solid #fff;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 20rpx;
		background-color: #fc924a;
	}

	.shuzi {
		font-weight: 700;
		color: #ff5500;
	}

	.name {
		font-size: 50rpx;
	}

	.riqi {
		font-size: 26rpx;
		margin-top: 18rpx;
	}

	.tiaoma {
		border-radius: 20rpx;

		padding: 60rpx 40rpx 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;
	}

	.item_k {
		border-bottom: 1px solid #ddd;
		padding: 0rpx 16rpx 16rpx 0rpx;

	}

	.itemdesc {
		font-size: 26rpx;
		color: #ff573a;
		font-weight: 700;
	}
	.tishi_main{
		background-color: #fff;
		padding: 40rpx 50rpx;
		width:500rpx;
		border-radius: 40rpx;
	}
	.tishi_title{
		text-align: center;
		font-size: 30rpx;
		font-weight: 600;
		color:#2b2827;
	}
	.quyu_button{
		width: 80%;
		background-color: #01cfde;
		text-align: center;
		margin-top: 20rpx;
		margin-left: auto;
		margin-right: auto;
		color: #fff;
		border-radius: 50rpx;
		height: 60rpx;
		line-height: 60rpx;
	}
</style>