<template>
	<!-- 水印 -->
	<view v-if="$isVip()">
		<watermark dark="light" source="uni_alipay_other_tickets_ctrip" />
		<liu-drag-button :canDocking="false" @clickBtn="$goRechargePage('watermark', 'uni_alipay_other_tickets_ctrip')">
			<image src='/static/lottie/watermark.gif' mode="widthFix" style="width:94px;height:74px;" ></image>
		</liu-drag-button>
	</view>
	<view class="top-box">
		<NavBar title="订单详情" :bgColor="data.navBar.bgColor" :buttonGroup="buttonGroup"
			@button-click="util.clickTitlePopupButton" tipLayerType="ctrip-train-tickets-tip" isTipLayer
			tipLayerText="修改车票信息">
			<template v-if="$system == 'iOS'" v-slot:statusBar>
				<view class="status-bar">
					<image class="top-logo" style="width: 160rpx"
						src="/static/image/other/train-tickets/ctrip/top-logo.png" mode="widthFix">
					</image>
				</view>
			</template>
			<template v-slot:center>
				<view class="codefun-flex-row">
					<text class="text">订单</text>
					<text class="text_2 ml-15">{{ ticketsInfo.status == '已出行' ? '推荐' : '行程服务' }}</text>
				</view>
			</template>
			<template v-slot:right>
				<view class="codefun-flex-col pos_2">
					<view class="codefun-flex-row" style="margin-right: 10px;">
						<view class="codefun-flex-col codefun-items-center">
							<image class="image_5" src="/static/image/other/train-tickets/ctrip/customer-sevice.png" />
							<text class="font text_3">客服</text>
						</view>
						<view class="codefun-flex-col codefun-items-center" style="margin-left: 16rpx;">
							<image class="image_5"
								src="/static/image/other/train-tickets/ctrip/refund-instructions.png" />
							<text class="font text_3">退改说明</text>
						</view>
						<view v-if="ticketsInfo.status == '已出行'" class="codefun-flex-col codefun-items-center"
							style="margin-left: 16rpx;">
							<image class="image_5" src="/static/image/other/train-tickets/ctrip/fenxiang.png" />
							<text class="font text_3">分享</text>
						</view>
					</view>
				</view>
			</template>
		</NavBar>
		<view class="codefun-flex-col section">
			<view class="codefun-flex-col">

				<view class="codefun-flex-row codefun-justify-between codefun-items-start group_4">
					<view class="codefun-flex-row group_5">
						<image class="image_8" src="/static/image/other/train-tickets/ctrip/success.png" />
						<view class="codefun-flex-col codefun-items-start group_33 codefun-ml-10">
							<text class="text_5">{{ ticketsInfo.status || '抢票成功' }}</text>
							<text class="font_2 text_6 codefun-mt-8">{{ ticketsInfo.status == '已出行' ? '携程已为您完成本次预定' :
								'携程祝您出行愉快'
							}}</text>
						</view>
					</view>
					<image class="image_7" src="/static/image/other/train-tickets/ctrip/buy-return-trip.png" />
				</view>
				<view class="codefun-flex-row codefun-justify-between codefun-items-center section_2 mt-15">
					<view class="codefun-flex-row codefun-items-center">
						<image class="image_9" src="/static/image/other/train-tickets/ctrip/free-order.png" />
						<text class="font_2 text_7 codefun-ml-4">做任务抽大奖</text>
					</view>
					<image class="image_10" src="/static/image/other/train-tickets/ctrip/right.png" />
				</view>
			</view>
		</view>
	</view>
	<view class="main-container">
		<view class="codefun-flex-col codefun-justify-start section_3">
			<view class="codefun-flex-row codefun-justify-between codefun-items-center section_4">
				<text v-if="ticketsInfo.status == '抢票成功'" class="text_8">注意确认行程信息</text>
				<view v-else class="codefun-flex-col codefun-items-start">
					<text class="text_8">行程已结束</text>
					<text class="text_8" style="font-size: 14px;font-weight: 400;margin-top: 6px;">感谢您使用携程火车票</text>
				</view>
				<view class="codefun-flex-col">
					<view v-if="ticketsInfo.status == '抢票成功'" class="codefun-flex-row group_6">
						<view class="item-box codefun-flex-col codefun-items-center">
							<image class="image_6" src="/static/image/other/train-tickets/ctrip/zaixianhuanzuo.png" />
							<text class="font_3 text_9 mt-5">在线换座</text>
						</view>
						<view class="item-box codefun-flex-col codefun-items-center">
							<image class="image_6 ml-11"
								src="/static/image/other/train-tickets/ctrip/dingdantongzhi.png" />
							<text class="font_3 text_10 ml-11 mt-5">订单通知</text>
						</view>
						<view class="item-box codefun-flex-col codefun-items-center">
							<image class="image_6 ml-11"
								src="/static/image/other/train-tickets/ctrip/fenxiangxingcheng.png" />
							<text class="font_3 text_11 ml-11 mt-5">分享行程</text>
						</view>
					</view>
					<view v-if="ticketsInfo.status == '已出行'" class="codefun-flex-row group_6">
						<view class="item-box codefun-flex-col codefun-items-center">
							<image class="image_6 ml-11"
								src="/static/image/other/train-tickets/ctrip/jiesongzhan.png" />
							<text class="font_3 text_10 ml-11 mt-5">接送站</text>
						</view>
						<view class="item-box codefun-flex-col codefun-items-center">
							<image class="image_6 ml-11"
								src="/static/image/other/train-tickets/ctrip/fapiaobaoxiao-yichuxing.png" />
							<text class="font_3 text_11 ml-11 mt-5">发票报销</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="codefun-flex-col section_5">
			<view class="codefun-flex-col group_8">
				<view class="codefun-flex-row codefun-justify-between" style="width: 100%;">
					<text class="font_6 text_12">取票号：{{ ticketsInfo.orderInfo.orderNo }}</text>
					<text v-if="ticketsInfo.status == '抢票成功'" class="font_5 text_13">
						{{ ticketsInfo.ticketInfo.gate }}</text>
				</view>
				<view class="codefun-flex-row codefun-justify-between codefun-self-stretch group_9">
					<view class="codefun-flex-col">
						<text class="font_1 text_14 w-100">{{ formatDateTime(ticketsInfo.ticketInfo.departureTime,
							ticketsInfo.ticketInfo.date) }}</text>
					</view>
					<text class="font_1 text_15">{{ ticketsInfo.ticketInfo.duration }}</text>
					<text class="font_1 text_16 w-100 text-align-r">{{
						formatDateTime(ticketsInfo.ticketInfo.arrivalTime,
							ticketsInfo.ticketInfo.date) }}</text>
				</view>
				<view
					class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch group_10">
					<text class="font_7 w-80" @click="goEdit">{{ ticketsInfo.ticketInfo.departureTime.split(' ')[1]
					}}</text>
					<image class="image_11" src="/static//image/other/train-tickets/ctrip/jingtingxinxi.png" />
					<text class="font_7 w-80 text-align-r" @click="goEdit">{{
						ticketsInfo.ticketInfo.arrivalTime.split(' ')[1]
					}}</text>
				</view>
				<view
					class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch group_11">
					<view class="codefun-flex-row codefun-items-center w-100">
						<text class="font_8 text_18">{{ ticketsInfo.ticketInfo.departureStation }}</text>
						<image class="image_13 codefun-ml-4"
							src="/static//image/other/train-tickets/ctrip/location.png" />
					</view>
					<view class="codefun-flex-row codefun-items-center">
						<text class="font_9 text_19">{{ ticketsInfo.ticketInfo.trainNo }}</text>
						<view v-if="ticketsInfo.ticketInfo.trainName && ticketsInfo.status == '抢票成功'"
							class="codefun-flex-row codefun-items-center train-name">
							<text class="font_6">{{ ticketsInfo.ticketInfo.trainName }}</text>
							<uni-icons type="right" size="10" color="#767676"></uni-icons>
						</view>
					</view>
					<view class="codefun-flex-row codefun-justify-end codefun-items-center w-100">
						<image class="image_13" src="/static//image/other/train-tickets/ctrip/location.png" />
						<text class="font_8 text_20 codefun-ml-2">{{ ticketsInfo.ticketInfo.arrivalStation }}</text>
					</view>
				</view>
			</view>
			<view class="codefun-flex-col list">
				<view class="codefun-flex-col codefun-justify-start list-item codefun-mt-8"
					v-for="item in ticketsInfo.passengerList" :key="item.id">
					<view class="codefun-flex-col group_13" @click="goEdit">
						<view
							class="codefun-flex-col codefun-justify-start codefun-items-start codefun-relative group_16">

							<view class="codefun-flex-col codefun-items-start group_15 pos_4">
								<view class="codefun-flex-col group_12">
									<view class="codefun-flex-row codefun-justify-between codefun-items-center">
										<view class="codefun-flex-row codefun-items-center">
											<text class="font_10 text_21">{{ item.name }}</text>
											<view class="codefun-flex-row codefun-items-center section_1 codefun-ml-4">
												<text class="font_11">{{ item.type }}</text>
												<uni-icons type="right" size="10" color="#767676"></uni-icons>
											</view>
										</view>
										<view class="codefun-flex-row codefun-items-center">
											<view
												class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper">
												<text class="font_6 text_22" v-if="computeSeatNo(item.seatNo)">{{
													computeSeatNo(item.seatNo) }}</text>
											</view>
											<text class="font_12">{{ item.carriage }}车厢{{ item.seatNo }}号</text>
										</view>
									</view>
									<view class="codefun-flex-row codefun-justify-between codefun-mt-8">
										<view class="codefun-flex-row codefun-items-center">
											<image v-show="Number(item.points) > 0" class="image_15"
												src="/static/image/other/train-tickets/ctrip/jifen.png" />
											<view v-show="Number(item.points) > 0" class="group_17">
												<text class="font_13">铁路会员积分+{{ item.points }}(价值</text>
												<text class="font_14 text_24">¥{{ (item.points *
													0.01).toFixed(2) }}</text>
												<text class="font_13 text_24 text_25">)</text>
											</view>
											<image v-show="Number(item.points) > 0" class="image_16"
												style="margin-top: 2px;"
												src="/static/image/other/train-tickets/ctrip/help.png" />
										</view>
										<view class="codefun-flex-row codefun-items-center">

											<text class="font_15 text_26">{{ item.seatType }}¥{{ item.price }}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="codefun-flex-row codefun-justify-between codefun-items-center">
							<text class="success-text"
								:style="{ 'margin-top': Number(item.points) > 0 ? '0px' : '-60px' }">购票成功</text>
							<view class="codefun-flex-row codefun-justify-end group_18 "
								:class="{ yichuxing: ticketsInfo.status == '已出行' }">
								<view
									class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_2">
									<text class="font_16 text_28">改签</text>
								</view>
								<view
									class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_3 ml-7">
									<text class="font_16 text_29">退票</text>
								</view>
								<view v-if="item.isMe && ticketsInfo.status == '抢票成功'"
									class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_1 ml-7">
									<text class="font_17 text_30">扫码检票</text>
								</view>
							</view>
						</view>

					</view>
				</view>
			</view>

		</view>

		<view class="codefun-flex-row codefun-justify-between group_20">
			<view class="section_6"></view>
			<view class="section_6"></view>
		</view>
		<view class="codefun-flex-col section_7">
			<view class="codefun-flex-row codefun-items-center group_21">
				<view class="codefun-flex-col codefun-flex-1">
					<view class="codefun-flex-row codefun-items-center">
						<view class="codefun-flex-row codefun-items-center group_22">
							<image class="image_17" src="/static/image/other/train-tickets/ctrip/huodong.png" />

							<view
								class="codefun-flex-row codefun-justify-start codefun-items-center codefun-relative group_23 ml-5">
								<text class="font_18 ml-5">恭喜获得</text>
								<text class="font_9 text_33">¥{{ ticketsInfo.hotelInfo.cashback }}</text>
								<text class="font_18 pos_6">返现机会</text>
							</view>
						</view>
						<image class="image_13 image_18" src="/static/image/other/train-tickets/ctrip/help.png" />
					</view>
					<text class="font_19 text_36 mt-7">本单可返现¥{{ ticketsInfo.hotelInfo.cashback }}，需在{{
						formatMMDD(ticketsInfo.hotelInfo.startDay)
					}}前预订酒店，并在{{
							formatMMDD(ticketsInfo.hotelInfo.endDay) }}前离店</text>
				</view>
				<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4 codefun-ml-20">
					<text class="font_5 text_35">去完成</text>
				</view>
			</view>
			<view class="codefun-flex-row codefun-mt-6">
				<view v-for="(item, index) in data.guideList" :key="index"
					class="codefun-flex-col codefun-items-center group_24 group_26">
					<image class="image_19" :src="item.icon" />
					<text class="font_19 mt-7" :class="item.textClass">{{ item.name }}</text>
				</view>
			</view>
		</view>
		<view class="codefun-flex-row codefun-justify-between codefun-items-center section_8 codefun-mt-8">
			<view class="codefun-flex-row codefun-items-baseline">
				<text class="font_20 text_37">支付总额</text>
				<view class="group_25 ml-5">
					<text class="font_20 text_39">¥</text>
					<text class="text_38">{{ ticketsInfo.orderInfo.price }}</text>
				</view>
			</view>
			<view class="codefun-flex-row codefun-items-center group_32">
				<text class="font_21 text_40">查看明细</text>
				<uni-icons class="ml-5" type="down" size="12" color="#767676"></uni-icons>
			</view>
		</view>

		<view class="codefun-flex-col section_9 codefun-mt-8">
			<view class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch">
				<text class="font_20 text_41">常见问题</text>
				<view class="codefun-flex-row codefun-items-center">
					<text class="font_21 text_42">其他问题</text>
					<uni-icons class="ml-5" type="right" size="12" color="#767676"></uni-icons>
				</view>
			</view>
			<view class="codefun-flex-row codefun-self-stretch codefun-mt-10">
				<view class="codefun-flex-col codefun-justify-start text-wrapper_5">
					<text class="font_22 text_43">改签如何指定车厢/座席</text>
				</view>
				<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_6 codefun-ml-8">
					<text class="font_22 text_44">如何退票</text>
				</view>
			</view>
			<view class="codefun-flex-col codefun-justify-start codefun-self-start text-wrapper_7 codefun-mt-10">
				<text class="font_22 text_45">是否可以刷身份证进站乘车，需要取票吗</text>
			</view>
		</view>
		<ZdySafeBottom bgColor="#f0f3f8"/>
	</view>

	<!-- 样式选择弹窗 -->
	<uni-popup ref="stylePopup" type="center">
		<view class="style-popup-container">
			<view class="popup-title">选择展示样式</view>
			<view class="popup-list">
				<view class="popup-item" @click="selectStyle('抢票成功')">
					<text class="item-text">抢票成功 (默认)</text>
					<uni-icons v-if="ticketsInfo.status === '抢票成功' || !ticketsInfo.status" type="checkmarkempty"
						color="#3B82F6" size="20"></uni-icons>
				</view>
				<view class="popup-item" @click="selectStyle('已出行')">
					<text class="item-text">已出行</text>
					<uni-icons v-if="ticketsInfo.status === '已出行'" type="checkmarkempty" color="#3B82F6"
						size="20"></uni-icons>
				</view>
			</view>
			<view class="popup-cancel" @click="closeStylePopup">取消</view>
		</view>
	</uni-popup>

</template>

<script setup>
import NavBar from '@/components/nav-bar/nav-bar.vue';
import { reactive, toRefs, ref } from 'vue';
import { onShow, onPageScroll } from '@dcloudio/uni-app';
import { util } from '@/utils/common.js';
import ZdySafeBottom from '@/components/safeBottom/safeBottom.vue'

const buttonGroup = [
	{
		name: "编辑车票信息",
		click: () => {
			goEdit()
		}
	}, {
		name: "切换样式",
		click: () => {
			stylePopup.value.open();
		}
	}
]

const stylePopup = ref(null);

function goEdit() {
	util.goPage(`/pages/other/train-tickets/edit/edit?app=ctrip&storageKey=${data.STORAGE_KEY}`)
}

const selectStyle = (status) => {
	data.ticketsInfo.status = status;
	uni.setStorageSync(data.STORAGE_KEY, data.ticketsInfo);
	stylePopup.value.close();
}

const closeStylePopup = () => {
	stylePopup.value.close();
}

const data = reactive({
	navBar: {
		bgColor: 'transparent'
	},
	guideList: [
		{ name: '游玩指南', icon: '/static/image/other/train-tickets/ctrip/youwanzhinan.png' },
		{ name: '儿童申报', icon: '/static/image/other/train-tickets/ctrip/ertongshenbao.png' },
		{ name: '发票报销', icon: '/static/image/other/train-tickets/ctrip/fapiaobaoxiao.png' },
		{ name: '进站指引', icon: '/static/image/other/train-tickets/ctrip/jinzhanzhiyin.png' },
		{ name: '展开全部', icon: '/static/image/other/train-tickets/ctrip/quanbuzhankai.png' }
	],
	STORAGE_KEY: 'ctripTrainTicketsInfo',
	ticketsInfo: {
		"status": "抢票成功",
		"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）",
				"price": "2110",
				"status": "已支付",
				"isMe": true,
				"points": 9632
			}
		],
		"hotelInfo": {
			"cashback": "25",
			"startDay": "01-01",
			"endDay": "01-02"
		}
	},
})

let { ticketsInfo } = toRefs(data)

onPageScroll((e) => {
	if (e.scrollTop > 40) {
		data.navBar.bgColor = '#BEDDFE'
	} else {
		data.navBar.bgColor = 'transparent'
	}
})

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

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}`;
}

const formatMMDD = (mdStr) => {
	if (!mdStr) return '';
	const [month, day] = mdStr.split('-');
	return month && day ? `${month}月${day}日` : '';
}

</script>

<style>
@import '/common/global.css';
</style>
<style lang="less">
.w-100 {
	width: 100px;
}

.w-80 {
	width: 80px;
}

.text-align-r {
	text-align: right;
}

.ml-15 {
	margin-left: 15px;
}

.mt-3 {
	margin-top: 3px;
}

.mt-15 {
	margin-top: 15px;
}

.mt-5 {
	margin-top: 5px;
}

.ml-7 {
	margin-left: 7px;
}

.ml-5 {
	margin-left: 5px;
}

.ml-11 {
	margin-left: 11px;
}

.ml-65 {
	margin-left: 65px;
}

.ml-67 {
	margin-left: 67px;
}

.ml-7 {
	margin-left: 7px;
}

.train-name {
	margin-left: 4rpx;
	border: 1rpx solid #F5F5F5;
	height: 32rpx;
	border-radius: 8rpx;
	padding-left: 4rpx;
}

.top-box {
	background-image: url('/static/image/other/train-tickets/ctrip/ctrip-train-bg.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;

	.status-bar {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 16rpx;
		padding-bottom: 32rpx;
	}

	.text {
		color: #0b2c5c;
		font-size: 18px;
		font-weight: 700;
		line-height: 16.5px;
	}

	.text_2 {
		color: #0b2c5c;
		font-size: 18px;
		line-height: 16.5px;
		opacity: 0.5;
	}

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

		.image_5 {
			width: 20px;
			height: 20px;
		}

		.font {
			font-size: 11px;
			line-height: 10px;
			color: #1a1a1a;
		}

		.text_3 {
			font-size: 10px;
			line-height: 9.5px;
		}

	}

	.section {
		padding: 8px;
		background-image: url('assets/fff2fdc35a03732c79c39077e0ac181b.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;

		.group_2 {
			padding: 0 6.5px;

			.image {
				width: 80px;
				height: 20px;
			}

			.pos {
				position: absolute;
				right: 6.5px;
				bottom: 3.552713678800501e-15px;

				.image_2 {
					width: 17px;
					height: 11px;
				}

				.image_3 {
					width: 15px;
					height: 11px;
				}

				.image_4 {
					width: 24px;
					height: 11.5px;
				}
			}
		}

		.group_3 {
			padding: 10.5px 0 5px;

			.image_6 {
				width: 22px;
				height: 22px;
			}

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

			.text {
				color: #0b2c5c;
				font-size: 18px;
				font-weight: 700;
				line-height: 16.5px;
			}

			.text_2 {
				color: #0b2c5c;
				font-size: 18px;
				line-height: 16.5px;
				opacity: 0.5;
			}


		}

		.group_4 {
			padding: 0 11px;

			.group_5 {
				margin-top: 5px;

				.image_8 {
					margin-bottom: 3px;
					width: 36px;
					height: 36px;
				}

				.group_33 {
					margin-top: 2px;

					.text_5 {
						color: #0b2c5c;
						font-size: 20px;
						font-weight: 700;
						line-height: 18.5px;
					}

					.text_6 {
						font-size: 12px;
						line-height: 11px;
					}
				}
			}

			.image_7 {
				width: 70px;
				height: 29px;
			}
		}

		.font_2 {
			font-size: 11px;
			line-height: 12px;
			color: #0b2c5c;
		}
	}

	.section_2 {
		padding: 8px 14px;
		background-color: #B6D3FA;
		// background-color: #006eec;
		border-radius: 10px;

		.image_9 {
			width: 70px;
			height: 20px;
		}

		.image_10 {
			margin-right: 4px;
			border-radius: 8px;
			width: 22px;
			height: 22px;
		}
	}

}


.main-container {
	padding-bottom: 12px;
	padding-bottom: calc(12px + constant(safe-area-inset-bottom));
	padding-bottom: calc(12px + env(safe-area-inset-bottom));

	.section_3 {
		padding-bottom: 86px;
		background: linear-gradient(360deg, rgba(203, 228, 255, 0) 0%, #BEDDFE 100%);

		.section_4 {
			margin: 0 8px;
			padding: 12px 15px 32px 14px;
			background-image: url('/static/image/other/train-tickets/ctrip/card-bg.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;

			.text_8 {
				color: #ffffff;
				font-size: 16px;
				font-weight: 500;
				line-height: 15px;
			}

			.group_6 {
				padding-left: 12.5px;

				.image_6 {
					width: 22px;
					height: 22px;
				}
			}

			.font_3 {
				font-size: 11px;
				line-height: 10px;
				color: #ffffff;
			}

		}
	}

	.section_5 {
		padding: 15px 8px 0;
		background-color: #ffffff;
		border-radius: 10px;
		margin: 0 8px;
		margin-top: -102px;
		position: relative;

		.group_8 {
			margin: 0 7px;
			padding-top: 1.5px;
			overflow: hidden;

			.text_12 {
				line-height: 9.5px;
			}

			.text_13 {
				line-height: 11px;
			}

			.group_9 {
				margin-top: 17px;

				.font_1 {
					font-size: 11px;
					line-height: 12px;
					color: #767676;
				}

				.text_14 {
					line-height: 12px;
				}

				.text_16 {
					line-height: 12px;
					text-align: right;
				}
			}

			.group_10 {
				margin-top: 4.5px;
				padding-left: 2.5px;

				.font_7 {
					font-size: 24px;
					line-height: 17.5px;
					font-weight: 500;
					color: #1a1a1a;
				}

				.image_11 {
					width: 117px;
					height: 22px;
				}
			}

			.group_11 {
				margin-right: 1px;
				margin-top: 4px;

				.font_8 {
					font-size: 13px;
					line-height: 12px;
					color: #1a1a1a;
				}

				.image_13 {
					width: 13px;
					height: 13px;
				}

				.font_9 {
					font-size: 14px;
					line-height: 10px;
				}

				.text_19 {
					color: #1a1a1a;
					line-height: 10px;
				}

				.image_12 {
					width: 42px;
					height: 16px;
				}

			}
		}

		.list {
			padding: 13px 0 8px;

			.list-item {
				padding: 12px 0 10px;
				background-color: #f5f7fb;
				border-radius: 6px;

				&:first-child {
					margin-top: 0;
				}

				.group_13 {
					margin: 0 10px;
					overflow: hidden;
					height: 78px;

					.group_16 {

						.group_17 {
							margin-left: 6rpx;
							margin-right: 4rpx;
							line-height: 12px;

							.font_13 {
								font-size: 11px;
								line-height: 12px;
								color: #3d3d3d;
							}

							.font_14 {
								font-size: 11px;
								line-height: 8px;
								color: #3d3d3d;
							}

							.text_24 {
								word-break: break-all;
							}

							.text_25 {
								line-height: 11.5px;
							}
						}

						.group_15 {
							overflow: hidden;
							height: 50px;
							width: 100%;

							.group_12 {
								width: 100%;

								.font_10 {
									font-size: 14px;
									line-height: 12px;
									font-weight: 500;
									color: #363636;
								}

								.text_21 {
									line-height: 13px;
								}

								.section_1 {
									padding-bottom: 2px;
									border-radius: 2px;
									height: 16px;
									border: solid 0.5px #e6e8ec;

									.font_11 {
										font-size: 9px;
										line-height: 16px;
										color: #767676;
									}

									.image_14 {
										width: 8px;
										height: 8px;
									}
								}

								.text-wrapper {
									padding: 3px 0 3px;
									border-radius: 3px;
									width: 28px;
									height: 16px;
									border: solid 0.5px #e5e7eb;

								}

								.font_12 {
									font-size: 14px;
									line-height: 13px;
									font-weight: 500;
									margin-left: 8rpx;
									color: #363636;
								}

								.image_15 {
									width: 12px;
									height: 12px;
								}

								.image_16 {
									width: 11px;
									height: 11px;
								}

								.font_15 {
									font-size: 11px;
									line-height: 12px;
									color: #363636;
								}

							}

						}
					}

					.success-text {
						font-size: 24rpx;
						color: #00A56D;
						font-weight: 500;
					}

					.group_18 {
						.text-wrapper_2 {
							background-color: #ffffff;
							border-radius: 6px;
							width: 45px;
							height: 28px;
							border: solid 0.5px #e0e4e3;

						}

						.text-wrapper_3 {
							background-color: #ffffff;
							border-radius: 6px;
							width: 45px;
							height: 28px;
							border: solid 0.5px #e0e4e3;

						}

						.font_16 {
							font-size: 13px;
							line-height: 28px;
							font-weight: 500;
							color: #363636;
						}

						.text-wrapper_1 {
							background-color: #ffffff;
							border-radius: 6px;
							width: 70px;
							height: 28px;
							border: solid 0.5px #e0e4e3;

							.font_17 {
								font-size: 13px;
								line-height: 12px;
								font-weight: 500;
								line-height: 28px;
								color: #0f6de5;
							}

						}

						&.yichuxing {
							.text-wrapper_2 {
								background-color: #FFFFFF;
								border-radius: 6px;
								width: 45px;
								height: 28px;
								border: solid 0.5px #e0e4e3;

							}

							.text-wrapper_3 {
								background-color: #ffffff;
								border-radius: 6px;
								width: 45px;
								height: 28px;
								border: solid 0.5px #e0e4e3;

							}

							.font_16 {
								font-size: 13px;
								line-height: 28px;
								font-weight: 500;
								color: #D0D0D0;
							}
						}
					}
				}
			}
		}

		.font_6 {
			font-size: 11px;
			line-height: 10px;
			color: #767676;
		}

		.font_5 {
			font-size: 11px;
			line-height: 12px;
			font-weight: 500;
			color: #00a56d;
		}


	}

	.group_20 {
		padding: 0 58rpx;

		.section_6 {
			background-color: #ffffff;
			width: 8px;
			height: 12px;
		}
	}

	.mt-7 {
		margin-top: 7px;
	}

	.ml-5 {
		margin-left: 5px;
	}

	.section_7 {
		padding-bottom: 7.5px;
		background-color: #ffffff;
		border-radius: 10px;
		margin: 0 8px;

		.group_21 {
			padding: 13px 14px 11px;
			border-bottom: solid 0.5px #ececec;

			.group_22 {
				.image_17 {
					width: 55px;
					height: 18px;
				}

				.font_18 {
					font-size: 14px;
					line-height: 10px;
					color: #1a1a1a;
				}



				.text_32 {
					margin-bottom: 2.5px;
				}

				.group_23 {
					padding-top: 1.5px;

					.font_9 {
						font-size: 14px;
						line-height: 10px;
					}

					.text_33 {
						color: #f58219;
					}
				}
			}

			.image_18 {
				margin-left: 12rpx;
			}

			.image_13 {
				width: 13px;
				height: 13px;
			}


			.text_36 {
				font-size: 12px;
				line-height: 16px;
			}

			.text-wrapper_4 {
				margin-right: 2px;
				padding: 8px 0 7.5px;
				background-image: linear-gradient(112.2deg, #ff8801 -54.9%, #fe6900 129%);
				width: 59px;
				height: 27px;

				.font_5 {
					font-size: 11px;
					line-height: 12px;
					font-weight: 700;
					color: #00a56d;
				}

				.text_35 {
					color: #ffffff;
					font-size: 12px;
					line-height: 11px;
				}
			}
		}

		.group_24 {
			flex: 1 1 72px;

			.image_19 {
				width: 24px;
				height: 24px;
			}

			.text_49 {
				line-height: 10.5px;
			}

			.text_1 {
				line-height: 10px;
			}

		}

		.group_26 {
			padding: 4px 0 5px;
		}

		.font_19 {
			font-size: 11px;
			line-height: 10px;
			color: #696969;
		}

	}

	.section_8 {
		padding: 13px 11.5px 12.5px;
		background-color: #ffffff;
		border-radius: 10px;
		margin-left: 8px;
		margin-right: 8px;

		.font_20 {
			font-size: 14px;
			font-weight: 500;
			color: #1a1a1a;
		}

		.text_37 {
			font-size: 15px;
			line-height: 14px;
		}

		.group_25 {
			line-height: 13px;
			height: 13px;

			.text_39 {
				color: #006eec;
				font-size: 15px;
				line-height: 10.5px;
			}

			.text_38 {
				color: #006eec;
				font-size: 18px;
				font-weight: 500;
				line-height: 13px;
			}
		}

		.group_32 {
			margin-right: 1.5px;

			.font_21 {
				font-size: 11px;
				line-height: 10px;
				color: #4e4e4e;
			}

			.image_20 {
				width: 10px;
				height: 10px;
			}
		}
	}

	.section_9 {
		padding: 11.5px 12px 8px;
		background-color: #ffffff;
		border-radius: 10px;
		margin-left: 8px;
		margin-right: 8px;
		margin-bottom: 24rpx;

		.font_20 {
			font-size: 14px;
			font-weight: 500;
			color: #1a1a1a;
		}

		.font_21 {
			font-size: 11px;
			line-height: 10px;
			color: #4e4e4e;
		}

		.image_20 {
			width: 10px;
			height: 10px;
		}

		.text-wrapper_5 {
			padding: 9.5px 0 8.5px;
			background-color: #f5f7f9;
			border-radius: 6px;
			height: 28px;

			.text_43 {
				margin-left: 9.5px;
				margin-right: 11.5px;
				line-height: 10px;
			}
		}

		.text-wrapper_6 {
			padding: 9.5px 0 8.5px;
			background-color: #f5f7f9;
			border-radius: 6px;
			width: 66px;
			height: 28px;

		}

		.font_22 {
			font-size: 11px;
			line-height: 10px;
			color: #3d3d3d;
		}

		.text-wrapper_7 {
			padding: 9.5px 0 8px;
			background-color: #f5f7f9;
			border-radius: 6px;

			.text_45 {
				margin-left: 9.5px;
				margin-right: 9.5px;
				line-height: 10.5px;
			}
		}
	}
}

.style-popup-container {
	width: 300px;
	background-color: #ffffff;
	border-radius: 12px;
	padding-bottom: 1px;

	.popup-title {
		text-align: center;
		font-size: 16px;
		font-weight: bold;
		color: #333333;
		padding: 20px 0 10px;
	}

	.popup-list {
		padding: 0 20px;

		.popup-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 15px 0;
			border-bottom: 1px solid #f0f0f0;

			&:last-child {
				border-bottom: none;
			}

			.item-text {
				font-size: 15px;
				color: #333333;
			}
		}
	}

	.popup-cancel {
		margin: 15px 20px 20px;
		background-color: #f5f5f5;
		border-radius: 8px;
		text-align: center;
		padding: 12px 0;
		font-size: 15px;
		color: #666666;
	}
}
</style>
