<template>
	<view class="bg">
		<view class="header" >
			<view>买家评价</view>
			<view style="font-weight: 500;font-size: 27rpx;color: #999999;" @click="goCommentList()">
				共{{total}}条
				<uni-icons type="right" size="12"></uni-icons>
			</view>
		</view>
		<view class="review-box" v-if="reviews.length>0">
			<view class="review-item" v-for="(item,i) in reviews" :key="i">
				<image class="avator" :src="item.user.avatar" mode="aspectFill"></image>
				<view class="comment-container">
					<view class="comment-info">
						<view class="nickname" style="padding-right:20rpx ;">{{item.user.nickname}}</view>
						<!-- <view class="nickname" style="padding-right:20rpx ;">张三</view> -->
						<view class="iconfont">
							<img src="https://static.ticket.sz-trip.com/dongtai/images/user/star-seld.png"
							 v-for="(item,index) in Number(item.rate)" :key="index"  class="starImg"/>
						</view>
					</view>
					<view class="comment-content text-overflowRows">{{item.content}}</view>
				</view>
				<view class="img-box" v-if="item.img_list.length>0">
					<image class="imgs" mode="aspectFill" :src="item.img_list[0]" @click="viewImg(item)"></image>
					<view v-if="item.img_list.length>1" class="more-img">+{{item.img_list.length}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"commentList",
		props: ["prodId"],
		data() {
			return {
				total: 0,
				reviews: [],
			};
		},
		mounted() {
			this.getComments()
		},
		methods: {
			getComments () {
				this.Post({
					product_id: this.prodId,
				    offset: 0,
				    limit: 3,
				},"/api/product/product_comment_list").then((res) => {
					let resData = res.data.list || []
					resData.forEach(v=>{
						v.img_list = v.img_list.split(',')
					})
				  this.reviews = resData;
				  this.total = res.data.total;
				})
			},
			goCommentList () {
				uni.navigateTo({
					url:`/subPackages/user/commentList?id=${this.prodId}`
				})
			},
			viewImg (item) {
				let imgs = item.img_list
				uni.previewImage({
					urls:imgs
				})
			},
		},
	}
</script>

<style scoped lang="scss">
.bg{
	background: #FFFFFF;
	width: 100%;
	
	.header{
		width: 100%;
		height: 97rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-weight: bold;
		font-size: 35rpx;
		color: #000000;
		font-weight: bold;
		font-size: 35rpx;
		color: #000000;
		padding: 26rpx;
	}
}
.review-box{
	border-top: 1px solid #D9D9D9;
	padding: 26rpx;
	.review-item{
		border-bottom: 1px solid #D9D9D9;
		  display: flex;
		  justify-content: space-between;
		  color: #999999;
		  align-items: flex-start;
		  font-size: 24rpx;
		.avator{
			width: 57rpx;
			height: 57rpx;
			border-radius: 50%;
			flex-shrink: 0;
		}
		.starImg{
			width: 23.47rpx;
			height: 23.47rpx;
			margin-right: 6rpx;
		}
		.comment-container{
		    flex: 1;
		    width: 10rpx;
		    padding: 0 45rpx 0 15rpx;
		}
		.comment-info {
		  width: 100%;
		  height: 57rpx;
		  font-weight: bold;
		  font-size: 24rpx;
	      color: #666666;
		  display: flex;
		  align-items: center;
		}
		.comment-content {
		    width: 100%;
		    padding-top: 12rpx;
		    font-size: 27rpx;
		    color: #000;
		    font-weight: 500;
		}
		
		.img-box{
			width: 133rpx;
			height: 133rpx;
			position: relative;
			.imgs{
				width: 100%;
				height: 100%;
				border-radius: 13rpx;
			}
		}
		.more-img{
			height: 37rpx;
			line-height: 37rpx;
			background: #000;
			border-radius: 13rpx 0rpx 13rpx 0rpx;
			box-sizing: border-box;
			padding: 0 5rpx;
			font-weight: 500;
			font-size: 23rpx;
			color: #FFFFFF;
			position: absolute;
			bottom: 0;
			right: 0;
			opacity: 0.8;
		}
	}
	.review-item:last-of-type{
		border-bottom: none;
	}
}
</style>