<template>
	<view class="container">
		<!-- 商品内容区域 -->
		<view class="content">
			<!-- 商品图片轮播 -->
			<view class="goods-carousel" v-if="goodsData.goodsImage && goodsData.goodsImage.length > 0">
				<swiper class="carousel-swiper" :indicator-dots="goodsData.goodsImage.length > 1"
					:autoplay="goodsData.goodsImage.length > 1" :interval="3000" :duration="500"
					indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff">
					<swiper-item v-for="(image, index) in goodsData.goodsImage" :key="index">
						<image class="carousel-image" :src="image" mode="aspectFill" @error="handleImageError"
							@load="handleImageLoad"></image>
					</swiper-item>
				</swiper>
			</view>

			<!-- 积分信息卡片 -->
			<view class="points-card">
				<!-- 积分和兑换数量 -->
				<view class="points-row">
					<view class="points-left">
						<text class="points-value">{{ goodsData.points }}</text>
						<text class="points-unit">积分</text>
					</view>
					<text class="exchange-count">已兑换{{ formatCount(goodsData.exchangeCount) }}件</text>
				</view>

				<!-- 会员标签 -->
				<view class="member-tags">
					<text class="member-level">{{ goodsData.memberLevel }}</text>
					<text class="purchase-limit">每人限{{ goodsData.limit }}件</text>
				</view>

				<!-- 优惠券名称 -->
				<view class="coupon-title-section">
					<text class="coupon-title-text">{{ goodsData.name }}</text>
				</view>
			</view>

			<!-- 详情信息 -->
			<view class="detail-section">
				<text class="detail-title">详情信息</text>
				<view class="detail-banner" v-if="goodsData.goodsContent">
					<rich-text class="banner-text" :nodes="goodsData.goodsContent"></rich-text>
				</view>
			</view>
		</view>

		<!-- 底部兑换按钮 -->
		<view class="bottom-bar">
			<button class="exchange-btn" :class="getButtonClass()" :disabled="!canExchange" @click="handleExchange">
				{{ getButtonText() }}
			</button>
		</view>

		<!-- 规格选择弹窗 -->
		<view class="spec-modal-overlay" v-if="showSpecModal" @click="closeSpecModal">
			<view class="spec-modal-content" @click.stop>
				<!-- 关闭按钮 -->
				<view class="close-btn" @click="closeSpecModal">
					<text class="close-icon">×</text>
				</view>

				<!-- 商品信息 -->
				<view class="product-info">
					<view class="product-image">
						<text class="image-placeholder">商品图片</text>
					</view>
					<view class="product-details">
						<text class="product-points">{{ goodsData.points }}积分</text>
						<text class="product-stock">库存 {{ formatCount(goodsData.exchangeCount) }}件</text>
					</view>
				</view>

				<!-- 净含量选择 -->
				<view class="spec-section">
					<text class="spec-label">净含量</text>
					<view class="spec-options">
						<view class="spec-option" :class="{ active: selectedSpec === spec.value }"
							v-for="spec in specOptions" :key="spec.value" @click="selectSpec(spec.value)">
							<text class="spec-text">{{ spec.label }}</text>
						</view>
					</view>
				</view>

				<!-- 数量选择 -->
				<view class="quantity-section">
					<text class="quantity-label">选择数量 <text class="limit-text">(限购{{ goodsData.limit }}件)</text></text>
					<view class="quantity-selector">
						<view class="quantity-btn " @click="decreaseQuantity" :disabled="quantity <= 1">-</view>
						<text class="quantity-value">{{ quantity }}</text>
						<view class="quantity-btn " @click="increaseQuantity"
							:disabled="quantity >= parseInt(goodsData.limit)">+</view>
					</view>
				</view>

				<!-- 确认按钮 -->
				<button class="confirm-spec-btn" @click="confirmSpecSelection">确认</button>
			</view>
		</view>

		<!-- 兑换确认弹窗 -->
		<view class="modal-overlay" v-if="showConfirmModal" @click="closeModal">
			<view class="modal-content" @click.stop>
				<view class="modal-title">兑换确认</view>
				<view class="modal-message">本次兑换需要消耗{{ goodsData.points }}积分</view>
				<view class="modal-buttons">
					<button class="modal-btn cancel-btn" @click="closeModal">取消</button>
					<button class="modal-btn confirm-btn" @click="confirmExchange">确定</button>
				</view>
				<view class="modal-disclaimer">已发货商品非质量问题不退不换</view>
			</view>
			<!-- 关闭按钮 -->
			<view class="modal-close-btn" @click="closeModal">
				<text class="modal-close-icon">×</text>
			</view>
		</view>
	</view>
</template>

<script>
import { fetchGoodsDetail, fetchGoodsPrice, fetchTradeCredits } from '@/api/goods.js';

export default {
	data() {
		return {
			goodsData: {
				id: '',
				points: 12000,
				exchangeCount: 158000,
				memberLevel: '铂金会员',
				limit: '2',
				name: '优惠券名称占位优惠券名称占位',
				couponName: '淘票票电影代金券',
				expireDate: '2017-07-12',
				remainDays: 18,
				isSoldOut: false
			},
			isLoading: true,
			showConfirmModal: false,
			showSpecModal: false,
			userPoints: 8000, // 用户当前积分
			userLevel: '黄金会员', // 用户当前等级
			userBuyLimit: false, // 用户购买限制
			goodsLimit: false, // 商品限购
			// 规格选择相关
			specOptions: [
				{ label: '750g', value: '750g' },
				{ label: '900g', value: '900g' },
				{ label: '1200g', value: '1200g' }
			],
			selectedSpec: '750g',
			quantity: 1,
			// 订单相关
			orderParams: {}, // 订单参数
			priceData: null, // 价格计算结果
			orderResult: null // 下单结果
		}
	},
	computed: {
		// 是否可以兑换
		canExchange() {
			// 检查库存
			if (this.goodsData.isSoldOut || this.goodsData.exchangeCount <= 0) {
				return false;
			}

			// 检查积分
			if (this.goodsData.isInsufficientCredits || this.userPoints < this.goodsData.points) {
				return false;
			}

			// 检查等级
			if (!this.checkUserLevel()) {
				return false;
			}

			// 检查兑换限制
			if (this.userBuyLimit || this.goodsLimit) {
				return false;
			}

			return true;
		},

		// 兑换状态
		exchangeStatus() {
			// 1. 检查库存 - 优先级最高
			if (this.goodsData.isSoldOut || this.goodsData.exchangeCount <= 0) {
				return 'soldOut';
			}

			// 2. 检查积分
			if (this.goodsData.isInsufficientCredits || this.userPoints < this.goodsData.points) {
				return 'insufficientPoints';
			}

			// 3. 检查等级
			if (!this.checkUserLevel()) {
				return 'insufficientLevel';
			}

			// 4. 检查兑换限制
			if (this.userBuyLimit || this.goodsLimit) {
				return 'exchangeLimit';
			}

			// 5. 可以兑换
			return 'canExchange';
		}
	},
	onLoad(options) {
		console.log('页面参数:', options);

		// 构建API请求参数
		const apiParams = {
			gid: options.gid || options.id || options.goodsId || '', // 商品ID (必须)
			skuld: options.skuld || '', // 商品规格ID (可选)
			buy_num: parseInt(options.buy_num) || 1, // 下单数量 (可选，默认1)
			phone: options.phone || '', // 充值号码 (可选)
			amount: options.amount || '', // 充值面额 (可选)
			couponId: options.couponId || '', // 优惠券ID (可选)
			remark: options.remark || '', // 下单备注 (可选)
			addressId: options.addressId || '', // 地址ID (可选)
			storeId: options.storeId || '', // 门店ID (可选)
			projectId: options.projectId || '' // 活动ID (可选)
		};

		console.log('API请求参数:', apiParams);

		if (apiParams.gid) {
			this.fetchGoodsDetail(apiParams);
		} else {
			uni.showToast({
				title: '商品ID不能为空',
				icon: 'none'
			});
			// 延迟返回上一页
			setTimeout(() => {
				uni.navigateBack();
			}, 1500);
		}
	},
	methods: {
		// 返回上一页
		navigateBack() {
			uni.navigateBack();
		},

		// 获取商品详情
		async fetchGoodsDetail(params) {
			this.isLoading = true;
			console.log('开始获取商品详情，请求参数:', params);
			try {
				const response = await fetchGoodsDetail(params);
				console.log('商品详情接口返回:', response);

				if (response.ok && response.data) {
					const data = response.data;

					// 映射API数据到组件数据
					this.goodsData = {
						id: data.id || '',
						points: parseInt(data.credits) || 0,
						exchangeCount: data.stock || 0,
						memberLevel: this.getMemberLevel(data.state),
						limit: data.goodsLimit ? '1' : '2',
						name: data.goodsName || '',
						couponName: data.goodsName || '',
						expireDate: data.expireTime && data.expireTime.length > 0 ? data.expireTime[0] : '',
						remainDays: this.calculateRemainDays(data.expireTime),
						isSoldOut: data.stock <= 0 || data.state === 0 || data.buttonText.includes('库存不足'),
						isInsufficientCredits: data.buttonText.includes('碳能量不足') || data.buttonText.includes('积分不足'),
						goodsType: data.goodsType || '',
						goodsContent: data.goodsContent || '',
						goodsDeclare: data.goodsDeclare || '',
						goodsIcon: data.goodsIcon || '',
						goodsImage: data.goodsImage || [],
						creditsType: data.creditsType || '',
						priceMarket: data.priceMarket || '',
						priceSale: data.priceSale || '',
						buttonText: data.buttonText || '立即兑换',
						address: data.address || null,
						phone: data.phone || '',
						stores: data.stores || [],
						skus: data.skus || [],
						amount: data.amount || [],
						checkRule: data.checkRule || {},
						failRule: data.failRule || {},
						exchangeTime: data.exchangeTime || {},
						virtualConfig: data.virtualConfig || {}
					};

					// 更新用户购买限制状态
					this.userBuyLimit = data.userBuyLimit || false;
					this.goodsLimit = data.goodsLimit || false;

					// 根据商品类型设置规格选项
					this.setSpecOptions(data.skus);

				} else {
					uni.showToast({
						title: response.msg || '获取商品详情失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('获取商品详情失败:', error);
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none'
				});
			} finally {
				this.isLoading = false;
			}
		},

		// 根据商品状态获取会员等级
		getMemberLevel(goodsState) {
			// 根据goodsState映射到会员等级
			const stateMap = {
				1: '普通会员',
				2: '黄金会员',
				3: '铂金会员',
				4: '钻石会员'
			};
			return stateMap[goodsState] || '普通会员';
		},

		// 计算剩余天数
		calculateRemainDays(expireTime) {
			if (!expireTime || expireTime.length === 0) return 0;

			const expireDate = new Date(expireTime[0]);
			const now = new Date();
			const diffTime = expireDate.getTime() - now.getTime();
			const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

			return diffDays > 0 ? diffDays : 0;
		},

		// 根据SKU设置规格选项
		setSpecOptions(skus) {
			// 确保 specOptions 始终是一个数组
			this.specOptions = [];

			if (!skus || skus.length === 0) {
				return;
			}

			// 从SKU中提取规格选项
			const specMap = new Map();
			skus.forEach(sku => {
				if (sku.specs && sku.specs.length > 0) {
					sku.specs.forEach(spec => {
						if (!specMap.has(spec.key)) {
							specMap.set(spec.key, []);
						}
						if (!specMap.get(spec.key).includes(spec.attr)) {
							specMap.get(spec.key).push(spec.attr);
						}
					});
				}
			});

			// 转换为规格选项格式
			specMap.forEach((values, key) => {
				values.forEach(value => {
					this.specOptions.push({
						label: value,
						value: value,
						key: key
					});
				});
			});

			// 设置默认选中第一个规格
			if (this.specOptions.length > 0) {
				this.selectedSpec = this.specOptions[0].value;
			}
		},

		// 检查用户等级是否符合要求
		checkUserLevel() {
			const levelMap = {
				'普通会员': 1,
				'黄金会员': 2,
				'铂金会员': 3,
				'钻石会员': 4
			};
			return levelMap[this.userLevel] >= levelMap[this.goodsData.memberLevel];
		},

		// 格式化数量显示
		formatCount(count) {
			if (count >= 10000) {
				return (count / 10000).toFixed(1) + '万';
			}
			return count.toString();
		},

		// 获取按钮样式类
		getButtonClass() {
			return {
				'disabled': !this.canExchange,
				'sold-out': this.exchangeStatus === 'soldOut',
				'insufficient-points': this.exchangeStatus === 'insufficientPoints',
				'insufficient-level': this.exchangeStatus === 'insufficientLevel',
				'exchange-limit': this.exchangeStatus === 'exchangeLimit'
			};
		},

		// 获取按钮文本
		getButtonText() {
			switch (this.exchangeStatus) {
				case 'soldOut':
					return '已抢完';
				case 'insufficientPoints':
					return '积分不足';
				case 'insufficientLevel':
					return '等级不足';
				case 'exchangeLimit':
					return '已达兑换上限';
				case 'canExchange':
				default:
					return '立即兑换';
			}
		},

		// 处理兑换
		handleExchange() {
			if (!this.canExchange) {
				this.showStatusMessage();
				return;
			}

			// 显示规格选择弹窗
			this.showSpecModal = true;
		},

		// 显示状态提示信息
		showStatusMessage() {
			let message = '';
			switch (this.exchangeStatus) {
				case 'soldOut':
					message = '该商品已抢完';
					break;
				case 'insufficientPoints':
					message = `积分不足，还需要${this.goodsData.points - this.userPoints}积分`;
					break;
				case 'insufficientLevel':
					message = `需要${this.goodsData.memberLevel}及以上等级`;
					break;
				case 'exchangeLimit':
					message = '您已达到该商品的兑换上限';
					break;
				default:
					message = '无法兑换该商品';
			}

			uni.showToast({
				title: message,
				icon: 'none',
				duration: 2000
			});
		},

		// 关闭规格选择弹窗
		closeSpecModal() {
			this.showSpecModal = false;
		},

		// 选择规格
		selectSpec(value) {
			this.selectedSpec = value;
		},

		// 增加数量
		increaseQuantity() {
			if (this.quantity < parseInt(this.goodsData.limit)) {
				this.quantity++;
			}
		},

		// 减少数量
		decreaseQuantity() {
			if (this.quantity > 1) {
				this.quantity--;
			}
		},

		// 确认规格选择
		confirmSpecSelection() {
			this.closeSpecModal();
			// 显示兑换确认弹窗
			this.showConfirmModal = true;
		},

		// 关闭弹窗
		closeModal() {
			this.showConfirmModal = false;
		},

		// 确认兑换
		async confirmExchange() {
			this.closeModal();
			await this.exchangeGoods();
		},

		// 兑换商品
		async exchangeGoods() {
			try {
				uni.showLoading({
					title: '兑换中...'
				});

				// 1. 先计算价格
				await this.calculatePrice();

				// 2. 判断商品类型，决定是否需要跳转结算页面
				if (this.goodsData.goodsType === 'physical') {
					// 实物商品需要跳转到结算页面
					this.navigateToSettlement();
				} else {
					// 虚拟商品直接下单
					await this.createOrder();
				}

			} catch (error) {
				console.error('兑换失败:', error);
				uni.hideLoading();
				uni.showToast({
					title: error.message || '兑换失败，请重试',
					icon: 'none'
				});
			}
		},

		// 计算商品价格
		async calculatePrice() {
			try {
				const priceParams = {
					gid: this.goodsData.id,
					buy_num: this.quantity,
					skuld: this.getSelectedSkuId(),
					...this.orderParams
				};

				console.log('计算价格参数:', priceParams);
				const response = await fetchGoodsPrice(priceParams);
				console.log('价格计算结果:', response);

				if (response.ok && response.data) {
					this.priceData = response.data;
					return response.data;
				} else {
					throw new Error(response.msg || '价格计算失败');
				}
			} catch (error) {
				console.error('价格计算失败:', error);
				throw error;
			}
		},

		// 获取选中的SKU ID
		getSelectedSkuId() {
			// 根据选中的规格找到对应的SKU ID
			if (this.goodsData.skus && this.goodsData.skus.length > 0) {
				const selectedSku = this.goodsData.skus.find(sku => {
					return sku.specs && sku.specs.some(spec =>
						spec.attr === this.selectedSpec
					);
				});
				return selectedSku ? selectedSku.id : '';
			}
			return '';
		},

		// 跳转到结算页面
		navigateToSettlement() {
			uni.hideLoading();

			// 构建结算页面参数
			const settlementParams = {
				gid: this.goodsData.id,
				skuld: this.getSelectedSkuId(),
				buy_num: this.quantity,
				priceData: JSON.stringify(this.priceData),
				...this.orderParams
			};

			// 跳转到结算页面
			uni.navigateTo({
				url: `/v3/settlementCenter/settlementCenter?${this.buildQueryString(settlementParams)}`
			});
		},

		// 创建订单
		async createOrder() {
			try {
				const orderParams = {
					gid: this.goodsData.id,
					buy_num: this.quantity,
					skuld: this.getSelectedSkuId(),
					...this.orderParams
				};

				console.log('下单参数:', orderParams);
				const response = await fetchTradeCredits(orderParams);
				console.log('下单结果:', response);

				if (response.ok && response.success) {
					this.orderResult = response.data;
					uni.hideLoading();

					// 跳转到支付结果页面
					this.navigateToPayResult(true, response.data);
				} else {
					throw new Error(response.msg || '下单失败');
				}
			} catch (error) {
				console.error('下单失败:', error);
				throw error;
			}
		},

		// 跳转到支付结果页面
		navigateToPayResult(isSuccess, orderData = null) {
			const resultParams = {
				success: isSuccess,
				orderId: orderData ? orderData.orderId : '',
				points: this.goodsData.points,
				goodsName: this.goodsData.name
			};

			if (!isSuccess) {
				resultParams.failureReason = '兑换失败，请重试';
			}

			uni.navigateTo({
				url: `/v3/payResultPage/payResultPage?${this.buildQueryString(resultParams)}`
			});
		},

		// 构建查询字符串
		buildQueryString(params) {
			return Object.keys(params)
				.map(key => `${key}=${encodeURIComponent(params[key])}`)
				.join('&');
		},

		// 处理图片加载错误
		handleImageError(e) {
			console.error('图片加载失败:', e);
		},

		// 处理图片加载成功
		handleImageLoad(e) {
			console.log('图片加载成功:', e);
		}
	}
}
</script>

<style scoped>
.container {
	width: 100%;
	min-height: 100vh;
	background-color: #f5f5f5;
	box-sizing: border-box;
}

/* 顶部导航栏 */
.nav-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 88rpx;
	background-color: #fff;
	padding: 0 30rpx;
	box-sizing: border-box;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
}

.nav-left,
.nav-right {
	width: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nav-title {
	font-size: 36rpx;
	font-weight: 500;
	color: #333;
}

.back-icon,
.nav-icon {
	font-size: 40rpx;
	color: #333;
}

.nav-right {
	justify-content: flex-end;
	gap: 30rpx;
}

/* 内容区域 */
.content {
	padding: 0 0 150rpx;
	box-sizing: border-box;
}

/* 商品图片轮播 */
.goods-carousel {
	width: 100%;
	height: 750rpx;
	margin-bottom: 20rpx;
}

.carousel-swiper {
	width: 100%;
	height: 100%;
}

.carousel-image {
	width: 100%;
	height: 100%;
	display: block;
}

/* 优惠券卡片 */
.coupon-card {
	width: 750rpx;
	height: 750rpx;
	background: linear-gradient(135deg, #f4e4bc 0%, #e8d5a3 100%);
	padding: 0;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
}



.coupon-detail {
	background-color: #d4af37;
	padding: 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
}

.coupon-name {
	font-size: 28rpx;
	font-weight: 500;
	color: #fff;
}

.coupon-time {
	font-size: 24rpx;
	color: #fff;
	opacity: 0.9;
}

.coupon-logo {
	width: 60rpx;
	height: 60rpx;
	background-color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.logo-text {
	font-size: 20rpx;
	color: #d4af37;
	font-weight: bold;
}

.coupon-tag {
	position: absolute;
	top: 20rpx;
	right: 20rpx;
	background-color: rgba(0, 0, 0, 0.3);
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
}

.tag-text {
	font-size: 22rpx;
	color: #fff;
}

/* 积分信息卡片 */
.points-card {
	background-color: #fff;
	padding: 30rpx;
	margin-bottom: 20rpx;
	border-radius: 20rpx;
}

/* 积分行 */
.points-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20rpx;
}

.points-left {
	display: flex;
	align-items: baseline;
}

.points-value {
	font-size: 48rpx;
	font-weight: bold;
	color: #e6a23c;
	margin-right: 10rpx;
}

.points-unit {
	font-size: 28rpx;
	font-weight: normal;
	color: #e6a23c;
}

.exchange-count {
	font-size: 26rpx;
	color: #999;
}

/* 会员标签 */
.member-tags {
	display: flex;
	gap: 20rpx;
	margin-bottom: 20rpx;
}

.member-level,
.purchase-limit {
	font-size: 24rpx;
	color: #D3A458;
	background-color: #FCF2E2;
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
}

/* 优惠券标题 */
.coupon-title-section {
	margin-top: 10rpx;
}

.coupon-title-text {
	font-size: 30rpx;
	color: #333;
	font-weight: bold;
	line-height: 44rpx;
}

/* 详情信息 */
.detail-section {
	background-color: #fff;
	padding: 30rpx;
}

.detail-title {
	font-size: 32rpx;
	font-weight: 500;
	color: #333;
	margin-bottom: 20rpx;
	display: block;
}

.detail-banner {
	width: 100%;
	min-height: 200rpx;
	background-color: #f8f8f8;
	padding: 30rpx;
	border-radius: 10rpx;
}

.banner-text {
	font-size: 28rpx;
	color: #333;
	line-height: 1.6;
}

/* 底部兑换按钮 */
.bottom-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	padding: 20rpx 30rpx 40rpx;
	box-sizing: border-box;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.exchange-btn {
	width: 100%;
	height: 90rpx;
	background-color: #e6a23c;
	color: #fff;
	font-size: 32rpx;
	border-radius: 45rpx;
	line-height: 90rpx;
	padding: 0;
	border: none;
	transition: all 0.3s ease;
}

.exchange-btn:active {
	background-color: #d4902b;
}

.exchange-btn.disabled {
	background-color: #ccc;
	color: #999;
}

.exchange-btn.sold-out {
	background-color: #999;
	color: #fff;
}

.exchange-btn.insufficient-points {
	background-color: #f56c6c;
	color: #fff;
}

.exchange-btn.insufficient-level {
	background-color: #909399;
	color: #fff;
}

.exchange-btn.exchange-limit {
	background-color: #909399;
	color: #fff;
}

/* 规格选择弹窗样式 */
.spec-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	z-index: 1000;
}

.spec-modal-content {
	width: 750rpx;
	height: 1206rpx;
	background-color: #fff;
	border-radius: 20rpx 20rpx 0 0;
	padding: 40rpx 30rpx;
	box-sizing: border-box;
	position: relative;
}

.close-btn {
	position: absolute;
	top: 20rpx;
	right: 30rpx;
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.close-icon {
	font-size: 40rpx;
	color: #999;
}

/* 商品信息 */
.product-info {
	display: flex;
	align-items: center;
	margin-bottom: 60rpx;
	padding-top: 20rpx;
}

.product-image {
	width: 120rpx;
	height: 120rpx;
	background-color: #f5f5f5;
	border-radius: 10rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
}

.image-placeholder {
	font-size: 24rpx;
	color: #999;
}

.product-details {
	flex: 1;
}

.product-points {
	font-size: 32rpx;
	font-weight: bold;
	color: #e6a23c;
	margin-bottom: 10rpx;
	display: block;
}

.product-stock {
	font-size: 26rpx;
	color: #999;
	display: block;
}

/* 规格选择 */
.spec-section {
	margin-bottom: 60rpx;
}

.spec-label {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
	margin-bottom: 20rpx;
	display: block;
}

.spec-options {
	display: flex;
	gap: 20rpx;
}

.spec-option {
	padding: 16rpx 32rpx;
	border-radius: 20rpx;
	background-color: #f5f5f5;
	border: 2rpx solid transparent;
	transition: all 0.3s ease;
}

.spec-option.active {
	background-color: #fcf2e2;
	border-color: #d3a458;
}

.spec-text {
	font-size: 26rpx;
	color: #333;
}

.spec-option.active .spec-text {
	color: #d3a458;
	font-weight: 500;
}

/* 数量选择 */
.quantity-section {
	margin-bottom: 80rpx;
}

.quantity-label {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
	margin-bottom: 20rpx;
	display: block;
}

.limit-text {
	font-size: 24rpx;
	color: #999;
	font-weight: normal;
}

.quantity-selector {
	display: flex;
	align-items: center;
	gap: 0;
	border: 2rpx solid #A8A8A8;
	border-radius: 8rpx;
	padding: 0;
	width: fit-content;
}

.quantity-btn {
	width: 60rpx;
	height: 60rpx;
	border-right: 1rpx solid #A8A8A8;
	background-color: #fff;
	color: #A8A8A8;
	font-size: 32rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.quantity-btn:last-child {
	border-right: none;
	border-left: 1rpx solid #A8A8A8;
}

.quantity-btn:disabled {
	border-color: #ccc;
	color: #ccc;
}

.quantity-value {
	font-size: 32rpx;
	color: #333;
	font-weight: 500;
	min-width: 80rpx;
	text-align: center;
	padding: 0 20rpx;
}

/* 确认按钮 */
.confirm-spec-btn {
	width: 680rpx;
	height: 100rpx;
	background-color: #D3A458;
	color: #fff;
	font-size: 32rpx;
	border-radius: 50rpx;
	border: none;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	bottom: 100rpx;
	left: 50%;
	transform: translateX(-50%);
}

.confirm-spec-btn:active {
	background-color: #B8944A;
}

/* 弹窗样式 */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.modal-content {
	width: 546rpx;
	height: 418rpx;
	background: linear-gradient(to bottom, #FFE9C5 0%, #FFFFFF 50%);
	border-radius: 20rpx;
	padding: 40rpx;
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-direction: column;
}

/* 关闭按钮 */
.modal-close-btn {
	width: 56rpx;
	height: 56rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 40rpx auto 0;
	background-color: #B0B0B0;
	border-radius: 50%;
}

.modal-close-icon {
	font-size: 40rpx;
	color: #fff;
}

.modal-title {
	font-size: 40rpx;
	font-weight: bold;
	color: #D3A458;
	text-align: center;
	margin-bottom: 30rpx;
}

.modal-message {
	font-size: 28rpx;
	color: #333;
	text-align: center;
	margin-bottom: 40rpx;
	line-height: 40rpx;
}

.modal-buttons {
	display: flex;
	gap: 20rpx;
	margin-top: 25rpx;
}

.modal-btn {
	flex: 1;
	height: 80rpx;
	border-radius: 40rpx;
	font-size: 28rpx;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cancel-btn {
	background-color: #fff;
	color: #D3A458;
	border: 2rpx solid #D3A458;
}

.confirm-btn {
	background-color: #D3A458;
	color: #fff;
}

.modal-disclaimer {
	font-size: 22rpx;
	color: #999;
	text-align: center;
	line-height: 32rpx;
	margin-top: auto;
	padding-bottom: 0;
}
</style>
