<template>
	<view class="goods-detail">
		<!-- 产品图片列表 -->
		<view class="product-images" v-if="productImages.length > 0">
			<image v-for="(imageUrl, index) in productImages" :key="index" :src="$baseUrl + imageUrl"
				class="product-image" mode="widthFix" :lazy-load="true" @error="onImageError" @load="onImageLoad" />
		</view>

		<!-- 固定底部按钮区域 -->
		<view class="fixed-bottom">
			<view class="button-group">
				<image class="rights-btn" :src="$baseUrl + rightsBtn" @click="handleGoToRights">
				</image>
				<button class="share-btn" :src="$baseUrl + shareBtn" style="background: none; border: none; padding: 0;"
					open-type="share">
					<image class="share-btn-img" :src="$baseUrl + shareBtn" />
				</button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, computed, getCurrentInstance } from 'vue'
import { getProductById, getProductImagesById, getShareImageById, getShareTextById, shareBtn, rightsBtn } from '@/utils/constant.js'

// 响应式数据
const productId = ref('')
const currentProduct = ref(null)
const isLoading = ref(true)

// 计算属性
const productImages = computed(() => {
	return currentProduct.value ? currentProduct.value.productImages : []
})

// 页面加载时获取商品ID和产品信息
onMounted(() => {
	// 获取页面参数
	const pages = getCurrentPages()
	const currentPage = pages[pages.length - 1]
	const options = currentPage.options || {}

	// 获取goodId参数
	productId.value = options.goodId || ''

	console.log('接收到的产品ID:', productId.value)

	if (productId.value) {
		loadProductInfo()
	}

})

// 加载产品信息
const loadProductInfo = () => {
	const product = getProductById(productId.value)
	if (product) {
		currentProduct.value = product
		console.log('产品信息加载成功:', product)
	} else {
		console.warn('未找到对应的产品信息:', productId.value)
	}

}

// 图片加载成功
const onImageLoad = (e) => {
	console.log('图片加载成功:', e.target.src)
}

// 图片加载失败
const onImageError = (e) => {
	console.error('图片加载失败:', e.target.src)
}

// 跳转权益页面
const handleGoToRights = () => {
	uni.navigateTo({
		url: `/pages/rightsDetail/rightsDetail?rightsId=rights1`
	})
}
</script>

<script>
// 微信小程序分享配置 - 使用 Options API
export default {
	// 自定义分享内容
	onShareAppMessage() {
		const pages = getCurrentPages()
		const currentPage = pages[pages.length - 1]
		const options = currentPage.options || {}
		const productId = options.goodId || ''

		// 获取产品信息
		const product = getProductById(productId)

		const { proxy } = getCurrentInstance();
		const $baseUrl = proxy.$baseUrl;
		console.log('product', product)


		return {
			title: product.shareText || product.name,
			path: `/pages/goodsDetail/goodsDetail?goodId=${productId}`,
			imageUrl: product.shareImage ? `${$baseUrl + product.shareImage}` : undefined
		}
	},

}
</script>

<style lang="scss" scoped>
.goods-detail {
	min-height: 100vh;
}

.product-images {
	width: 100%;
}

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

.fixed-bottom {
	position: fixed;
	bottom: 75rpx;
	left: 0;
	right: 0;
	padding: 20rpx 30rpx;
	z-index: 999;
}

.button-group {
	display: flex;
	gap: 20rpx;
}

.share-btn {
	width: 350rpx;
	height: 75rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	padding: 0;


}

.share-btn::after {
	border: none !important;
}

.share-btn-img {
	width: 100%;
	height: 100%;
}

.rights-btn {
	width: 350rpx;
	height: 75rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fixed-bottom {
	padding-bottom: calc(20rpx + var(--window-bottom));
}

.fixed-bottom {
	padding-bottom: 20rpx;
}
</style>
