<template>
	<view class="view-comment">
		<view style="display: flex;">
			<text class="title">
			{{ title }}
			</text>
			<cover-image  @tap="close"  style="width: 40rpx;height:40rpx;position: absolute;top:12rpx;z-index:1007;right:12rpx;" src="@/static/images/false.png" ></cover-image>
		</view>
	
		<view class="view-conmment-note" v-if="(commentList.length == 0)">
			<image
				src="data:image/png;base64, "
				class="icon-none"
				mode="aspectFit"
			></image>
			<text class="text-conmment-note">暂无评论</text>
		</view>
		<scroll-view  scroll-y  @scrolltolower="scrollbottom"  style="z-index:999;max-height: 800rpx;" v-if="(commentList.length > 0)">
		<view  class="view-comment-list" v-for="(item, index) in commentList" :key="index" v-if="(commentList.length > 0)">
			<image :src="item.user_avatar" class="view-comment-list-item-photo" mode="aspectFill"></image>
			<view class="view-comment-list-item">
				<view class="comment-title">
					<text class="comment-name">{{ item.user_nickname }}</text>
					<view style="flex: 1;"></view>
					<image
						v-if="item.IsFabulous == 1"
						class="praise-icon"
						:data-index='index'
						:data-comment_id='item.comment_id'
						@click="onUnCommentLike"
						src="data:image/png;base64,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"
						mode="aspectFill"
					></image>
					<image
						v-else
						class="praise-icon"
						:data-index='index'
						:data-comment_id='item.comment_id'
						@click="onCommentLike"
						src="data:image/png;base64, "
						mode="aspectFill"
					></image>
					<text class="praise-num" style="margin-left: 10rpx;">{{ item.comment_like_count }}</text>
				</view>
				<view class="comment-content"><text style="font-size: 30rpx;">{{ item.comment_content }}</text></view>
				<view class="comment-sub">
					<text class="comment-sub-time">{{ item.comment_time }}</text>
					<!-- <view class="comment-sub-recomment" style="color: #999999;" v-if="item.CANDELETE == 1" @click="clickDelete(item)">删除</view>
					<view class="comment-sub-recomment" @click="clickRecomment(item)">回复</view> -->
				</view>
				<view class="comment-child" v-show="item.commentList.length > 0">
					<view class="comment-child-item" v-for="(itemChild, indexChild) in item.commentList" :key="indexChild">
						<text class="comment-child-item-name" @click="clickRecommentChild(itemChild)">{{ itemChild.FIRSTNICKNAME + '：' }}</text>
						<!-- <text class="comment-child-item-content">{{ (itemChild.SECONDNICKNAME ? '回复 ' + itemChild.SECONDNICKNAME + '：' : '') + itemChild.COMMENT }}</text> -->
						<text class="comment-child-item-content" v-if="itemChild.SECONDNICKNAME">回复</text>
						<text class="comment-child-item-content">{{ itemChild.SECONDNICKNAME ? itemChild.SECONDNICKNAME : '' }}</text>
						<text class="comment-child-item-content" v-if="itemChild.SECONDNICKNAME">：</text>
						<text class="comment-child-item-content">{{ itemChild.COMMENT }}</text>
						<text v-if="itemChild.CANDELETE == 1" class="comment-child-item-delete" @click="clickDeleteChild(itemChild)">删除</text>
					</view>
				</view>
			</view>
		</view>
		</scroll-view>
		<view class="view-conmment-send-bottom" @click.stop="clickComment" style="left:0;width:100%;">
			<view class=" view-comment-textarea"  ><cover-view class="textarea-comment">写评论…</cover-view></view>
		</view>
		<five-comment ref="detailComment" @sendComment="sendComment" :placeholder="placeholder"></five-comment>
	</view>
</template>

<script>
	import FiveComment from '../five-comment/five-comment.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex'
export default {
	name: 'MulCommentList',
	components:{
		FiveComment
	},
	//属性
	props: {
		commentLists: {
			type: Array
		},
		title: {
			type: String,
			default: '网友评论'
		},
		story_id: {
			type: Number,
			default: 0
		},
		user_id: {
			type: Number,
			default: 0
		}
	},
	computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin', '__', '$',
		'sprintf'
	]),
	
	data() {
		return {
			//评论组件相关
			placeholder: '请输入评论内容…',
			commentParam: {},
			commentList: [],
			
			flag : true,
			ispage : true,
			page:1,
			
			winHeight: 0,
			winWidth: 0,
		};
	},
	created: function(e) {
		this.winHeight = uni.getSystemInfoSync().windowHeight;
		this.winWidth = uni.getSystemInfoSync().windowWidth;
		this.updateHeights()
	},
	watch:{
		commentLists(newVal, oldVal){
			this.commentList = this.commentLists
			
			
		}
	},
	methods: {
		...mapMutations(['logout', 'getPlantformInfo', 'forceUserInfo', 'getStoreInfo']),
		
		updateHeights() {
			this.$nextTick(() => {
				uni.createSelectorQuery()
					.in(this)
					.selectAll('.view-comment')
					.boundingClientRect(res => {
						var heights = 0;
					
						if (res.length > 0) {
							heights = res.map(item => item.height);
						
						}
			
						this.updateHeight(this.winHeight - (heights[0] + 43))
					})
					.exec();
			});
		},
		updateHeight(h) {
			// #ifdef MP-WEIXIN
			this.$emit('updata',h);
			// #endif
		},
		clickComment(event) {
			this.commentParam = {
				COMMENT_TIME: '2020-07-07 14:30:01',
				FIRSTNICKNAME: '网友45454545',
				CHILD_ANWSER_LIST: [],
				IS_PRAISE: null,
				PRAISE_NUM: 0,
				CANDELETE: 1,
				HEADIMGURL: 'http://img4.imgtn.bdimg.com/it/u=2858424520,3197172862&fm=11&gp=0.jpg',
				SECONDNICKNAME: null
			};
			event.stopPropagation();
			
			this.$refs.detailComment.open();
		},
		sendComment(result) {
			var that = this;
			
			if (false)
			{
			    that.$.alert(that.__("该帖禁止评论!"))
			}
			else
			{
			   
				var commentParam = {
				    user_id: that.userInfo.user_id,
				    story_id: that.story_id,
				    comment_content: result,
				    comment_reply_id: 0,
				    comment_id: 0,
				    to_user_id: that.user_id
				};
				
			
				var params = commentParam
			
			    that.$.request({
			        url: that.Config.URL.sns.story_comment_add,
			        data: params,
			        success: function (data, status, msg, code) {
			            if (200 == status) {
							var date = new Date();
							commentParam.user_nickname = that.userInfo.user_nickname
							commentParam.user_avatar = that.userInfo.user_avatar
							commentParam.comment_like_count = 0
							commentParam.comment_id = data.comment_id
							commentParam.IsFabulous = 0
							commentParam.comment_time = date .toLocaleString()
							commentParam.commentList = []
							that.commentList.unshift(commentParam);
							that.$emit('confirm', 1);
			                // that.GetPostsCommentByPostsId()
			            } else {
			                that.$.alert(msg)
			            }
			        }
			    });
			}
			
			console.log(this.commentList)
		},
		
		scrollbottom: function(e) {
		    if (this.flag) {
		        var that = this;
		        that.flag = false;
				clearTimeout(n);
		
		        
				/*
		        post.sidx = 'product_unit_price';
		        post.sord = this.sort == 1 ? 'DESC' : 'ASC';
				*/
		        that.page = parseInt(that.page) + 1;
		
		        var n = setTimeout(function() {
		          
		                that.GetPostsCommentByPostsId();
		        }, 500);
		    }
		},
		
		close(e) {
			this.$emit('closesp');
		},
		
		
		  
		
		GetPostsCommentByPostsId: function (e) {
		    var that = this
		    var params = {
				story_id: that.story_id,
				page:that.page,
				sidx: 'comment_time',
				sord: 'DESC',
			};
		    that.$.request({
		        url: this.Config.URL.sns.story_comment_lists,
		        data: params,
		        loading: false,
		        success: function (data, status, msg, code) {
		            if (data.items.length > 0) {
		
		                for (var r = 0; r < data.items.length; r++) {
		                    //that.dataComment[r]['comment_time_str'] = dateUtil.dateUtils.format(that.$.datetimeFormatter(that.dataComment[r]['comment_time']));
		
							data.items[r]['comment_time_str'] = data.items[r]['comment_time'];
		
							data.items[r]['reply_name_str'] = '';
		
		                    for (var j = 0; j < data.items[r]['commentList'].length; j++) {
		                        data.items[r]['commentList'][j]['comment_reply_time_str'] = dateUtil.dateUtils.format(that.$.datetimeFormatter(data.items[r]['commentList'][j]['comment_reply_time']));
		
		                        //data.items[r]['commentList'][j]['comment_reply_time_str'] = data.items[r]['commentList'][j]['comment_reply_time'];
		
								data.items[r]['reply_name_str'] = data.items[r]['commentList'][j]['user_nickname'];
		                    }
		                }
		
		                if (data.page >= data.total) {
							that.commentList = that.commentList.concat(data.items)
							that.flag =  false
							that.ispage =  false
		                } else {
							that.commentList = that.commentList.concat(data.items)
							that.flag =  true
							that.ispage =  true
		                }
						console.log(that.commentList)
						
		            } else {
						that.flag =  false
						that.ispage =  false
		            }
		        }
		    });
		},
		/**
		 * 点赞
		 * @param {Object} item
		 */
		clickPraise(item) {
			this.$emit('clickPraise', item);
		},
		onUnCommentLike: function (n) {
		    let that = this;
			n.stopPropagation();
		    that.forceUserInfo(function(user) {
		
		        var params = {
		            comment_id: n.currentTarget.dataset.comment_id
		        };
		
		        that.$.request({
		            url: that.Config.URL.sns.story_comment_like_remove,
		            data: params,
		            success: function (data, status, msg, code) {
		                if (200 == status) {
		                    for (var t = [], e = 0; e < that.commentList.length; e++)
		                    {
		                        if (that.commentList[e].comment_id == n.currentTarget.dataset.comment_id)
		                        {
		                            var o = that.commentList[e];
		                            0 == that.commentList[e].IsFabulous ? (o.IsFabulous = 1, o.comment_like_count = o.comment_like_count + 1) : (o.IsFabulous = 0, o.comment_like_count = o.comment_like_count - 1), t.push(o)
		                        }
		                        else
		                        {
		                            t.push(that.commentList[e]);
		                        }
		                    }
							that.commentList= t
		                    
		                } else {
		                }
		            }
		        });
		    });
		},
		onCommentLike: function (a) {
		    let that = this;
			a.stopPropagation();
		    that.forceUserInfo(function(user) {
		        that.zan(a.currentTarget.dataset.comment_id)
		    });
		},
		zan: function (comment_id) {
		    var that = this, params = {
		        user_id: that.userInfo.user_id,
		        /*operateId: that.shopInfo.store_id,*/
		        comment_id: comment_id
		    };
		
		    that.$.request({
		        url: this.Config.URL.sns.story_comment_like_add,
		        data: params,
		        success: function (data, status, msg, code) {
		            if (200 == status) {
		                for (var t = [], e = 0; e < that.commentList.length; e++)
		                {
		                    if (that.commentList[e].comment_id == comment_id)
		                    {
		                        var o = that.commentList[e];
		                        0 == that.commentList[e].IsFabulous ? (o.IsFabulous = 1, o.comment_like_count = o.comment_like_count + 1) : (o.IsFabulous = 0, o.comment_like_count = o.comment_like_count - 1), t.push(o)
		                    }
		                    else
		                    {
		                        t.push(that.commentList[e]);
		                    }
		                }
		
		                that.commentList= t
		            } else {
		            }
		        }
		    });
		},
		/**
		 * 回复 评论
		 * @param {Object} item
		 */
		clickRecomment(item) {
			this.$emit('clickRecomment', item);
		},
		/**
		 * 删除评论
		 * @param {Object} item
		clickDelete(item) {
			this.$emit('clickDelete', item);
		},
		/**
		 * 删除评论
		 * @param {Object} item
		 */
		clickDeleteChild(item) {
			this.$emit('clickDeleteChild', item);
		},
		/**
		 * 回复评论的评论
		 * @param {Object} item
		 */
		clickRecommentChild(item) {
			this.$emit('clickRecommentChild', item);
		}
	}
};
</script>

<style scoped>
@import '@/styles/iconfont.css';
.view-comment {
	width: 750rpx;
	background-color: white;
	margin-top: 20rpx;
	display: flex;
	flex-direction: column;
	position: fixed;
	padding: 30rpx;
	bottom: 100rpx;
	max-height: 1000rpx;
	/* #ifdef APP-PLUS-NVUE */
	bottom: 100rpx;
	/* #endif */

	z-index:9999;
	

}

.title {
		width: 100%;
		color: #333;
		font-weight: bold;
		font-size: 34rpx;
	}
.praise-icon {
	height: 40rpx;
	width: 40rpx;
	font-size: 36rpx;
	color: #999;
}
.praise-num {
	font-size: 26rpx;
	color: #999;
}

.view-conmment-note {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex: 1;
	padding-bottom: 20rpx;
}
.icon-none {
	width: 200rpx;
	height: 200rpx;
	color: #bbbbbb;
}
.text-conmment-note {
	color: #808080;
	font-size: 32rpx;
	margin-top: 30rpx;
}

.border-line {
	border-bottom-style: solid ;
	border-bottom-width: 1px;
	border-bottom-color: #f6f6f6;
}
.view-comment-list {
	width: 100%;
	display: flex;
	flex-direction: row;
	background-color: white;
	padding: 20rpx 0;
	border-bottom-style: solid ;
	border-bottom-width: 1px;
	border-bottom-color: #f6f6f6;
}
.view-comment-list-item-photo {
	height: 80rpx;
	width: 80rpx;
	border-radius: 40rpx;
	border: 1px solid #f6f6f6;
}
.view-comment-list-item {
	margin-left: 16rpx;
	display: flex;
	flex: 1;
	flex-direction: column;
}
.comment-name {
	color: #666;
	font-size: 32rpx;
	display: flex;
	align-items: center;
}
.comment-title {
	align-items: center;
	display: flex;
	width:594rpx;
	height: 60rpx;
	flex-direction: row;
	justify-content : space-between;
}

.comment-content {
	color: #000000;
	width:596rpx;
	font-size: 26rpx;
	font-weight: 500;
	padding:10rpx 0;
}


.comment-sub {
	display: flex;
	align-items: center;
	flex-direction: row;
	
}

.comment-sub-time {
	color: #999;
	font-size: 26rpx;
}
.comment-sub-recomment {
	color: #666;
	font-size: 28rpx;
	padding: 0 0 0 20rpx;
}
.comment-child {
	background-color: #f8f8f8;
	border-radius: 10rpx;
	padding: 0 20rpx;
}
.comment-child-item {
	flex-wrap: wrap;
	margin: 15rpx 0;
	display: flex;
	align-items: center;
	flex-direction: row;
	
}
.comment-child-item-name {
		white-space: nowrap;
		font-size: 30rpx;
		color: #5074cf;
	}
	.comment-child-item-content {
		font-size: 30rpx;
		text-align: center;
	}
	.comment-child-item-delete {
		font-size: 28rpx;
		color: #999999;
		margin-left: 30rpx;
		text-align: center;
	}
	
	.view-conmment-send-bottom {
		width: 750rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		flex-direction: row;
		background-color: white;
		border-top: 1px solid #fbfbfb;
		z-index:999;
	}
	
	.view-comment-textarea {
		background-color: #f8f8f8;
		border-radius: 40rpx;
		padding: 15rpx 20rpx;
		margin: 25rpx 20rpx;
		width: 700rpx;
		/* flex: 1;
		align-items: center; */
	}
	.textarea-comment {
		padding: 0;
		width: 100%;
		/* height: 100%; */
		font-size: $uni-font-size-base;
		/* color: $uni-text-color; */
		color: $uni-text-sub-color;
	}
	
	.icon-comment {
		font-size: 46rpx;
		color: $uni-text-color;
		margin: 0 30rpx 0 5rpx;
	}
	.view-btn-comment {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: $uni-font-size-base;
		color: white;
		height: 70rpx;
		width: 120rpx;
		border-radius: 10rpx;
		background-color: $theme-color;
		font-weight: 500;
	}
	.textarea-bottom {
		background-color: white;
		padding: 20rpx;
	}
</style>
