<template>
	<view class="group-goods-page">
		<!-- 页面顶部 -->
		<view class="page-header">
			<image :src="Service.GetIconImg('/static/goods/pingtuan.png')" mode="widthFix" style="width: 100%; border-radius: 20rpx;" alt="" />
		</view>

		<!-- 拼单商品列表 -->
		<view class="goods-waterfall" v-if="goodsList.length > 0">
			<view class="waterfall-col">
				<view class="goods-card" v-for="(item, index) in leftList" :key="index" @click="goGroupDetail(item)">
					<view class="goods-img-wrap">
						<image class="goods-img" :src="item.goodsImg" mode="widthFix"></image>
						<view class="group-badge">拼团</view>
					</view>
					<view class="goods-info">
						<view class="goods-name">{{ item.goodsName }}</view>
						<view class="goods-price-row">
							<view class="price-wrap">
								<text class="group-price">¥<text class="price-num">{{ item.price }}</text></text>
								<text class="original-price">¥{{ item.maxPrice }}</text>
							</view>
							<view class="sold-count">已售 {{ item.sale }}</view>
						</view>
						<view class="go-group-btn" @click.stop="goGroupDetail(item)">
							<text class="btn-text">去拼单</text>
						</view>
					</view>
				</view>
			</view>
			<view class="waterfall-col">
				<view class="goods-card" v-for="(item, index) in rightList" :key="index" @click="goGroupDetail(item)">
					<view class="goods-img-wrap">
						<image class="goods-img" :src="item.goodsImg" mode="widthFix"></image>
						<view class="group-badge">拼团</view>
					</view>
					<view class="goods-info">
						<view class="goods-name">{{ item.goodsName }}</view>
						<view class="goods-price-row">
							<view class="price-wrap">
								<text class="group-price">¥<text class="price-num">{{ item.price }}</text></text>
								<text class="original-price">¥{{ item.maxPrice }}</text>
							</view>
							<view class="sold-count">已售 {{ item.sale }}</view>
						</view>
						<view class="go-group-btn" @click.stop="goGroupDetail(item)">
							<text class="btn-text">去拼单</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view v-else class="empty-state">
			<image :src="Service.GetpayImg('/static/userFunc/null.png')" class="empty-image" mode="aspectFit"></image>
			<text class="empty-text">暂无拼单商品</text>
			<text class="empty-desc">稍后再来看看吧</text>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed, onMounted } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { Service } from '@/Service/Service';
	import { GoodsService } from '@/Service/api/GoodsService'
	

	// 商品列表
	const goodsList = ref<Array<any>>([]);

	// 左右两列
	const leftList = computed(() => {
		return goodsList.value.filter((_, i) => i % 2 === 0);
	});

	const rightList = computed(() => {
		return goodsList.value.filter((_, i) => i % 2 === 1);
	});
	let page = ref(1) // 当前页码
	let status = ref('nomore');
	
	onLoad(() => {
		uni.setNavigationBarTitle({
			title: '拼单商品'
		});
		getData()
	});
	
	const getData = () => {
		goodsList.value = []
		page.value = 1
		status.value = 'loadmore'
		getList()
	}
	
	/**
	 * 加载商品列表数据
	 * 包含轮播图、优选商品和商品列表
	 */
	const getList = () => {
		// 防止重复加载
		if (status.value == 'loading' || status.value == 'nomore') {
			return
		}
		status.value = 'loading'
	
		// 调用API获取商品数据
		GoodsService.GetTuanGoodsList( page.value).then(res => {
			if (res.code == 0) {
				goodsList.value=[...goodsList.value,...res.data.list]
				// 更新加载状态
				status.value = res.data.goodsList.length == 10 ? 'loadmore' : 'nomore'
				page.value++
			} else {
				Service.Msg(res.msg)
			}
		})
	}
	

	// 查看拼单详情
	const goGroupDetail = (item : any) => {
		// TODO: 替换为实际的拼单商品详情路径
		Service.GoPage('/pages/webView/goodsDetail?goodsId=' + item.goodsId);
	};

	

	
</script>

<style scoped lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.group-goods-page {
		min-height: 100vh;
		padding: 20rpx;
		box-sizing: border-box;
	}

	/* 页面顶部 */
	.page-header {
		margin-bottom: 20rpx;
	}

	.header-title {
		background: linear-gradient(135deg, #FF6A00, #FF7F00);
		border-radius: 20rpx;
		padding: 40rpx 30rpx;
		display: flex;
		flex-direction: column;
		gap: 10rpx;
		box-shadow: 0 8rpx 24rpx rgba(255, 106, 0, 0.2);
	}

	.page-title {
		font-size: 40rpx;
		color: #fff;
		font-weight: bold;
	}

	.page-desc {
		font-size: 26rpx;
		color: rgba(255, 255, 255, 0.9);
	}

	/* 瀑布流 */
	.goods-waterfall {
		display: flex;
		justify-content: space-between;
	}

	.waterfall-col {
		width: 48.5%;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.goods-card {
		background: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
		transition: transform 0.2s, box-shadow 0.2s;
	}

	.goods-card:active {
		transform: scale(0.98);
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
	}

	.goods-img-wrap {
		position: relative;
		width: 100%;
		overflow: hidden;
		background-color: #f5f5f5;
	}

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

	.group-badge {
		position: absolute;
		top: 0;
		left: 0;
		background: linear-gradient(135deg, #FF6A00, #FF4500);
		color: #fff;
		font-size: 20rpx;
		font-weight: 600;
		padding: 6rpx 14rpx;
		border-radius: 0 0 16rpx 0;
		z-index: 1;
	}

	.goods-info {
		padding: 18rpx;
	}

	.goods-name {
		font-size: 26rpx;
		color: #333;
		line-height: 1.5;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		font-weight: 500;
	}

	.goods-tags {
		display: flex;
		flex-wrap: wrap;
		margin-top: 10rpx;
		gap: 8rpx;
	}

	.tag-text {
		font-size: 20rpx;
		color: #FF6A00;
		border: 1rpx solid rgba(255, 106, 0, 0.3);
		padding: 2rpx 10rpx;
		border-radius: 8rpx;
		background: rgba(255, 106, 0, 0.05);
	}

	/* 拼团进度 */
	.group-progress {
		margin-top: 14rpx;
	}

	.progress-bar {
		width: 100%;
		height: 12rpx;
		background: #f0f0f0;
		border-radius: 6rpx;
		overflow: hidden;
	}

	.progress-fill {
		height: 100%;
		background: linear-gradient(to right, #FF3D3D, #FF6A00);
		border-radius: 6rpx;
		transition: width 0.5s ease;
	}

	.progress-text {
		font-size: 20rpx;
		color: #999;
		margin-top: 6rpx;
		display: block;
	}

	/* 价格 */
	.goods-price-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 14rpx;
	}

	.price-wrap {
		display: flex;
		align-items: baseline;
		gap: 8rpx;
	}

	.group-price {
		font-size: 24rpx;
		color: #FF3D3D;
		font-weight: bold;
	}

	.price-num {
		font-size: 34rpx;
	}

	.original-price {
		font-size: 22rpx;
		color: #bbb;
		text-decoration: line-through;
	}

	.sold-count {
		font-size: 20rpx;
		color: #999;
	}

	/* 去拼单按钮 */
	.go-group-btn {
		margin-top: 16rpx;
		height: 64rpx;
		border-radius: 32rpx;
		background: linear-gradient(to right, #FF6A00, #FF7F00);
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 16rpx rgba(255, 106, 0, 0.25);
	}

	.btn-text {
		font-size: 26rpx;
		color: #fff;
		font-weight: 600;
	}

	/* 空状态 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 160rpx 40rpx;
	}

	.empty-image {
		width: 260rpx;
		height: 260rpx;
		margin-bottom: 24rpx;
		opacity: 0.6;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
		font-weight: 500;
		margin-bottom: 12rpx;
	}

	.empty-desc {
		font-size: 24rpx;
		color: #bbb;
	}
</style>