<script setup>
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2023年5月30日 13:41:25
	 */
	import {
		ref
	} from 'vue'
	import {
		$image,
		$response,
		OrderInfoAction,
	} from '@/api'
	import {
		onShow
	} from '@dcloudio/uni-app'
	const $props = defineProps({
		id: {
			type: Number,
			default: 0
		}
	});
	onShow(() => {
		OrderInfo()
	})
	const buy_info = ref(false)
	const order_info = ref(false)
	const OrderInfo = async () => {
		const response = await OrderInfoAction({
			id: $props.id
		})
		$response(response, () => {
			let info = response.data.info
			buy_info.value = JSON.parse(info.buy_info)
			order_info.value = info
		})
	}

	const tab_active = ref(0)
	const tabChange = (type) => {
		tab_active.value = type
	}
</script>
<template>
	<view>
		<view class="top_line_wrapper"></view>
		<view v-if="!!buy_info">
			<view class="top_info_wrapper">
				<view class="tab_wrapper">
					<view @click="tabChange(0)" class="tab_item_wrapper" :class="[
						tab_active === 0 ? 'tab_item_text_active_wrapper' : ''
					]">
						<view class="tab_item_text_wrapper">项目详情</view>
						<view class="tab_item_line_wrapper"></view>
					</view>
					<view @click="tabChange(1)" class="tab_item_wrapper" :class="[
						tab_active === 1 ? 'tab_item_text_active_wrapper' : ''
					]">
						<view class="tab_item_text_wrapper">订单详情</view>
						<view class="tab_item_line_wrapper"></view>
					</view>
				</view>
			</view>
			<view class="center_show_wrapper">
				<view v-if="tab_active === 0">
					<view v-if="buy_info.items.length > 0" class="items_items_wrapper">
						<view class="title_wrapper">
							<view class="title_line_wrapper"></view>
							<view class="title_text_wrapper">自选项目</view>
						</view>
						<view class="items_list_wrapper">
							<view class="items_list_item_wrapper" v-for="(i,k) in buy_info.items" :key="k">
								<view class="items_list_item_text_wrapper">{{ k+1 }}.{{ i.name }}</view>
								<view class="items_list_item_right_wrapper">
									<view class="items_list_item_price_wrapper">￥{{ Number(i.price).toFixed(2) }}</view>
								</view>
							</view>
						</view>
					</view>
					<view v-if="buy_info.items.length > 0" class="list_break_wrapper"></view>
					<view v-if="!!buy_info.combo && !!buy_info.combo.id" class="combo_items_wrapper">
						<view class="title_wrapper">
							<view class="title_line_wrapper"></view>
							<view class="title_text_wrapper">{{ buy_info.combo.name }}</view>
						</view>
						<view class="items_list_wrapper">
							<view class="items_list_item_wrapper" v-for="(i,k) in buy_info.combo.items" :key="k">
								<view class="items_list_item_text_wrapper">{{ k+1 }}.{{ i.name }}</view>
								<view class="items_list_item_price_wrapper">￥{{ Number(i.price).toFixed(2) }}</view>
							</view>
						</view>
					</view>
					<view v-if="!!buy_info.group && !!buy_info.group.id" class="combo_items_wrapper">
						<view class="title_wrapper">
							<view class="title_line_wrapper"></view>
							<view class="title_text_wrapper">团检项目</view>
						</view>
						<view class="items_list_wrapper">
							<view class="items_list_item_wrapper" v-for="(i,k) in buy_info.group.items" :key="k">
								<view class="items_list_item_text_wrapper">{{ k+1 }}.{{ i.name }}</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="tab_active === 1" class="readme_wrapper">
					<view class="readme_box_wrapper">
						<view v-if="!!order_info" class="done_info_wrapper">
							<view class="combo_line_wrapper">
								<view class="combo_line_title_wrapper">体检人：</view>
								<view class="combo_line_content_wrapper">{{ order_info.name }}</view>
							</view>
							<view class="combo_line_wrapper">
								<view class="combo_line_title_wrapper">证件号码：</view>
								<view class="combo_line_content_wrapper">{{ order_info.id_number }}</view>
							</view>
							<view class="combo_line_wrapper">
								<view class="combo_line_title_wrapper">预约单号：</view>
								<view class="combo_line_content_wrapper">{{ order_info.show }}</view>
							</view>
							<view class="combo_line_wrapper">
								<view class="combo_line_title_wrapper">体检单号：</view>
								<view class="combo_line_content_wrapper">{{ order_info.appointment_number }}</view>
							</view>
							<view class="combo_line_wrapper">
								<view class="combo_line_title_wrapper">预约时间：</view>
								<view class="combo_line_content_wrapper">{{ order_info.appointment_time }}</view>
							</view>
							<view class="combo_line_wrapper">
								<view class="combo_line_title_wrapper">类型：</view>
								<view class="combo_line_content_wrapper">{{ Number(order_info.type) === 1 ? '个检' : '团检' }}</view>
							</view>
							<view class="combo_price_wrapper">
								<view class="combo_price_title_wrapper">订单金额：</view>
								<view class="combo_price_content_wrapper">
									<text>￥{{ Number(order_info.price).toFixed(2) }}</text>
									<text
										v-if="Number(order_info.price) !== Number(order_info.true_price)">(测试：{{ Number(order_info.true_price).toFixed(2) }})</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="tab_active === 0" class="bottom_wrapper">
				<view class="bottom_box_wrapper">
					<view class="bottom_count_wrapper">
						<view>合计</view>
					</view>
					<view class="bottom_line_wrapper"></view>
					<view class="bottom_price_wrapper">
						<view class="bottom_price_price_wrapper">
							<view class="bottom_price_price_icon_wrapper">￥</view>
							{{ Number(order_info.price).toFixed(2) }}
						</view>
					</view>
				</view>
				<view class="blank_wrapper"></view>
			</view>
		</view>
		<view class="blank_wrapper"></view>
	</view>
</template>
<style>
	page {
		background: #ffffff;
	}
</style>
<style scoped>
	.combo_price_content_wrapper {
		color: #FF0000;
	}

	.combo_price_title_wrapper {
		color: #000000;
		font-weight: bold;
	}

	.combo_line_content_wrapper {
		color: #000000;
	}

	.combo_line_title_wrapper {
		color: #666666;
	}

	.combo_line_wrapper,
	.combo_price_wrapper {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #666666;
		line-height: 1;
		height: 50rpx;
		line-height: 50rpx;
		margin-left: 25rpx;
	}

	.combo_break_wrapper {
		width: 559rpx;
		height: 1rpx;
		background: #0BBACF;
		margin: 26rpx auto 30rpx;
	}

	.combo_name_wrapper {
		font-size: 30rpx;
		font-weight: 500;
		color: #0BBACF;
		line-height: 1;
		margin-top: 36rpx;
		margin-left: 58rpx;
	}

	.top_info_wrapper {
		position: fixed;
		width: 100%;
	}

	.clear_button_text_wrapper {
		margin-left: 21rpx;
	}

	.clear_button_wrapper {
		position: absolute;
		top: 50%;
		right: 30rpx;
		transform: translateY(-50%);
		display: flex;
		align-items: center;
		font-size: 26rpx;
		font-weight: 500;
		color: #7D7D7D;
		line-height: 1;
	}

	.clear_button_icon_wrapper image {
		width: 24rpx;
		height: 26rpx;
		display: block;
	}

	.clear_button_icon_wrapper {
		width: 24rpx;
		height: 26rpx;
	}

	.items_list_item_del_wrapper image {
		width: 24rpx;
		height: 26rpx;
		display: block;
	}

	.items_list_item_del_wrapper {
		width: 24rpx;
		height: 26rpx;
		margin-right: 13rpx;
	}

	.items_list_item_right_wrapper {
		display: flex;
		align-items: center;
	}

	.list_break_wrapper {
		width: 750rpx;
		height: 14rpx;
		background: #F3F3F3;
	}

	.bottom_button_next_wrapper {
		width: 50%;
		background: #ff6201;
	}

	.bottom_button_items_wrapper {
		width: 50%;
	}

	.bottom_button_next_long_wrapper {
		width: 100%;
	}

	.readme_box_wrapper {
		width: 680rpx;
		font-size: 28rpx;
		color: #000000;
		line-height: 52rpx;
		margin: 20rpx auto 0;
	}

	.center_show_wrapper {
		position: fixed;
		bottom: calc(150rpx + var(--safe-area-inset-bottom));
		top: 100rpx;
		left: 0;
		right: 0;
		overflow-y: auto;
		background: #ffffff;
	}

	.readme_wrapper {
		height: calc(100% - 100rpx);
		width: 100%;
	}

	.bottom_price_price_icon_wrapper {
		font-size: 24rpx;
		font-weight: 400;
	}

	.bottom_price_price_wrapper {
		font-size: 36rpx;
		font-weight: 800;
		color: #F02E50;
		line-height: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.bottom_price_original_price_wrapper {
		font-size: 22rpx;
		font-weight: 800;
		text-decoration: line-through;
		color: #444444;
		line-height: 1;
	}

	.bottom_button_wrapper {
		width: 320rpx;
		height: 68rpx;
		background: #0BBACF;
		border-radius: 34rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 68rpx;
		text-align: center;
		overflow: hidden;
	}

	.bottom_price_wrapper {
		text-align: right;
		margin-right: 30rpx;
		width: 200rpx;
	}

	.bottom_line_wrapper {
		width: 1rpx;
		height: 53rpx;
		background: #dedede;
	}

	.bottom_count_wrapper {
		width: 169rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #000000;
		line-height: 40rpx;
		text-align: center;
	}

	.bottom_box_wrapper {
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: calc(100% - 50rpx);
	}

	.bottom_wrapper {
		position: fixed;
		width: 750rpx;
		background: #ffffff;
		bottom: 0;
	}

	.items_list_item_price_wrapper {
		font-size: 30rpx;
		font-weight: 500;
		color: #F02E50;
		line-height: 1;
		position: absolute;
		left: 500rpx;
	}

	.items_list_item_text_wrapper {
		margin-left: 22rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #222222;
		line-height: 1;
		max-width: 450rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.items_list_item_wrapper {
		width: 690rpx;
		height: 94rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #EBEBEB;
		margin: 0 auto;
		position: relative;
	}

	.title_text_wrapper {
		font-size: 30rpx;
		font-weight: 500;
		color: #222222;
		line-height: 1;
		margin-left: 15rpx;
	}

	.items_items_wrapper {
		background: #ffffff;
	}

	.combo_items_wrapper {
		background: #ffffff;
	}

	.title_wrapper {
		display: flex;
		align-items: center;
		height: 95rpx;
		width: 750rpx;
		background: #ffffff;
		border-bottom: 2rpx solid #EBEBEB;
		position: relative;
	}

	.title_line_wrapper {
		width: 7rpx;
		height: 27rpx;
		border-radius: 999rpx;
		margin-left: 30rpx;
	}

	.combo_items_wrapper>.title_wrapper>.title_line_wrapper {
		background: #0bbacf;
	}

	.items_items_wrapper>.title_wrapper>.title_line_wrapper {
		background: #fa7c2f;
	}

	.tab_item_line_wrapper {
		width: 43rpx;
		height: 6rpx;
		background: #0BBACF;
		border-radius: 3rpx;
		margin: 0 auto;
		opacity: 0;
	}

	.tab_item_wrapper {
		height: 88rpx;
		width: 200rpx;
		text-align: center;
	}

	.tab_item_text_wrapper {
		font-size: 28rpx;
		font-weight: 500;
		color: #3F3F3F;
		line-height: 83rpx;
	}

	.tab_wrapper {
		width: 750rpx;
		height: 88rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 13rpx;
	}

	.tab_item_text_active_wrapper>.tab_item_text_wrapper {
		color: #0BBACF;
	}

	.tab_item_text_active_wrapper>.tab_item_line_wrapper {
		opacity: 1;
	}

	.combo_info_wrapper {
		height: 125rpx;
		background: #ffffff;
		overflow: hidden;
	}

	.combo_info_name_wrapper {
		font-size: 30rpx;
		font-weight: 500;
		color: #222222;
		line-height: 1;
		margin-top: 29rpx;
		margin-left: 39rpx;
		max-width: 600rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.combo_info_tag_wrapper {
		display: flex;
		align-items: center;
		margin-top: 19rpx;
		margin-left: 39rpx;
	}

	.combo_tag_sex_wrapper {
		padding-left: 10rpx;
		padding-right: 10rpx;
		height: 28rpx;
		border: 1px solid;
		border-radius: 6rpx;
		font-size: 20rpx;
		font-weight: 500;
		line-height: 28rpx;
		text-align: center;
		margin-right: 10rpx;
	}

	.combo_tag_sex_all_wrapper {
		color: #8EC363;
		border-color: #8EC363;
	}

	.combo_tag_sex_nan_wrapper {
		color: #5FCAEA;
		border-color: #5FCAEA;
	}

	.combo_tag_sex_nv_wrapper {
		color: #EF7389;
		border-color: #EF7389;
	}
</style>