<template>
	<view>
		<u-cell-group @click="goInfo" :border="false" customStyle="padding:0">
			<u-cell :icon="commentData.head_img" :title="commentData.nickname"
				titleStyle="margin-left:10rpx;font-size:22rpx"
				iconStyle="width:114rpx;height:114rpx;border-radius: 50%;" :border="false" center>
				<view slot="value" style="font-size: 22rpx;">
					{{commentData.create_time}}
				</view>
				<view slot="label">
					<u-rate size="22rpx" readonly activeColor="#000" :value="commentData.stars" inactiveColor="#000"></u-rate>
				</view>
			</u-cell>
		</u-cell-group>
		<view @click="goInfo" class="mt-30">
			<rich-text style="font-size: 22rpx;color: #333333;"
				:nodes="commentData.contents">
			</rich-text>
		</view>
		<u-gap height="10"></u-gap>
		<view  class="mt-30" style="position: relative;" @click="showImage">
			<view class="flex flex-left" style="flex-wrap: wrap;">
				<view class="com-img" :style="index1==2?'margin-right:0':''" v-for="(item1,index1) in commentData.store_comment_img" :key="index1" v-if="showAllPic || index1 < 3">
					<u-image width="100%" height="150rpx" :src="item1.img_url">
					</u-image>
				</view>
			</view>
			
			
			<view v-if="!showAllPic && commentData.store_comment_img.length> 3" class="qp">
				{{commentData.store_comment_img.length}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"comment",
		props:{
			showAllPic:{
				type:Boolean,
				default:false
			},
			commentData:{
				type:Object,
				default:null
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			goInfo(){
				uni.navigateTo({
					url:'/pages/comments/comment-info?comment_id='+this.commentData.comment_id,
					fail(e) {
						console.log(e,'err')
					}
				})
			},
			showImage(){
				let _this = this
				let urls = []
				for(let i= 0;i<_this.commentData.store_comment_img.length;i++){
					urls.push(_this.commentData.store_comment_img[i].img_url)
				}
				// console.log(urls)
				// _this.commentData.store_comment_img.forEacn(v=>{
				// 	urls.push(v.img_url)
				// })
				uni.previewImage({
					
					urls:urls,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			}
		}
	}
</script>

<style>
	.com-img{
		width: 30%;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}
	.com-img.end{
		margin-right: 0;
	}
.qp {
		position: absolute;
		right: 10rpx;
		bottom: 20rpx;
		font-size: 20rpx;
		background-color: #FFFFFF;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
		padding: 0rpx 20rpx;
	}
</style>
