<template>
	<view class="goods-list">
		<!-- 首屏 / 无数据时：骨架屏 -->
		<view class="skeleton-column" v-if="loading && (!list || list.length === 0)">
			<view class="skeleton-item" v-for="i in 3" :key="'sk-' + i">
				<view class="skeleton-img"></view>
				<view class="skeleton-line skeleton-line-lg"></view>
				<view class="skeleton-line skeleton-line-sm"></view>
			</view>
		</view>

		<!-- 有数据：切换分类时保留旧列表 + 遮罩，避免闪空 -->
		<view class="list-wrap" v-else-if="list && list.length > 0">
			<view class="list-column" :class="{ 'list-dimmed': refreshing }">
				<view class="list-item" v-for="(item, index) in list" :key="item.productId || index">
					<GoodsCard :item="item" :show-price="showPrice" @click="$emit('itemClick', item)" />
				</view>
			</view>
			<view class="refresh-mask" v-if="refreshing">
				<view class="refresh-spinner"></view>
				<text class="refresh-text">加载中</text>
			</view>
		</view>

		<view class="empty" v-else-if="!loading">
			<text class="empty-text">暂无商品</text>
		</view>

		<view class="loading-more" v-if="loading && !refreshing && list.length > 0">
			<text class="loading-text">加载中...</text>
		</view>
		<view class="load-more" v-if="hasMore && !loading && list.length > 0" @click="$emit('loadMore')">
			<text>加载更多</text>
		</view>
	</view>
</template>

<script>
import GoodsCard from './GoodsCard.vue';
export default {
	name: 'GoodsList',
	components: { GoodsCard },
	props: {
		list: { type: Array, default: () => [] },
		loading: { type: Boolean, default: false },
		refreshing: { type: Boolean, default: false },
		hasMore: { type: Boolean, default: true },
		showPrice: { type: Boolean, default: true }
	}
};
</script>

<style lang="scss" scoped>
.goods-list {
	padding: 24rpx;
	background: #f5f5f5;
	min-height: 400rpx;
	padding-bottom: 120rpx;
}
.list-wrap {
	position: relative;
}
.list-column {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
	transition: opacity 0.2s ease;
}
.list-column.list-dimmed {
	opacity: 0.55;
}
.list-item {
	width: 100%;
}
.refresh-mask {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.refresh-spinner {
	width: 48rpx;
	height: 48rpx;
	border: 4rpx solid #e8e8e8;
	border-top-color: #FF233C;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}
.refresh-text {
	margin-top: 16rpx;
	font-size: 26rpx;
	color: #999;
}
@keyframes spin {
	to { transform: rotate(360deg); }
}
.skeleton-column {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
}
.skeleton-item {
	background: #fff;
	border-radius: 16rpx;
	padding: 24rpx;
	overflow: hidden;
}
.skeleton-img {
	width: 100%;
	height: 394rpx;
	background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
	background-size: 200% 100%;
	animation: shimmer 1.2s ease-in-out infinite;
	border-radius: 8rpx;
}
.skeleton-line {
	height: 28rpx;
	margin-top: 20rpx;
	border-radius: 6rpx;
	background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
	background-size: 200% 100%;
	animation: shimmer 1.2s ease-in-out infinite;
}
.skeleton-line-lg {
	width: 85%;
}
.skeleton-line-sm {
	width: 50%;
}
@keyframes shimmer {
	0% { background-position: 100% 0; }
	100% { background-position: -100% 0; }
}
.empty,
.loading-more {
	padding: 80rpx 0;
	text-align: center;
}
.empty-text,
.loading-text {
	font-size: 28rpx;
	color: #999;
}
.load-more {
	padding: 32rpx 0;
	text-align: center;
}
.load-more text {
	font-size: 28rpx;
	color: #FF233C;
}
</style>
