<template>
	<view class="content">
		<view class="swiper-container">
			<swiper indicator-dots="true" autoplay="true" interval="3000" duration="1000" style="height: 750rpx;">
				<swiper-item v-for="(image, index) in product.slider_image" :key="index">
					<image :src="image" mode="aspectFill" class="swiper-image" style="height: 750rpx;"></image>
				</swiper-item>
			</swiper>
		</view>

		<view class="product-info">
			<text class="product-name">{{product.store_name}}</text>
			<view class="points-info">
				<text class="points-label">兑换所需积分：</text>
				<text class="points-value">{{product.price}} 积分</text>
			</view>
		</view>

		<view class="product-detail">
			<view class="section-title">商品详情</view>
			<view class="detail-content" v-html="product.content">

			</view>
		</view>
		<view class="" style="height: 30rpx;">
			
		</view>
		<view class="exchange-btn" @click="showPopup">
			<text>立即兑换</text>
		</view>

		<!-- 兑换弹窗 -->
		<view class="popup" v-if="showExchangePopup">
			<view class="popup-content">
				<view class="popup-header">
					<text class="popup-title">确认兑换</text>
					<view class="close-btn" @click="closePopup">
						<text>×</text>
					</view>
				</view>

				<view class="popup-body">
					<view class="address-section" @click="showAddressList">
						<view class="address-label">收货地址</view>
						<view class="address-info" v-if="selectedAddress">
							<view class="address-name-phone">
								<text class="address-name">{{selectedAddress.real_name}}</text>
								<text class="address-phone">{{selectedAddress.phone}}</text>
							</view>
							<view class="address-detail">
								{{selectedAddress.province}}{{selectedAddress.city}}{{selectedAddress.district}}{{selectedAddress.detail}}
							</view>
						</view>
						<view class="address-placeholder" v-else>
							<text>请选择收货地址</text>
						</view>
						<view class="address-arrow">
							<text>></text>
						</view>
					</view>

					<view class="product-item">
						<image :src="product.image" mode="aspectFill" class="product-image"></image>
						<view class="product-info">
							<view class="product-name">{{product.store_name}}</view>
							<view class="product-points">{{product.price}} 积分/{{product.unit_name || '件'}}</view>
						</view>
					</view>

					<view class="quantity-section">
						<text class="quantity-label">兑换数量</text>
						<view class="quantity-control">
							<view class="quantity-btn" @click="decreaseQuantity" :class="{disabled: quantity <= 1}">
								<text>-</text>
							</view>
							<view class="quantity-input">
								<text>{{quantity}}</text>
							</view>
							<view class="quantity-btn" @click="increaseQuantity">
								<text>+</text>
							</view>
						</view>
					</view>

					<view class="total-section">
						<text class="total-label">总计</text>
						<text class="total-points">{{totalPoints}} 积分</text>
					</view>
				</view>

				<!-- 地址选择弹窗 -->
				<view class="address-popup" v-if="showAddressPopup">

				</view>

				<view class="popup-footer">
					<view class="exchange-btn" @click="confirmExchange">
						<text>确认兑换</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		getProductDetail,
		addToCart,
		createOrder
	} from '@/api/good.js'
	import {
		getUserAddressList,
		scorePay
	} from '@/api/user.js'
	export default {
		data() {
			return {
				id: '',
				product: {},
				showExchangePopup: false,
				quantity: 1,
				showAddressPopup: false,
				addresses: [],
				selectedAddress: null
			};
		},
		computed: {
			...mapState('user', ['userInfo', 'orderInfo', 'hasLogin']),
			totalPoints() {
				return this.product.price * this.quantity;
			}
		},
		methods: {
			getProductDetail() {
				let that = this;
				getProductDetail(that.id).then(res => {
					this.product = res.data
					this.product.slider_image = this.product.slider_image.split(',')
				})
			},
			// 获取地址列表
			getAddresses() {
				getUserAddressList({
					uid: this.userInfo.uid
				}).then(res => {
					console.log(res);
					this.selectedAddress = res.data[0]
				})
			},
			// 显示兑换弹窗
			showPopup() {
				this.showExchangePopup = true;
			},
			// 关闭兑换弹窗
			closePopup() {
				this.showExchangePopup = false;
			},
			// 显示地址选择弹窗
			showAddressList() {
				// this.showAddressPopup = true;
				uni.navigateTo({
					url: '/pages/user/jf/addres?source=1'
				})
			},
			// 关闭地址选择弹窗
			closeAddressPopup() {
				this.showAddressPopup = false;
			},
			// 选择地址
			selectAddress(address) {
				this.selectedAddress = address;
				this.showAddressPopup = false;
			},
			// 添加新地址
			addAddress() {
				// 这里应该跳转到添加地址页面
				console.log('添加新地址');
			},
			// 减少数量
			decreaseQuantity() {
				if (this.quantity > 1) {
					this.quantity--;
				}
			},
			// 增加数量
			increaseQuantity() {
				this.quantity++;
			},
			// 确认兑换
			confirmExchange() {
				if (!this.selectedAddress) {
					// 提示用户选择地址
					console.log('请选择收货地址');
					return;
				}
				let that = this;
				addToCart({
					product_id: that.id,
					cart_num: that.quantity,
				}).then(res => {
					createOrder({
						cart_ids: res.data.id + '',
						address_id: that.selectedAddress.id
					}).then(ress => {
						scorePay(ress.data.order_id).then(res => {
							// uni.showToast({
							// 	title: '兑换成功',
							// 	icon: 'success',
							// 	duration: 2000
							// })
							// that.closePopup()
							uni.navigateTo({
								url:'/pages/user/jf/success?order_id='+ress.data.order_id+'&points=' + ress.data.pay_money
							})
						})
					})
				})
			}
		},
		onLoad(opt) {
			this.id = opt.id
			this.getProductDetail()
			this.getAddresses()
		}
	};
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: #F5F5F5;
	}

	.content {
		background-color: #fff;
		min-height: 100%;
		padding-bottom: 100rpx;
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		height: 80rpx;
		background-color: #FFFFFF;

		.back {
			width: 40rpx;
			height: 40rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

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

		.right {
			width: 40rpx;
		}
	}

	.swiper-container {
		width: 100%;
		height: 750rpx;
		background-color: #FFFFFF;

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

	.product-info {
		background-color: #FFFFFF;
		padding: 30rpx;
		margin-top: 10rpx;

		.product-name {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			margin-bottom: 20rpx;
			line-height: 44rpx;
		}

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

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

			.points-value {
				font-size: 32rpx;
				font-weight: bold;
				color: #FF4444;
				margin-left: 10rpx;
			}
		}
	}

	.product-detail {
		background-color: #FFFFFF;
		padding: 30rpx;
		margin-top: 10rpx;

		.section-title {
			font-size: 28rpx;
			font-weight: bold;
			color: #333333;
			margin-bottom: 20rpx;
			padding-bottom: 15rpx;
			border-bottom: 1rpx solid #EEEEEE;
		}

		.detail-content {

			.detail-text {
				font-size: 26rpx;
				color: #666666;
				line-height: 36rpx;
				text-align: justify;
			}
		}
	}

	.exchange-btn {
		position: fixed;
		bottom: 30rpx;
		left: 30rpx;
		right: 30rpx;
		height: 90rpx;
		background-color: #FF4444;
		border-radius: 45rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 15rpx rgba(255, 68, 68, 0.4);
	}

	/* 弹窗样式 */
	.popup {
		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: 9999;

		.popup-content {
			width: 100%;
			background-color: #FFFFFF;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			padding: 30rpx;

			.popup-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 30rpx;

				.popup-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
				}

				.close-btn {
					width: 40rpx;
					height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 36rpx;
					color: #999999;
				}
			}

			.popup-body {
				margin-bottom: 30rpx;

				.address-section {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 20rpx 0;
					border-bottom: 1rpx solid #EEEEEE;
					margin-bottom: 30rpx;

					.address-label {
						font-size: 26rpx;
						color: #333333;
						margin-right: 20rpx;
					}

					.address-info {
						flex: 1;
						margin-right: 20rpx;

						.address-name-phone {
							display: flex;
							align-items: center;
							margin-bottom: 10rpx;

							.address-name {
								font-size: 26rpx;
								font-weight: bold;
								color: #333333;
								margin-right: 20rpx;
							}

							.address-phone {
								font-size: 26rpx;
								color: #666666;
							}
						}

						.address-detail {
							font-size: 24rpx;
							color: #999999;
							line-height: 32rpx;
						}
					}

					.address-placeholder {
						flex: 1;
						margin-right: 20rpx;

						text {
							font-size: 26rpx;
							color: #999999;
						}
					}

					.address-arrow {
						width: 30rpx;
						height: 30rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 24rpx;
						color: #999999;
					}
				}

				.product-item {
					display: flex;
					align-items: center;
					margin-bottom: 30rpx;

					.product-image {
						width: 120rpx;
						height: 120rpx;
						border-radius: 10rpx;
						margin-right: 20rpx;
					}

					.product-info {
						flex: 1;

						.product-name {
							font-size: 28rpx;
							font-weight: bold;
							color: #333333;
							margin-bottom: 10rpx;
						}

						.product-points {
							font-size: 24rpx;
							color: #FF4444;
						}
					}
				}

				.quantity-section {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 30rpx;

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

					.quantity-control {
						display: flex;
						align-items: center;

						.quantity-btn {
							width: 50rpx;
							height: 50rpx;
							border: 1rpx solid #DDDDDD;
							border-radius: 5rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 32rpx;
							color: #333333;

							&.disabled {
								color: #CCCCCC;
								border-color: #EEEEEE;
							}
						}

						.quantity-input {
							width: 100rpx;
							height: 50rpx;
							border-top: 1rpx solid #DDDDDD;
							border-bottom: 1rpx solid #DDDDDD;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 26rpx;
							color: #333333;
						}
					}
				}

				.total-section {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-top: 20rpx;
					border-top: 1rpx solid #EEEEEE;

					.total-label {
						font-size: 28rpx;
						font-weight: bold;
						color: #333333;
					}

					.total-points {
						font-size: 32rpx;
						font-weight: bold;
						color: #FF4444;
					}
				}
			}

			.popup-footer {

				.exchange-btn {
					position: static;
					margin: 0;
				}
			}
		}
	}

	/* 地址选择弹窗样式 */
	.address-popup {
		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: 10000;


	}
</style>