<template>
	<view class="submit">
		<view class="address-box">
			<view class="left">
				<view class="info">
					<u-icon name="phone" size="22"></u-icon>
					<view class="name">姓名</view>
					<view class="phone">电话</view>
				</view>
				<view class="address">
					<u-icon name="map" size="22"></u-icon>
					<view class="address-text">地址</view>
				</view>
			</view>
			<view class="right">
				<u-icon name="arrow-right" color="#999999" size="40"></u-icon>
			</view>
		</view>

		<view class="order-container">
			<view class="order-header">
				<text class="title">订单详情</text>
			</view>
			<view class="order-items">
				<!-- 商品列表 -->
				<view class="order-item" v-for="(item, index) in items" :key="index">
					<image slot="icon" src="@/static/tools.jpg" style="width: 50px; height: 50px" />
					<view class="item-details">
						<view class="item-name">{{ item.name }}</view>
						<view class="item-quantity">数量: {{ item.quantity }}</view>
						<view class="item-price">价格: ${{ item.price }}</view>
					</view>
				</view>
			</view>
			<view class="order-footer">
				<!-- 订单备注 -->
				<view class="remark" @click="showRemarkModal">
					<text>订单备注:</text>
					<text>{{ remark ? remark : '无备注' }}</text>
					<!-- <u-icon name="arrow-right" color="#999999" size="14"></u-icon> -->
				</view>
			</view>
			<!-- 弹出的备注输入框 -->
			<!-- <view class="modal" v-show="showModal">
				<view class="modal-content">
					<textarea v-model="inputRemark" placeholder="订单备注"></textarea>
					<button @click="saveRemark">保存</button>
				</view>
			</view> -->
		</view>
		<!-- 服务内容 -->
		<view class="container">
			<!-- 服务内容部分 -->
			<view class="title">服务流程</view>
			<!-- 流程页面部分 -->
			<view class="process">
				<view v-for="(item, index) in processList" :key="index" class="process-item">
					<view class="item-header">
						<image class="item-icon" src="@/static/order/pathliuchen.png"></image>
						<text>{{ item }}</text>
					</view>
					<image v-if="index !== processList.length - 1" class="arrow-icon"
						src="@/static/order/pathliuchenjiantou.png"></image>
				</view>
			</view>
		</view>

		<!-- 订单总计 -->
		<view class="container">
			<!-- 服务内容部分 -->
			<view class="title">订单总计</view>

			<!-- 商品总价 -->
			<u-cell size="large" title="商品总计" value="28	"></u-cell>
			<!-- 下拉框组件 -->
			<u-collapse @click="toggleCollapse">
				<u-collapse-item title="优惠卷">
					下拉框内容
				</u-collapse-item>
			</u-collapse>
			<!-- 合计与价格 -->
			<u-cell size="large" title="合计" value="99"></u-cell>
		</view>
		<!-- 支付方式 -->
		<view class="message-box">
			<view class="message-item">
				<view class="item-left"> 支付方式 </view>
				<view class="item-right flex-end">
					<span>在线支付</span>
					<image class="right-img" src="@/static/order/ic_order_weixin.png"></image>
				</view>
			</view>
		</view>

		<!-- 购买须知 -->
		<view class="message-box">
			<view class="message-name"> 购买须知 </view>
			<view class="message-text" style="text-indent:32.4px;">
				洗车机常见的类型有高压洗车机和无水洗车机两种，高压洗车机可以配有不同的喷嘴，可实现不同场景下的清洗需求。
				无水洗车机则是一种更为环保的洗车方式，它可以用高科技的化学技术在不用水的情况下清洗车辆。因此，
				在购买洗车机时需要根据自己的实际需求进行选择
			</view>
		</view>
		
		<view class="btn-box">
			<view class="btn" @click="handlerSettleBtn">
				立即支付
			</view>
		</view>
		
	</view>



</template>

<script>
	export default {
		data() {
			return {
				processList: ['线上订单', '预约时间', '到店核销', '完成离店'],
				items: [{
						name: '商品1',
						quantity: 1,
						price: 10,

					},
					{
						name: '商品2',
						quantity: 2,
						price: 20,

					}
				],
				remark: '', // 订单备注
				inputRemark: '', // 弹框中的备注输入
				showModal: false, // 是否显示弹框
				// showCollapse: false,
				totalPrice: 100 // 替换为您的商品总价
			}
		},
		methods: {
			toggleCollapse() {
				this.showCollapse = !this.showCollapse;
			},
			// 点击订单备注显示弹框
			showRemarkModal() {
				this.inputRemark = this.remark; // 将订单备注传入弹框输入框
				this.showModal = true; // 显示弹框
			},
			// 保存备注
			saveRemark() {
				this.remark = this.inputRemark; // 更新订单备注
				this.showModal = false; // 关闭弹框
			}
		}
	}
</script>

<style lang="scss" scoped>
	.submit {
		padding: 16px;
		background-color: rgb(249, 249, 249);

	}

	.address-box {
		display: flex;
		justify-content: space-between;
		padding: 5px 10px;
		border-radius: 10px;
		background-color: #ffffff;
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);

		.left {
			flex: 1;
			display: flex;
			flex-direction: column;

			.info {
				display: flex;
				align-items: center;

				.icon {
					width: 30px;
					height: 30px;
					margin-right: 10px;
				}

				.name {
					font-weight: bold;
					font-size: 16px;
					margin-left: 10px;
				}

				.phone {
					font-size: 14px;
					margin-left: 10px;
				}
			}

			.address {
				display: flex;
				align-items: center;
				margin-top: 10px;

				.icon {
					margin-right: 10px;
				}

				.address-text {
					font-size: 14px;
					margin-left: 10px;
				}
			}
		}

		.right {
			display: block;
			text-align: right;
			align-self: center;
			/* 垂直居中 */
		}
	}

	.order-container {
		margin-top: 20px;
		border-radius: 10px;
		background-color: #ffffff;
		padding: 20px;
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);

		.order-header {
			margin-bottom: 20px;

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

		.order-items {
			margin-bottom: 20px;

			.order-item {
				display: flex;
				align-items: flex-start;
				margin-bottom: 10px;

				image {
					height: auto;
					margin-right: 10px;
				}

				.item-details {
					flex-grow: 1;

					.item-name {
						font-size: 16px;
						font-weight: bold;
					}

					.item-quantity,
					.item-price {
						font-size: 14px;
						color: #666666;
					}
				}
			}
		}

		.order-footer {
			.remark {
				cursor: pointer;
			}
		}

		.modal {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			display: flex;
			align-items: center;
			justify-content: center;

			.modal-content {
				background-color: #ffffff;
				padding: 20px;
				border-radius: 10px;

				textarea {
					width: 100%;
					height: 100px;
					border-radius: 5px;
					border: 1px solid #ccc;
					resize: none;
					margin-bottom: 10px;
				}

				button {
					width: 100%;
					padding: 10px;
					background-color: #007bff;
					color: #ffffff;
					border: none;
					border-radius: 5px;
					cursor: pointer;
				}
			}
		}

	}

	.container {
		margin-top: 20px;
		border-radius: 10px;
		padding: 10px;
		border-radius: 10px;
		background-color: #ffffff;
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);

		.title {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 10px;
		}

	}


	.process {
		display: flex;
		justify-content: space-between; // 子元素水平分布
		flex-grow: 1;

		.process-item {
			display: flex;
			align-items: center;
			flex-grow: 1;

			/* 使所有子元素等比例宽度 */
			.item-header {
				display: flex; // 子元素采用 Flex 布局
				flex-direction: column;
				align-items: center;
				flex-grow: 1;

				.item-icon {
					width: 40px; // 设置图标宽度
					height: 40px; // 设置图标高度
					margin-right: 10px; // 设置图标与文字之间的间距
				}
			}

			.arrow-icon {
				width: 20px; // 设置箭头图标宽度
				height: 20px; // 设置箭头图标高度
			}
		}

	}

	// .arrow-icon,
	// .process .item-header .item-icon,
	// .process .arrow-icon {
	// 	width: 20px;
	// 	height: 20px;
	// 	margin-right: 5px;
	// }

	// .process .process-item {
	// 	display: flex;
	// 	align-items: center;
	// }

	.item-header .item-icon {
		margin-right: 5px; // 调整图标与文字之间的间距
	}

	.process .process-item:last-child .arrow-icon {
		display: none; // 最后一个标题后面不显示箭头图标
	}

	.message-box {
		border-radius: 10px;
		padding: 10px;
		border-radius: 10px;
		background-color: #ffffff;
		margin-top: 20rpx;
		box-shadow: 5px 5px 5px rgb(0, 0, 0, 0.1);


		.message-item {
			display: flex;
			justify-content: space-between;
			align-items: center;

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

			.item-right {
				width: 60%;
				align-items: center;
				display: flex;
				justify-content: flex-end;

				.right-img {
					width: 50rpx;
					height: 50rpx;
					margin-left: 20rpx;
				}
			}
		}

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

		.message-text {
			margin-top: 20rpx;
			color: #bcbfc3;
		}
	}
	.btn-box {
		width: 100%;
		margin-top: 20px;
		margin-bottom: 30px;
	
		.btn {
			width: 90%;
			// background: linear-gradient(to right, #1d4350, #a43931);
			background-color: #007bff;
			color: #fff;
			border-radius: 40rpx;
			text-align: center;
			font-size: 32rpx;
			padding: 20rpx;
		}
	}
	
</style>