<template>
	<view class="container">
		<view class="content">
			<view class="detail">
				<view class="title">{{ info.name }}</view>
				<view class="info">
					<view class="source-date">
						<text class="source" v-if="info.classId==item.value" v-for="(item,index) in partyInfoClass" :key="index">{{item.label}}</text>
					</view>
					<view class="read">{{ info.updateTime }}</view>
				</view>
				<view class="desc ql-editor">
					<u-parse :html="info.content"></u-parse>
				</view>
			</view>
			<view class="comment " >
				<view class="title fixed-title" :class="fixedTitle?'fixed':''">
					<text>全部评论</text>
					<text class="count" v-if="commentList.length > 0">({{ commentList.length }})</text>
				</view>
				
				<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
					<navigator :url="`./commentDetail?rootId=${item.id}&articleId=${id}`" hover-class="none" v-if="!$isEmpty(commentList)" 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" hover-class="none">{{ item.content }}</view>
							<view class="date-reply">
								<view class="date"  hover-class="none">{{ item.createTime }}</view>
								<view class="reply" >回复TA</view>
							</view>
							<view class="reply-count" v-if="item.totalComment"  hover-class="none">
								全部{{item.totalComment}}条回复 >
							</view>
						</view>
					</navigator>
				</mescroll-body>

			</view>
			<view class="comment-bar">
				<view class="input" @click="showAddComment=true"><text>发表评论</text></view>
				<view class="operate">
					<navigator :url="'comment?article_id=' + id" class="info" hover-class="none">
						<image src="../../static/icon/icon_comment_02.png"></image>
						<text class="count">{{commentList.length}}</text>
					</navigator>
					
					<button open-type="share" class="share"><image src="../../static/icon/icon_share.png"></image></button>
				</view>
			</view>
			<view class="bg-masker" v-if="showAddComment" @tap="showAddComment=false"></view>
			<view class="add-comment" v-if="showAddComment">
				<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"
							v-model.trim="commentContent"
							placeholder-class="input-bg"
							placeholder="发表评论"
						/>
					</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:'',
			//文章id
			id: 0,
			info:{},
			partyInfoClass:[],
			//评论
			showAddComment:false,
			commentList:[],
			commentContent:'',
			downOption:{
				use:false
			},
			upOption: {
				empty:{
					isSmall:true,
					icon: "http://139.9.103.171:1888/miniofile/xlyq/party-empty.png",
					tip: '暂无评论，快来抢占沙发吧~' // 提示
				}
			}
		};
	},
	onReady() {
		this.$u.getRect('.comment-bar').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
		}
	},
	onLoad(options) {
		this.id=options.id || ''
		this.fetchDetail()
		this.getDict()
	},
	methods: {
		getDict(){
			let dict=this.$cache.get('dict')
			if (dict&&!this.$isEmpty(dict.partyInfoClass)) {
				//缓存中有字典值
				this.partyInfoClass=dict.partyInfoClass
				return
			}
			this.$api.dict({code:'party_new_class'}).then(res=>{
				res.data.forEach((item)=>{
					let tmp={
						value:item.dictKey,
						label:item.dictValue
					}
					this.partyInfoClass.push(tmp)
				})
			})
		},
		/*获取文章详情*/
		fetchDetail() {
			this.$api.party.partyInfoDetail({id:this.id}).then(res=>{
				this.info=res.data
			})
		},
		fetchCommentList(){
			let params={
				relationType:1,//三会一课
				relationId:this.id,
				isShow:1,
				pid:'0'
			}
			this.$api.party.commentList(params).then(res=>{
				this.commentList=res.data.records
			})
		},
		upCallback(mescroll){
			let params={
				current:mescroll.num,
				size:mescroll.size,
				pid:'0',
				relationType:1,//三会一课
				relationId:this.id,
				isShow:1,
			}
			try{
				this.$api.party.commentList(params).then(res=>{
					let data=res.data.records
					let total=res.data.total
					mescroll.endBySize(data.length,total);
					if(mescroll.num == 1) this.commentList = []; //如果是第一页需手动制空列表
					this.commentList=this.commentList.concat(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:1,//三会一课的评论
				relationId:this.id,
				pid:'0',
				rootId:'0',
				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.reload()
				}else{
					this.$u.toast(res.msg)
				}
			})
		}
	}
};
</script>

<style scoped lang="scss">
	@import "@/assets/colorui/rich_text.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;
}	

.detail {
	padding: 40rpx 32rpx;
	background: #fff;
	.title {
		font-size: 44rpx;
		color: #262626;
		line-height: 70rpx;
		font-weight: bold;
	}
	.info {
		margin-top: 32rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		.source-date {
			.source {
				color: #666;
			}
			.date {
				color: #999;
				margin-left: 24rpx;
			}
		}
		.read {
			color: #999;
		}
	}
	.desc {
		margin-top: 56rpx;
		overflow: hidden;
		color: #262626;
		.wxParse {
			color: #262626;
		}
	}
}
.comment {
	padding: 20rpx 32rpx 0;
	background: #fff;
	.title {
		display: flex;
		align-items: center;
		font-size: 36rpx;
		color: #262626;
		font-weight: bold;
		border-bottom: 1rpx solid #eee;
		text {
			padding-bottom: 20rpx;
			line-height: normal;
		}
		.count {
			padding-bottom: 20rpx;
			font-size: 30rpx;
			color: #999;
			margin-left: 10rpx;
			line-height: normal;
		}
	}
	.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: 45rpx;
				height: 45rpx;
				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: 32rpx;
						height: 32rpx;
						margin-right: 14rpx;
					}
					.like-count {
						color: #999;
						font-size: 30rpx;
					}
				}
			}
			.comment-desc {
				color: #444;
				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: 40rpx 0;
		color: #999;
		font-size: 30rpx;
	}
}
.comment-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 120rpx;
	background-color: #ffffff;
	display: flex;
	flex-direction: row;
	.input {
		flex-grow: 0;
		flex-shrink: 0;
		margin: 20rpx 40rpx 20rpx 20rpx;
		display: flex;
		align-items: center;
		background: #f2f2f2;
		width: 520rpx;
		text {
			font-size: 32rpx;
			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;
				left: 20rpx;
				background-color: $party-color;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				border-radius: 50rpx;
				padding: 0 10rpx;
				font-size: 22rpx;
				color: #fff;
				height: 30rpx;
				line-height: 30rpx;
			}
		}
		.share {
			display: flex;
			justify-content: space-around;
			padding: 0;
			background: transparent;
			image {
				width: 45rpx;
				height: 45rpx;
				border: 0;
			}
			&:after {
				display: none;
			}
		}
	}
}

.add-comment {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: #ffffff;
	z-index: 9999;
	.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 {
				//padding: 10rpx 0;
				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: 10rpx;
		}
		.cancel {
			position: absolute;
			right: 10rpx;
			top: 2rpx;
			/deep/.icon {
				font-size: 40rpx;
				color: #ccc;
			}
		}
	}
}
.share-maske {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	z-index: 99999;
	.share-tip {
		position: absolute;
		top: 100rpx;
		left: 0;
		text-align: center;
		.share-tip-info {
			height: 240rpx;
		}
		.share-tip-btn {
			margin-top: 400rpx;
			height: 82rpx;
		}
	}
	.share-browser-tip {
		top: 300rpx;
		.share-tip-info {
			height: 240rpx;
		}
		.share-tip-btn {
			margin-top: 200rpx;
		}
	}
}
</style>
