<template>
	<view style="padding: 0px 0px 65px;">
		<image :src="activitiesInfo.promotional_img" mode="widthFix" style="width: 100vw;height: auto;"></image>
		<view class="content_wrapper">
			<view class="title">
				{{activitiesInfo.title}}
				<text class="title-right">{{label}}</text>
			</view>
			<view v-html="activitiesInfo.describe" style="margin-bottom: 15px;" class="describeWrap"></view>
			<view class="text" style="display: flex;align-items: center;">
				<image style="width: 52upx;height: 52upx;vertical-align: middle;margin-right: 4px;" :src="activitiesInfo.avatar"></image>
				{{activitiesInfo.nickname}}
			</view>
			<view class="text">发布于：{{activitiesInfo.publish_time}}</view>
		</view>
		<view class="comment-wrapper">
			<view class="comment-title">
				<view style="flex: 1;">评论<text v-if="0">（{{evaluation_list.length}}）</text></view>
				<view style="margin-right: 20px;" @click="favorite" v-if="0">
					<image v-if="!activitiesInfo.is_thumbs_up" :src="imageRootNew+'appreciate-grey.png'" mode=""></image>
					<image v-else :src="imageRootNew+'appreciate-red.png'" mode=""></image>
					{{activitiesInfo.thumbs_up_count}}
				</view>
				<view class="" @click="tabLeave" v-if="0">
					写留言
					<image :src="imageRootNew+'fa-comment.png'"></image>
				</view>
			</view>
			<view class="comment-item" v-for="(item, index) in evaluation_list" :key="index">
				<view class="dis-flex">
					<image class="avatar2" :src="item.avatar" mode=""></image>
					<view class="name">{{ item.nickname }}</view>
				</view>
				<view style="padding-left: 32px;font-size: 14px;margin: 10px 0px;" @click="tabLeave(index)">{{ item.content }}</view>
				<view style="padding-left: 32px;" class="dis-flex">
					<view class="comment-num" v-if="item.is_query && !item.list" @click="getEvaluationList(index, item.id)">
						展开{{item.reply_count}}条回复
					</view>
					<view class="comment-num" v-else-if="item.is_query && item.list.length!=item.reply_count" @click="getEvaluationList(index, item.id)">
						展开更多回复
					</view>
					<view class="comment-num" v-else>{{item.reply_count}}条回复</view>
					<view style="font-size: 12px;color: #999;">{{item.create_time}}</view>
				</view>
				<view style="padding-left: 32px;">
					<view v-for="(item2,index2) in item.list" :key="index2" style="margin: 10px 0px;">
						<view class="dis-flex">
							<image class="avatar2" :src="item2.avatar" mode=""></image>
							<view class="name">{{ item2.nickname }}</view>
							<view style="margin: 0px 5px;font-size: 10px;">▶</view>
							<image class="avatar2" :src="item2.quilt_avatar" mode=""></image>
							<view class="name">{{ item2.quilt_nickname }}</view>
						</view>
						<view style="padding-left: 32px;font-size: 14px;margin: 10px 0px;" @click="tabLeave(index, index2)">{{ item2.content }}</view>
						<view style="padding-left: 32px;" class="dis-flex">
							<view style="font-size: 12px;color: #999;">{{item2.create_time}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="comment-bottom" v-if="nomore">- 到底了 -</view>
		</view>
		<view class="btn-wrapper">
			<view class="leave-btn" @click="tabLeave">
				<image :src="imageRootNew+'ze-edit@2x.png'"></image>
				说点什么
			</view>
			<view class="favorite-btn" @click="favorite">
				<image v-if="!activitiesInfo.is_thumbs_up" :src="imageRootNew+'ze-like-o@2x.png'" mode=""></image>
				<image v-else :src="imageRootNew+'ze-like@2x.png'" mode=""></image>
				<text>{{activitiesInfo.thumbs_up_count}}</text>
			</view>
			<view class="collect-btn" @click="collect">
				<image v-if="!activitiesInfo.is_collect" :src="imageRootNew+'ze-star-o@2x.png'" mode=""></image>
				<image v-else :src="imageRootNew+'ze-star@2x.png'" mode=""></image>
				<text>{{activitiesInfo.collect_count}}</text>
			</view>
			<view class="comment-btn" @click="tabLeave">
				<image :src="imageRootNew+'leave-g@2x.png'" mode=""></image>
				<text>{{evaluation_list.length}}</text>
			</view>
			<!-- <view class="join-btn" v-if="!activitiesInfo.is_enroll" @click="join">立即报名</view> -->
			<!-- <view class="join-btn" v-if="activitiesInfo.is_enroll" @click="cancelJoin">取消报名</view> -->
		</view>
		<!-- 留言弹窗 -->
		<view style="width: 100%;height: 100%;position: fixed;top: 0;left: 0;
		background-color: rgba(0,0,0,.3);" v-show="showLeave" @click.stop="tabLeave"></view>
		<view class="reply-wrapper" v-show="showLeave">
			<textarea @click.stop class="my-text" v-model="comment" name="" id="" cols="30" rows="10" :placeholder="placeholderTxt"></textarea>
			<button type="primary" style="margin: 20rpx 80rpx;border-radius: 50px;" @click.stop="addComment">发送</button>
		</view>
	</view>
</template>

<script>
	import App from '@/common/js/app.js';
	export default {
		data() {
			return {
				mid: null,
				id: null,
				cc_cc_id: null,
				ccccidList: [],
				label: '',
				activitiesInfo: {},
				evaluation_list:[],
				page: 1,
				comment: '',
				showLeave: false,
				placeholderTxt: "留言",
				oneid: null,
				pid: null,
				indexA: null,//当前一级评论索引
				nomore: false
			}
		},
		onLoad(e) {
			let _this = this;
			this.id = e.id;
			if(e.cc_cc_id){
				this.cc_cc_id = e.cc_cc_id;
				this.getTabData();
			}else if(e.name){
				this.label = e.name;
			}
			
			this.getDetail();
			this.getEvaluationList();
			let user_info = uni.getStorageSync('userInfo');
			if(!user_info){
				App._post_form('&p=member&do=memberInfo', {}, res => {
					// uni.setStorageSync('userinfo', res.data);
					_this.mid = res.data.mid
				});
			}else{
				_this.mid = user_info.mid;
			}
		},
		methods: {
			getTabData(){
				App._post_form(
					`&p=cultivateClass&do=getCultivateClassChildList`,
					{cc_id: 6},
					res => {
						if(res.data.length>0){
							this.ccccidList = res.data;
							this.ccccidList.map(item=>{
								if(item.id==this.cc_cc_id){
									this.label = item.name;
								}
							})
						}
					},
					false,
					() => {
					}
				);
			},
			getDetail(){
				let _this = this;
				App._post_form('&p=student&do=campusActivitiesFind', {id:_this.id}, res => {
					_this.setData({
						activitiesInfo: res.data.data
					})
					
					var strings = this.activitiesInfo.describe;    
					//请求到的富文本数据文件
					const regex = new RegExp('<img ','gi');    
					//创建一个正则匹配规则
					// g表示global全局搜索  i表示ignore case 忽略大小写  m 执行多行匹配
					var richtext = strings.replace(regex, `<img style="width: calc(100vw - 24px);"`);
					// 将想要的样式属性携带在标签上，替换原来的标签即可。
					this.activitiesInfo.describe = richtext;
					// 最后将修改后的富文本传到data中，渲染到视图层即可。

				});
			},
			getEvaluationList(indexA,oneid){
				let _this = this;
				let data = {
					caid: _this.id,
					oneid: oneid||0,
					pindex: _this.page,
					psize: 10
				}
				if(oneid){
					// 二级评论
					if(!_this.evaluation_list[indexA].page){
						_this.$set(_this.evaluation_list[indexA], 'page', 1);
					}
					data.pindex = _this.evaluation_list[indexA].page;
				}
				App._post_form('&p=student&do=getEvaluationList', data, res => {
					if(oneid){
						_this.evaluation_list[indexA].page++;
						if(!_this.evaluation_list[indexA].list){
							_this.$set(_this.evaluation_list[indexA], 'list', []);
						}
						_this.evaluation_list[indexA].list.push(...res.data.list)
						
						
					}else{
						// 一级评论
						if(_this.page===1){
							_this.setData({
								evaluation_list: res.data.list
							})
							if(res.data.total == _this.evaluation_list.length){
								this.nomore = true;
							}else{
								_this.page++;
							}
						}else{
							if(res.data.list.length>0){
								let dataList = _this.evaluation_list.concat(res.data.list);
								_this.setData({
									evaluation_list: dataList
								})
							}
							if(res.data.total == _this.evaluation_list.length){
								this.nomore = true;
							}else{
								_this.page++;
							}
						}
					}
					
				});
			},
			tabLeave(index1, index2){
				console.log(typeof index1, typeof index2);
				this.showLeave=!this.showLeave;
				if(typeof index1 == 'number'){
					this.indexA = index1;
					this.placeholderTxt = '回复';
					this.oneid = this.evaluation_list[index1].id;
					
					if(typeof index2 == 'number'){
						this.pid = this.evaluation_list[index1].list[index2].id;
					}else{
						this.pid = this.evaluation_list[index1].id;
					}
				}else{
					this.placeholderTxt = '留言';
					this.oneid = null;
					this.pid = null;
				}
				
			},
			addComment(){
				let _this = this,
				data = {
					mid: this.mid,
					caid: this.id,
					content: this.comment,
					oneid: this.oneid || 0,
					pid: this.pid || 0
				}
				App._post_form('&p=student&do=addEvaluation', data, res => {
					uni.showToast({
						title: res.message
					})
					_this.showLeave = false;
					_this.comment = '';
					
					// 后台审核，暂时获取不到新的评论
					if(this.oneid){
						// _this.getEvaluationList(this.indexA, this.oneid);
					}else{
						// _this.getEvaluationList();
					}
				})
			},
			// 废弃接口
			join(){
				let _this = this,
				data = {
					caid: this.id
				}
				uni.showModal({
					title: '温馨提示',
					content: '请确认是否报名',
					success(res) {
						if(res.confirm){
							App._post_form('&p=student&do=immediatelyEnrollActivities', data, res => {
								uni.showToast({
									title: res.message
								})
								_this.activitiesInfo.is_enroll = true;
							})
						}
					}
				})
			},
			// 废弃接口
			cancelJoin(){
				let _this = this,
				data = {
					caid: this.id
				}
				App._post_form('&p=student&do=cancelEnrollActivities', data, res => {
					uni.showToast({
						title: res.message
					})
					_this.activitiesInfo.is_enroll = false;
				})
			},
			favorite(){
				let _this = this,
				data = {
					caid: this.id
				}
				App._post_form('&p=student&do=thumbsUpActivities', data, res => {
					uni.showToast({
						title: res.message
					})
					_this.activitiesInfo.is_thumbs_up = !_this.activitiesInfo.is_thumbs_up
					if(_this.activitiesInfo.is_thumbs_up){
						++_this.activitiesInfo.thumbs_up_count;
					}else if(!_this.activitiesInfo.is_thumbs_up){
						--_this.activitiesInfo.thumbs_up_count;
					}
				})
			},
			collect(){
				let _this = this,
				data = {
					caid: this.id
				}
				if(_this.activitiesInfo.is_collect){
					App._post_form('&p=student&do=cancelCollectActivities', data, res => {
						uni.showToast({
							title: res.message
						})
						_this.activitiesInfo.is_collect = !_this.activitiesInfo.is_collect
						// if(res.message=='已取消收藏'){
							--_this.activitiesInfo.collect_count;
						// }
					})
				}else{
					App._post_form('&p=student&do=immediatelyCollectActivities', data, res => {
						uni.showToast({
							title: res.message
						})
						_this.activitiesInfo.is_collect = !_this.activitiesInfo.is_collect
						// if(res.message=='收藏成功'){
							++_this.activitiesInfo.collect_count;
						// }
					})
				}
			}
		},
		onReachBottom(){
			if(!this.nomore){
				this.getEvaluationList();
			}
		}
	}
</script>

<style lang="scss">
.dis-flex{
	display: flex;
	align-items: center;
}
.content_wrapper{
	padding: 40upx 24upx;
	.title{
		font-size: 18px;
		font-weight: bold;
		color: #444;
		margin-bottom: 10px;
	}
	.title-right{
		font-size: 14px;
		padding: 0px 5px;
		color: #2479EA;
		border: 1px solid #2479EA;
		border-radius: 5px;
		margin-left: 8px;
	}
	.text{
		font-size: 12px;
		color: #999;
		margin: 10px 0px;
	}
	
	.describeWrap{
		rich-text{
			.content-picture, .nfw-cms-img{
				width: calc(100vw - 24px);
			}
		}
	}
	
}
.comment-wrapper{
	padding: 0px 24upx;
	
	.comment-title{
		font-size: 18px;
		font-weight: bold;
		color: #444;
	}
	
	.comment-item{
		padding: 10px 0px;
		border-bottom: 1px solid #f8f8f8;
		.avatar2{
			width: 24px;
			height: 24px;
			background-color: #000;
			border-radius: 50%;
			margin-right: 8px;
		}
		.name{
			font-size: 13px;
		}
		.comment-num{
			padding: 2px 8px;
			border-radius: 20px;
			background-color: #e8e8e8;
			margin-right: 8px;
			font-size: 12px;
		}
	}
	.comment-bottom{
		width: 100%;
		line-height: 60px;
		text-align: center;
		color: #bbb;font-size: 14px;
	}
}

.btn-wrapper{
	width: 100vw;
	height: 67px;
	padding: 15px 35upx;
	box-sizing: border-box;
	position: fixed;
	bottom: 0px;
	left: 0;
	background: #FFF;
	border-top: 1px solid #f4f4f4;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.leave-btn{
		width: 320rpx;
		height: 36px;
		padding: 0px 8px;
		box-sizing: border-box;
		border-radius: 30px;
		color: #bbb;
		border: 1px solid #bbb;
		line-height: 36px;
		font-size: 14px;
	}
	
	.leave-btn, .favorite-btn, .collect-btn, .comment-btn{
		height: 36px;
		display: flex;
		align-items: center;
		image{
			width: 24px;
			height: 24px;
			margin-right: 4px;
		}
	}
}
.reply-wrapper{
	position: fixed;
	top: 50%;
	left: 50%;
	width: 560rpx;
	height: 430rpx;
	background-color: #fff;
	border-radius: 20px;
	transform: translate(-50%, -50%);
	box-shadow: 0px 0px 3px 0px rgba(0,0,0,.05);
	
	.my-text{
		padding: 50rpx 30rpx;
		width: 100%;
		box-sizing: border-box;
	}
}
</style>
