<template>
	<view class="detail-container">
		<!-- 悬浮返回按钮 -->
		<view class="back-btn" :style="{ top: statusBarHeight + 'px' }" @click="goBack">
			<text class="back-icon">〈</text>
		</view>

		<scroll-view scroll-y class="scroll-content" :show-scrollbar="false">
			<!-- 主图轮播 -->
			<view class="swiper-box">
				<swiper class="main-swiper" circular @change="swiperChange">
					<swiper-item v-for="(img, index) in product.images" :key="index">
						<image :src="img" mode="aspectFill" class="swiper-img"></image>
					</swiper-item>
				</swiper>
				<view class="swiper-indicator">{{ currentSwiper + 1 }}/{{ product.images.length }}</view>
			</view>

			<!-- 热销榜单提示 -->
			<view class="hot-sale-bar">
				<view class="hot-left">
					<text class="trophy-icon">🏆</text>
					<text class="hot-text">实时热销榜第{{ product.rank }}名</text>
				</view>
				<view class="hot-right">
					<text>今日已有{{ product.todaySale }}人下单</text>
				</view>
			</view>

			<!-- 价格与标题区 -->
			<view class="info-section">
				<view class="price-row">
					<view class="price-left">
						<text class="price-symbol">券后￥</text>
						<text class="price-integer">{{ product.price.split('.')[0] }}</text>
						<text class="price-decimal">.{{ product.price.split('.')[1] || '00' }}</text>
						<text class="old-price">￥{{ product.oldPrice }}</text>
					</view>
					<view class="sales-count">已售 {{ product.totalSale }} 件</view>
				</view>

				<view class="title-row">
					<text class="platform-tag">{{ product.platform }}</text>
					<text class="product-title">{{ product.title }}</text>
				</view>

				<view class="label-row">
					<text class="label-item">{{ product.timeTag }}</text>
					<text class="label-item">{{ product.couponVal }}元</text>
				</view>
			</view>

			<!-- 优惠券模块 (1:1 还原) -->
			<view class="coupon-section">
				<view class="coupon-card">
					<view class="coupon-left">
						<view class="coupon-amount">
							<text class="amount-val">{{ product.couponVal }}</text>
							<text class="amount-unit">元优惠券</text>
						</view>
						<view class="coupon-time">使用期限: {{ product.couponTime }}</view>
					</view>
					<view class="coupon-right">
						<view class="get-btn">立即领券</view>
					</view>
					<view class="coupon-circle top"></view>
					<view class="coupon-circle bottom"></view>
				</view>
			</view>

			<!-- 店铺评分 -->
			<view class="shop-section">
				<view class="shop-header">
					<view class="shop-info">
						<image :src="product.shopLogo" class="shop-logo"></image>
						<text class="shop-name">{{ product.shopName }}</text>
					</view>
					<text class="shop-entry">进店逛逛 ></text>
				</view>
				<view class="score-row">
					<view class="score-item">宝贝描述 <text class="score-val">{{ product.scores.desc }}</text> <text class="score-up">↑</text></view>
					<view class="score-item">卖家服务 <text class="score-val">{{ product.scores.service }}</text> <text class="score-up">↑</text></view>
					<view class="score-item">物流服务 <text class="score-val">{{ product.scores.post }}</text> <text class="score-up">↑</text></view>
				</view>
			</view>

			<!-- 图文详情 -->
			<view class="detail-images">
				<view class="detail-title">商品详情</view>
				<image v-for="(img, index) in product.detailImages" :key="index" :src="img" mode="widthFix" class="detail-img"></image>
			</view>
			
			<!-- 底部留白 -->
			<view class="footer-placeholder"></view>
		</scroll-view>

		<!-- 底部固定操作栏 -->
		<view class="bottom-bar">
			<view class="bar-left">
				<view class="bar-btn" @click="goHome">
					<text class="bar-icon">🏠</text>
					<text class="bar-text">首页</text>
				</view>
				<view class="bar-btn">
					<text class="bar-icon">📤</text>
					<text class="bar-text">分享</text>
				</view>
			</view>
			<view class="bar-right">
				<view class="copy-btn">复制口令购买</view>
				<view class="buy-btn">领券购买</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 44,
				currentSwiper: 0,
				product: {
					id: '',
					images: [
						'http://img-haodanku-com.cdn.fudaiapp.com/fd_1777258938037_429899_310',
						'http://img-haodanku-com.cdn.fudaiapp.com/fd_1777258938037_429899_310',
						'http://img-haodanku-com.cdn.fudaiapp.com/fd_1777258938037_429899_310'
					],
					rank: 59,
					todaySale: 1576,
					price: '19.8',
					oldPrice: '119.8',
					totalSale: '1.0万',
					platform: '天猫',
					title: '【活动专享】润本植物精油贴儿童宝宝学生成人户外专用随身贴纸',
					timeTag: '9天最低价',
					couponVal: 100,
					couponTime: '2026.05.09-2026.05.11',
					shopName: '润本旗舰店',
					shopLogo: 'https://cdn-icons-png.flaticon.com/512/732/732229.png',
					scores: {
						desc: '4.7',
						service: '4.8',
						post: '4.8'
					},
					detailImages: [
						'http://img-haodanku-com.cdn.fudaiapp.com/fd_1777258938037_429899_310',
						'http://img-haodanku-com.cdn.fudaiapp.com/fd_1777258938037_429899_310'
					]
				}
			}
		},
		onLoad(options) {
			this.product.id = options.id || '55493973';
			const sysInfo = uni.getSystemInfoSync();
			this.statusBarHeight = sysInfo.statusBarHeight || 44;
			this.getDetailData();
		},
		methods: {
			getDetailData() {
				uni.request({
					url: `https://api.cmspro.haodanku.com/detail/itemInfo?id=${this.product.id}&cid=qOstW90`,
					success: (res) => {
						if (res.data && res.data.code === 200) {
							const d = res.data.data;
							console.log('详情数据获取成功:', d);
							
							// 格式化销量
							let salesStr = d.itemsale;
							if (d.itemsale >= 10000) {
								salesStr = (d.itemsale / 10000).toFixed(1) + '万';
							}

							// 解析排行榜标签
							let rank = 10; // 默认
							let rankText = '近期热销榜';
							try {
								const labels = JSON.parse(d.rank_label);
								if (labels && labels.length > 0) {
									rankText = labels[0].title;
									rank = labels[0].sort || 10;
								}
							} catch (e) {}

							this.product = {
								id: d.id,
								images: d.taobao_image_qiniu || [d.itempic],
								rank: rank,
								rankText: rankText,
								todaySale: d.todaysale,
								price: d.itemendprice,
								oldPrice: d.itemprice,
								totalSale: salesStr,
								platform: d.shoptype === 'B' ? '天猫' : '淘宝',
								title: d.itemtitle,
								timeTag: d.label && d.label[0] ? d.label[0] : '超值特惠',
								couponVal: d.couponmoney,
								couponTime: d.couponlife.replace('有效期至：', ''),
								shopName: d.shopname,
								shopLogo: (d.brand_info && d.brand_info.brand_logo) || d.shopicon || 'https://cdn-icons-png.flaticon.com/512/732/732229.png',
								scores: {
									desc: d.shop_score.desc_score,
									service: d.shop_score.serv_score,
									post: d.shop_score.post_score
								},
								// 详情图处理：如果素材里有图，拼接前缀展示
								detailImages: (d.material_info && d.material_info[0] && d.material_info[0].image) ? 
									d.material_info[0].image.map(img => img.startsWith('http') ? img : `https://img-haodanku-com.cdn.fudaiapp.com/${img}`) : 
									[d.itempic]
							};
						}
					}
				});
			},
			goBack() {
				uni.navigateBack();
			},
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			swiperChange(e) {
				this.currentSwiper = e.detail.current;
			}
		}
	}
</script>

<style>
	.detail-container {
		width: 100%;
		height: 100vh;
		background-color: #f8f8f8;
		position: relative;
	}

	/* 返回按钮 */
	.back-btn {
		position: fixed;
		left: 30rpx;
		width: 64rpx;
		height: 64rpx;
		background-color: rgba(0, 0, 0, 0.4);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 100;
		margin-top: 10rpx;
	}

	.back-icon {
		color: #ffffff;
		font-size: 32rpx;
		font-weight: bold;
	}

	.scroll-content {
		height: 100%;
	}

	/* 轮播图 */
	.swiper-box {
		width: 100%;
		height: 750rpx;
		position: relative;
	}

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

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

	.swiper-indicator {
		position: absolute;
		right: 30rpx;
		bottom: 30rpx;
		background-color: rgba(0, 0, 0, 0.5);
		color: #ffffff;
		padding: 4rpx 20rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
	}

	/* 热销榜 */
	.hot-sale-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: linear-gradient(to right, #fff1eb, #fbe9e7);
		padding: 20rpx 30rpx;
	}

	.hot-left {
		display: flex;
		align-items: center;
	}

	.hot-text {
		font-size: 26rpx;
		color: #d84315;
		margin-left: 10rpx;
		font-weight: bold;
	}

	.hot-right {
		font-size: 24rpx;
		color: #bf360c;
	}

	/* 信息区 */
	.info-section {
		background-color: #ffffff;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.price-row {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		margin-bottom: 20rpx;
	}

	.price-left {
		display: flex;
		align-items: baseline;
		color: #ff416c;
	}

	.price-symbol {
		font-size: 28rpx;
		font-weight: bold;
	}

	.price-integer {
		font-size: 56rpx;
		font-weight: bold;
	}

	.price-decimal {
		font-size: 32rpx;
		font-weight: bold;
	}

	.old-price {
		font-size: 26rpx;
		color: #999;
		text-decoration: line-through;
		margin-left: 20rpx;
	}

	.sales-count {
		font-size: 24rpx;
		color: #999;
	}

	.title-row {
		margin-bottom: 20rpx;
		line-height: 44rpx;
	}

	.platform-tag {
		background-color: #ff416c;
		color: #ffffff;
		font-size: 20rpx;
		padding: 2rpx 10rpx;
		border-radius: 4rpx;
		margin-right: 10rpx;
	}

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

	.label-row {
		display: flex;
	}

	.label-item {
		font-size: 22rpx;
		color: #ff416c;
		background-color: #fff0f3;
		padding: 4rpx 16rpx;
		border-radius: 20rpx;
		margin-right: 20rpx;
	}

	/* 优惠券 */
	.coupon-section {
		padding: 0 30rpx;
		margin-bottom: 20rpx;
	}

	.coupon-card {
		height: 160rpx;
		background: linear-gradient(to right, #ff715a, #ff416c);
		border-radius: 16rpx;
		display: flex;
		position: relative;
		overflow: hidden;
	}

	.coupon-left {
		flex: 1;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		color: #ffffff;
	}

	.coupon-amount {
		margin-bottom: 10rpx;
	}

	.amount-val {
		font-size: 48rpx;
		font-weight: bold;
	}

	.amount-unit {
		font-size: 24rpx;
		margin-left: 10rpx;
	}

	.coupon-time {
		font-size: 20rpx;
		opacity: 0.9;
	}

	.coupon-right {
		width: 200rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-left: 2rpx dashed rgba(255, 255, 255, 0.4);
	}

	.get-btn {
		background-color: #ffffff;
		color: #ff416c;
		font-size: 26rpx;
		padding: 10rpx 24rpx;
		border-radius: 30rpx;
		font-weight: bold;
	}

	.coupon-circle {
		position: absolute;
		width: 24rpx;
		height: 24rpx;
		background-color: #f8f8f8;
		border-radius: 50%;
		left: auto;
		right: 188rpx;
	}

	.coupon-circle.top {
		top: -12rpx;
	}

	.coupon-circle.bottom {
		bottom: -12rpx;
	}

	/* 店铺 */
	.shop-section {
		background-color: #ffffff;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

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

	.shop-info {
		display: flex;
		align-items: center;
	}

	.shop-logo {
		width: 80rpx;
		height: 80rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
	}

	.shop-name {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
	}

	.shop-entry {
		font-size: 24rpx;
		color: #999;
	}

	.score-row {
		display: flex;
		justify-content: space-between;
	}

	.score-item {
		font-size: 24rpx;
		color: #999;
	}

	.score-val {
		color: #ff416c;
		margin: 0 4rpx;
	}

	.score-up {
		color: #ff416c;
	}

	/* 详情图 */
	.detail-images {
		background-color: #ffffff;
		padding: 30rpx 0;
	}

	.detail-title {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
		padding: 0 30rpx 30rpx;
	}

	.detail-img {
		width: 100%;
		display: block;
	}

	.footer-placeholder {
		height: 120rpx;
	}

	/* 底部栏 */
	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background-color: #ffffff;
		display: flex;
		padding: 10rpx 30rpx calc(10rpx + env(safe-area-inset-bottom));
		align-items: center;
		border-top: 1rpx solid #eeeeee;
		z-index: 100;
	}

	.bar-left {
		display: flex;
		margin-right: 20rpx;
	}

	.bar-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 40rpx;
	}

	.bar-icon {
		font-size: 36rpx;
		margin-bottom: 4rpx;
	}

	.bar-text {
		font-size: 20rpx;
		color: #666;
	}

	.bar-right {
		flex: 1;
		display: flex;
		height: 80rpx;
		border-radius: 40rpx;
		overflow: hidden;
	}

	.copy-btn {
		flex: 1;
		background-color: #ffbcba;
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		font-weight: bold;
	}

	.buy-btn {
		flex: 1;
		background: linear-gradient(to right, #ff715a, #ff416c);
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		font-weight: bold;
	}
</style>
