<template>
	<view class="mall-detail">
		<!-- 顶部导航 -->
		<uni-nav-bar left-icon="left" title="商品详情" color="#000000" backgroundColor="#fff" :fixed="true"
			:statusBar="true" :border="false" @clickLeft="goBack"></uni-nav-bar>

		<view class="detail-content-wrap">
			<!-- 商品主图 -->
			<view class="goods-banner">
				<image :src="goodsInfo.imgurl_banner || goodsInfo.imgurl" mode="widthFix" class="banner-img"></image>
			</view>

			<!-- 价格区域 -->
			<view class="price-section">
				<text class="price-symbol">¥</text>
				<text class="price-value">{{ goodsInfo.price }}</text>
			</view>

			<!-- 商品标题 -->
			<view class="title-section">
				<text class="goods-title">{{ goodsInfo.title }}</text>
			</view>

			<!-- 信息区域 -->
			<view class="info-section">
				<view class="info-row">
					<text class="info-label">库存</text>
					<text class="info-value">{{ goodsInfo.goodslist_surplus_stock != null ? goodsInfo.goodslist_surplus_stock : (goodsInfo.stock || 0) }}</text>
				</view>
			</view>
			<view class="info-section" v-if="orderData && orderData.goods_extend && orderData.goods_extend.pay_currency2 == 1">
				<view class="info-row">
					<text class="info-label">{{ $config.getAppSetting('currency2_name') }}{{ goodsInfo.price * 100 }}</text>
					<text class="info-value info-sub">(剩余:{{ orderData.score || 0 }})</text>
				</view>
			</view>

			<!-- 售前售后须知 -->
			<view class="info-section" @click="showRule = true">
				<view class="info-row">
					<text class="info-label">售前·售后须知</text>
					<text class="info-arrow">›</text>
				</view>
			</view>

			<!-- 商品详情图 -->
			<view class="detail-section" v-if="goodsInfo.imgurl_detail">
				<text class="detail-title">商品详情</text>
				<view class="detail-content">
					<image :src="goodsInfo.imgurl_detail" mode="widthFix" style="width: 100%;"></image>
				</view>
			</view>

			<!-- 商品描述 -->
			<view class="detail-section" v-if="goodsInfo.goods_describe">
				<text class="detail-title" v-if="!goodsInfo.imgurl_detail">商品详情</text>
				<view class="detail-content">
					<rich-text :nodes="goodsInfo.goods_describe"></rich-text>
				</view>
			</view>

			<!-- 底部占位 -->
			<view style="height: 180rpx;"></view>
		</view>

		<!-- 底部购买按钮 -->
		<view class="bottom-bar">
			<view class="buy-btn" @click="onBuy">
				<text v-if="orderData && orderData.goods_extend && orderData.goods_extend.pay_currency2 == 1">
					{{ goodsInfo.price * 100 }}{{ $config.getAppSetting('currency2_name') }} 立即兑换
				</text>
				<text v-else>¥{{ goodsInfo.price }} 立即购买</text>
			</view>
		</view>

		<!-- 售前售后弹窗 -->
		<uni-popup ref="rulePop" type="bottom">
			<view class="rule-popup">
				<view class="rule-popup-hd">
					<text>售前·售后须知</text>
					<view @click="$refs.rulePop.close()" class="rule-close">✕</view>
				</view>
				<scroll-view scroll-y class="rule-popup-body">
					<rich-text :nodes="sendRuleData"></rich-text>
				</scroll-view>
			</view>
		</uni-popup>

		<!-- 确认订单弹窗 -->
		<uni-popup ref="orderPop" type="bottom">
			<view v-if="orderData" class="order-popup">
				<view class="order-popup-hd">
					<view style="width: 24rpx;"></view>
					<text>确认订单</text>
					<view class="rule-close" @click="$refs.orderPop.close()">✕</view>
				</view>
				<view class="order-card">
					<image :src="orderData.goods.imgurl"
						style="width: 190rpx; height: 190rpx; border-radius: 10rpx; flex-shrink: 0;" mode="aspectFill"></image>
					<view class="order-card-info">
						<text class="hang1" style="font-size: 28rpx; color: #333;">{{ orderData.goods.title }}</text>
						<view class="order-card-price">
							<text style="color: #333; font-size: 28rpx;">¥{{ orderData.goods.price }}</text>
							<text style="color: #999; font-size: 24rpx;">×{{ orderData.goods.prize_num }}</text>
						</view>
					</view>
				</view>

				<!-- 支付方式 -->
				<view class="pay-methods">
					<view class="pay-method-item" @click="zhifu = 0"
						v-if="orderData.goods_extend && orderData.goods_extend.pay_wechat == 1">
						<text style="color: #333;">微信支付</text>
						<image :src="zhifu == 0 ? $img1('common/check_act.png') : $img1('common/check.png')"
							style="width: 32rpx; height: 32rpx;"></image>
					</view>
					<view class="pay-method-item" @click="zhifu = 1"
						v-if="orderData.goods_extend && orderData.goods_extend.pay_currency2 == 1">
						<text style="color: #333;">{{ $config.getAppSetting('currency2_name') }}
							{{ orderData.goods.price * 100 }} (剩余:{{ orderData.score || 0 }})</text>
						<image :src="zhifu == 1 ? $img1('common/check_act.png') : $img1('common/check.png')"
							style="width: 32rpx; height: 32rpx;"></image>
					</view>
				</view>

				<!-- 规则 -->
				<view class="order-rule" v-if="sendRuleData">
					<scroll-view scroll-y style="max-height: 160rpx;">
						<rich-text :nodes="sendRuleData" style="font-size: 20rpx; color: #999;"></rich-text>
					</scroll-view>
				</view>

				<!-- 协议 -->
				<view class="order-agree" @click="isAgree = !isAgree">
					<image :src="isAgree ? $img1('common/check_act.png') : $img1('common/check.png')"
						style="width: 32rpx; height: 32rpx; margin-right: 10rpx;"></image>
					<text>我已满18岁,阅读并同意</text>
					<text style="color: #1e88e5;" @click.stop="$c.to({ url: '/pages/guize/guize?type=4' })">《用户协议》</text>
					<text style="color: #1e88e5;" @click.stop="$c.to({ url: '/pages/guize/guize?type=5' })">《隐私政策》</text>
				</view>

				<!-- 支付按钮 -->
				<view class="order-pay-btn" @click="confirmPay">
					<text v-if="zhifu == 0">¥{{ orderData.price }}</text>
					<text v-if="zhifu == 1">{{ orderData.price * 100 }}{{ $config.getAppSetting('currency2_name') }}</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { calcMallOrderMoney, createOrder, createMallOrder } from '@/common/server/order.js';
import { getGoodsDetail } from '@/common/server/goods.js';
import RequestManager from '@/common/request.js';

export default {
	data() {
		return {
			goodsId: '',
			goodsInfo: {},
			orderData: null,
			sendRuleData: '',
			zhifu: 0,
			isAgree: true,
			showRule: false
		};
	},
	onLoad(options) {
		if (options.goods_id) {
			this.goodsId = options.goods_id;
			// 从列表页传来的图片作为兜底
			if (options.imgurl) {
				this.goodsInfo = { imgurl: decodeURIComponent(options.imgurl) };
			}
			this.loadDetail();
		}
		this.$c.getRule(10).then(res => {
			if (res.status == 1) this.sendRuleData = res.data;
		});
	},
	onShow() {
		// 登录回来后，如果还没有支付信息，重新加载
		const token = uni.getStorageSync('token');
		if (token && !this.orderData && this.goodsId) {
			this.loadDetail();
		}
	},
	watch: {
		showRule(val) {
			if (val) {
				this.$refs.rulePop.open();
				this.showRule = false;
			}
		}
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		async loadDetail() {
			// 1. 先用 goods_detail 获取商品基本信息（不需要登录）
			try {
				const detailRes = await getGoodsDetail(this.goodsId);
				if (detailRes.status == 1 && detailRes.data) {
					// goods_detail 返回 { data: { goods: {...}, goodslist: [...] } }
					this.goodsInfo = detailRes.data.goods || detailRes.data;
				}
			} catch (e) {
				console.log('获取商品详情失败', e);
			}

			// 2. 已登录时，再调 calcMallOrderMoney 获取支付信息
			const token = uni.getStorageSync('token');
			if (token) {
				try {
					const res = await calcMallOrderMoney({
						prize_num: 1,
						goods_id: this.goodsId,
						num: 1,
					});
					if (res.status == 1) {
						this.orderData = res.data;
						// 用订单接口的数据补充商品信息（含 imgurl_detail、goods_describe 等）
						if (res.data.goods) {
							this.goodsInfo = { ...this.goodsInfo, ...res.data.goods };
						}
						const ext = res.data.goods_extend || {};
						if (ext.pay_wechat == 1) {
							this.zhifu = 0;
						} else if (ext.pay_currency2 == 1) {
							this.zhifu = 1;
						}
					}
				} catch (e) {
					console.log('获取支付信息失败', e);
				}
			}
		},

		// 静默刷新详情，不显示"加载中"提示
		async silentLoadDetail() {
			try {
				const detailRes = await RequestManager.get('/goods_detail', { goods_id: this.goodsId }, false);
				if (detailRes.status == 1 && detailRes.data) {
					this.goodsInfo = detailRes.data.goods || detailRes.data;
				}
			} catch (e) {
				console.log('静默刷新商品详情失败', e);
			}
			const token = uni.getStorageSync('token');
			if (token) {
				try {
					const res = await RequestManager.post('/mall_ordermoney', {
						prize_num: 1,
						goods_id: this.goodsId,
						num: 1,
					}, false);
					if (res.status == 1) {
						this.orderData = res.data;
						if (res.data.goods) {
							this.goodsInfo = { ...this.goodsInfo, ...res.data.goods };
						}
					}
				} catch (e) {
					console.log('静默刷新支付信息失败', e);
				}
			}
		},

		onBuy() {
			const token = uni.getStorageSync('token');
			if (!token) {
				uni.showToast({ title: '请先登录', icon: 'none' });
				setTimeout(() => {
					uni.navigateTo({ url: '/pages/user/login' });
				}, 300);
				return;
			}
			
			// 检查库存（商城赏用奖品维度的剩余库存）
			const remainStock = this.goodsInfo.goodslist_surplus_stock != null
				? this.goodsInfo.goodslist_surplus_stock
				: (this.goodsInfo.stock || 0) - (this.goodsInfo.sale_stock || 0);
			if (remainStock <= 0) {
				this.$c.msg('库存不足，兑换失败');
				return;
			}
			
			// 登录后如果还没加载支付信息，先加载
			if (!this.orderData) {
				this.loadDetail().then(() => {
					if (this.orderData) {
						this.$refs.orderPop.open();
					}
				});
				return;
			}
			this.$refs.orderPop.open();
		},

		async confirmPay() {
			if (!this.isAgree) {
				this.$c.msg('请先同意用户协议');
				return;
			}
			if (this.zhifu == 0) {
				await this.payByWechat();
			} else {
				await this.payByCurrency();
			}
		},

		async payByWechat() {
			const data = {
				goods_id: this.goodsId,
				prize_num: 1,
				num: 1,
				use_money_is: 2,
				use_integral_is: 2,
				coupon_id: '',
				use_money2_is: 2
			};
			const res = await createOrder(data);
			if (res.status == 1) {
				this.$refs.orderPop.close();
				if (res.data.status == 1) {
					const status = await this.$platform.pay({ data: res.data.res }, this);
					if (status == 'success') {
						this.$c.msg('购买成功');
						this.loadDetail();
					}
				} else {
					this.$c.toast({ title: res.msg, duration: 500, success: () => this.loadDetail() });
				}
			}
		},

		async payByCurrency() {
			const pri = this.goodsInfo.price * 100;
			if ((this.orderData.score || 0) < pri) {
				this.$c.msg(this.$config.getAppSetting('currency2_name') + '不足');
				return;
			}
			
			// 再次检查库存（防止并发购买）
			const remainStock = this.goodsInfo.goodslist_surplus_stock != null
				? this.goodsInfo.goodslist_surplus_stock
				: (this.goodsInfo.stock || 0) - (this.goodsInfo.sale_stock || 0);
			if (remainStock <= 0) {
				this.$c.msg('库存不足，兑换失败');
				return;
			}
			
			const res = await createMallOrder({ goods_id: this.goodsId, prize_num: 1 });
			if (res.status == 1) {
				this.$refs.orderPop.close();
				if (res.data.status == 1) {
					const status = await this.$platform.pay({ data: res.data.res }, this);
					if (status == 'success') {
						this.$c.msg('兑换成功');
						// 静默刷新，避免出现"加载中"提示
						setTimeout(() => {
							this.silentLoadDetail();
						}, 1600);
					}
				} else {
					// 兑换成功（积分/货币直接扣除，无需微信支付）
					this.$c.msg('兑换成功');
					// 静默刷新，避免出现"加载中"提示
					setTimeout(() => {
						this.silentLoadDetail();
					}, 1600);
				}
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.mall-detail {
	min-height: 100vh;
	background: #f5f5f5;
}

.goods-banner {
	width: 100%;
	background: #fff;

	.banner-img {
		width: 100%;
	}
}

.price-section {
	padding: 30rpx 30rpx 10rpx;
	background: #fff;

	.price-symbol {
		font-size: 28rpx;
		color: #ff4d4f;
		font-weight: 600;
	}

	.price-value {
		font-size: 52rpx;
		color: #ff4d4f;
		font-weight: 600;
	}
}

.title-section {
	padding: 10rpx 30rpx 30rpx;
	background: #fff;

	.goods-title {
		font-size: 30rpx;
		color: #333;
		line-height: 1.5;
	}
}

.info-section {
	margin-top: 2rpx;
	padding: 24rpx 30rpx;
	background: #fff;

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

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

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

	.info-sub {
		color: #999;
		font-size: 24rpx;
	}

	.info-arrow {
		font-size: 36rpx;
		color: #999;
	}
}

.detail-section {
	margin-top: 20rpx;
	background: #fff;
	padding: 30rpx;

	.detail-title {
		display: block;
		text-align: center;
		font-size: 28rpx;
		color: #999;
		margin-bottom: 30rpx;
	}
}

.bottom-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 20rpx 30rpx;
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	box-sizing: border-box;
	background: #fff;

	.buy-btn {
		width: 100%;
		height: 88rpx;
		background: #5CE5D5;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-weight: 500;
		color: #333;
	}
}

.rule-popup {
	background: #fff;
	border-radius: 24rpx 24rpx 0 0;
	max-height: 70vh;

	.rule-popup-hd {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		font-size: 32rpx;
		font-weight: 500;
	}

	.rule-popup-body {
		padding: 0 30rpx 60rpx;
		max-height: 50vh;
		font-size: 24rpx;
		color: #666;
	}
}

.rule-close {
	width: 48rpx;
	height: 48rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	color: #999;
}

.order-popup {
	background: #f7f7f7;
	border-radius: 24rpx 24rpx 0 0;
	padding: 0 30rpx;
	padding-bottom: calc(40rpx + env(safe-area-inset-bottom));

	.order-popup-hd {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		font-size: 32rpx;
		font-weight: 500;
	}
}

.order-card {
	display: flex;
	background: #fff;
	border-radius: 20rpx;
	padding: 24rpx;

	.order-card-info {
		flex: 1;
		min-width: 0;
		margin-left: 24rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		overflow: hidden;
	}

	.order-card-price {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}

.pay-methods {
	margin-top: 20rpx;
	background: #fff;
	border-radius: 20rpx;

	.pay-method-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		font-size: 28rpx;
	}
}

.order-rule {
	margin-top: 20rpx;
	padding: 20rpx;
	background: #F9F8E1;
	border-radius: 20rpx;
}

.order-agree {
	display: flex;
	align-items: center;
	margin-top: 20rpx;
	font-size: 20rpx;
	color: #999;
}

.order-pay-btn {
	margin-top: 30rpx;
	width: 100%;
	height: 84rpx;
	background: #5CE5D5;
	border-radius: 42rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30rpx;
	font-weight: 500;
	color: #333;
}
</style>
