<template>
	<view class="evaluationDetails">
		<div class="userReviewsItem">
			<div class="userReviewsItemHeader">
				<image class="avatar" :src="commentDetails.avatarUrl" mode=""></image>
				<div class="userReviewsItemHeaderR">
					<div class="name">
						{{commentDetails.nickName}}
					</div>
					<div class="time">
						{{commentDetails.createTime}}
					</div>
				</div>
			</div>
		
			<div class="content">
				{{commentDetails.commentContent}}
			</div>
			
			<div class="imgList">
				<image @click.stop="previewImage(commentDetails.commentImageList,item)" v-for="(item,index) in commentDetails.commentImageList" :key="index" :src="item" mode=""></image>
			</div>
			
			<div class="replyBox">
				<input confirm-type="send" type="text" v-model="commentContent" @confirm="merchantResponse" :placeholder="':回复'+(commentDetails.nickName?commentDetails.nickName:'')" />
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				commentDetails:{},
				commentContent:''
			}
		},
		onLoad(op) {
			this.id = op.id
			this.getcommentDetails()
		},
		
		methods: {
				//评价详情
				getcommentDetails(){
					this.$http.get('/api/store/goodsComment/commentDetails',{
						commentId:this.id
					}).then(res=>{
						this.commentDetails = res.data
					})
				},
				
				//商家回复
				merchantResponse(){
					this.$http.post('/api/store/goodsComment/merchantResponse',{
						targetId:this.id,
						commentContent:this.commentContent
					}).then(res=>{
						uni.showToast({
							icon:'none',
							title:res.msg
						})
						if(res.code == 200){
							setTimeout(()=>{
								uni.navigateBack()
							},800)
						}
					})
				},
				

				

		}
	}
</script>

<style lang="less">
	page{
		background: #FAF7F6;
	}
	.userReviewsItem {
		padding: 30rpx 24rpx;
		box-sizing: border-box;
		background: #fff;
		.userReviewsItemHeader {
			display: flex;
			align-items: center;
			margin-bottom: 15rpx;
	
			.avatar {
				width: 66rpx;
				height: 66rpx;
				border-radius: 50%;
				margin-right: 10rpx;
			}
	
			.userReviewsItemHeaderR {
				.name {
					font-size: 26rpx;
					color: #333333;
					margin-bottom: 10rpx;
				}
	
				.time {
					font-size: 24rpx;
					color: #999999;
				}
			}
		}
	
		.content {
			font-size: 26rpx;
			color: #333333;
			margin-bottom: 15rpx;
		}
		
		.imgList{
			display: flex;
			flex-wrap: wrap;
			
			image{
				width: 156rpx;
				height: 156rpx;
				background: #FFECEC;
				margin-right: 26rpx;
				margin-bottom: 15rpx;
				&:nth-child(4n){
					margin-right: 0;
				}
			}
		}
		
		.replyBox{
			width: 702rpx;
			min-height: 70rpx;
			background: #FAF7F6;
			border-radius: 41rpx 41rpx 41rpx 41rpx;
			padding: 20rpx 40rpx;
			box-sizing: border-box;
			input{
				font-size: 24rpx;
			}
		}
	}

</style>
