<template>
	<view class="review-card">
		<view class="review-card__head">
			<image class="review-card__avatar" :src="avatarSrc" mode="aspectFill" />
			<view class="review-card__meta">
				<text class="review-card__name">{{ item.memberNickName }}</text>
				<view v-if="item.score" class="review-card__stars">
					<text v-for="n in 5" :key="n" class="star" :class="{ on: n <= item.score }">★</text>
				</view>
			</view>
			<text v-if="item.createTime" class="review-card__time">{{ item.createTime }}</text>
		</view>
		<text class="review-card__content">{{ item.content }}</text>
		<view v-if="item.pics && item.pics.length" class="review-card__pics">
			<image
				v-for="(pic, idx) in item.pics"
				:key="idx"
				class="review-card__pic"
				:src="pic"
				mode="aspectFill"
				@click="previewPics(idx)"
			/>
		</view>
		<view v-if="item.replyContent" class="review-card__reply">
			<text class="review-card__reply-label">商家回复：</text>
			<text>{{ item.replyContent }}</text>
		</view>
	</view>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
	item: {
		type: Object,
		required: true
	}
})

const avatarSrc = computed(() => props.item.memberAvatar || '/static/logo.png')

function previewPics(index) {
	const urls = props.item.pics || []
	if (!urls.length) return
	uni.previewImage({ urls, current: urls[index] })
}
</script>

<style lang="scss" scoped>
.review-card {
	padding: 24rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}
.review-card__head {
	display: flex;
	align-items: flex-start;
}
.review-card__avatar {
	width: 64rpx;
	height: 64rpx;
	border-radius: 50%;
	background: #eee;
	flex-shrink: 0;
}
.review-card__meta {
	flex: 1;
	margin-left: 16rpx;
	min-width: 0;
}
.review-card__name {
	font-size: 26rpx;
	color: #333;
	font-weight: 500;
}
.review-card__stars {
	margin-top: 4rpx;
}
.star {
	font-size: 22rpx;
	color: #ddd;
	margin-right: 2rpx;
}
.star.on {
	color: #ff9800;
}
.review-card__time {
	font-size: 22rpx;
	color: #999;
	flex-shrink: 0;
}
.review-card__content {
	display: block;
	margin-top: 16rpx;
	font-size: 28rpx;
	color: #444;
	line-height: 1.5;
}
.review-card__pics {
	display: flex;
	flex-wrap: wrap;
	margin-top: 16rpx;
	gap: 12rpx;
}
.review-card__pic {
	width: 160rpx;
	height: 160rpx;
	border-radius: 8rpx;
	background: #f5f5f5;
}
.review-card__reply {
	margin-top: 16rpx;
	padding: 16rpx;
	background: #f8f8f8;
	border-radius: 8rpx;
	font-size: 24rpx;
	color: #666;
	line-height: 1.5;
}
.review-card__reply-label {
	color: #2e7d32;
}
</style>
