<template>
	<view class="follow-list">
		<view
			v-for="item in list"
			:key="item.shopId"
			class="follow-card"
			@click="emit('item-click', item)"
		>
			<image class="follow-card__avatar" :src="item.displayAvatar" mode="aspectFill" />
			<view class="follow-card__body">
				<view class="follow-card__title-row">
					<text class="follow-card__name">{{ item.shopName }}</text>
					<text v-if="item.isClosed" class="follow-card__tag">{{ closedLabel }}</text>
				</view>
				<view v-if="item.showRating || item.showFans" class="follow-card__meta">
					<text v-if="item.showRating" class="follow-card__meta-item">评分 {{ item.ratingText }}</text>
					<text v-if="item.showFans" class="follow-card__meta-item">粉丝 {{ item.fansCount }}</text>
				</view>
			</view>
			<text class="follow-card__unfollow" @click.stop="emit('unfollow', item)">取消关注</text>
		</view>
	</view>
</template>

<script setup>
import { SHOP_CLOSED_LABEL } from '@/constants/shop'

defineProps({
	list: {
		type: Array,
		default: () => []
	}
})

const emit = defineEmits(['item-click', 'unfollow'])
const closedLabel = SHOP_CLOSED_LABEL
</script>

<style lang="scss" scoped>
.follow-list {
	padding: 0 24rpx;
}
.follow-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);
}
.follow-card__avatar {
	width: 96rpx;
	height: 96rpx;
	border-radius: 12rpx;
	background: #eee;
	flex-shrink: 0;
}
.follow-card__body {
	flex: 1;
	margin: 0 16rpx;
	min-width: 0;
}
.follow-card__title-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8rpx;
}
.follow-card__name {
	font-size: 30rpx;
	color: #333;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 280rpx;
}
.follow-card__tag {
	font-size: 22rpx;
	color: #e65100;
	background: #fff3e0;
	padding: 4rpx 10rpx;
	border-radius: 6rpx;
	flex-shrink: 0;
}
.follow-card__meta {
	margin-top: 8rpx;
	display: flex;
	flex-wrap: wrap;
	gap: 16rpx;
}
.follow-card__meta-item {
	font-size: 24rpx;
	color: #999;
}
.follow-card__unfollow {
	flex-shrink: 0;
	font-size: 24rpx;
	color: #999;
	padding: 8rpx 0 8rpx 8rpx;
}
</style>
