<script setup>
	import DraggableButton from "@/pages/components/goHome.vue";
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2024年9月11日 19:24:50
	 */
	import {
		ref
	} from 'vue'
	import {
		$api,
		$response
	} from '@/api'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		useStore
	} from '@/store'
	const $store = useStore()

	const $props = defineProps({
		id: {
			type: String,
			default: '0'
		}
	});

	const mountedAction = () => {
		getOrderInfo()
	}

	const config_ref = ref(null)
	const configRef = (e) => {
		if (!config_ref.value) {
			config_ref.value = e
			mountedAction()
		}
	}

	// const order_info = ref({
	// 	status: 1,
	// 	combo_id: 1,
	// 	combo_name: '中心动脉硬化检测体检',
	// 	item_ids: [1, 2, 3, 4],
	// 	item_info: [{
	// 		name: '抽血1'
	// 	}, {
	// 		name: '抽血2'
	// 	}, {
	// 		name: '抽血3'
	// 	}, {
	// 		name: '抽血4'
	// 	}],
	// 	name: '周子轩',
	// 	id_number: '130322199409090090',
	// 	order_number: '1000034',
	// 	order_time: '2024-12-12 12:12:12',
	// 	type: '个检',
	// 	price: '300.00'
	// })
	const order_info = ref({})
	const getOrderInfo = async () => {
		uni.showLoading()
		const response = await $api('GetOrderDetail', {
			openid: localStorage.getItem('OPENID'),
			id: $props.id,
		})
		uni.hideLoading()
		$response(response, () => {
			if (response.status) {
				order_info.value = response.data.info
			}
		})
	}

	const toOrderList = () => {
		uni.reLaunch({
			url: '/pages/main/order/order'
		})
	}
    const toIndex=()=>{
		uni.reLaunch({
			url: '/'
		})
	}
	onShow(() => {
		if (!!config_ref.value) {
			mountedAction()
		}
	})
</script>
<template>
	<DraggableButton />
	<view class="done_new_main">
		<view v-if="!!$store.config">
			<view :ref="configRef"></view>
		</view>
		<view v-if="!!order_info">
			<view v-if="order_info.status === 2" class="order_done_wrapper">
				<view class="order_icon_wrapper">
					<view class="order_icon_image_wrapper">
						<image src="@/static/assets/buy/yuan_duihao.png"></image>
					</view>
					<view class="order_icon_tip_wrapper">预约成功</view>
					<view v-if="order_info.checkup_type_id==4"
						style="font-size: 24rpx;padding:20rpx 40rpx; 0rpx 40rpx;color:#FF0000;">
						请您的配偶在15分钟内完成预约，否则本次预约将会失效，如有支付金额会原路退回
					</view>
					<view v-else
						style="font-size: 24rpx;padding:20rpx 40rpx; 0rpx 40rpx;color:#FF0000;text-align: center;">
						请提前10分钟到现场自助机取号，超时作废
					</view>
				</view>
				<view class="order_info_wrapper">
					<view class="order_info_title_wrapper">预约信息</view>
					<view class="order_info_line_wrapper">
						<view class="order_info_label_wrapper">预约人：</view>
						<view class="order_info_value_wrapper">{{ order_info.name }}</view>
					</view>
					<view class="order_info_line_wrapper">
						<view class="order_info_label_wrapper">预约诊区：</view>
						<view class="order_info_value_wrapper">
							<span style="color:#008F96;font-weight: bold;">秀英院区 </span>
							<span v-if="order_info.sex==1">健康管理中心(1楼男宾区)</span>
							<span v-if="order_info.sex==2">健康管理中心(2楼女宾区)</span>
						</view>
					</view>
					<view class="order_info_line_wrapper">
						<view class="order_info_label_wrapper">预约医生：</view>
						<view class="order_info_value_wrapper">{{order_info.doctor?order_info.doctor:'无'}}</view>
					</view>
					<view class="order_info_line_wrapper">
						<view class="order_info_label_wrapper">预约号源：</view>
						<view class="order_info_value_wrapper">{{ order_info.appointment_date }} {{ order_info.appointment_time }}</view>
					</view>
					<view class="order_info_line_wrapper" v-if="order_info.erxian_appointment_info &&order_info.erxian_appointment_info.length>0">
						<view class="order_info_label_wrapper">核磁项目:</view>
						<view class="order_info_value_wrapper" style="margin-left: 20rpx;" v-for="(item,index) in order_info.erxian_appointment_info" :key="index">
							<view>{{item.name}}</view>
							 <view style="margin-top: -10rpx;">预约时间：{{order_info.erxian_appointment_info[0].date}} {{order_info.erxian_appointment_info[0].time}}</view>
						</view>
					</view> 
				<!-- 	<view class="tishi">
						<view>
							<uni-icons type="info-filled" size="18" color="#009DA6"></uni-icons>
						</view>
						<view style="line-height: 38rpx;margin-left: 6rpx;">
							请提前10分钟凭身份证原件到现代妇儿秀英院区健康管理中心(2楼女宾区)签到。建议体检前3天清淡饮食、禁烟酒，体检当天需空腹，禁水禁食。咨询电话66595555、65781993。

						</view>
					</view> -->
					<view class="order_info_yuyue" @click="toOrderList()">
						查看预约记录
					</view>
				</view>
				<view @click="toIndex()" class="check_done_wrapper">返回首页</view>
				 
			</view>
		</view>
	</view>
</template>
<style>
	page {
		background: #ffffff;
	}
</style>
<style scoped>
	.next_done_wrapper{
		display: flex;
		width: 100%;
		justify-content: center;
		margin-top: 10rpx;
		color:#9E9E9F;
		font-size: 24rpx;
		font-weight: 700;
	}
	.done_new_main {
		background-color: #D8EEF3;
		height: calc(100vh - 130rpx);
		padding-top: 40rpx;

	}

	.check_done_wrapper {
		width: 660rpx;
		height: 70rpx;
		line-height: 70rpx;
		margin: 80rpx auto 0;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		background: #00939B;
		font-weight: 700;
		font-size: 29rpx;
		color: #F6FDFD;
		text-align: center;
	}

	.order_info_line_wrapper {
		display: flex;
		align-items: center;
		font-weight: normal;
		font-size: 24rpx;
		color: #666666;
		line-height: 50rpx;
		margin-top: 10rpx;
	}

	.order_info_value_wrapper {
		color: #3E3A39;
	}

	.order_info_price_wrapper {
		display: flex;
		align-items: center;
		justify-content: end;
		font-weight: normal;
		font-size: 24rpx;
		color: #333;
		line-height: 48rpx;
		margin-top: 20rpx;
	}

	.order_info_price_wrapper .order_info_value_wrapper {
		color: #E95513;
		font-size: 28rpx;
		font-weight: bolder;
	}

	.order_info_title_wrapper {
		font-weight: 700;
		font-size: 30rpx;
		color: #009FA8;
		line-height: 45rpx;
		border-bottom: solid 1rpx #DBDCDC;
		padding-bottom: 30rpx;
		margin-bottom: 10rpx;
	}

	.order_info_wrapper {
		background: #fff;
		border-radius: 20rpx;
		margin: 25rpx 40rpx;
		padding: 30rpx 48rpx;
	}

	.order_icon_tip_wrapper {
		font-weight: bold;
		font-size: 36rpx;
		color: #3E3A39;
		line-height: 1;
		margin-top: 31rpx;
		text-align: center;
	}

	.order_done_wrapper {
		width: 750rpx;

	}

	.order_icon_wrapper {
		background-color: #fff;
		margin-left: 40rpx;
		margin-right: 40rpx;
		border-radius: 20rpx;
		padding-top: 98rpx;
		height: 335rpx;
	}

	.order_icon_image_wrapper {
		width: 145rpx;
		height: 137rpx;
		margin: 0 auto;
	}

	.order_icon_image_wrapper image {
		width: 145rpx;
		height: 137rpx;
	}

	.tishi {
		display: flex;
		color: #009FA8;
		font-size: 20rpx;
		margin-top: 30rpx;
	}

	.order_info_label_wrapper {
		color: #9E9E9F;
	}

	.order_info_price_label_wrapper {
		color: #333;
		font-weight: 700;
	}
	.order_info_yuyue{
		color: #009FA8;
		font-size: 22rpx;
		text-align: center;
		margin-top: 60rpx;
	}
</style>