<template>
	<view class="confirm-container">
		<scroll-view class="content-scroll" scroll-y>
			<!-- 收货地址 -->
			<view class="address-section">
				<!-- 有地址时显示 -->
				<view class="section-header" @click="selectAddress" v-if="address.name">
					<view class="address-info">
						<view class="user-info">
							<text class="username">{{ address.name }}</text>
							<text class="phone">{{ formatPhone(address.phone) }}</text>
							<text class="default-tag" v-if="address.isDefault">默认地址</text>
						</view>
						<view class="address-detail">
							<text>{{ address.fullAddress }}</text>
						</view>
					</view>
					<uni-icons type="right" size="16" color="#c0c4cc" />
				</view>

				<!-- 没有地址时显示 -->
				<view class="empty-address" @click="selectAddress" v-else>
					<view class="empty-address-content">
						<uni-icons type="location" size="24" color="#c0c4cc" />
						<view class="empty-address-text">
							<text class="empty-title">请选择收货地址</text>
							<text class="empty-tip">点击添加收货地址信息</text>
						</view>
					</view>
					<uni-icons type="right" size="16" color="#c0c4cc" />
				</view>
			</view>

			<!-- 预约日期 -->
			<view class="date-section">
				<view class="section-title">
					<text>预约日期</text>
					<text class="required">*</text>
				</view>
				<view class="date-picker-container">
					<uni-datetime-picker v-model="selectedDate" type="date" :clear-icon="false" placeholder="请选择预约日期"
						@change="onDateChange">
						<view class="date-input">
							<text class="date-text" :class="{ placeholder: !selectedDate }">
								{{ selectedDate || "请选择预约日期" }}
							</text>
							<uni-icons type="calendar" size="18" color="#c0c4cc" />
						</view>
					</uni-datetime-picker>
				</view>
			</view>

			<!-- 商品信息 -->
			<view class="goods-section">
				<!-- <view class="section-title">
          <text>{{ goodsInfo.title || "-" }}</text>
        </view> -->
				<view class="goods-card">
					<image class="goods-image" :src="goodsInfo.image" mode="aspectFill" />
					<view class="goods-info">
						<text class="goods-name">{{ goodsInfo.goodsName || "--" }}</text>

						<!-- 规格选择按钮 -->
						<view class="specifications-list">
							<view class="spec-item" v-for="(spec, specIndex) in specifications" :key="specIndex"
								@click="selectSpecification(specIndex)">
								<view class="spec-content">
									<text class="spec-label">第{{ specIndex + 1 }}份规格</text>
									<text class="spec-text" :class="{ placeholder: !spec.selectedSpec }">
										{{ spec.selectedSpec || "请选择规格" }}
									</text>
								</view>
								<uni-icons type="right" size="14" color="#c0c4cc" />
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 备注 -->
			<view class="note-section">
				<view class="section-row">
					<text class="section-label">备注</text>
					<view class="note-input">
						<input v-model="note" placeholder="选填" placeholder-class="placeholder" maxlength="200" />
					</view>
				</view>
			</view>

			<!-- 费用明细 -->
			<view class="cost-section">
				<!--  <view class="cost-item">
          <text class="cost-label">商品金额</text>
          <text class="cost-value">¥{{ totalAmount || "0.00" }}</text>
        </view> -->
				<!-- <view class="cost-item">
          <text class="cost-label">运费</text>
          <text class="cost-value">{{ shipping || "预约发货时计算" }}</text>
        </view> -->
				<view class="cost-item">
					<text class="cost-label">优惠券</text>
					<text class="cost-value coupon">{{ coupon || "无可用 >" }}</text>
				</view>
			</view>
			<view class="submit-section-content" style="height: 230rpx"> </view>
		</scroll-view>

		<!-- SKU选择弹窗 -->
		<uni-popup ref="specificationPopup" type="bottom">
			<view class="specification-popup">
				<view class="popup-header">
					<text class="popup-title">选择规格</text>
					<text class="popup-close" @click="closeSpecificationPopup">×</text>
				</view>

				<view class="popup-content">
					<!-- 商品信息 -->
					<view class="goods-preview">
						<image class="preview-image" :src="currentGoods.image || '/static/image/goods-default.jpg'"
							mode="aspectFill" />
						<view class="preview-info">
							<text class="preview-name">{{ currentGoods.goodsName }}</text>
						</view>
					</view>
					<!-- SKU选择 -->
					<view class="sku-section">
						<text class="sku-title">选择规格</text>
						<view class="sku-options">
							<view v-for="(sku, index) in goodsInfo.specCombinations" :key="sku.specCombinationId"
								:class="['sku-option', { active: selectedSkuIndex === index }]"
								@click="selectSku(index,sku)">
								<view class="sku-option-content">
									<view class="sku-option-info">
										<text class="sku-option-name">{{
											  getSkuDisplayName(sku)
											}}</text>
										<!-- <text class="sku-option-price">¥{{ sku.salePrice }}</text> -->
									</view>
									<view class="sku-option-details">
										<text class="sku-option-quantity">库存: {{ sku.quantity }}</text>
										<!-- <text class="sku-option-code">编码: {{ sku.skuCode }}</text> -->
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 确认按钮 -->
				<view class="popup-actions">
					<button class="confirm-spec-btn" @click="confirmSpecification" :disabled="selectedSkuIndex === -1">
						确认规格
					</button>
				</view>
			</view>
		</uni-popup>

		<!-- 底部提交区域 -->
		<view class=" " style="position: fixed; width: 100%; bottom: 0; z-index: 98">
			<view class="submit-section">
				<view class="total-price">
					<text class="total-amount">¥{{ shipping || "0.00" }}</text>
				</view>
				<button class="submit-btn" @click="submitOrder">提交订单</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 收货地址信息
				address: {
					name: "",
					phone: "",
					fullAddress: "",
					isDefault: false,
				},
				// 选中的日期
				selectedDate: "",
				// 商品信息
				goodsInfo: {
					id: "",
					name: "",
					desc: "",
					price: "",
					image: "",
					specCombinations: [],
				},
				// 备注
				note: "",
				// 运费
				shipping: "",
				// 优惠券
				coupon: "",
				// 总金额
				totalAmount: "0.00",

				// SKU选择相关
				currentSpecIndex: -1,
				currentGoods: {},
				selectedSkuIndex: -1,
				specifications: [],
				orderChildId: ''
			};
		},

		onLoad(options) {
			// 接收页面参数
			if (options.goodsId) {
				this.orderChildId = options.orderChildId
				this.loadGoodsInfo(options.goodsId, options.orderChildId);
			}
			if (options.goodsName) {
				this.goodsInfo.name = decodeURIComponent(options.goodsName);
			}
			this.loadDefaultAddress();

			// 监听地址选择事件
			uni.$on("addressSelected", this.handleAddressSelected);
		},

		onShow() {
			// 从地址选择页面返回时，优先检查用户选择的地址
			const hasSelectedAddress = this.checkSelectedAddress();
			// 如果没有选择地址且当前也没有地址，才加载默认地址
			if (!hasSelectedAddress && !this.address.id) {
				this.loadDefaultAddress();
			}
		},

		onUnload() {
			// 移除事件监听
			uni.$off("addressSelected", this.handleAddressSelected);
		},

		methods: {
			// 处理地址选择事件
			handleAddressSelected(data) {
				if (data.fromPage === "orderConfirm") {
					this.updateAddressInfo(data.address);
					console.log("地址已更新:", this.address);
				}
			},

			// 更新地址信息的统一方法
			updateAddressInfo(addressData) {
				this.address = {
					id: addressData.id,
					name: addressData.name,
					phone: addressData.tel,
					fullAddress: addressData.address || this.getFullAddress(addressData),
					isDefault: addressData.is_default == 1,
				};
			},

			// 检查storage中的选中地址
			checkSelectedAddress() {
				try {
					const selectedAddress = uni.getStorageSync("selectedAddress");
					if (selectedAddress) {
						this.updateAddressInfo(selectedAddress);
						// 清除storage
						uni.removeStorageSync("selectedAddress");
						return true; // 表示找到了选中的地址
					}
					return false;
				} catch (error) {
					console.error("读取选中地址失败:", error);
					return false;
				}
			},

			// 获取完整地址
			getFullAddress(addressData) {
				const province = addressData.province_text || "";
				const city = addressData.city_text || "";
				const district = addressData.district_text || "";
				const detail = addressData.detail_addr || "";
				return `${province}${city}${district}${detail}`;
			},

			// 格式化手机号
			formatPhone(phone) {
				if (!phone) return "";
				return phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
			},

			// 选择收货地址
			selectAddress() {
				uni.navigateTo({
					url: "/subPackages/user/travelerList?from=orderConfirm",
				});
			},

			// 日期变化回调
			onDateChange(date) {
				this.selectedDate = date;
				console.log("选择的日期:", date);
			},

			// 加载商品信息
			async loadGoodsInfo(goodsId, orderChildId) {
				try {
					// 这里调用实际的API接口获取商品详情
					this.Post({
							orderChildId: orderChildId,
						},
						`/framework/goods/queryByGoodsId/${goodsId}`,
						"DES"
					).then((res) => {
						if (res.code == 200) {
							this.goodsInfo = res.data;
							this.goodsInfo.image = res.data.mainUrl.split(",")[0];

							// 初始化规格选择数组
							for (var i = 0; i < res.data.orderChildNum; i++) {
								this.specifications.push({
									selectedSpec: "",
									selectedSkuIndex: -1,
									selectedSku: null,
								});
							}
							this.calculateTotalAmount();
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none",
							});
						}
					});
				} catch (error) {
					console.error("加载商品信息失败:", error);
				}
			},

			// 加载默认地址
			async loadDefaultAddress() {
				try {
					this.Post({
							isDefault: 1,
						},
						"/framework/concat/selectList",
						"DES"
					).then((res) => {
						if (res.data) {
							this.updateAddressInfo(res.data[0]);
						}
					});
				} catch (error) {
					console.error("加载默认地址失败:", error);
				}
			},

			// 选择规格
			selectSpecification(specIndex) {
				this.currentSpecIndex = specIndex;
				this.currentGoods = this.goodsInfo;

				// 回显之前的选择
				const currentSpec = this.specifications[specIndex];
				this.selectedSkuIndex = currentSpec.selectedSkuIndex || -1;

				this.$refs.specificationPopup.open();
			},

			// 关闭规格选择弹窗
			closeSpecificationPopup() {
				this.$refs.specificationPopup.close();
				this.resetSpecificationData();
			},

			// 重置规格选择数据
			resetSpecificationData() {
				this.selectedSkuIndex = -1;
			},

			// 选择SKU
			selectSku(index,sku) {
				if(sku.quantity>0){
					this.selectedSkuIndex = index;
				}else{
					uni.showToast({
						title:'当前规格暂无库存',
						icon:'none'
					})
				}
			},

			// 获取SKU显示名称
			getSkuDisplayName(sku) {
				let displayName = "";
				if (sku.specValueOne) {
					displayName += sku.specValueOne;
				}
				if (sku.specValueTwo) {
					displayName += ` / ${sku.specValueTwo}`;
				}
				return displayName || "默认规格";
			},

			// 确认规格选择
			confirmSpecification() {
				if (this.selectedSkuIndex === -1) {
					uni.showToast({
						title: "请选择规格",
						icon: "none",
					});
					return;
				}

				const selectedSku =
					this.goodsInfo.specCombinations[this.selectedSkuIndex];

				// 更新商品规格信息
				this.specifications[this.currentSpecIndex].selectedSpec =
					this.getSkuDisplayName(selectedSku);
				this.specifications[this.currentSpecIndex].selectedSkuIndex =
					this.selectedSkuIndex;
				this.specifications[this.currentSpecIndex].selectedSku = selectedSku;

				// 重新计算总金额
				this.calculateTotalAmount();

				this.closeSpecificationPopup();

				uni.showToast({
					title: "规格选择成功",
					icon: "success",
				});
			},

			// 计算总金额
			calculateTotalAmount() {
				let total = 0;
				this.specifications.forEach((spec) => {
					if (spec.selectedSku) {
						total += parseFloat(spec.selectedSku.salePrice);
					}
				});
				this.totalAmount = total.toFixed(2);
			},

			// 提交订单
			async submitOrder() {
				// 验证必填项
				if (!this.selectedDate) {
					uni.showToast({
						title: "请选择预约日期",
						icon: "none",
					});
					return;
				}

				// 验证是否已选择所有规格
				const unselectedSpecs = this.specifications.filter(
					(spec) => !spec.selectedSpec
				);
				if (unselectedSpecs.length > 0) {
					uni.showToast({
						title: "请选择所有规格",
						icon: "none",
					});
					return;
				}

				if (!this.address.name) {
					uni.showToast({
						title: "请选择收货地址",
						icon: "none",
					});
					return;
				}

				uni.showLoading({
					title: "提交中...",
				});
				const orderData = {
					goodsId: this.goodsInfo.goodsId,
					contactId: this.address.id,
					bookDeliveryTime: this.selectedDate,
					remark: this.note,
					orderChildId: this.orderChildId,
					// totalAmount: this.totalAmount,
					orderExchangeDetailBoList: this.specifications
						.filter((spec) => spec.selectedSpec).map(item => {
							return {
								specCombinationId: item.selectedSku.specCombinationId,
								specValueOne: item.selectedSku.specValueOne,
								specValueTwo: item.selectedSku.specValueTwo,
								orderChildId: this.orderChildId,
								quantity:1
							}
						})

				};
				this.Post({
						...orderData,
						method:'post'
					},
					"/framework/order/exchange",
					"DES"
				).then((res) => {
					if (res.code == 200) {
						uni.hideLoading();
						uni.showToast({
							title: '预约成功',
							icon: "none",
						});
						setTimeout(() => {
							uni.redirectTo({
								url: "/subPackages/orderQy/list",
							});
						}, 1500);
					} else {
						uni.hideLoading();
						uni.showToast({
							title: res.msg,
							icon: "none",
						});
					}
				});

			},
		},
	};
</script>

<style lang="scss" scoped>
	// 主题色彩变量
	$primary-color: #667eea;
	$secondary-color: #f8f9fa;
	$text-primary: #2d3748;
	$text-secondary: #718096;
	$text-muted: #a0aec0;
	$border-color: #e2e8f0;
	$success-color: #48bb78;
	$warning-color: #ed8936;
	$danger-color: #f56565;
	$bg-light: #f7fafc;

	.confirm-container {
		height: 100vh;
		background-color: $bg-light;
		display: flex;
		flex-direction: column;
	}

	.content-scroll {
		flex: 1;
		padding: 20rpx;
		width: 710rpx;
	}

	// 通用section样式
	.section-header,
	.section-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 30rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 28rpx;
		color: $text-primary;
		font-weight: 600;
		margin-bottom: 16rpx;

		.required {
			color: $danger-color;
			margin-left: 4rpx;
		}
	}

	// 收货地址
	.address-section {
		margin-bottom: 24rpx;
	}

	.address-info {
		flex: 1;
	}

	.user-info {
		display: flex;
		align-items: center;
		margin-bottom: 12rpx;
		gap: 16rpx;
	}

	.username {
		font-size: 28rpx;
		color: $text-primary;
		font-weight: 600;
	}

	.phone {
		font-size: 24rpx;
		color: $text-secondary;
	}

	.default-tag {
		font-size: 20rpx;
		color: $primary-color;
		background-color: rgba(102, 126, 234, 0.1);
		padding: 4rpx 12rpx;
		border-radius: 12rpx;
	}

	.address-detail {
		font-size: 26rpx;
		color: $text-secondary;
		line-height: 1.4;
	}

	// 空地址状态
	.empty-address {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 30rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		border: 2rpx dashed $border-color;
		transition: all 0.3s ease;

		&:active {
			background-color: rgba(102, 126, 234, 0.02);
			border-color: $primary-color;
		}
	}

	.empty-address-content {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	.empty-address-text {
		display: flex;
		flex-direction: column;
		gap: 6rpx;
	}

	.empty-title {
		font-size: 28rpx;
		color: $text-primary;
		font-weight: 500;
	}

	.empty-tip {
		font-size: 24rpx;
		color: $text-muted;
	}

	// 预约日期
	.date-section {
		margin-bottom: 24rpx;
	}

	.date-picker-container {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 24rpx 30rpx;
	}

	.date-input {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.date-text {
		font-size: 28rpx;
		color: $text-primary;

		&.placeholder {
			color: $text-muted;
		}
	}

	// 商品信息
	.goods-section {
		margin-bottom: 24rpx;
	}

	.goods-card {
		display: flex;
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 24rpx;
		gap: 20rpx;
	}

	.goods-image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 12rpx;
		flex-shrink: 0;
	}

	.goods-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 12rpx;
	}

	.goods-name {
		font-size: 26rpx;
		color: $text-primary;
		font-weight: 600;
		line-height: 1.4;
	}

	// 备注
	.note-section {
		margin-bottom: 24rpx;

		.section-row {
			align-items: flex-start;
		}
	}

	.section-label {
		font-size: 28rpx;
		color: $text-primary;
		font-weight: 500;
	}

	.note-input {
		flex: 1;
		margin-left: 40rpx;

		input {
			font-size: 26rpx;
			color: $text-primary;
			text-align: right;
			width: 100%;
		}

		.placeholder {
			color: $text-muted;
		}
	}

	// 费用明细
	.cost-section {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 24rpx 30rpx;
		margin-bottom: 24rpx;
	}

	.cost-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16rpx 0;

		&:not(:last-child) {
			border-bottom: 1px solid $border-color;
		}
	}

	.cost-label {
		font-size: 26rpx;
		color: $text-primary;
	}

	.cost-value {
		font-size: 26rpx;
		color: $text-primary;

		&.coupon {
			color: $text-muted;
		}
	}

	// 底部提交区域
	.submit-section {
		flex-shrink: 0; // 防止被压缩
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 30rpx;
		background-color: #ffffff;
		border-top: 1px solid $border-color;
		box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.04);

		// 添加安全区域适配
		padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
	}

	.submit-section-content {
		padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
	}

	.total-price {
		flex: 1;
	}

	.total-amount {
		font-size: 36rpx;
		color: $danger-color;
		font-weight: 600;
		font-family: "SF Mono", "Monaco", "Cascadia Code", monospace;
	}

	.submit-btn {
		background-color: $text-primary;
		color: #ffffff;
		border: none;
		border-radius: 32rpx;
		padding: 4rpx 48rpx;
		font-size: 28rpx;
		font-weight: 600;
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.95);
			background-color: rgba(45, 55, 72, 0.8);
		}
	}

	// SKU选择弹窗样式
	.specification-popup {
		background: white;
		border-radius: 24rpx 24rpx 0 0;
		max-height: 80vh;
		overflow: hidden;
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 32rpx 30rpx 24rpx;
		border-bottom: 1rpx solid $border-color;

		.popup-title {
			font-size: 32rpx;
			font-weight: 600;
			color: $text-primary;
		}

		.popup-close {
			font-size: 40rpx;
			color: $text-muted;
			line-height: 1;
			padding: 8rpx;
			cursor: pointer;
			transition: color 0.3s;

			&:active {
				color: $text-secondary;
			}
		}
	}

	.popup-content {
		padding: 30rpx;
		max-height: 60vh;
		overflow-y: auto;
	}

	// 商品预览
	.goods-preview {
		display: flex;
		align-items: center;
		gap: 20rpx;
		padding: 24rpx;
		background: $bg-light;
		border-radius: 16rpx;
		margin-bottom: 30rpx;

		.preview-image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 12rpx;
			flex-shrink: 0;
		}

		.preview-info {
			flex: 1;
			display: flex;
			flex-direction: column;
			gap: 8rpx;
		}

		.preview-name {
			font-size: 26rpx;
			color: $text-primary;
			font-weight: 500;
			line-height: 1.3;
		}
	}

	// SKU选择区域
	.sku-section {
		margin-bottom: 30rpx;

		.sku-title {
			font-size: 28rpx;
			color: $text-primary;
			font-weight: 600;
			margin-bottom: 20rpx;
			display: block;
		}

		.sku-options {
			display: flex;
			flex-direction: column;
			gap: 16rpx;
		}

		.sku-option {
			padding: 20rpx;
			border: 2rpx solid $border-color;
			border-radius: 12rpx;
			background: white;
			transition: all 0.3s ease;
			cursor: pointer;

			&:active {
				transform: scale(0.98);
			}

			&.active {
				border-color: $primary-color;
				background: rgba(102, 126, 234, 0.05);
			}

			.sku-option-content {
				display: flex;
				flex-direction: column;
				gap: 12rpx;
			}

			.sku-option-info {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.sku-option-name {
				font-size: 28rpx;
				color: $text-primary;
				font-weight: 600;
			}

			.sku-option-price {
				font-size: 28rpx;
				color: $danger-color;
				font-weight: 600;
			}

			.sku-option-details {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;
				color: $text-secondary;
			}

			.sku-option-quantity {
				color: $success-color;
			}

			.sku-option-code {
				color: $text-muted;
			}
		}
	}

	// 确认按钮
	.popup-actions {
		padding: 24rpx 30rpx 40rpx;
		border-top: 1rpx solid $border-color;
		background: white;

		.confirm-spec-btn {
			width: 100%;
			height: 88rpx;
			background: $primary-color;
			color: white;
			border: none;
			border-radius: 44rpx;
			font-size: 32rpx;
			font-weight: 600;
			transition: all 0.3s ease;

			&:active {
				transform: scale(0.98);
				background: rgba(102, 126, 234, 0.8);
			}

			&:disabled {
				background: $text-muted;
				cursor: not-allowed;
			}
		}
	}

	// 商品卡片中的规格信息样式
	.specifications-list {
		margin: 12rpx 0;
	}

	.spec-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16rpx 0;
		border-bottom: 1rpx solid #f0f0f0;

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

	.spec-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.spec-label {
		font-size: 22rpx;
		color: $text-secondary;
		font-weight: 500;
	}

	.spec-text {
		font-size: 24rpx;
		color: $text-primary;
		font-weight: 500;

		&.placeholder {
			color: $text-muted;
		}
	}
</style>