<template>
	<view class="page">

		<view class="content">
			<view v-if="productFavorites.length > 0" class="goods-waterfall">
				<view class="waterfall-col">
					<view class="goods-card" v-for="(item, index) in leftList" :key="index"
						@click="Service.GoPage('/pages/webView/goodsDetail?goodsId='+item.goodsId)">
						<view class="goods-img-wrap">
							<image :src="Service.GetMateUrlByImg(item.goodsImg)" mode="widthFix" class="goods-img"></image>
							<view class="favorite-icon-wrap" @click.stop="cancleCollect(item.goodsId)">
								<up-icon name="heart-fill" color="#FF6A00" size="16"></up-icon>
							</view>
						</view>
						<view class="goods-info">
							<text class="goods-name">{{ item.goodsName }}</text>
							<view class="goods-price-row">
								<text class="goods-price">¥<text class="price-num">{{ item.price }}</text></text>
								<text class="goods-old">¥{{ item.maxPrice }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="waterfall-col">
					<view class="goods-card" v-for="(item, index) in rightList" :key="index"
						@click="Service.GoPage('/pages/webView/goodsDetail?goodsId='+item.goodsId)">
						<view class="goods-img-wrap">
							<image :src="Service.GetMateUrlByImg(item.goodsImg)" mode="widthFix" class="goods-img"></image>
							<view class="favorite-icon-wrap" @click.stop="cancleCollect(item.goodsId)">
								<up-icon name="heart-fill" color="#FF6A00" size="16"></up-icon>
							</view>
						</view>
						<view class="goods-info">
							<text class="goods-name">{{ item.goodsName }}</text>
							<view class="goods-price-row">
								<text class="goods-price">¥<text class="price-num">{{ item.price }}</text></text>
								<text class="goods-old">¥{{ item.maxPrice }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view v-else class="empty-state">
				<image :src="Service.GetpayImg('/static/userFunc/null.png')" class="empty-image"></image>
				<text class="empty-text">暂无收藏商品</text>
			</view>

			<up-loadmore v-if="productFavorites.length > 0" style="margin-top: 12rpx;" :status="status" />
		</view>
	</view>
</template>

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

	let status = ref('nomore')
	let page = ref(1)
	let productFavorites = ref<Array<any>>([])

	let leftList = computed(() => {
		return productFavorites.value.filter((_, i) => i % 2 === 0)
	})

	let rightList = computed(() => {
		return productFavorites.value.filter((_, i) => i % 2 === 1)
	})

	onLoad(() => {
		getData()
	})

	onReachBottom(() => {
		getList()
	})

	const getData = () => {
		productFavorites.value = []
		page.value = 1
		status.value = 'loadmore'
		getList()
	}

	const getList = () => {
		if (status.value == 'loading' || status.value == 'nomore') {
			return
		}
		status.value = 'loading'
		CollectService.GetUserCollectList(page.value).then(res => {
			if (res.code == 0) {
				productFavorites.value = [...productFavorites.value, ...res.data.list]
				status.value = res.data.list.length == 10 ? 'loadmore' : 'nomore'
				page.value++
			} else {
				Service.Msg(res.msg)
			}
		})
	}

	const cancleCollect = (id: any) => {
		CollectService.AddUserCollect({  goodsId: id }).then(res => {
			if (res.code == 0) {
				Service.Msg('已取消收藏')
				getData()
			} else {
				Service.Msg(res.msg)
			}
		})
	}
</script>

<style scoped lang="scss">
	.page {
		padding: 20rpx 0;
		min-height: 100vh;
		background-color: #F8F9FA;
	}

	.page-header {
		padding: 30rpx 30rpx 20rpx;
		display: flex;
		align-items: baseline;
		gap: 16rpx;
	}

	.page-title {
		font-size: 30rpx;
		font-weight: 700;
		color: #1F2937;
	}

	.page-count {
		font-size: 24rpx;
		color: #9CA3AF;
		font-weight: 500;
	}

	.content {
		padding: 0 24rpx 30rpx;
	}

	/* ===== 瀑布流 ===== */
	.goods-waterfall {
		display: flex;
		gap: 16rpx;
	}

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

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

	.goods-card:active {
		transform: scale(0.97);
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
	}

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

	.goods-img {
		width: 100%;
		display: block;
		background-color: #f5f5f5;
	}

	.favorite-icon-wrap {
		position: absolute;
		top: 12rpx;
		right: 12rpx;
		width: 48rpx;
		height: 48rpx;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.9);
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		z-index: 1;
	}

	.goods-info {
		padding: 14rpx 16rpx 18rpx;
	}

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

	.goods-price-row {
		display: flex;
		align-items: center;
		margin-top: 10rpx;
		gap: 10rpx;
	}

	.goods-price {
		font-weight: 700;
		font-size: 28rpx;
		color: #FF6A00;
	}

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

	.goods-old {
		font-size: 22rpx;
		color: #C0C4CC;
		text-decoration: line-through;
	}

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

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

	.empty-text {
		font-size: 28rpx;
		color: #C0C4CC;
		font-weight: 500;
	}
</style>
