<script setup>
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2024年8月14日 20:38:40
	 */
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		$response
	} from '@/api'
	import {
		onShow
	} from '@dcloudio/uni-app'

	const $props = defineProps({
		info: {
			type: Object,
			default: () => {
				return {
					id: 0
				}
			}
		}
	});

	const order_info = ref(false)

	const deepInfo = () => {
		order_info.value = JSON.parse(JSON.stringify($props.info))
		checkStatus()
	}

	const countdown = ref(null)
	const checkStatus = () => {
		if (order_info.value.status === 1) {
			countdown.value = setInterval(() => {
				countdownRun()
			}, 500)
		}
	}
	const count_down_text = ref('限制时间')
	const countdownRun = () => {
		let seconds = Math.floor((order_info.value.end_time - (new Date() / 1000)) % 60)
		let minutes = Math.floor((order_info.value.end_time - (new Date() / 1000)) / 60)
		count_down_text.value = `${minutes}分${seconds}秒`
		if (order_info.value.end_time <= new Date() / 1000) {
			clearInterval(countdown.value)
			order_info.value.status = 3
		}
	}

	onMounted(() => {
		deepInfo()
	})
</script>
<template>
	<view>
		<view v-if="!!order_info" class="order_wrapper">
			<view class="order_status_wrapper" :class="[`status${order_info.status}`]">
				<view v-if="[1].includes(order_info.status)">
					待支付
				</view>
				<view v-if="[2].includes(order_info.status)">
					已预约
				</view>
				<view v-if="[3,5].includes(order_info.status)">
					交易关闭
				</view>
				<view v-if="[4].includes(order_info.status)">
					已完成
				</view>
			</view>
			<view class="combo_name_wrapper">{{ order_info.title }}</view>
			<view class="order_info_wrapper">
				<view class="order_info_line_wrapper">
					<view class="order_info_line_label_wrapper">体检人：</view>
					<view class="order_info_line_value_wrapper">{{ order_info.name }}</view>
				</view>
				<view class="order_info_line_wrapper">
					<view class="order_info_line_label_wrapper">预约时间：</view>
					<view class="order_info_line_value_wrapper">{{ order_info.time }}</view>
				</view>
				<view class="order_info_line_wrapper">
					<view class="order_info_line_label_wrapper">订单号：</view>
					<view class="order_info_line_value_wrapper">{{ order_info.order }}</view>
				</view>
				<view class="order_info_line_wrapper">
					<view class="order_info_line_label_wrapper">类型：</view>
					<view class="order_info_line_value_wrapper">{{ order_info.type }}</view>
				</view>
				<view v-if="[1,2,4,5].includes(order_info.status)" class="order_price_wrapper">
					<text v-if="[1].includes(order_info.status)">需支付</text>
					<text v-if="[2,4].includes(order_info.status)">实付款</text>
					<text v-if="[5].includes(order_info.status)">已退款</text>
					<text class="price_true"
						v-if="order_info.true_price !== order_info.price">(测试:{{ order_info.true_price }})</text>
					<text class="price_text">{{ order_info.price }}</text>
				</view>
				<view class="order_line_wrapper"></view>
				<view v-if="![3].includes(order_info.status)" class="order_pay_wrapper">
					<view class="order_pay_time_wrapper">
						<view v-if="[1].includes(order_info.status)">
							<text>请在</text>
							<text class="time_red">{{ count_down_text }}</text>
							<text>内完成支付</text>
						</view>
						<view v-if="[2,4].includes(order_info.status)">
							<view>支付时间</view>
							<view>{{ order_info.pay_time }}</view>
						</view>
						<view v-if="[5].includes(order_info.status)">
							<view>退款时间</view>
							<view>{{ order_info.refund_time }}</view>
						</view>
					</view>
					<view class="order_pay_button_wrapper">
						<view v-if="[1].includes(order_info.status)" class="button_item_wrapper pay_button_wrapper">继续付款</view>
						<view v-if="[2].includes(order_info.status)" class="button_item_wrapper change_button_wrapper">改约</view>
						<view v-if="[2].includes(order_info.status)" class="button_item_wrapper refund_button_wrapper">退款</view>
						<view v-if="[4].includes(order_info.status) && order_info.report"
							class="button_item_wrapper report_button_wrapper">
							查看报告
						</view>
						<view v-if="[4].includes(order_info.status) && order_info.report && !order_info.decode"
							class="button_item_wrapper decode_button_wrapper">报告解读</view>
					</view>
				</view>
				<view v-else class="order_pay_blank_wrapper"></view>
			</view>
		</view>
	</view>
</template>
<style scoped>
	.order_pay_button_wrapper {
		display: flex;
		align-items: center;
	}

	.button_item_wrapper {
		width: 180rpx;
		height: 60rpx;
		border-radius: 30rpx;
		line-height: 60rpx;
		text-align: center;
		font-weight: 400;
		font-size: 24rpx;
		margin-left: 20rpx;
	}

	.pay_button_wrapper {
		background: #239EA3;
		color: #FFFFFF;
	}

	.change_button_wrapper {
		background: #E1ECEE;
		color: #239EA3;
	}

	.refund_button_wrapper {
		background: #239EA3;
		color: #FFFFFF;
	}

	.report_button_wrapper {
		background: #E1ECEE;
		color: #239EA3;
	}

	.decode_button_wrapper {
		background: #239EA3;
		color: #FFFFFF;
	}

	.order_pay_blank_wrapper {
		height: 30rpx;
	}

	.order_pay_time_wrapper {
		font-weight: 500;
		font-size: 20rpx;
		color: #8B8B8B;
		line-height: 26rpx;
	}

	.time_red {
		color: #EC4D15;
		margin: 0 5rpx;
	}

	.order_pay_wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: calc(100% - 60rpx);
		margin: 0 auto;
		height: 100rpx;
	}

	.order_line_wrapper {
		width: 660rpx;
		height: 1rpx;
		background: #EBEAEA;
		margin: 19rpx auto 0;
	}

	.order_price_wrapper {
		font-weight: 400;
		color: #111111;
		line-height: 1;
		margin-top: 28rpx;
		text-align: right;
		margin-right: 30rpx;
		font-size: 26rpx;
	}

	.price_text {
		margin-left: 10rpx;
	}

	.price_true {
		font-size: 12rpx;
	}

	.order_info_wrapper {
		margin-top: 14rpx;
	}

	.order_info_line_wrapper {
		display: flex;
		align-items: center;
		margin-top: 24rpx;
	}

	.order_info_line_label_wrapper {
		width: 120rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #8B8B8B;
		line-height: 1;
		margin-left: 30rpx;
	}

	.order_info_line_value_wrapper {
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
		line-height: 1;
		margin-left: 10rpx;
	}

	.combo_name_wrapper {
		width: calc(550rpx - 30rpx);
		font-weight: bold;
		font-size: 32rpx;
		color: #0E0E0E;
		line-height: 1;
		margin-left: 30rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.order_status_wrapper {
		position: absolute;
		top: 30rpx;
		right: 27rpx;
		font-size: 26rpx;
	}

	.order_status_wrapper.status1 {
		color: #EC4D15;
	}

	.order_status_wrapper.status2 {
		color: #239EA3;
	}

	.order_status_wrapper.status3 {
		color: #EC4D15;
	}

	.order_status_wrapper.status4 {
		color: #131313;
	}

	.order_status_wrapper.status5 {
		color: #EC4D15;
	}

	.order_wrapper {
		position: relative;
		width: 710rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 10rpx;
		margin: 0 auto;
		padding-top: 35rpx;
		margin-top: 16rpx;
	}
</style>