<template>
	<!-- 水印 -->
	<view v-if="$isVip()">
		<watermark dark="light" />
		<liu-drag-button :canDocking="false" @clickBtn="$goRechargePage('watermark')">
			<c-lottie ref="cLottieRef" :src='$watermark()' width="94px" height='74px' :loop="true"></c-lottie>
		</liu-drag-button>
	</view>
	<view class="page-container">
		<view class="bg-color"></view>
		<!-- 导航栏 -->
		<NavBar title="订单详情" :bgColor="data.navBar.bgColor" :buttonGroup="buttonGroup"
			@button-click="util.clickTitlePopupButton" tipLayerType="fliggy-air-tickets-tip" isTipLayer
			tipLayerText="修改机票信息">
			<view class="custom-nav-bar">
				<view class="nav-content">
					<view class="left-icon flex flex-align-center" @click="onBack">
						<image src="/static/image/nav-bar/back-black.png" mode="widthFix" class="back-icon"></image>
					</view>
					<view class="tab-container">
						<view class="tab-item active">
							<text>出行安排</text>
							<view class="active-line hidden"></view>
						</view>
						<view class="tab-item">
							<text class="active-text">订单详情</text>
							<view class="active-line"></view>
						</view>
					</view>
					<view class="right-icons">
						<image src="/static/image/other/air-tickets/fliggy-air/share.png" mode="widthFix"
							class="nav-icon share-icon"></image>
						<image src="/static/image/other/air-tickets/fliggy-air/more.png" mode="widthFix"
							class="nav-icon more-icon"></image>
					</view>
				</view>
			</view>
		</NavBar>
		<!-- 滚动区域 -->
		<scroll-view @scroll="onPageScroll" scroll-y class="main-scroll">
			<view class="scroll-content">
				<!-- 状态区域 -->
				<view class="status-section">
					<view class="status-title-row">
						<text class="status-title">出票成功</text>
						<uni-icons type="right" size="12" color="#000000"></uni-icons>
					</view>
					<text class="status-desc">飞猪祝您旅途愉快</text>

					<view class="action-grid">
						<view class="action-item">
							<text>我要改签</text>
						</view>
						<view class="action-item">
							<text>我要退票</text>
						</view>
						<view class="action-item">
							<text>发票报销</text>
						</view>
						<view class="action-item">
							<text>选座值机</text>
						</view>
					</view>

					<!-- Unified Check-in Card -->
					<view class="check-in-card">
						<view class="tip-top">
							<view class="tt-left">
								<image src="/static/image/other/air-tickets/fliggy-air/tips.png" class="tip-icon">
								</image>
								<text class="tip-text">可前往航司官网办理乘机手续</text>
							</view>
							<view class="check-in-btn">选座帮助</view>
						</view>
						<view class="tip-bottom">
							<text class="flight-info-text">{{ airTickrtInfo.flightInfo.startCity }}-{{
								airTickrtInfo.flightInfo.endCity }} {{ flightInfo.date }}({{ flightInfo.week
								}})起飞</text>
						</view>
					</view>
				</view>

				<!-- 出行前必读 -->
				<view class="card alert-card">
					<view class="alert-header">
						<view class="alert-title-box">
							<image class="notice-icon" src="/static/image/other/air-tickets/fliggy-air/notice.png">
							</image>
							<text class="alert-title">出行前必读</text>
							<text class="alert-count blue">{{ airTickrtInfo.fligggyOrderInfo.tips.length }}条</text>
						</view>
						<view class="detail-btn">详情</view>
					</view>
					<view class="alert-tags">
						<text v-for="(item, index) in airTickrtInfo.fligggyOrderInfo.tips" :key="index">
							{{ item.content }}
							<text v-if="index < airTickrtInfo.fligggyOrderInfo.tips.length - 1" class="divider">|</text>
						</text>
					</view>
				</view>

				<!-- Red Packet Banner -->
				<view class="banner-box">
					<image class="w100" src="/static/image/other/air-tickets/fliggy-air/spring-festival-banner.png"
						mode="widthFix">
					</image>
				</view>

				<!-- Flight Info Card -->
				<view class="card flight-card">
					<view class="fc-header">
						<view class="fc-price">
							<text class="label">总价</text>
							<view class="symbol">¥</view>
							<text class="value" @click="goEdit">{{ airTickrtInfo.orderInfo.price }}</text>
							<uni-icons type="right" size="10" color="#1A1A1A"></uni-icons>
						</view>
						<view class="fc-rules">
							<text class="text">退改签、行李额、产品说明</text>
							<uni-icons type="right" size="10" color="#6F66D9"></uni-icons>
						</view>
					</view>
					<view class="order-no">
						<text>订单号 {{ airTickrtInfo.orderInfo.orderNo }}</text>
						<image src="/static/image/other/air-tickets/fliggy-air/copy-black.png" mode="widthFix"
							class="copy-icon">
						</image>
						<text class="copy-text">复制</text>
					</view>

					<view class="flight-detail-section">
						<view class="fds-header">
							<view class="tag">单程</view>
							<text class="date-info">{{ flightInfo.date }} {{ flightInfo.week }}
								{{ airTickrtInfo.flightInfo.startCity }}-{{ airTickrtInfo.flightInfo.endCity }}</text>
							<view class="status-badge">
								<text>收起</text>
								<uni-icons style="margin-left: 8rpx;margin-right: 2rpx;" type="up" size="10"
									color="#1A1A1A"></uni-icons>
							</view>
						</view>

						<view class="flight-route" @click="goEdit">
							<!-- Departure -->
							<view class="route-left">
								<text class="time">{{ airTickrtInfo.flightInfo.startTime }}</text>
								<view class="station">
									<view class="dot grey"></view>
									<text>{{ airTickrtInfo.flightInfo.startAirport }}</text>
								</view>
							</view>

							<!-- Airline Info (Middle) -->
							<view class="airline-middle">
								<view class="flight-meta">
									<image :src="`/static/image/other/air-tickets/air-line/${airlineInfo.icon}.png`"
										mode="widthFix" class="al-icon"></image>
									<text class="flex">{{ airlineInfo.name }}{{ airTickrtInfo.flightInfo.flightNumber
									}}<text class="divider">|</text></text>
									<text class="flex">{{ airTickrtInfo.flightInfo.seatCategory }}<text
											class="divider">|</text></text>
									<text class="flex">{{ airTickrtInfo.flightInfo.aircraftType }}<text
											class="divider">|</text></text>
									<view class="flex">
										<text>{{ airTickrtInfo.flightInfo.meal }}</text>
										<text class="divider">|</text>
									</view>
									<text>到达准点率{{ airTickrtInfo.flightInfo.onTimeRate }}</text>
									<image src="/static/image/other/air-tickets/fliggy-air/blue-right.png"
										class="right-icon">
									</image>
								</view>
								<view class="duration">
									<text>{{ airTickrtInfo.flightInfo.duration }}</text>
								</view>
							</view>

							<!-- Arrival -->
							<view class="route-left">
								<text class="time">{{ airTickrtInfo.flightInfo.endTime }}</text>
								<view class="station">
									<view class="dot grey"></view>
									<text>{{ airTickrtInfo.flightInfo.endAirport }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- Passenger Info -->
				<view class="card passenger-card">
					<view class="pc-header">
						<text class="pc-title">出行信息</text>
						<view class="pc-toggle">
							<text>收起</text>
							<uni-icons style="margin-left: 8rpx;" type="up" size="10" color="#1A1A1A"></uni-icons>
						</view>
					</view>

					<view class="passenger-list">
						<view class="passenger-item"
							:class="{ 'last-passenger': index === airTickrtInfo.passengersInfo.length - 1 }"
							v-for="(item, index) in airTickrtInfo.passengersInfo" :key="index">
							<text class="label" :class="{ 'empty': index !== 0 }">乘机人</text>
							<view class="info" @click="goEdit">
								<text class="name">{{ item.name }}</text>
								<text class="id-card">{{ item.idType }}：{{ item.idType.includes('身份证') ?
									showFristAndLastNumber(item.idNumber) : (item.idType.includes('护照') ?
										stringUtil.maskPassport(item.idNumber) : item.idNumber) }}</text>
								<view class="ticket-row">
									<text class="ticket-no">票号：{{ item.ticketNo }}</text>
									<image style="width: 10px;"
										src="/static/image/other/air-tickets/fliggy-air/copy-blue.png" mode="widthFix"
										class="copy-icon-sm"></image>
									<text class="action-text">复制</text>
									<text class="sub-text">({{ airTickrtInfo.flightInfo.startCity }}-{{
										airTickrtInfo.flightInfo.endCity }})</text>
								</view>
							</view>
						</view>
						<view class="contact-row">
							<text class="label">联系手机</text>
							<view class="contact-info">
								<text class="phone">{{ airTickrtInfo.ticketNumber.replace(/(\d{3})\d{4}(\d{4})/,
									'$1****$2') }}</text>
								<view class="edit-box">
									<image src="/static/image/other/air-tickets/fliggy-air/edit-icon.png"
										class="edit-icon">
									</image>
									<text>修改</text>
								</view>
							</view>
						</view>
						<view class="contact-tip">
							<text>请确保手机畅通，并随时关注邮件通知，以便变更在航班变动时通知送达</text>
						</view>
					</view>
				</view>

				<!-- Insurance Action -->
				<view class="insurance-bar">
					<view class="insurance-item">
						<text class="ins-text">去购买同航班婴童票</text>
						<view class="add-btn">
							<uni-icons type="plus" size="16" color="#0DA3E9"></uni-icons>
							<text style="margin-left: 8rpx;">加订婴童</text>
						</view>
					</view>
				</view>

				<!-- Order Info Footer -->
				<view class="card order-footer">
					<view class="section-title">订单信息</view>
					<view class="info-row">
						<text class="label">创建时间</text>
						<text class="val">{{ airTickrtInfo.orderInfo.orderTime }}</text>
					</view>
					<view class="info-row">
						<text class="label">服务方</text>
						<text class="val">{{ airTickrtInfo.fligggyOrderInfo.serviceProvider }}</text>
					</view>
					<view class="info-row">
						<text class="label">飞猪里程</text>
						<view class="val-flex">
							<text>{{ airTickrtInfo.fligggyOrderInfo.flyingPigMileage }} <uni-icons type="help" size="14"
									color="#999"></uni-icons></text>

							<view class="miles-tag">赚里程</view>
						</view>
					</view>
					<view class="info-row">
						<text class="label">交易流水号</text>
						<text class="val">{{ airTickrtInfo.fligggyOrderInfo.transactionSerialNumber }}</text>
					</view>
				</view>

				<!-- Bottom Actions -->
				<!-- Note: User image shows floating bottom bar but cut off. Assuming standard action buttons -->
			</view>
			<view class="safe-area-inset-bottom"></view> <!-- Spacer -->
		</scroll-view>

		<view class="footer-bar">
			<view class="flex flex-justify-between">
				<view class="flex-1 flex flex-align-center flex-justify-center">
					<image class="footer-icon" src="/static/image/other/air-tickets/fliggy-air/zhibo.png" />
					<text class="text">联系飞猪</text>
				</view>
				<view class="line"></view>
				<view class="flex-1 flex flex-align-center flex-justify-center">
					<image class="footer-icon" src="/static/image/other/air-tickets/fliggy-air/logo.png" />
					<text class="text">直播客服</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import NavBar from '@/components/nav-bar/nav-bar.vue';
import { ref, onMounted, reactive, toRefs, computed } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import defualtData from '@/pages/other/air-tickets/commom/defualt.json';
import airlineJson from '@/static/json/air-line.json';
import { util, numberUtil, stringUtil } from '@/utils/common.js';

const buttonGroup = [{
	name: "编辑机票信息",
	click: () => {
		goEdit()
	}
}]


function goEdit() {
	util.goPage(`/pages/other/air-tickets/edit/edit?ticketsApp=fliggy&storageKey=${data.STORAGE_KEY}`)
}

const data = reactive({
	STORAGE_KEY: 'fliggyAirTicketsInfo',
	navBar: {
		bgColor: "transparent",
	},
	airTickrtInfo: JSON.parse(JSON.stringify(defualtData)),

})

let { airTickrtInfo } = toRefs(data);

//航空公司信息
const airlineInfo = computed(() => {
	const airline = airlineJson.airLine.find(item => item.code === airTickrtInfo.value.flightInfo.airlineCode);
	console.log('airline', airline);
	return airline || {};
});

/**
 * 飞机日期信息
 */
const flightInfo = computed(() => {
	const dateStr = airTickrtInfo.value.flightInfo.date;
	if (!dateStr) return { date: '', week: '' };

	// 兼容 iOS：将 YYYY-MM-DD 转换为 YYYY/MM/DD
	const date = new Date(dateStr.replace(/-/g, '/'));
	const month = date.getMonth() + 1;
	const day = date.getDate();
	const weeks = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
	const week = weeks[date.getDay()];

	return {
		date: `${month}月${day}日`,
		week
	}
});
onMounted(() => {
});

// 深度合并函数
const deepMerge = (target, source) => {
	for (const key in source) {
		if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
			if (!target[key] || typeof target[key] !== 'object') {
				target[key] = {};
			}
			deepMerge(target[key], source[key]);
		} else {
			target[key] = source[key];
		}
	}
	return target;
};

const showFristAndLastNumber = (str) => {
	if (!str) {
		return '';
	}
	const len = str.length;
	if (len <= 2) {
		return str;
	}
	return str.slice(0, 1) + '*'.repeat(len - 2) + str.slice(-1);
}

onShow(() => {
	const stored = uni.getStorageSync(data.STORAGE_KEY) || "";
	if (stored) {
		// 使用默认数据作为基础，将存储的数据合并进去
		// 这样可以确保新增的默认字段不会被旧的存储数据覆盖丢失
		const baseData = JSON.parse(JSON.stringify(defualtData));
		const mergedData = deepMerge(baseData, stored);
		Object.assign(data.airTickrtInfo, mergedData);
	}
	// #ifdef APP-PLUS
	util.setAndroidSystemBarColor('#ffffff')
	setTimeout(() => {
		plus.navigator.setStatusBarStyle("dark");
	}, 500)
	// #endif
})

const onPageScroll = (e) => {
	const scrollTop = e.detail.scrollTop;
	if (scrollTop > 20) {
		data.navBar.bgColor = "#FCE041";
	} else {
		data.navBar.bgColor = "transparent";
	}
}

const onBack = () => {
	console.log('onBack');
	uni.navigateBack();
}
</script>

<style>
@import "/common/main.css";
</style>

<style lang="less" scoped>
.page-container {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	position: relative;
	background-color: #F5F6FA;

	.bg-color {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		background: linear-gradient(180deg, #FCE041 0%, rgba(252, 224, 65, 0) 100%);
		height: 540rpx;
		z-index: 0;
	}
}

.main-scroll {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.scroll-content {
	padding-top: calc(44px + var(--status-bar-height));
	padding-bottom: 26px;
}

/* Custom Nav Bar */
.custom-nav-bar {

	.nav-content {
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 12px;

		.left-icon {
			width: 120rpx;

			.back-icon {
				width: 44rpx;
				height: 44rpx;
			}
		}

		.tab-container {
			display: flex;
			align-items: center;

			.tab-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;

				text {
					font-size: 30rpx;
					font-weight: 400;
					color: #1A1A1A;
				}

				.active-text {
					font-weight: bold;
					margin-left: 58rpx;
				}

				.active-line {
					width: 56rpx;
					height: 6rpx;
					background: #000000;
					border-radius: 4rpx;
					position: absolute;
					bottom: -10rpx;
					left: 50%;

					&.hidden {
						opacity: 0;
					}
				}
			}
		}

		.right-icons {
			width: 120rpx;
			display: flex;
			align-items: center;

			.nav-icon {
				flex-shrink: 0;
				width: 48rpx;
				height: 48rpx;
			}

			.more-icon {
				width: 44rpx;
				height: 44rpx;
				margin-left: 24rpx;
			}
		}
	}
}




/* Utils */
.blue {
	color: #4a90e2;
}

.hidden {
	visibility: hidden;
}

.mt-20 {
	margin-top: 20rpx;
}

/* Status Section */
.status-section {
	margin-top: 22rpx;
	margin-bottom: 20rpx;
	padding: 0 18rpx;

	.status-title-row {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
		line-height: 46rpx;
		padding: 0 18rpx;

		.status-title {
			font-size: 40rpx;
			font-weight: bold;
			color: #1A1A1A;
		}
	}

	.status-desc {
		padding: 0 18rpx;
		font-size: 24rpx;
		color: #1A1A1A;
		line-height: 28rpx;
		margin-bottom: 28rpx;
		display: block;
	}

	.action-grid {
		display: flex;
		justify-content: space-between;
		margin-bottom: 16rpx;
		padding: 0 6rpx;

		.action-item {
			background: #fff;
			padding: 18rpx 20rpx;
			border-radius: 40rpx;
			font-size: 30rpx;
			line-height: 35rpx;
			font-weight: bold;
			color: #1A1A1A;
		}
	}

	/* Unified Check-in Card */
	.check-in-card {
		background: #fff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		border: 1rpx solid #ffffff;

		.tip-top {
			background: #FFF5F5;
			padding: 20rpx 26rpx 14rpx 28rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.tt-left {
				display: flex;
				align-items: center;

				.tip-icon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
					flex-shrink: 0;
				}

				.tip-text {
					font-size: 28rpx;
					font-weight: bold;
					color: #1A1A1A;
					line-height: 32rpx;
				}
			}

			.check-in-btn {
				background: #FFE33C;
				color: #1A1A1A;
				font-size: 24rpx;
				padding: 8rpx 22rpx;
				border-radius: 30rpx;
				line-height: 28rpx;
				font-weight: bold;
			}
		}

		.tip-bottom {
			padding: 22rpx 24rpx 32rpx;
			background: #fff;

			.flight-info-text {
				font-size: 24rpx;
				color: #636363;
				line-height: 28rpx;
			}
		}
	}
}

/* Alert Card */
.card {
	background: #fff;
	border-radius: 20rpx;
	margin: 0 18rpx 16rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
}

.alert-card {
	padding: 18rpx 24rpx 14rpx;

	.alert-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 6rpx;

		.alert-title-box {
			display: flex;
			align-items: center;

			.notice-icon {
				width: 36rpx;
				height: 36rpx;
				margin-right: 4rpx;
			}

			.alert-title {
				font-size: 28rpx;
				font-weight: bold;
				color: #1A1A1A;
				margin-right: 4rpx;
				line-height: 28rpx;
			}

			.alert-count {
				font-size: 28rpx;
				line-height: 28rpx;
				font-weight: bold;
				color: #6968D1;
			}
		}

		.detail-btn {
			border: 1px solid #CFCFCF;
			padding: 10rpx 46rpx;
			border-radius: 26rpx;
			font-size: 24rpx;
			line-height: 28rpx;
			font-weight: bold;
			color: #1A1A1A;
		}
	}

	.alert-tags {
		display: flex;
		flex-wrap: wrap;
		font-size: 24rpx;
		color: #636363;
		line-height: 41rpx;

		.divider {
			color: #D8D8D8;
			margin: 0 6rpx;
		}
	}
}

/* Banner */
.banner-box {
	display: flex;
	width: 100%;
	padding: 0 18rpx;
	margin-bottom: 16rpx;
}

/* Flight Card */
.flight-card {
	margin-left: 0;
	margin-right: 0;
	border-radius: 0;
	padding: 18rpx 24rpx 0;

	.fc-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 18rpx;

		.fc-price {
			display: flex;
			align-items: center;

			.label {
				font-size: 24rpx;
				color: #636363;
			}

			.symbol {
				font-size: 24rpx;
				color: #1A1A1A;
				font-weight: 500;
				margin-left: 4rpx;
			}

			.value {
				font-size: 32rpx;
				color: #1A1A1A;
				font-weight: 500;
				line-height: 32rpx;
			}
		}

		.fc-rules {
			color: #6F66D9;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			line-height: 24rpx;

			.text {
				margin-right: 4rpx;
			}
		}
	}

	.order-no {
		font-size: 24rpx;
		color: #1A1A1A;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		font-weight: 400;
		line-height: 24rpx;

		.copy-icon {
			width: 20rpx;
			height: 20rpx;
			margin-left: 8rpx;
			margin-right: 8rpx;
		}

		.copy-text {
			color: #1A1A1A;
			font-weight: 500;
		}
	}

	.flight-detail-section {
		border-top: 0.5px solid #D8D8D8;
		padding: 26rpx 2rpx 24rpx 6rpx;

		.fds-header {
			display: flex;
			align-items: center;
			margin-bottom: 22rpx;

			.tag {
				background: #FFDE3B;
				color: #1A1A1A;
				font-size: 22rpx;
				line-height: 22rpx;
				padding: 8rpx 6rpx;
				border-radius: 4rpx;
				font-weight: bold;
				margin-right: 10rpx;
			}

			.date-info {
				font-size: 26rpx;
				color: #1A1A1A;
				font-weight: bold;
				line-height: 26rpx;
				flex: 1;
			}

			.status-badge {
				display: flex;
				align-items: center;
				font-weight: bold;
				font-size: 24rpx;
				line-height: 24rpx;
				color: #1A1A1A;
			}
		}

		.flight-route {
			padding-left: 10rpx;
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: flex-start;

			.route-left {
				display: flex;
				align-items: center;
				line-height: 28rpx;

				.time {
					width: 84rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: #1A1A1A;
					font-family: 'alipayNumber';
					margin-right: 10rpx;
				}

				.station {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					line-height: 28rpx;
					color: #1A1A1A;
					font-weight: bold;
					min-height: 40rpx;

					.dot {
						width: 18rpx;
						height: 18rpx;
						border-radius: 50%;
						flex-shrink: 0;
						margin-right: 12rpx;

						&.grey {
							background: #ddd;
						}
					}
				}
			}

			.airline-middle {
				border-left: 6rpx solid #D8D8D8;
				position: relative;
				margin-left: 100rpx;
				padding: 22rpx 16rpx;
				font-size: 24rpx;

				.flight-meta {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #979797;
					// line-height: 24rpx;
					margin-bottom: 10rpx;
					flex-wrap: wrap;

					.al-icon {
						width: 28rpx;
						height: 28rpx;
					}

					.divider {
						color: #ddd;
						margin: 0 3px;
					}

					.right-icon {
						width: 28rpx;
						height: 28rpx;
						margin-left: 4rpx;
					}
				}

				.ontime-info {
					display: flex;
					align-items: center;
					gap: 4rpx;
					font-size: 24rpx;
					color: #979797;


				}

				.duration {
					position: absolute;
					left: -12rpx;
					top: 40%;
					font-size: 22rpx;
					color: #979797;
					transform: translateX(-100%);
				}
			}
		}
	}
}

/* Passenger Card */
.passenger-card {
	margin-left: 0;
	margin-right: 0;
	border-radius: 0;
	padding: 26rpx 24rpx 28rpx;

	.pc-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 28rpx;

		.pc-title {
			font-size: 28rpx;
			font-weight: bold;
			line-height: 28rpx;
			color: #1A1A1A;
		}

		.pc-toggle {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			line-height: 24rpx;
			font-weight: bold;
			color: #1A1A1A;
		}
	}

	.passenger-list {
		.passenger-item {
			display: flex;
			align-items: flex-start;

			.label {
				font-size: 24rpx;
				color: #636363;
				width: 100rpx;
				margin-right: 60rpx;
				line-height: 24rpx;

				&.empty {
					width: 100rpx;
					opacity: 0;
				}
			}

			.info {
				flex: 1;
				display: flex;
				flex-direction: column;
				gap: 10rpx;

				.name {
					font-size: 24rpx;
					color: #1A1A1A;
					line-height: 24rpx;
					margin-bottom: 16rpx;
				}

				.id-card {
					font-size: 24rpx;
					line-height: 24rpx;
					color: #1A1A1A;
					margin-bottom: 18rpx;
				}

				.ticket-row {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					line-height: 24rpx;
					color: #1A1A1A;
					margin-bottom: 50rpx;

					.action-text {
						flex-shrink: 0;
						color: #6F66D9;
						font-weight: 500;
						margin-left: 8rpx;
					}

					.copy-icon-sm {
						flex-shrink: 0;
						margin-left: 8rpx;
					}

					.sub-text {
						flex-shrink: 0;
						color: #999;
						margin-left: 8rpx;
					}

					.ticket-no {
						flex-shrink: 0;
						color: #333;
					}
				}
			}
		}

		.passenger-item.last-passenger {
			padding-bottom: 24rpx;
			box-shadow: 0 0.5px 0 0 #D8D8D8;

			.ticket-row {
				margin-bottom: 0 !important;
			}
		}

		.contact-row {
			margin-top: 26rpx;
			display: flex;
			align-items: center;
			line-height: 28rpx;

			.label {
				font-size: 24rpx;
				color: #636363;
				width: 100rpx;
				margin-right: 60rpx;
			}

			.contact-info {
				flex: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.phone {
					font-size: 24rpx;
					color: #1A1A1A;
				}

				.edit-box {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #6F66D9;

					.edit-icon {
						width: 28rpx;
						height: 28rpx;
						margin-right: 4rpx;
					}
				}
			}
		}

		.contact-tip {
			margin-left: 160rpx;
			margin-top: 10rpx;
			font-size: 24rpx;
			color: #979797;
			line-height: 34rpx;
		}
	}
}

.insurance-bar {
	background: #fff;
	margin: 0 0 16rpx;
	padding: 18rpx;

	.insurance-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #F5F6F8;
		padding: 22rpx 44rpx;

		.ins-text {
			font-size: 26rpx;
			font-weight: bold;
			color: #1A1A1A;
			line-height: 26rpx;
		}

		.add-btn {
			background-color: #EAF5FC;
			border-radius: 12rpx;
			padding: 10rpx 14rpx 10rpx 8rpx;
			display: flex;
			align-items: center;
			font-size: 26rpx;
			line-height: 26rpx;
			color: #0DA3E9;
		}
	}


}

/* Order Footer */
.order-footer {
	padding: 26rpx 24rpx 1rpx;
	margin: 0;
	border-radius: 0;

	.section-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #1A1A1A;
		margin-bottom: 46rpx;
		line-height: 28rpx;
	}

	.info-row {
		display: flex;
		margin-bottom: 34rpx;
		font-size: 26rpx;
		line-height: 26rpx;
		align-items: center;

		.label {
			color: #636363;
			width: 170rpx;
			margin-right: 4rpx;
			line-height: 26rpx;
		}

		.val {
			color: #1A1A1A;
			// font-family: 'alipayNumber';
		}

		.val-flex {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #1A1A1A;
			flex: 1;

			.miles-tag {
				background: #F7F7F7;
				padding: 12rpx 18rpx;
				border-radius: 24rpx;
				font-size: 24rpx;
				line-height: 24rpx;
				color: #636363;
				font-weight: bold;
			}
		}
	}
}

.safe-area-inset-bottom {
	height: 40px;
	height: calc(40px + constant(safe-area-inset-bottom));
	height: calc(40px + env(safe-area-inset-bottom));
}

.footer-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	padding: 16rpx 0;
	padding-bottom: calc(16rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
	box-shadow: 0 -2rpx 40rpx 2rpx #e5e5e5;
	z-index: 999;

	.line {
		height: 70rpx;
		width: 1px;
		background: #DCDCDC;
	}

	.footer-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 16rpx;
	}

	.text {
		font-size: 30rpx;
		line-height: 30rpx;
		color: #1A1A1A;
	}
}
</style>