<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="codefun-flex-col section">
		<NavBar :bgColor="data.navBar.bgColor" :buttonGroup="buttonGroup" @button-click="util.clickTitlePopupButton"
			tipLayerType="qunar-train-tickets-tip" isTipLayer tipLayerText="修改车票信息">
			<template v-slot:right>
				<view class="codefun-flex-col group_2">
					<view class="codefun-flex-row group_3">
						<image class="image_4" src="/static/image/other/train-tickets/qunar/tuigaishuoming.png" />
						<image class="image_4 ml-25" src="/static/image/other/train-tickets/qunar/kefu.png" />
					</view>
					<view class="codefun-flex-row codefun-mt-4">
						<text class="font text">退改说明</text>
						<text class="font text_2 ml-11">客服</text>
					</view>
				</view>
			</template>
		</NavBar>
		<view class="codefun-flex-col">
			<view class="codefun-flex-row codefun-justify-between codefun-items-center group_4">
				<view class="codefun-flex-row codefun-items-center">
					<image class="codefun-shrink-0 image_5" src="/static/image/other/train-tickets/qunar/success.png" />
					<text class="text_5 ml-7">出票完成</text>
					<view
						class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 text-wrapper ml-7 codefun-justify-center">
						<text class="font_5 text_6">订返程</text>
					</view>
				</view>
				<view class="codefun-flex-col section_2">
					<view class="codefun-self-start group_5">
						<text class="font_2 text_3">¥</text>
						<text class="font_2 text_4">{{ trainTickets.orderInfo.price }}</text>
					</view>
					<image class="codefun-shrink-0 codefun-self-end image_7 image_8"
						src="/static/image/other/train-tickets/qunar/right.png" />
					<text class="codefun-self-start text_7">支付明细</text>
				</view>
			</view>
		</view>
	</view>
	<view class="main-box">
		<view class="codefun-flex-col section_3">
			<view class="codefun-flex-col view">
				<view class="codefun-flex-row codefun-items-baseline codefun-self-stretch codefun-justify-between">
					<text class="font_5 text_8">取票号:{{ trainTickets.orderInfo.orderNo }}</text>
					<view class="group_9 ml-25">
						<text class="font_6">{{ trainTickets.ticketInfo.gate }}</text>
					</view>
				</view>
				<view class="codefun-flex-row equal-division codefun-justify-between">
					<view class="codefun-flex-col group_10 group_28">
						<text class="codefun-self-stretch font_3 text_16">{{
							formatDateTime(trainTickets.ticketInfo.departureTime,
								trainTickets.ticketInfo.date) }}</text>
						<text class="codefun-self-start font_8 mt-7">{{
							trainTickets.ticketInfo.departureTime.split(' ')[1]
						}}</text>
					</view>
					<view class="codefun-flex-col codefun-items-center group_10 group_29">
						<text class="font_5 text_17">{{ trainTickets.ticketInfo.duration }}</text>
						<image class="image_9 mt-11" src="/static/image/other/train-tickets/qunar/jingtingzhan.png" />
					</view>
					<view class="codefun-flex-col group_10 group_26">
						<text class="codefun-self-start font_3 text_18">{{
							formatDateTime(trainTickets.ticketInfo.arrivalTime,
								trainTickets.ticketInfo.date) }}</text>
						<text class="codefun-self-end font_8 mt-7">{{ trainTickets.ticketInfo.arrivalTime.split(' ')[1]
						}}</text>
					</view>
				</view>
				<view class="codefun-flex-row codefun-justify-center codefun-self-stretch codefun-relative group_11">
					<view class="codefun-flex-row codefun-items-center pos">
						<text class="font_9 text_19">{{ trainTickets.ticketInfo.departureStation }}</text>
						<image class="codefun-shrink-0 image_4 ml-3"
							src="/static/image/other/train-tickets/qunar/location.png" />
					</view>
					<view class="codefun-flex-row codefun-items-center">
						<text class="font_19 text_21">{{ trainTickets.ticketInfo.trainNo }}</text>
						<image class="codefun-shrink-0 image_10 codefun-ml-2"
							src="/static/image/other/train-tickets/qunar/info.png" />
					</view>
					<view class="codefun-flex-row codefun-items-center pos_2">
						<image class="codefun-shrink-0 image_4"
							src="/static/image/other/train-tickets/qunar/location.png" />
						<text class="font_9 text_20 codefun-ml-4">{{ trainTickets.ticketInfo.arrivalStation }}</text>
					</view>
				</view>
			</view>
			<view class="codefun-flex-col group_12">
				<view class="codefun-flex-col section_1" v-for="item in trainTickets.passengerList" :key="item.id">
					<view class="codefun-flex-col">
						<view class="codefun-flex-row codefun-justify-between codefun-items-center">
							<view class="codefun-flex-row codefun-items-baseline">
								<text class="font_10">{{ item.name }}</text>
								<text class="font_11 text_22 codefun-ml-10">{{ item.idType }}</text>
							</view>
							<view class="codefun-flex-row">
								<view
									class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 text-wrapper_8">
									<text v-if="computeSeatNo(item.seatNo)" class="font_4 text_23">{{
										computeSeatNo(item.seatNo) }}</text>
								</view>
								<text class="font_12 text_51 codefun-ml-6">{{ item.carriage }}车{{ item.seatNo }}号</text>
							</view>
						</view>
						<view class="codefun-flex-row codefun-justify-between codefun-mt-8">
							<text class="codefun-self-start font_13">{{ item.idType.includes('身份证') ?
								stringUtil.maskIdCard(item.idNumber) : (item.idType.includes('护照') ?
									stringUtil.maskPassport(item.idNumber) : item.idNumber) }}</text>
							<text class="codefun-self-center font_14 text_25">{{ item.seatType }}</text>
						</view>
					</view>
					<view class="codefun-flex-row codefun-justify-between codefun-items-center group_27 mt-19">
						<text class="font_15 text_50">出票成功</text>
						<view class="codefun-flex-row">
							<view class="codefun-flex-col codefun-justify-center codefun-items-center action-btn">
								<text class="font_16">分享</text>
							</view>
							<view
								class="codefun-flex-col codefun-justify-center codefun-items-center action-btn codefun-ml-6">
								<text class="font_16">改签</text>
							</view>
							<view
								class="codefun-flex-col codefun-justify-center codefun-items-center action-btn codefun-ml-6">
								<text class="font_16">退票</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<Box />
	</view>

</template>

<script setup>
import NavBar from '@/components/nav-bar/nav-bar.vue';
import Box from './components/box.vue';
import { reactive, ref, computed, toRefs } from 'vue';
import { onShow, onPageScroll } from '@dcloudio/uni-app';
import { util, stringUtil } from '@/utils/common.js';
import CtripTrainTickets from '../ctrip-train-tickets/ctrip-train-tickets.vue';

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

function goEdit() {
	util.goPage(`/pages/other/train-tickets/edit/edit?app=qunar&storageKey=${data.STORAGE_KEY}`)
}
const data = reactive({
	navBar: {
		bgColor: 'transparent'
	},
	trainTickets: {
		"orderInfo": {
			"orderNo": "EJ66223536",
			"price": "4440"
		},
		"ticketInfo": {
			"departureTime": "01-01 09:19",
			"departureStation": "北京南",
			"arrivalTime": "01-01 14:04",
			"arrivalStation": "上海虹桥",
			"trainNo": "G905",
			"duration": "4时45分",
			"date": "2026.01.01",
			"weekDay": "星期四",
			"gate": "6A、7A进站检票口,6B、7B进站检票",
			"trainName": "复兴号"
		},
		"passengerList": [
			{
				"name": "张元英",
				"type": "成人票",
				"seatType": "商务座",
				"carriage": "01",
				"seatNo": "03C",
				"idType": "外国护照（KR）",
				"idNumber": "KR123456789",
				"price": "2110",
				"status": "已支付",
				"isMe": true,
				"points": 9632
			}
		]
	},
	STORAGE_KEY: 'qunarTrainTickets'
})

let { trainTickets } = toRefs(data)

onShow(() => {
	const stored = uni.getStorageSync(data.STORAGE_KEY)
	if (stored) {
		Object.assign(data.trainTickets, stored)
	}
})

onPageScroll((e) => {
	data.navBar.bgColor = e.scrollTop > 40 ? '#F2F5F9' : 'transparent';
})


const computeSeatNo = (seatNo) => {
	if (seatNo.includes('C') || seatNo.includes('F')) {
		return '靠窗';
	} else if (seatNo.includes('A') || seatNo.includes('D')) {
		return '过道';
	}
	return '';
}

const formatDateTime = (timeStr, dateStr) => {
	if (!timeStr) return '';
	const parts = timeStr.split(' ');
	const md = parts[0];
	if (!md) return '';
	const mdParts = md.split('-');
	let year, month, day;

	if (mdParts.length === 3) {
		year = mdParts[0];
		month = mdParts[1];
		day = mdParts[2];
	} else if (mdParts.length === 2) {
		month = mdParts[0];
		day = mdParts[1];
		year = new Date().getFullYear();
		if (dateStr) {
			year = dateStr.split('.')[0];
		}
	} else {
		return '';
	}

	const dateObj = new Date(Number(year), Number(month) - 1, Number(day));
	const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
	const week = isNaN(dateObj.getTime()) ? '' : weekDays[dateObj.getDay()];

	return `${month}月${day}日 ${week}`;
}
</script>

<style>
@import '/common/global.css';

page {
	background-color: #F2F5F9;
}
</style>
<style lang="less" scoped>
::v-deep .uni-navbar__header-btns-right {
	width: auto !important;
}

.ml-11 {
	margin-left: 22rpx;
}

.ml-7 {
	margin-left: 14rpx;
}

.ml-25 {
	margin-left: 50rpx;
}

.mt-7 {
	margin-top: 14rpx;
}

.mt-11 {
	margin-top: 22rpx;
}

.ml-3 {
	margin-left: 6rpx;
}

.mt-19 {
	margin-top: 38rpx;
}

.section {
	background: linear-gradient(180deg, #CDF2F6 0%, #F2F5F9 100%);

	.image_5 {
		width: 44rpx;
		height: 44rpx;
	}

	.group_2 {
		.group_3 {
			padding-left: 23.26rpx;
			padding-right: 4.64rpx;

			.image_4 {
				width: 28rpx;
				height: 28rpx;
			}
		}

		.font {
			font-size: 18rpx;
			line-height: 16.88rpx;
			color: #363636;
		}

		.text {
			line-height: 16.68rpx;
		}

		.text_2 {
			line-height: 16.74rpx;
		}
	}

	.group_4 {
		padding-left: 20rpx;
		padding-bottom: 30rpx;

		.text_5 {
			color: #363636;
			font-size: 44rpx;
			font-weight: 700;
			line-height: 41.18rpx;
		}

		.text-wrapper {
			border-radius: 25rpx;
			width: 106rpx;
			height: 50rpx;
			border: solid 0.5px #28c2dd;

			.text_6 {
				color: #28c2dd;
				font-size: 24rpx;
				line-height: 50rpx;
			}
		}

		.section_2 {
			padding: 19.76rpx 16.2rpx 13.54rpx;
			background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
			border-radius: 16rpx 0rpx 0rpx 16rpx;
			width: 160rpx;
			height: 94rpx;

			.group_5 {
				line-height: 20.46rpx;

				.font_2 {
					font-size: 26rpx;
					line-height: 21.14rpx;
					color: #fb8517;
				}

				.text_3 {
					font-size: 28rpx;
					line-height: 19.9rpx;
				}

				.text_4 {
					font-size: 28rpx;
					line-height: 20.46rpx;
				}
			}

			.image_7 {
				width: 20rpx;
				height: 20rpx;
			}

			.image_8 {
				margin-right: 11.8rpx;
			}

			.text_7 {
				margin-left: 2.52rpx;
				margin-top: 3.84rpx;
				color: #363636;
				font-size: 20rpx;
				line-height: 18.62rpx;
			}
		}
	}
}

.main-box {
	padding: 10rpx 16rpx;
	padding-bottom: 10rpx;
	padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(10rpx + env(safe-area-inset-bottom));

	.ml-25 {
		margin-left: 50rpx;
	}

	.section_3 {
		padding: 20rpx 18rpx 0;
		background-color: #ffffff;
		border-radius: 20rpx;

		.view {
			margin: 0 14rpx;
			padding-top: 2.96rpx;

			.font_5 {
				font-size: 26rpx;
				line-height: 21.14rpx;
				color: #666666;
			}

			.text_8 {
				font-size: 24rpx;
			}

			.group_9 {
				line-height: 21.76rpx;
				height: 21.76rpx;
				overflow: hidden;
				overflow-x: auto;
				flex: 1;
				text-align: right;

				/* 隐藏横向滚动条，但保留滑动效果 */
				scrollbar-width: none;
				-ms-overflow-style: none;

				&::-webkit-scrollbar {
					display: none;
				}

				.font_6 {
					white-space: nowrap;
					font-size: 22rpx;
					line-height: 24rpx;
					font-weight: 500;
					color: #4FB26E;
				}
			}

			.equal-division {
				align-self: flex-start;
				margin-top: 21rpx;
				width: 100%;

				.group_10 {
					flex-shrink: 0;

					.font_3 {
						font-size: 26rpx;
						line-height: 25.92rpx;
						color: #363636;
					}

					.text_16 {
						font-size: 28rpx;
						line-height: 24rpx;
					}

					.font_8 {
						font-size: 52rpx;
						color: #363636;
					}

					.text_17 {
						font-size: 24rpx;
						line-height: 22.04rpx;
					}

					.image_9 {
						width: 234rpx;
						height: 44rpx;
					}

					.text_18 {
						font-size: 28rpx;
						line-height: 24rpx;
						text-align: right;
						width: 100%;
					}
				}

				.group_28 {
					padding: 16rpx 0;
					width: 200rpx;
				}

				.group_29 {
					padding: 18.84rpx 0 3.54rpx;
				}

				.group_26 {
					padding: 16rpx 0;
					width: 200rpx;
				}
			}

			.group_11 {

				.pos {
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);

					.text_19 {
						font-size: 28rpx;
						line-height: 25.96rpx;
					}
				}

				.font_19 {
					font-size: 26rpx;
					line-height: 28rpx;
					color: #666666;
				}

				.text_21 {
					font-size: 24rpx;
					line-height: 17.54rpx;
				}

				.image_10 {
					width: 30rpx;
					height: 30rpx;
				}

				.pos_2 {
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);

					.text_20 {
						font-size: 28rpx;
						line-height: 25.82rpx;
					}
				}

				.image_4 {
					width: 28rpx;
					height: 28rpx;
				}

				.font_9 {
					font-size: 26rpx;
					line-height: 25.92rpx;
					font-weight: 700;
					color: #363636;
				}
			}
		}

		.group_12 {
			padding: 38rpx 0 0;

			.section_1 {
				padding: 28rpx 10.58rpx 22rpx 19.1rpx;
				background-color: #f9fbfc;
				border-radius: 16rpx;
				margin-bottom: 24rpx;

				.text_22 {
					font-size: 24rpx;
					line-height: 22.22rpx;
				}

				.text-wrapper_8 {
					background-color: #9db2bd;
					border-radius: 8rpx;
					width: 56rpx;
					height: 32rpx;

					.text_23 {
						line-height: 32rpx;
					}
				}

				.text_51 {
					margin-top: 2.92rpx;
				}

				.text_25 {
					margin-right: 4.38rpx;
					font-size: 28rpx;
				}

				.group_27 {
					padding: 0 8.98rpx;

					.text_50 {
						font-size: 28rpx;
					}
				}
			}

			.font_10 {
				font-size: 26rpx;
				line-height: 23.74rpx;
				font-weight: 700;
				color: #363636;
			}

			.font_11 {
				font-size: 26rpx;
				line-height: 21.14rpx;
				font-weight: 700;
				color: #999999;
			}

			.font_4 {
				font-size: 20rpx;
				color: #ffffff;
			}

			.font_12 {
				font-size: 32rpx;
				line-height: 29.6rpx;
				color: #363636;
				font-weight: 500;
			}

			.font_13 {
				font-size: 26rpx;
				line-height: 19rpx;
				font-weight: 700;
				color: #999999;
			}

			.font_14 {
				font-size: 26rpx;
				line-height: 25.92rpx;
				color: #545356;
			}

			.font_15 {
				font-size: 26rpx;
				line-height: 25.92rpx;
				font-weight: 700;
				color: #f5882c;
			}

			.font_16 {
				font-size: 26rpx;
				line-height: 21.14rpx;
				font-weight: 700;
				color: #363636;
			}

			.action-btn {
				background-color: #ffffff;
				border-radius: 30rpx;
				width: 104rpx;
				height: 60rpx;
				border: solid 1rpx #e0e4e3;

				text {
					font-size: 24rpx;
				}
			}
		}
	}


}
</style>