<template>
	<view class="container">
		<!-- 查看全部评论 -->
		<global-loading />

		<view class="evaluateTag-box">
			<view class="evaluateTag-text">
				全部({{ commentListLength }})
			</view>
		</view>
		<view class="flex-column-plus evaluateList-box">
			<view v-for="(item, index) in commentList" :key="index" class="evaluate-contentbox mar-top-20">
				<view class="evaluate-content flex-items flex-row flex-sp-between">
					<view class="flex-items">
						<image class="user-headSmallImg" :src="item.headImage"></image>
						<view class="">
							<text class="fs28 mar-left-20">{{ item.name }}</text>
							<view class="mar-left-20 fs22 font-color-999 mar-top-10">
								<text>{{ item.value }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="fs26 pad-topbot-20 font-color-333">{{ item.comment }}</view>
				<view class="evaluateImg-box">
					<view v-for="(commentItemImg, cindex) in item.images" :key="cindex">
						<image class="img-item" :src="commentItemImg" @click="previewImg(commentItemImg)"></image>
					</view>
				</view>
				<view v-if="item.addComment !== ''" class="addEvaluate">
					<view class="fs26 font-color-C5AA7B">用户追加评价</view>
					<view class="addEvaluateText">{{ item.addComment }}</view>
					<view v-if="item.addImages" class="item-image-box">
						<view v-for="(itemAddImg, imgIndex) in item.addImages" :key="imgIndex">
							<image class="img-item" :src="itemAddImg" @click="previewImg(itemAddImg)"></image>
						</view>
					</view>
				</view>
				<view class="praisebig-box flex-items mar-top-30 flex-sp-between">
					<text class="font-color-999 fs22">{{ item.createTime }}</text>
					<view class="praise-box flex-items flex-row">
						<!-- <image class="praise-icon" src="../../static/images/origin/praiseIcon.png"></image> -->
						<image
							v-if="item.ifLike == 1" class="praise-icon" src="../../static/images/origin/praiseActiveIcon.png"
							@click="zanTap(index, item.commentId, 0)"
						></image>
						<image
							v-else class="praise-icon" src="../../static/images/origin/praiseIcon.png"
							@click="zanTap(index, item.commentId, 1)"
						></image>
						<text class="mar-left-10 font-color-999">{{ item.likes }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
const NET = require('../../utils/request')
const API = require('../../config/api')
export default {
	data() {
		return {
			commentList: [],
			commentListLength: ''
		}
	},
	onLoad(options) {
		this.commentList = this.$getJumpParam(options)
		this.commentListLength = this.commentList.length
	},
	methods: {
		previewImg(img) {
			wx.previewImage({
				current: img, // 当前显示图片的http链接
				urls: [ img ] // 需要预览的图片http链接列表
			})
		},
		commentImgData(imgData) {
			let imgDataResult = []
			imgDataResult = imgData.split(',')
			return imgDataResult
		},
		// 点赞
		zanTap(index, likeId, actionType) {
			// uni.showLoading({
			//   mask: true,
			// 	title: '提交中...',
			// })
			NET.request(API.LikeOrUnLikeComment, {
				commentId: likeId,
				ifLike: actionType
			}, 'POST').then((res) => {
				uni.hideLoading()
				this.commentList[index].ifLike = !this.commentList[index].ifLike
				this.commentList[index].likes = this.commentList[index].ifLike ? this.commentList[index].likes + 1
					: this.commentList[index].likes - 1
			})
				.catch((res) => {
					uni.hideLoading()
				})
		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #FFFFFF;
}

.evaluateTag-box {
	margin-top: 10upx;
	margin-left: 10upx;
	padding-bottom: 10upx;
	display: flex;
	flex-wrap: wrap;

	.evaluateTag-text {
		background-color: #333333;
		padding: 16upx 14upx;
		color: #FFFFFF;
		margin-left: 20upx;
		margin-top: 20upx;
	}
}

.container {
	.img-item {
		width: 223upx;
		height: 223upx;
		border-radius: 10upx;
		margin-right: 10upx;
		margin-top: 10upx;
	}

	.topLabbig-box {
		padding-bottom: 30upx;
		border-bottom: 1upx solid #EEEEEE;
		background-color: #FFFFFF;

		.topLab-box {
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;

			.labtext {
				background-color: #FFE4CC;
				border-radius: 6upx;
				padding: 15upx 15upx;
				margin-left: 20upx;
				margin-top: 20upx;
			}

			.labtext-active {
				background-color: #C5AA7B;
				border-radius: 6upx;
				padding: 15upx 15upx;
				margin-left: 20upx;
				margin-top: 20upx;
			}
		}
	}

	.evaluateList-box {
		padding-bottom: 30upx;

		.evaluate-contentbox {
			display: flex;
			justify-content: center;
			flex-direction: column;
			padding: 30upx 30upx;
			background-color: #FFFFFF;

			.evaluate-content {
				width: 670upx;
				display: flex;
				justify-content: space-between;

				.user-headSmallImg {
					width: 60upx;
					height: 60upx;
					border-radius: 50%;
				}
			}

			.evaluateImg-box {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				margin-left: -9upx;

				.evaluate-Img {
					width: 224upx;
					height: 224upx;
					border-radius: 10upx;
					margin-left: 9upx;
					margin-top: 9upx;
				}
			}

			.addEvaluate {
				margin-top: 20upx;

				.addEvaluateText {
					margin: 25upx 0;
				}
			}

			.addCommentsBut {
				width: 150upx;
				height: 56upx;
				border: 1upx solid #C5AA7B;
				border-radius: 28upx;
				font-size: 26upx;
				line-height: 56upx;
				text-align: center;
				color: #C5AA7B;
			}

			.praisebig-box {
				border-top: 1upx solid #EEEEEE;
				padding-top: 30upx;

				.praise-box {
					.praise-icon {
						width: 60upx;
						height: 60upx;
					}

				}
			}

			.addComments-box {
				border-top: 1upx solid #EEEEEE;
				margin-top: 35upx;
			}
		}
	}

}
</style>
