<template>
	<view class="category-tags" v-if="loading || (tags && tags.length > 0)">
		<!-- 骨架屏：默认 2 行 4 列，与最多布局一致 -->
		<view class="category-skeleton" v-show="loading && !(tags && tags.length)">
			<view class="sk-grid">
				<view class="sk-item" v-for="i in skeletonCount" :key="'sk-' + i">
					<view class="sk-icon"></view>
					<view class="sk-name"></view>
				</view>
			</view>
		</view>

		<view v-show="tags && tags.length > 0">
		<!-- 1个：整行单模块 -->
		<view v-if="tags.length === 1" class="layout-single">
			<view class="tag-item" @tap="onSelect(tags[0])">
				<image v-if="tags[0].icon" class="tag-icon" :src="tags[0].icon" mode="aspectFill" />
				<text class="tag-name">{{ tags[0].categoryName|| '-' }}</text>
			</view>
		</view>
		<!-- 2~4个：一行平分 -->
		<view v-else-if="tags.length >= 2 && tags.length <= 4" class="layout-row" :style="{ '--cols': tags.length }">
			<view
				v-for="(item, index) in tags"
				:key="item.id"
				class="tag-item"
				@tap="onSelect(item)"
			>
				<image v-if="item.icon" class="tag-icon" :src="item.icon" mode="aspectFill" />
				<text class="tag-name">{{ item.categoryName|| '-' }}</text>
			</view>
		</view>
		<!-- 5~8个：两行，每行最多4个，按四等分 -->
		<view v-else class="layout-grid">
			<view
				v-for="(item, index) in tags"
				:key="item.id"
				class="tag-item"
				@tap="onSelect(item)"
			>
				<image v-if="item.icon" class="tag-icon" :src="item.icon" mode="aspectFill" />
				<text class="tag-name">{{ item.categoryName|| '-' }}</text>
			</view>
		</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'CategoryTags',
	props: {
		tags: { type: Array, default: () => [] },
		loading: { type: Boolean, default: false },
		skeletonCount: { type: Number, default: 8 }
	},
	methods: {
		onSelect(item) {
			//console.log(item,'item')
			if (item != null && typeof item === 'object') {
				this.$emit('selectClick', item);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.category-tags {
	background: #fff;
	margin:0 24rpx;
	padding-top:30rpx;
	border-radius: 30rpx;
}

/* 1个：整行占据 */
.layout-single {
	width: 100%;
	.tag-item {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 30rpx;
		// padding: 24rpx;
		//background: #f5f5f5;
		border-radius: 16rpx;
	}
	.tag-icon {
		width: 100rpx;
		height: 100rpx;
		border-radius:50%;
		// margin-right: 12rpx;
		flex-shrink: 0;
	}
	.tag-name {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(0,0,0,0.65);
		text-align: center;
	}
}

/* 2~4个：一行平分 */
.layout-row {
	display: flex;
	flex-wrap: wrap;
	// gap: 24rpx;
	.tag-item {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 30rpx;
		// padding: 20rpx 12rpx;
		border-radius: 16rpx;
	}
	.tag-icon {
		width: 100rpx;
		height: 100rpx;
		border-radius:50%;
		margin-bottom: 12rpx;
		flex-shrink: 0;
	}
	.tag-name {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(0,0,0,0.65);
		text-align: center;
	}
}

/* 5~8个：两行，每行四等分 */
.layout-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	// gap: 24rpx;
	.tag-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 30rpx;
		// padding: 20rpx 8rpx;
		border-radius: 16rpx;
	}
	.tag-icon {
		width: 100rpx;
		height: 100rpx;
		border-radius:50%;
		margin-bottom: 12rpx;
		flex-shrink: 0;
	}
	.tag-name {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(0,0,0,0.65);
		text-align: center;
	}
}

.sk-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.sk-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 30rpx;
}

.sk-icon {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
	background-size: 200% 100%;
	animation: shimmer 1.2s ease-in-out infinite;
	flex-shrink: 0;
}

.sk-name {
	width: 80rpx;
	height: 28rpx;
	margin-top: 12rpx;
	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;
}

@keyframes shimmer {
	0% { background-position: 100% 0; }
	100% { background-position: -100% 0; }
}
</style>
