<template>
	<view class="shop-list">
		<view
			v-for="item in list"
			:key="item.shopId"
			class="shop-card"
			@click="emit('item-click', item)"
		>
			<image class="shop-card__avatar" :src="item.displayAvatar" mode="aspectFill" />
			<view class="shop-card__body">
				<text class="shop-card__name">{{ item.shopName }}</text>
				<view v-if="item.showRating || item.showFans" class="shop-card__meta">
					<text v-if="item.showRating" class="shop-card__meta-item">评分 {{ item.rating }}</text>
					<text v-if="item.showFans" class="shop-card__meta-item">粉丝 {{ item.fansCount }}</text>
				</view>
			</view>
			<u-icon name="arrow-right" color="#ccc" size="16" />
		</view>
	</view>
</template>

<script setup>
defineProps({
	list: {
		type: Array,
		default: () => []
	}
})
const emit = defineEmits(['item-click'])
</script>

<style lang="scss" scoped>
.shop-list {
	padding: 0 24rpx;
}
.shop-card {
	display: flex;
	align-items: center;
	padding: 24rpx;
	margin-bottom: 16rpx;
	background: #fff;
	border-radius: 12rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}
.shop-card__avatar {
	width: 96rpx;
	height: 96rpx;
	border-radius: 12rpx;
	background: #eee;
	flex-shrink: 0;
}
.shop-card__body {
	flex: 1;
	margin: 0 20rpx;
	min-width: 0;
}
.shop-card__name {
	font-size: 30rpx;
	color: #333;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.shop-card__meta {
	margin-top: 8rpx;
	display: flex;
	flex-wrap: wrap;
	gap: 16rpx;
}
.shop-card__meta-item {
	font-size: 24rpx;
	color: #999;
}
</style>
