<template>
	<view class="order-container">
		<view class="status-header">
			<view class="status-title">
				<text>请在 <text class="highlight">02:31</text> 内支付</text>
			</view>
			<view class="status-desc">超时未支付将自动取消</view>
		</view>

		<view class="card-box info-card">
			<view class="address-section">
				<view class="address-content">
					<view class="address-detail">山西省太原市万柏林区千峰北路移村小区11号楼4单元502</view>
					<view class="user-info">郭丽丽 187****0987</view>
				</view>
				<view class="edit-text flex">
					<text>修改</text>
					<u-icon name="arrow-right" size="12" color="#03C1B8"></u-icon>
				</view>
			</view>

			<view class="item-row">
				<text class="label">服务商家</text>
				<text class="value bold">郭丽丽</text>
			</view>
			<view class="item-row">
				<text class="label">商家标签</text>
				<view class="tags">
					<view class="tag-item">非常有耐心</view>
					<view class="tag-item">干净卫生</view>
					<view class="tag-item">服务细心周到</view>
				</view>
			</view>
			<view class="item-row">
				<text class="label">服务时间</text>
				<view class="value-group">
					<text class="value">2025-09-14 17:21:55</text>
					<view class="edit-text flex">
						<text>修改</text>
						<u-icon name="arrow-right" size="12" color="#03C1B8"></u-icon>
					</view>
				</view>
			</view>

			<view class="action-icons">
				<view class="icon-item">
					<u-icon name="order" size="26" color="#333"></u-icon>
					<text>取消订单</text>
				</view>
				<view class="icon-item primary" @click="showPayPopup = true">
					<u-icon name="red-packet" size="26" color="#03C1B8"></u-icon>
					<text>去支付</text>
				</view>
			</view>
		</view>

		<view class="card-box detail-card">
			<view class="service-main">
				<u-image src="https://via.placeholder.com/60" width="120rpx" height="120rpx" radius="12rpx" mode="aspectFill"></u-image>
				<view class="service-info">
					<view class="service-title">泰式 · 王室古法SPA</view>
					<view class="service-sub">服务时长：60分钟</view>
					<view class="service-sub">数量：1</view>
				</view>
				<view class="service-price">￥493.4</view>
			</view>

			<view class="item-row">
				<text class="label">出行方式</text>
				<text class="value">滴滴</text>
			</view>
			<view class="item-row">
				<text class="label">预估车费</text>
				<text class="value">0.00</text>
			</view>
			<view class="item-row">
				<text class="label">优惠券</text>
				<text class="value discount">-10.00</text>
			</view>

			<view class="total-row">
				合计：<text class="symbol">￥</text><text class="amount">483.4</text>
			</view>
		</view>

		<view class="card-box memo-card">
			<view class="item-row">
				<text class="label">订单备注</text>
				<view class="edit-text flex">
					<text>修改</text>
					<u-icon name="arrow-right" size="12" color="#03C1B8"></u-icon>
				</view>
			</view>
			<view class="item-row">
				<text class="label">订单编号</text>
				<view class="value">246453782748937746</view>
			</view>
			<view class="item-row">
				<text class="label">下单时间</text>
				<view class="value">2025-09-14 17:21:55</view>
			</view>
		</view>

		<u-popup :show="showPayPopup" mode="bottom" @close="showPayPopup = false" round="20">
			<view class="pay-popup">
				<view class="worker-header">
					<u-avatar src="https://via.placeholder.com/100" size="60"></u-avatar>
					<view class="worker-detail">
						<view class="name-row">
							<text class="name">赵青青</text>
							<text class="level-tag">资深</text>
						</view>
						<view class="intro">我擅长中式按摩，泰式拉伸，精油spa...</view>
						<view class="auth-row">
							<text class="auth-item"><u-icon name="checkmark-circle-fill" color="#03C1B8"
									size="14"></u-icon> 实名认证</text>
							<text class="auth-item"><u-icon name="checkmark-circle-fill" color="#03C1B8"
									size="14"></u-icon> 爽约包赔</text>
							<text class="auth-item"><u-icon name="checkmark-circle-fill" color="#03C1B8"
									size="14"></u-icon> 商户认证</text>
						</view>
					</view>
					<view class="score-badge">4.9分</view>
				</view>

				<view class="selected-project-box">
					<view class="proj-main">
						<image class="proj-img" src="https://via.placeholder.com/80" mode="aspectFill"></image>
						<view class="proj-info">
							<view class="p-price">￥483.4 <text class="p-old">原价1200.00</text></view>
							<view class="p-detail">已选：中式按摩 | 120分钟</view>
						</view>
						<text class="detail-link">项目详情</text>
					</view>

					<view class="recommend-title">推荐项目</view>
					<view class="tag-group">
						<view class="tag-active">古韵舒筋</view>
						<view class="tag-normal">泰式唤醒</view>
						<view class="tag-normal">养生spa</view>
						<view class="tag-normal">欧式奢华</view>
						<view class="tag-normal">新中式香薰</view>
					</view>

					<view class="number-row">
						<text class="label">购买数量</text>
						<u-number-box v-model="buyNum" :min="1" :max="99" integer></u-number-box>
					</view>
				</view>

				<view class="pop-footer">
					<view class="footer-total">
						合计：<text class="f-symbol">￥</text><text class="f-amount">{{ (483.4 * buyNum).toFixed(1)
							}}</text>
					</view>
					<view class="submit-btn" @click="handleConfirm">确认续购</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			showPayPopup: false,
			buyNum: 1
		};
	},
	methods: {
		handleConfirm() {
			uni.showToast({ title: '发起支付...', icon: 'none' });
			this.showPayPopup = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.order-container {
	min-height: 100vh;
	padding: 24rpx;
	background: linear-gradient(180deg, #d8f5ef 0%, #f7f9fc 100%);

	.status-header {
		padding: 32rpx 10rpx;

		.status-title {
			font-weight: 500;
			font-size: 38rpx;
			color: #2F3437;
			margin-bottom: 10rpx;

			.highlight {
				color: #ff5e5e;
				margin: 0 8rpx;
			}
		}

		.status-desc {
			font-size: 26rpx;
			color: #999;
		}
	}

	.card-box  {
		padding: 24rpx;
		margin-bottom: 24rpx;
		background: #fff;
		border-radius: 16rpx;
		box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(212,212,212,0.1);

		.edit-text {
			font-size: 24rpx;
			color: #03C1B8;
			margin-left: 20rpx;
		}
		
		.item-row {
			margin-bottom: 16rpx;
			display: flex;
			justify-content: space-between;

			.label {
				font-size: 26rpx;
				color: #666;
			}

			.value {
				font-size: 28rpx;
				color: #333;
			}
		}
	}
}

.info-card {
	.address-section {
		padding: 12rpx 18rpx;
		margin-bottom: 20rpx;
		border: 1rpx solid rgba(32,203,194,0.1);
		border-radius: 10rpx;
		background: #f8f8f8;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.address-content {
			flex: 1;
		}

		.address-detail {
			font-size: 28rpx;
			color: #333;
			font-weight: bold;
			line-height: 1.4;
		}

		.user-info {
			font-size: 24rpx;
			color: #999;
			margin-top: 10rpx;
		}
	}

	.item-row {
		justify-content: flex-start;

		.value {
			&.bold {
				font-weight: bold;
			}
		}

		.tags {
			display: flex;
			flex-wrap: wrap;
			gap: 10rpx;

			.tag-item {
				color: #03C1B8;
				font-size: 20rpx;
				padding: 4rpx 12rpx;
				border-radius: 4rpx;
				background: #eefaf8;
			}
		}

		.value-group {
			display: flex;
			justify-content: space-between;
		}
	}

	.action-icons {
		margin-top: 20rpx;
		padding-top: 20rpx;
		display: flex;
		justify-content: space-around;
		border-top: 1rpx solid #f5f5f5;

		.icon-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 24rpx;
			color: #666;

			text {
				margin-top: 10rpx;
			}

			&.primary {
				color: #03C1B8;
			}
		}
	}
}

.detail-card {
	.service-main {
		display: flex;
		margin-bottom: 30rpx;

		.service-info {
			flex: 1;
			margin-left: 20rpx;
		}

		.service-title {
			font-size: 28rpx;
			font-weight: bold;
			color: #333;
		}

		.service-sub {
			font-size: 22rpx;
			color: #999;
			margin-top: 6rpx;
		}

		.service-price {
			font-size: 28rpx;
			color: #333;
			font-weight: bold;
		}
	}

	.item-row {
		.value {
			&.discount {
				color: #ff5e5e;
			}
		}
	}

	.total-row {
		font-size: 26rpx;
		color: #333;
		text-align: right;
		margin-top: 20rpx;
		border-top: 1rpx solid #f5f5f5;

		.symbol {
			color: #ff5e5e;
			font-size: 24rpx;
		}

		.amount {
			color: #ff5e5e;
			font-size: 36rpx;
			font-weight: bold;
		}
	}
}

.pay-popup {
	padding: 30rpx;
	background: #fff;

	.worker-header {
		display: flex;
		position: relative;
		margin-bottom: 30rpx;

		.worker-detail {
			margin-left: 20rpx;
			flex: 1;

			.name-row {
				display: flex;
				align-items: center;

				.name {
					font-size: 32rpx;
					font-weight: bold;
				}

				.level-tag {
					background: #5c7fa9;
					color: #fff;
					font-size: 18rpx;
					padding: 2rpx 10rpx;
					border-radius: 100rpx;
					margin-left: 10rpx;
				}
			}

			.intro {
				font-size: 24rpx;
				color: #999;
				margin: 8rpx 0;
			}

			.auth-row {
				display: flex;

				.auth-item {
					font-size: 20rpx;
					color: #03C1B8;
					margin-right: 15rpx;
					display: flex;
					align-items: center;
				}
			}
		}

		.score-badge {
			position: absolute;
			left: 0;
			bottom: -10rpx;
			background: #fff;
			border: 2rpx solid #ff5e5e;
			color: #ff5e5e;
			font-size: 20rpx;
			padding: 0 10rpx;
			border-radius: 100rpx;
		}
	}

	.selected-project-box {
		background: #f8f9fb;
		border-radius: 16rpx;
		padding: 24rpx;

		.proj-main {
			display: flex;
			align-items: center;

			.proj-img {
				width: 100rpx;
				height: 100rpx;
				border-radius: 12rpx;
			}

			.proj-info {
				flex: 1;
				margin-left: 20rpx;

				.p-price {
					font-size: 32rpx;
					color: #ff5e5e;
					font-weight: bold;

					.p-old {
						font-size: 22rpx;
						color: #ccc;
						text-decoration: line-through;
						font-weight: normal;
						margin-left: 10rpx;
					}
				}

				.p-detail {
					font-size: 24rpx;
					color: #666;
					margin-top: 6rpx;
				}
			}

			.detail-link {
				font-size: 24rpx;
				color: #666;
			}
		}

		.recommend-title {
			font-size: 28rpx;
			font-weight: bold;
			margin: 30rpx 0 20rpx;
		}

		.tag-group {
			display: flex;
			flex-wrap: wrap;

			.tag-active {
				border: 2rpx solid #03C1B8;
				color: #03C1B8;
				background: #fff;
				padding: 8rpx 20rpx;
				border-radius: 8rpx;
				font-size: 24rpx;
				margin: 0 16rpx 16rpx 0;
			}

			.tag-normal {
				background: #eeeeee;
				color: #333;
				padding: 10rpx 20rpx;
				border-radius: 8rpx;
				font-size: 24rpx;
				margin: 0 16rpx 16rpx 0;
			}
		}

		.number-row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;

			.label {
				font-size: 26rpx;
				font-weight: bold;
			}
		}
	}

	.pop-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 40rpx;
		padding-bottom: env(safe-area-inset-bottom);

		.footer-total {
			font-size: 28rpx;
			color: #333;

			.f-symbol {
				color: #ff5e5e;
			}

			.f-amount {
				color: #ff5e5e;
				font-size: 40rpx;
				font-weight: bold;
			}
		}

		.submit-btn {
			background: #00e0b5;
			color: #fff;
			padding: 20rpx 80rpx;
			border-radius: 100rpx;
			font-weight: bold;
		}
	}
}
</style>