<template>
	<view class="container">
		<view class="content">
			<view class="detail">
				<view class="comment">
					<view class="item">
						<view class="avatar"><image src="../../static/icon/avatar.png"></image></view>
						<view class="comment-info">
							<view class="nickname-like">
								<view class="nickname">{{ info.senderName }}</view>
							</view>
							<view class="comment-desc">{{ info.content }}</view>
							<view class="date-reply">
								<view class="date">{{ info.createTime }}</view>
								<view @click="replyNickname=info.senderName;replyId=info.id;showAddComment=true" class="reply">回复TA</view>
							</view>
						</view>
					</view>
				</view>
				<view class="comment replys">
					<view class="title fixed-title" :class="fixedTitle?'fixed':''">
						全部回复
					</view>
					<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
						<view class="item" v-for="(item, index) in commentList" :key="index">
							<view class="avatar"><image src="../../static/icon/avatar.png"></image></view>
							<view class="comment-info">
								<view class="nickname-like">
									<view class="nickname">{{ item.senderName }}</view>
								</view>
								<view class="comment-desc" v-if="item.rootId==item.pid">
									<text>{{ item.content }}</text>
								</view>
								<view class="comment-desc" v-else>
									<text class="padding-right-10">回复@{{item.accepterName}}:</text>
									{{ item.content }}
								</view>
								<view class="date-reply">
									<view class="date">{{ item.createTime }}</view>
									<view @click="replyNickname=item.senderName;replyId=item.id;showAddComment=true" class="reply">回复TA</view>
								</view>
							</view>
						</view>
					</mescroll-body>
					<!-- <view class="no-comment" v-if="commentList.length == 0">暂无回复，快来抢占沙发吧~</view>
					<view class="" :style="{height: commentBarHeight}"></view> -->
				</view>
			</view>
			<view class="bg-masker" v-if="showAddComment" @tap="showAddComment=false"></view>
			<view class="add-comment">
				<view class="info">
					<view class="input">
						<textarea
							:show-confirm-bar="false"
							:cursor-spacing="20"
							ref="commentContent"
							:maxlength="200"
							:auto-height="true"
							:fixed="true"
							:focus="showAddComment"
							@blur="showAddComment=false"
							v-model.trim="commentContent"
							placeholder-class="input-bg"
							:placeholder="replyNickname?`回复@ ${replyNickname}`:`回复@ ${info.senderName}`"
						/>
					</view>
					<view class="add">
						<view @click="comment" class="cu-btn radius base-bg-color" style="width: 200rpx;margin-left: 10rpx;">
							回复
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import MescrollMixin from "@/components/mescroll-body/mescroll-mixins.js";
export default {
	mixins: [MescrollMixin], // 使用mixin
	data() {
		return {
			fixedTitle:false,
			fixedTitleTop:'',
			commentBarHeight:'',
			
			rootId:'',//根评论id
			articleId:'',//文章id
			info:'',
			commentList:[],
			//评论
			showAddComment:false,
			commentContent:'',
			//回复谁
			replyNickname:'',
			replyId:'',
			//刷新
			downOption:{
				use:false
			},
			upOption: {
				empty:{
					isSmall:true,
					icon: "http://139.9.103.171:1888/miniofile/xlyq/party-empty.png",
					tip: '暂无评论，快来抢占沙发吧~' // 提示
				}
			}
		};
	},
	onLoad(options) {
		if (this.$isEmpty(options.rootId)||this.$isEmpty(options.articleId)) {
			this.$dialog.showModal('系统错误！',false).then(res=>{
				this.$navigateBack()
			})
			return
		}
		this.rootId=options.rootId
		this.articleId=options.articleId
		this.fetchCommentList()
	},
	onReady() {
		this.$u.getRect('.add-comment').then(res=>{
			this.commentBarHeight=res.height+'px'
		})
		this.$u.getRect('.fixed-title').then(res=>{
			this.fixedTitleTop=res.top
		})
	},
	onPageScroll(e) {
		if (e.scrollTop>this.fixedTitleTop) {
			this.fixedTitle=true
		}else{
			this.fixedTitle=false
		}
	},
	
	methods: {
		fetchCommentList(){
			let params={
				relationType:2,//三会一课
				relationId:this.articleId,
				id:this.rootId,
				isShow:1,
			}
			this.$api.party.commentList(params).then(res=>{
				this.info=res.data.records[0]
				this.commentList=this.info.children
			})
		},
		upCallback(mescroll){
			let params={
				relationType:2,//三会一课
				relationId:this.articleId,
				id:this.rootId,
			}
			try{
				this.$api.party.commentList(params).then(res=>{
					let data=res.data.records[0].children
					this.info=res.data.records[0]
					let total=res.data.total
					console.log(data.length)
					mescroll.endSuccess(data.length);
					if(mescroll.num == 1) this.commentList = []; //如果是第一页需手动制空列表
					this.commentList=data//追加新数据
				})
			}catch(e){
				this.mescroll.endErr()
			}
		},
		comment(){
			if (this.$isEmpty(this.vuex_party_person)) {
				this.$dialog.showModal('非党员，或会话已过期！',false).then(res=>{
					uni.switchTab({
						url:"/pages/index/index"
					})
				})
				return
			}
			if (this.$isEmpty(this.commentContent)) {
				this.$u.toast('评论内容不能为空')
				return
			}
			let params={
				relationType:2,//三会一课的评论
				relationId:this.articleId,
				pid:this.replyId?this.replyId:this.rootId,
				rootId:this.rootId,
				content:this.commentContent,
				memberId:this.vuex_party_person.id
			}
			this.$api.party.comment(params).then(res=>{
				if (res.success==true) {
					this.$u.toast("回复成功")
					this.commentContent=''
					this.showAddComment=false
					this.operateType=0
					this.reload()
				}else{
					this.$u.toast(res.msg)
				}
			})
		}
	}
};
</script>

<style scoped lang="scss">
.fixed{
	position: fixed;
	top: -2rpx;
	width: 100%;
	z-index: 999;
	padding-top: 20rpx;
	background-color: #ffffff;
}
	
.bg-masker {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.4);
	z-index: 0;
}
.comment {
	padding: 15rpx 32rpx 20rpx;
	background: #fff;
	.title {
		display: flex;
		align-items: center;
		font-size: 34rpx;
		color: #444;
		font-weight: bold;
		padding-bottom: 15rpx;
		border-bottom: 1rpx solid #eee;
		text {
			font-size: 28rpx;
			color: #999;
			margin-left: 10rpx;
		}
	}
	.item {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 0 20rpx;
		border-bottom: 1rpx solid #eee;
		&:last-child {
			border-bottom: 0;
		}
		.avatar {
			flex-grow: 0;
			flex-shrink: 0;
			margin-right: 20rpx;
			image {
				width: 56rpx;
				height: 56rpx;
				border-radius: 50%;
			}
		}
		.comment-info {
			flex-grow: 1;
			flex-shrink: 1;
			.nickname-like {
				display: flex;
				justify-content: space-between;
				.nickname {
					font-size: 32rpx;
					color: #444;
					font-weight: bold;
				}
				.like {
					display: flex;
					align-items: center;
					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 14rpx;
					}
					.like-count {
						color: #999;
						font-size: 28rpx;
					}
				}
			}
			.comment-desc {
				color: #262626;
				font-size: 32rpx;
				line-height: 1.6;
				margin-top: 15rpx;
			}
			.reply-count {
				background: #f2f2f2;
				padding: 8rpx 20rpx;
				font-size: 30rpx;
				color: #999;
				margin: 20rpx 0 24rpx;
			}
			.date-reply {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.date {
					display: flex;
					align-items: center;
					color: #b4b4b4;
					font-size: 28rpx;
					margin-right: 20rpx;
					margin-top: 4rpx;
				}
				.reply {
					flex-grow: 0;
					flex-shrink: 0;
					font-size: 28rpx;
					color: #999;
				}
			}
		}
	}
	.no-comment {
		padding: 20rpx 0;
		color: #999;
		font-size: 30rpx;
	}
}
.replys {
	border-top: 0;
	margin-top: 15rpx;
	padding-bottom: 0;
}
.comment-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 120rpx;
	background-color: #ffffff;
	border-top: 1rpx solid #ddd;
	display: flex;
	flex-direction: row;
	.input {
		flex-grow: 0;
		flex-shrink: 0;
		margin: 20rpx 10rpx 20rpx 20rpx;
		display: flex;
		align-items: center;
		background: #f2f2f2;
		width: 420rpx;
		border-radius: 40rpx 40rpx 0 40rpx;
		text {
			font-size: 30rpx;
			color: #aaa;
			margin-left: 38rpx;
		}
	}
	.operate {
		width: 100%;
		flex-grow: 1;
		flex-shrink: 1;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-right: 10rpx;
		view,
		navigator {
			display: flex;
			justify-content: space-around;
			align-items: center;
			width: 25%;
			image {
				width: 45rpx;
				height: 45rpx;
			}
		}
		.info,
		.like {
			position: relative;
			.count {
				position: absolute;
				top: -15rpx;
				right: -9rpx;
				background: #fd1815;
				display: block;
				border-radius: 20rpx;
				padding: 2rpx 10rpx;
				font-size: 24rpx;
				line-height: 1.3;
				color: #fff;
			}
		}
		.share {
			display: flex;
			justify-content: space-around;
			align-items: center;
			width: 25%;
			image {
				width: 45rpx;
				height: 45rpx;
			}
			&:after {
				display: none;
			}
			&:last-child {
				image {
					border: 1rpx solid #63b5e8;
				}
			}
		}
	}
}
.add-comment {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: #ffffff;
	z-index: 9999;
	box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.2);
	.info {
		display: flex;
		flex-direction: row;
		padding: 20rpx 20rpx 20rpx 20rpx;
		.input {
			flex-grow: 1;
			flex-shrink: 1;
			display: flex;
			align-items: center;
			background: #f2f2f2;
			border-radius: 40rpx 40rpx 0 40rpx;
			padding: 20rpx 32rpx 20rpx;
			line-height: normal;
			textarea {
				width: 100%;
				font-size: 32rpx;
				line-height: 42rpx;
				background: #f2f2f2;
			}
		}
		.add {
			flex-grow: 0;
			flex-shrink: 0;
			width: 150rpx;
			display: flex;
			align-items: center;
			margin-left: 15rpx;
		}
		.cancel {
			position: absolute;
			right: 10rpx;
			top: 2rpx;
			/deep/.icon {
				font-size: 40rpx;
				color: #ccc;
			}
		}
	}
}
</style>
