<template>
	<view class="evaluate">
		<view class="evaluate-box">
			<view class="evaluate-box-item d-flex">
				<image @click="handleJumpPerson(itemDetail)" :src="itemDetail.avatar" mode="aspectFill"
					class="avatar-parent"></image>
				<view class="evaluate-box-item-main ml-two flex-1">
					<!-- 父评论体-start -->
					<view class="d-flex a-center j-sb">
						<view class="d-flex">
							<view class="evaluate-box-item-main-nickname">
								{{itemDetail.nickName}}
							</view>
							<view class="evaluate-box-item-main-state" v-if="showState && itemDetail.contractNo">
								已下单
							</view>
						</view>

						<view class="evaluate-box-item-main-zan d-flex a-center">
							<image @click="changeLikeState(itemDetail)"
								:src="itemDetail.isLiked ? require('@/static/images/zan-selected.png') : require('@/static/images/zan.png')" />
							<view>{{itemDetail.likesNum}}</view>
						</view>
					</view>
					<view class="evaluate-box-item-main-content" @click="handleReply(itemDetail)">
						{{itemDetail.content}}
						<view class="d-flex flex-wrap j-sb picture" v-if="itemDetail.contentImg">
							<image v-for="(info,ix) in itemDetail.contentImg.split(',')" :key="ix" class="picture-item"
								:src="info" mode="" @click.stop="prviewImage(itemDetail.contentImg,ix)"></image>
						</view>
					</view>
					<view class="evaluate-box-item-main-foot d-flex a-center">
						<view class="evaluate-box-item-main-foot-time">{{itemDetail.createTime}}</view>
						<view class="evaluate-box-item-main-foot-btn" @click="handleReply(itemDetail)">回复</view>
					</view>
					<!-- 父评论体-end -->
					<!-- 子评论列表-start -->
					<view>
						<view v-for="(each, index) in itemDetail.commentsVoList" :key="index"
							v-if="isFold ? true : index == 0" style="margin-top: 28rpx;">
							<view class="d-flex">
								<image @click="handleJumpPerson(each)" class="avatar-parent" :src="each.avatar" mode="">
								</image>
								<view class="evaluate-box-item-main ml-two flex-1">
									<view class="d-flex a-center j-sb">
										<view class="evaluate-box-item-main-nickname">
											{{each.nickName}} 回复 {{each.sonNickName}}
										</view>
										<view class="evaluate-box-item-main-zan d-flex a-center">
											<image @click="changeLikeState(each)"
												:src="each.isLiked ? require('@/static/images/zan-selected.png') : require('@/static/images/zan.png')" />
											<view>{{each.likesNum}}</view>
										</view>
									</view>
									<view class="evaluate-box-item-main-content" @click="handleReplyChild(each)">
										{{each.content}}
										<view class="d-flex flex-wrap picture " v-if="each.contentImg">
											<image v-for="(info,ix) in each.contentImg.split(',')" :key="ix"
												class="picture-item" style="margin-right: 10rpx;" :src="info" mode=""
												@click.stop="prviewImage(each.contentImg,ix)"></image>
										</view>
									</view>
									<view class="evaluate-box-item-main-foot d-flex a-center">
										<view class="evaluate-box-item-main-foot-time">{{each.createTime}}</view>
										<view class="evaluate-box-item-main-foot-btn" @click="handleReplyChild(each)">回复
										</view>
									</view>
								</view>
							</view>
						</view>
						<view v-if="!isFold && itemDetail.commentsVoList.length > 1" class="fold-more d-flex a-center"
							@click="handleShowMore">
							<view class="placeholder"></view>
							<view>展开{{itemDetail.commentsVoList.length - 1}}条回复</view>
							<u-icon size="20" name="arrow-down" color="#333333"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <commentPopup ref="childPopup" :isReply="true" ></commentPopup> -->
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		likeOrUnlike
	} from '@/api/workbench/index.js'
	import commentPopup from '@/components/custom/comment.vue'
	export default {
		components: {
			commentPopup
		},
		props: {
			showState: {
				type: Boolean,
				default: false,
			},
			itemDetail: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				isFold: false,

			}
		},
		computed: {
			...mapGetters({
				userInfot: 'userInfo'
			})
		},
		methods: {
			handleReply(row) {
				let id = 1
				this.$emit('reply', row.commentId, row.userId, row.nickName,id)
				// this.$parent.isReply = true
				// this.$parent.$refs.childPopup.show = true
				// this.$refs.childPopup.show = true;
			},
			handleJumpPerson(row) {
				if (row.userType == 'merchant') {
					uni.navigateTo({
						url: `/homePage/merchant/index?businessId=${row.userId}`
					})

				} else {
					uni.navigateTo({
						url: `/homePage/merchant/personHomePage?userId=${row.userId}`
					})
				}

			},
			handleReplyChild(row) {
				let commentIdData= this.itemDetail.commentId
				let id = 2
				this.$emit('reply', row.commentId, row.userId, row.nickName,id, commentIdData)
			},
			// 预览图片
			prviewImage(imageStr, index) {
				uni.previewImage({
					current: index, // 当前显示图片索引
					urls: imageStr.split(',') // 需要预览的图片http链接列表
				});
			},
			changeLikeState(row) {
				let self = this
				likeOrUnlike({
					forumId: row.commentId,
					userId: this.userInfot.userId,
					isLikeType: 2, //论坛1评论2
				}).then(res => {
					console.log('改变')
					self.$emit('refersh')

				})
			},
			handleShowMore() {
				this.isFold = true
			}

		}
	}
</script>

<style lang="scss" scoped>
	.evaluate {


		&-box {
			&-item {
				.avatar-parent {
					width: 60rpx;
					height: 60rpx;
					background: #F83D3D;
					border-radius: 50%;
				}

				&-main {
					&-nickname {
						font-size: 28rpx;
						color: #303949;
						font-weight: bold;
					}

					&-state {
						height: 32rpx;
						background: #e2edff;
						border-radius: 8rpx;
						padding: 0 5rpx;
						font-size: 20rpx;
						color: #1572FF;
						margin-left: 12rpx;
					}

					&-zan {
						>image {
							width: 36rpx;
							height: 36rpx;
						}

						>view {
							font-size: 26rpx;
							color: #666666;
							margin-left: 12rpx;
						}
					}

					&-content {
						font-size: 26rpx;
						color: #666666;
						margin: 16rpx 0;

						.picture {
							margin-top: 16rpx;

							&-item {
								width: 190rpx;
								height: 190rpx;
								background: linear-gradient(180deg, #EEEEEE 0%, #D8D8D8 100%);
								border-radius: 12rpx;
							}

						}

						.picture:after {
							content: '';
							width: 190rpx;
						}
					}

					&-foot {
						&-time {
							font-size: 24rpx;
							color: #999999;
						}

						&-btn {
							font-size: 24rpx;
							color: #333333;
							margin-left: 20rpx;
						}
					}
				}
			}
		}
	}

	.fold-more {
		font-size: 26rpx;
		color: #333333;
	}
	.placeholder{
		width: 72rpx;
	}
</style>