<script setup>
	/**
	 * 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 fenzhen_list = ref(false)
	const getFenzhenList = async () => {
		uni.showLoading()
		const response = await $api('FenzhenList', {
			id: $props.id
		})
		uni.hideLoading()
		$response(response, () => {
			fenzhen_list.value = response.data
		})
	}

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

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

	const toRouter = () => {
		uni.navigateTo({
			url: '/pages/user/fenzhen/xindiantu?id=' + $props.id
		})
	}

	const timeShow = (time) => {
		let time_array = time.split(':')
		return `${time_array[0]}:${time_array[1]}`
	}

	const tip_show = ref(false)
	const tip_content = ref("")
	const getTipContent = async () => {
		uni.showLoading()
		const response = await $api('GetReadme')
		uni.hideLoading()
		$response(response, () => {
			tip_content.value = response.data.content
			tip_show.value = true
		})
	}
	const tipShowClick = () => {
		if (!!tip_content.value) {
			tip_show.value = true
		} else {
			getTipContent()
		}
	}

	onShow(() => {
		if (!!config_ref.value) {
			mountedAction()
		}
	})
</script>
<template>
	<view>
		<view v-if="!!$store.config">
			<view :ref="configRef"></view>
		</view>
		<view class="tip_dialog_wrapper" v-if="!!tip_show">
			<view class="tip_dialog_box_wrapper">
				<view @click="tip_show = !tip_show" class="tip_dialog_close_wrapper">
					<image src="@/static/assets/contrast/close@2x.png"></image>
				</view>
				<view class="tip_dialog_text_wrapper" v-html="tip_content"></view>
			</view>
		</view>
		<view v-if="!!fenzhen_list">
			<view class="order_info_wrapper">
				<view class="person_name_wrapper">
					<view class="person_name_text_wrapper">{{ fenzhen_list.info.name }}</view>
					<view class="person_sex_wrapper">{{ fenzhen_list.info.sex === 1 ? '男士' : '女士' }}</view>
				</view>
				<view class="info_box_wrapper">
					<view class="info_wrapper">
						<view class="info_title_wrapper">体检套餐：</view>
						<view class="info_text_wrapper">{{ fenzhen_list.info.combo_name }}</view>
					</view>
					<view class="info_wrapper info2_wrapper">
						<view class="info_title_wrapper">体检日期：</view>
						<view class="info_text_wrapper">{{ fenzhen_list.info.check_date }}</view>
					</view>
				</view>
				<view class="button_wrapper">
					<view @click="tipShowClick()" class="desc_wrapper">体检注意事项</view>
				</view>
			</view>
			<view class="tip_wrapper">
				<view class="tip_time_wrapper">
					<view class="tip_time_text_wrapper">开始体检时间</view>
					<view class="tip_time_value_wrapper">{{ timeShow(fenzhen_list.info.start_time) }}</view>
					<view class="tip_time_text_wrapper">— 预计结束时间</view>
					<view class="tip_time_value_wrapper">{{ timeShow(fenzhen_list.info.end_time) }}</view>
				</view>
				<view class="tip_box_wrapper">
					<view class="tip_icon_wrapper">
						<image src="@/static/assets/fenzhen/tip@2x.png"></image>
					</view>
					<view class="tip_text_wrapper">尊敬的客户，为了使您的体检流程更加顺畅，请按以下步骤提 示顺序逐项完成体检。</view>
				</view>
			</view>
			<view class="time_line_wrapper">
				<view class="time_line_title_wrapper">自助导检</view>
				<view class="time_line_box_wrapper">
					<view class="time_line_item_wrapper" :class="[
							`time_line_item-${i.status}_wrapper`
					]" v-for="(i,k) in fenzhen_list.list" :key="k">
						<view class="time_line_item_time_wrapper">
							<view v-if="!!i.time" class="time_line_item_time_value_wrapper">{{ i.time }}</view>
							<view class="time_line_item_time_dot_wrapper">
								<view class="time_line_item_time_dot_in_wrapper"></view>
							</view>
							<view v-if="!!i.time" class="time_line_item_time_line_wrapper"></view>
							<view v-if="!i.time" class="time_line_item_time_cover_wrapper"></view>
						</view>
						<view class="time_line_item_content_wrapper">
							<view class="time_line_item_triangle_wrapper"></view>
							<view class="time_line_item_flex_wrapper">
								<view class="time_line_item_title_wrapper">{{ k + 1 }}.{{ i.name }}</view>
								<view class="time_line_item_box_wrapper">{{ i.desc }}</view>
							</view>
							<view v-if="!!i.time && !!i.tip" class="time_line_item_line_wrapper"></view>
							<view v-if="!!i.time && !!i.tip" class="time_line_item_flex_wrapper">
								<view class="time_line_item_text_wrapper">{{ i.tip }}</view>
								<view v-if="i.more > 0" class="time_line_item_more_wrapper" @click="toRouter()">查看详情>></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<style scoped>
	.tip_dialog_text_wrapper {
		max-height: calc(100vh - 600rpx);
		overflow-y: auto;
	}

	.tip_dialog_wrapper {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		width: 750rpx;
		background: #00000060;
		margin: 0 auto;
		z-index: 9999;
	}

	.tip_dialog_close_wrapper {
		position: absolute;
		top: 30rpx;
		right: 40rpx;
		width: 26rpx;
		height: 26rpx;
	}

	.tip_dialog_close_wrapper image {
		width: 26rpx;
		height: 26rpx;
		display: block;
		object-fit: contain;
	}

	.tip_dialog_box_wrapper {
		position: absolute;
		width: 610rpx;
		background: #FFFFFF;
		border-radius: 15rpx;
		padding-left: 50rpx;
		padding-right: 50rpx;
		padding-bottom: 90rpx;
		padding-top: 130rpx;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.time_line_item_more_wrapper {
		font-size: 22rpx;
		color: #239EA3;
		line-height: 1;
		text-decoration-line: underline;
		margin-right: 19rpx;
	}

	.time_line_item_text_wrapper {
		font-weight: 500;
		font-size: 24rpx;
		color: #6E6E6E;
		line-height: 1;
		margin-left: 42rpx;
	}

	.time_line_item_line_wrapper {
		width: 550rpx;
		height: 1rpx;
		background: #E8E8E8;
		border-radius: 1rpx;
		margin: 13rpx auto 5rpx;
	}

	.time_line_item_box_wrapper {
		width: 400rpx;
		height: 40rpx;
		background: #5A75CA30;
		border-radius: 5rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #5A75CA;
		line-height: 40rpx;
		text-align: center;
		margin-right: 17rpx;
	}

	.time_line_item_title_wrapper {
		width: 140rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #0D0D0D;
		line-height: 40rpx;
		height: 40rpx;
		margin-left: 22rpx;
	}

	.time_line_item_flex_wrapper {
		margin-top: 15rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.time_line_item_time_cover_wrapper {
		position: absolute;
		width: 2rpx;
		top: -36rpx;
		height: 100rpx;
		left: 50%;
		background: #ffffff;
		transform: translateX(-50%);
		z-index: 99;
	}

	.time_line_item_time_line_wrapper {
		position: absolute;
		width: 2rpx;
		top: 0;
		bottom: 0;
		left: 50%;
		background: #DEDEDE;
		transform: translateX(-50%);
	}

	.time_line_item_time_dot_wrapper {
		position: absolute;
		width: 16rpx;
		height: 16rpx;
		background: #CFCECE60;
		border-radius: 50%;
		left: 50%;
		top: 50%;
		transform: translate(-50%, calc(-50% + 26rpx));
		z-index: 999;
	}

	.time_line_item_time_dot_in_wrapper {
		width: 8rpx;
		height: 8rpx;
		background: #CFCECE;
		border-radius: 50%;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.time_line_box_wrapper {
		margin-top: 28rpx;
	}

	.time_line_item_triangle_wrapper {
		width: 16rpx;
		height: 16rpx;
		border-left: 1rpx #E8E8E8 solid;
		border-bottom: 1rpx #E8E8E8 solid;
		background: #F8F8F8;
		position: absolute;
		top: 50%;
		left: -10rpx;
		transform: rotate(45deg);
	}

	.time_line_item_content_wrapper {
		width: 590rpx;
		background: #F8F8F8;
		border-radius: 5rpx;
		margin-left: 12rpx;
		position: relative;
		border: 1rpx #E8E8E8 solid;
		margin-top: 36rpx;
		padding-bottom: 15rpx;
	}

	.time_line_item_time_value_wrapper {
		width: 90rpx;
		height: 55rpx;
		background: #E4E4E4;
		border-radius: 28rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #212121;
		line-height: 55rpx;
		text-align: center;
		position: relative;
		z-index: 99;
	}

	.time_line_item_time_wrapper {
		width: 90rpx;
		position: absolute;
		left: 6rpx;
		right: 0;
		top: 0;
		bottom: 0;
	}

	.time_line_item_wrapper {
		width: calc(90rpx + 12rpx + 590rpx);
		display: flex;
		justify-content: end;
		margin: 0 auto;
		position: relative;
	}

	.time_line_title_wrapper {
		width: 180rpx;
		height: 60rpx;
		background: linear-gradient(90deg, #EDF6F5 0%, #BBDFE1 99%);
		border-radius: 0rpx 30rpx 30rpx 0rpx;
		font-weight: bold;
		font-size: 25rpx;
		color: #123531;
		text-align: center;
		line-height: 60rpx;
		margin-top: 26rpx;
		overflow: hidden;
	}

	.time_line_wrapper {
		width: 710rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 15rpx;
		margin: 53rpx auto 0;
		overflow: hidden;
		position: relative;
		padding-bottom: 30rpx;
	}

	.tip_text_wrapper {
		font-weight: 400;
		font-size: 22rpx;
		color: #E95515;
		line-height: 36rpx;
		margin-left: 10rpx;
	}

	.tip_icon_wrapper {
		width: 24rpx;
		height: 24rpx;
		margin-top: 5rpx;
	}

	.tip_icon_wrapper image {
		width: 24rpx;
		height: 24rpx;
		display: block;
		object-fit: contain;
	}

	.tip_box_wrapper {
		display: flex;
		margin-top: 20rpx;
	}

	.tip_time_value_wrapper {
		font-size: 36rpx;
		color: #239EA3;
		margin: 0 10rpx;
	}

	.tip_time_text_wrapper {
		font-size: 22rpx;
		color: #161616;
	}

	.tip_time_wrapper {
		display: flex;
		align-items: end;
		line-height: 1;
	}

	.tip_wrapper {
		width: calc(100% - 50px);
		margin: 32rpx auto 0;
	}

	.info2_wrapper {
		margin-top: 30rpx;
	}

	.info_box_wrapper {
		margin-top: 60rpx;
		margin-left: 29rpx;
	}

	.button_wrapper {
		display: flex;
		justify-content: end;
	}

	.desc_wrapper {
		width: 160rpx;
		height: 48rpx;
		background: #239EA3;
		border-radius: 5rpx;
		font-size: 20rpx;
		color: #FFFFFF;
		line-height: 48rpx;
		text-align: center;
		margin-right: 29rpx;
		margin-top: 24rpx;
	}

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

	.info_text_wrapper {
		font-size: 24rpx;
		color: #0F0F0F;
		line-height: 1;
	}

	.info_title_wrapper {
		font-size: 24rpx;
		color: #8B8B8B;
		line-height: 1;
	}

	.order_info_wrapper {
		width: 710rpx;
		height: 360rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 15rpx;
		margin: 20rpx auto 0;
		overflow: hidden;
	}

	.person_name_wrapper {
		display: flex;
		align-items: end;
		margin-top: 72rpx;
		margin-left: 29rpx;
	}

	.person_name_text_wrapper {
		font-weight: bold;
		font-size: 34rpx;
		color: #171717;
	}

	.person_sex_wrapper {
		font-size: 24rpx;
		color: #7E7E7E;
		margin-left: 15rpx;
	}

	.time_line_item-2_wrapper .time_line_item_time_value_wrapper,
	.time_line_item-1_wrapper .time_line_item_time_value_wrapper {
		background: #239EA3;
		color: #F8F8F8;
	}

	.time_line_item-2_wrapper .time_line_item_time_dot_wrapper,
	.time_line_item-1_wrapper .time_line_item_time_dot_wrapper {
		background: #239EA360;
	}

	.time_line_item-2_wrapper .time_line_item_time_dot_in_wrapper,
	.time_line_item-1_wrapper .time_line_item_time_dot_in_wrapper {
		background: #239EA3;
	}

	.time_line_item-2_wrapper .time_line_item_box_wrapper,
	.time_line_item-1_wrapper .time_line_item_box_wrapper {
		background: #6CAFB230;
		color: #239EA3;
	}

	.time_line_item--1_wrapper .time_line_item_time_value_wrapper {
		background: #239EA3;
		color: #F8F8F8;
	}

	.time_line_item--1_wrapper .time_line_item_time_dot_wrapper {
		background: #239EA360;
	}

	.time_line_item--1_wrapper .time_line_item_time_dot_in_wrapper {
		background: #239EA3;
	}

	.time_line_item--1_wrapper .time_line_item_box_wrapper {
		background: #E1AF6830;
		color: #CC913E;
	}
</style>