<template>
	<uni-nav-bar
		left-icon="left" 
		title="积分商城" 
		@clickLeft="goBack" 
		fixed 
		color="#8B2316" 
		height="180rpx" 
		:border="false" 
		backgroundColor="#eeeeee"
	>
		<template #right>
			<text class="search-btn" @click="goSearch">搜索</text>
		</template>
	</uni-nav-bar>

	<view class="goods-page">
		<!-- 商品图片区域 -->
		<view class="goods-image-section">
			<swiper class="goods-swiper" :indicator-dots="true" :autoplay="false" indicator-color="rgba(0,0,0,.3)" indicator-active-color="#ff0000">
				<swiper-item v-for="(image, index) in goodsImages" :key="index">
					<up-image :src="image" width="100%" height="500rpx" mode="aspectFill"></up-image>
				</swiper-item>
			</swiper>
		</view>

		<!-- 商品信息区域 -->
		<view class="goods-info-section">
			<view class="goods-title">
				<text class="title-text">{{ goodsInfo.title }}</text>
			</view>
			<view class="goods-points">
				
				<text class="points-value">{{ goodsInfo.points }}积分</text>
				<text class="points-label">已兑换83件</text>
			</view>
			
		</view>

		<!-- 商品详情区域 -->
		<view class="goods-detail-section">
			<!-- <view class="detail-title">
				<text class="detail-title-text">温馨提示</text>
			</view> -->
			<view class="detail-content">
				<up-image  :src="tipImg" width="640rpx" height="515rpx" ></up-image>
			</view>
		</view>

		<!-- 兑换须知 -->
		<view class="exchange-notice">
			<view class="notice-title">
				<text class="notice-title-text">物品展示</text>
			</view>
			<view class="notice-content">
				<text class="notice-text">{{ exchangeNotice }}</text>
			</view>
		</view>
	</view>

	<!-- 底部兑换按钮 -->
	<view class="bottom-exchange">
		
		<button class="exchange-btn" @click="exchangeGoods">在线兑换</button>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import tipImg from "@/static/tishi.png"
// 商品信息
const goodsInfo = ref({
	title: '第11-12-13届全国疑难及重症肝病学术会议论文集',
	points: 4490,
	description: '包含全国疑难及重症肝病学术会议的最新研究成果和临床经验总结',
	details: [
		{ label: '商品类型', value: '医学论文集' },
		{ label: '适用人群', value: '肝病科医生、研究人员' },
		{ label: '出版年份', value: '2023年' },
		{ label: '页数', value: '约500页' }
	]
});

// 商品图片
const goodsImages = ref([
	'/static/book1.png',
	'/static/book2.png',
	'/static/book3.png'
]);

// 兑换须知
const exchangeNotice = ref('1. 兑换成功后不支持退换货\n2. 积分一经扣除不予退还\n3. 商品将在7个工作日内发货\n4. 如有疑问请联系客服');

// 方法
const goBack = () => {
	uni.navigateBack({
		fail() {
			uni.redirectTo({
				url: '/pages_app/pointMall/pointMall'
			});
		}
	});
};

const goSearch = () => {
	uni.navigateTo({
		url: '/pages_app/search/search'
	});
};

const exchangeGoods = () => {
	uni.showModal({
		title: '确认兑换',
		content: `确认使用${goodsInfo.value.points}积分兑换该商品？`,
		success: (res) => {
			if (res.confirm) {
				uni.showToast({
					title: '兑换成功',
					icon: 'none'
				});
			}
		}
	});
};
</script>

<style lang="scss" scoped>
// 变量定义
$bg-color: #f5f5f5;
$text-primary: #333333;
$text-secondary: #666666;
$theme-color: #8B2316;
$white: #ffffff;
$border-color: #e5e5e5;

.goods-page {
	min-height: calc(100vh - 180rpx - 120rpx);
	background-color: $bg-color;
	padding-bottom: 120rpx;
}

// 商品图片区域
.goods-image-section {
	background-color: $white;
	margin-bottom: 20rpx;
	
	.goods-swiper {
		height: 500rpx;
	}
}

// 商品信息区域
.goods-info-section {
	background-color: $white;
	padding: 30rpx;
	margin-bottom: 20rpx;
	
	.goods-title {
		margin-bottom: 20rpx;
		
		.title-text {
			font-size: 32rpx;
			color: #333;
			line-height: 1.5;
		}
	}
	
	.goods-points {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
		
		.points-label {
			font-size: 28rpx;
			color: #999;
			margin-right: 20rpx;
		}
		
		.points-value {
			font-size: 30rpx;
			color: #ff0000;
			
		}
	}
	
	.goods-desc {
		.desc-text {
			font-size: 28rpx;
			color: $text-secondary;
			line-height: 1.6;
		}
	}
}

// 商品详情区域
.goods-detail-section {
	background-color: $white;
	padding: 30rpx;
	margin-bottom: 20rpx;
	
	.detail-title {
		margin-bottom: 30rpx;
		 width:100%;
		 justify-content: center;
		 display: flex;
		.detail-title-text {
			text-align: center;
			font-size: 32rpx;
			color: $text-primary;
			font-weight: bold;
		}
	}
	
	.detail-content {
		display: flex;
		justify-content: center;
		.detail-item {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 0;
			border-bottom: 1rpx solid $border-color;
			
			&:last-child {
				border-bottom: none;
			}
			
			.detail-label {
				font-size: 28rpx;
				color: $text-secondary;
			}
			
			.detail-value {
				font-size: 28rpx;
				color: $text-primary;
			}
		}
	}
}

// 兑换须知
.exchange-notice {
	background-color: $white;
	padding: 30rpx;
	
	.notice-title {
		display: flex;
		justify-content: center;
		margin-bottom: 20rpx;
		
		.notice-title-text {
			font-size: 36rpx;
			color: $text-primary;
			font-weight: bold;
		}
	}
	
	.notice-content {
		.notice-text {
			font-size: 28rpx;
			color: $text-secondary;
			line-height: 1.6;
		}
	}
}

// 底部兑换按钮
.bottom-exchange {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background-color: $white;
	
	display: flex;
	align-items: center;
	justify-content: space-between;
	
	z-index: 100;
	
	.exchange-info {
		display: flex;
		align-items: center;
		
		.exchange-label {
			font-size: 28rpx;
			color: $text-secondary;
			margin-right: 20rpx;
		}
		
		.exchange-points {
			font-size: 36rpx;
			color: $theme-color;
			font-weight: bold;
		}
	}
	
	.exchange-btn {
		background-color: #00cac1;
		color: $white;
		
		height: 100%;
		display: flex;
		border-radius: 0;
		justify-content: center;
		align-items: center;
		width:100%;
		font-size: 32rpx;
	}
}

// 搜索按钮
.search-btn {
	color: $theme-color;
	font-size: 28rpx;
}
</style>
