<template>
	<div class="Myappointment">

		<div class="info">
			<div style="font-size: 18px; font-weight: 700;margin-bottom: 10px;margin-top: 10px; color:#33cdc9">我的预约记录
			</div>
			<table v-if="Info">
				<tr>
					<td>姓名</td>
					<td>{{Info.name}}</td>
				</tr>
				<tr>
					<td>身份证</td>
					<td>{{Info.id_card_num}}</td>
				</tr>
				<tr>
					<td>预约类型</td>
					<td><span v-if="Info.type==1">健康证体检</span><span v-if="Info.type==2">65岁老年人体检</span></td>
				</tr>

				<tr>
					<td>预约机构</td>
					<td>{{Info.org_name}}</td>
				</tr>
				<tr>
					<td>预约时间</td>
					<td>{{Info.date.substr(0,10)}} {{Info.time}} <van-button style="margin-left: 10px;" round type="default" icon="todo-list-o" @click="CancelYuYueFunc(Info.id)">取消预约</van-button></td>
				</tr>
				<tr>
					<td>记录时间</td>
					<td>{{Info.created_at}}</td>
				</tr> 
			</table>
			 
			<van-empty v-else description="暂无记录" />
			 
			<van-button class="button" round type="default" icon="todo-list-o" @click="router.go(-1)">返回</van-button>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		useRoute,
		useRouter
	} from "vue-router"
	import {
		H5GetAppointmentRecord,CancelYuYue
	} from "@/api/api.js";
	import {
		showToast,showConfirmDialog 
	} from 'vant';
	const route = useRoute()
	const router = useRouter();
	let loading = ref(false)
	let Info =ref('');
	const GetInfo=()=>{
		let sfz = sessionStorage.getItem('sfz');
		H5GetAppointmentRecord({sfz:sfz}).then(res => {
			if(res.status){
				Info.value=res.data
			}
			
		})
	}
	const CancelYuYueFunc=(id)=>{
		showConfirmDialog({
		  title: '提示',
		  message: '确认取消吗？'
		}).then(() => {
		  CancelYuYue({id:id}).then(res => {
		  	if(res.status){
				showToast('取消成功');
		  	   GetInfo()
		  	}
		  	
		  })
		}).catch(() => {
		  
		});
		
	}
	onMounted(()=>{
		GetInfo()
	})
</script>

<style scoped>
	.Myappointment {
		background-color: #afeefd;
		height: 100vh;
		padding: 8px;
	}

	.info {
		position: relative;
		/* border: 1px solid red; */
		border-radius: 10px;
		background-color: #fff;
		padding: 20px 20px;

	}

	table {
		border: 1px solid #ddd;
		border-collapse: collapse;
		width: 100%;
	}

	td {
		border: 1px solid #ddd;
		padding: 8px;
	}

	tr td:first-child {
		width: 40%;
		font-weight: 700;
		padding-left: 30px;

	}

	tr td:last-child {
		width: 60%;
	}

	.button {
		width: 100%;
		margin-top: 40px;
		background-color: #33cdc9;
		color: #fff;
		border: 3px solid #e6f5fd;
	}
</style>