<template>
	<view class="product-detail-container">
		<!-- 顶部导航栏 -->
		<!-- <uni-nav-bar
			left-icon="left"
			:title="navTitle"
			@clickLeft="goBack"
			fixed
			color="#8B2316"
			height="180rpx"
			:border="false"
			backgroundColor="#ffffff"
		/> -->
        <navBar :title="navTitle"  />
		<!-- 内容区 -->
		<scroll-view scroll-y class="detail-scroll">
			<!-- 商品主图轮播 -->
			<view class="swiper-box">
				<swiper class="detail-swiper" :indicator-dots="true" :autoplay="images.length > 1 ? true : false" :interval="5000" :duration="400" indicator-color="#ccc" indicator-active-color="#8B2316" :circular="true">
					<swiper-item v-for="(img, idx) in images" :key="idx">
						<image class="swiper-image" :src="img" mode="widthFix"></image>
					</swiper-item>
				</swiper>
			</view>

			<!-- 标题与价格、销量 -->
			<view class="summary">
				<view class="title"><text v-if="product.type == 1">[包邮]</text>{{ product.title }}</view>
				<view class="price-row">
					<text class="price">{{ product.price }}积分</text>
					<text class="exchanged" v-if="product.times > 0">已兑换{{ product.times }}件</text>
				</view>
			</view>

			<view class="divider"></view>

			<!-- 温馨提示 -->
			<view class="tips-section">
				<view class="tips-title">温馨提示</view>
				<view class="tip-item"><text class="num">1</text><text class="tip-text">商品一经兑换，消耗的积分恕不退还，请各位用户兑换前仔细阅读商品描述详情。</text></view>
				<view class="tip-item"><text class="num">2</text><text class="tip-text">商品兑换后不接受退换货申请，虚拟商品请在商品有效期内及时兑换。</text></view>
				<view class="tip-item"><text class="num">3</text><text class="tip-text">所有实物商品包邮，虚拟商品将发送相关信息到联系邮箱或手机。</text></view>
				<view class="tip-item"><text class="num">4</text><text class="tip-text">实物商品兑换后2-4工作日内发放，虚拟商品兑换后1-3工作日内发送。</text></view>
			</view>

			<!-- 物品展示 -->
			<view class="section-title">物品展示</view>
			<view class="rich-wrapper">
				<rich-text :nodes="product.content"></rich-text>
			</view>
		</scroll-view>

		<!-- 底部兑换按钮 -->
		<view class="bottom-bar" >
			<view class="redeem-btn" @click="goExchange">在线兑换</view>
			<view class="bar" v-if="isUpan"></view>
			<view class="redeem-btn" @click="goExchangeUpan" v-if="isUpan" :class="{'disabled': restNum <= 0}">福利兑换<text v-if="restNum > 0">剩余{{ restNum }}个</text></view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import goods_api from '@/api/goods_api'
import docUrl from '@/utils/docUrl'
import navBar from '@/components/navBar/navBar.vue'

const product = ref({ id: '', title: '', price: 0, times: 0, content: '' })
const images = ref([])
const navTitle = ref('商品详情');
const isUpan = ref(false);
const restNum = ref(0);

const goBack = () => uni.navigateBack()
const getUpanWelfareCount = async () => {
	const res = await goods_api.getUpanWelfareCount()
	if (res.code == 200) {
		restNum.value=res.data;
	};
}
const fetchDetail = async (id) => {
	try {
		const res = await goods_api.getGoodsDetail({ uuid: id })
		if ((res.code === 200 || res.code === '200') && res.data) {
			let content=res.data.content.replace(/\<img/gi, '<img class="richImg"');
			product.value = {
				id,
				type: res.data.type,
				title: res.data.name || '',
				price: res.data.bonuspoints || 0,
				times: res.data.times || 0,
				content: content

			}
			if(res.data.name.indexOf('U盘') > -1 || res.data.name.indexOf('u盘') > -1){
				isUpan.value = true;
				getUpanWelfareCount();
			};
			navTitle.value = (product.value.title || '').slice(0, 18)
			const list = []
			if (res.data.detial_imgpath) {
				res.data.detial_imgpath.split(',').forEach(u => u && list.push(docUrl + u))
			}
			// if (res.data.img) list.push(docUrl + res.data.img)
			images.value = list.length ? list : ['/static/product2.jpg']
		} else {
			uni.showToast({ title: res.message || '获取详情失败', icon: 'none' })
		}
	} catch (e) {
		console.error(e)
		uni.showToast({ title: '网络错误', icon: 'none' })
	}
}

onLoad((opts) => {
	if (opts && opts.id) fetchDetail(opts.id)
})
const goExchangeUpan = () => {
	console.log(restNum.value);
	if(restNum.value>0){
		uni.navigateTo({
		url: `/pages_app/buyUpan/buyUpan?restNum=${restNum.value}`
	})
}
}	

const goExchange = () => {
	uni.navigateTo({
		url: `/pages_goods/exchange/index?id=${product.value.id}&title=${encodeURIComponent(product.value.title)}&price=${product.value.price}&type=${product.value.type}&times=${product.value.times}`
	})
}
</script>

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

.detail-scroll {
	position: absolute;
	top: calc(var(--status-bar-height) + 44px);
	left: 0;
	right: 0;
	bottom: 100rpx;
	background: #fff;
}

/* 主图轮播 */
.swiper-box { background: #fff; }
.detail-swiper { height: 440rpx; }
.swiper-image { width: 100%; height: 440rpx; }

/* 概要 */
.summary { background: #fff; padding: 24rpx; }
.title { font-size: 34rpx; color: #333; line-height: 1.6; }
.price-row { display: flex; justify-content: space-between; align-items: center; margin-top: 16rpx; }
.price { color: #e74c3c; font-size: 34rpx; font-weight: 700; }
.exchanged { color: #999; font-size: 24rpx; }
.divider { height: 16rpx; background: #f5f5f5; }

/* 温馨提示 */
.tips-section { background: #fff; padding: 24rpx; }
.tips-title { text-align: center; font-size: 36rpx; font-weight: 700; color: #333; margin-bottom: 16rpx; }
.tip-item { display: flex; align-items: flex-start; background: #f7f7f7; border-radius: 8rpx; padding: 20rpx; margin: 12rpx 0; }
.num { width: 36rpx; height: 36rpx; line-height: 36rpx; text-align: center; color: #888; background: #fff; border-radius: 50%; margin-right: 16rpx; border: 1rpx solid #ddd; }
.tip-text { color: #666; font-size: 26rpx; line-height: 1.6; flex: 1; }

.section-title { background: #fff; padding: 24rpx; font-size: 34rpx; font-weight: 700; color: #333; text-align: center; }
.rich-wrapper { background: #fff; padding: 24rpx; }

/* 底部按钮 */
.bottom-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: #27c5b8;
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bottom-bar .bar{
	height: 100rpx;
	background-color: #f7f7f7;
	width:2rpx;
}
.bottom-bar .redeem-btn{
	height: 100rpx;
	background-color: #27c5b8;
display: flex;
align-items: center;
justify-content: center;
color: #fff; font-size: 32rpx;flex:1;
}
.bottom-bar .redeem-btn.disabled{
	background-color: #ccc;
}
.rich-wrapper >>> .richImg{
	width: 100%!important;
}
</style>
