<template>
	<view style="padding: 10px 10px 65px;">
		<view class="content_wrapper">
			<image :src="activitiesInfo.promotional_img" mode="widthFix" style="width: calc(100vw - 20px);"></image>
			<view style="font-size: 18px;line-height: 30px;font-weight: bold;margin: 16px 0px;">{{activitiesInfo.title}}</view>
			<view class="text">发布时间：{{activitiesInfo.publish_time}}</view>
			<view class="text" v-html="activitiesInfo.describe"></view>
		</view>
		<view class="">
			<view class="comment-wrapper">
				<view style="flex: 1;">用户评价（{{activitiesInfo.evaluation_list.length}}）</view>
				<view style="margin-right: 20px;" @click="favorite">
					<image v-if="!activitiesInfo.is_thumbs_up" src="https://qingyuan.xingtongworld.com/addons/weliam_smartcity/data/img/appreciate-grey.png" mode=""></image>
					<image v-else src="https://qingyuan.xingtongworld.com/addons/weliam_smartcity/data/img/appreciate-red.png" mode=""></image>
					{{activitiesInfo.thumbs_up_count}}
				</view>
				<view class="leave" @click="tabLeave">
					写留言
					<image src="https://qingyuan.xingtongworld.com/addons/weliam_smartcity/data/img/fa-comment.png"></image>
				</view>
			</view>
			<view class="comment-item" v-for="(item, index) in activitiesInfo.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: 38px;font-size: 14px;margin: 5px auto 10px;">{{ item.content }}</view>
			</view>
		</view>
		<view class="btn-wrapper">
			<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="留言"></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,
				activitiesInfo: {
					evaluation_list:[],
				},
				page: 1,
				comment: '',
				showLeave: false,
			}
		},
		onLoad(e) {
			let _this = this;
			this.id = e.id;
			this.getDetail();
			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: {
			getDetail(){
				let _this = this;
				App._post_form('&p=student&do=campusActivitiesFind', {id:_this.id}, res => {
					if(_this.page===1){
						_this.setData({
							activitiesInfo: res.data.data
						})
					}else{
						// if(res.data.data.length>0){
						// 	let dataList = _this.dataList.concat(res.data.data);
						// 	_this.setData({
						// 		dataList
						// 	})
						// }
					}
				});
			},
			tabLeave(){
				this.showLeave=!this.showLeave;
			},
			addComment(){
				let _this = this,
				data = {
					mid: this.mid,
					caid: this.id,
					content: this.comment
				}
				App._post_form('&p=student&do=addEvaluation', data, res => {
					uni.showToast({
						title: res.message
					})
					_this.showLeave = false;
					_this.comment = '';
					_this.getDetail();
				})
			},
			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(res.message=='点赞成功'){
						++_this.activitiesInfo.thumbs_up_count;
					}else if(res.message=='已取消'){
						--_this.activitiesInfo.thumbs_up_count;
					}
				})
			}
		},
		onReachBottom(){
			// this.page++;
			// this.getList();
		}
	}
</script>

<style lang="scss">
.dis-flex{
	display: flex;
	align-items: center;
}
.content_wrapper{
	border-bottom: 1px solid #efefef;
	.text{
		font-size: 13px;
		color: #999;
		margin: 15px 0px 20px;
	}
	
	// image, img, .content-picture, .nfw-cms-img{
	// 	width: calc(100vw - 20px);
	// }
	rich-text{
		/deep/img{
			width: calc(100vw - 20px);//代码无效
		}
		.content-picture, .nfw-cms-img{
			width: calc(100vw - 20px);
		}
	}
}
.comment-wrapper{
	font-size: 18px;
	font-weight: bold;
	padding: 10px;
	color: #333;
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	.leave{
		padding: 0px 5px;
	}
	image{
		width: 20px;
		height: 20px;
		vertical-align: middle;
		margin: 0px 10rpx;
	}
}
.comment-item{
	padding: 10px 0px;
	border-bottom: 1px solid #efefef;
	.avatar2{
		width: 30px;
		height: 30px;
		background-color: #000;
		border-radius: 50%;
		margin-right: 8px;
	}
	.name{
		font-size: 13px;
		flex: 1;
	}
	.comment-num{
		padding: 2px 8px;
		border-radius: 20px;
		background-color: #efefef;
		margin-right: 8px;
		font-size: 13px;
	}
}
.btn-wrapper{
	width: 92vw;
	height: 40px;
	padding: 10px 4vw;
	position: fixed;
	bottom: 0px;
	left: 0;
	background: #FFF;
	border-top: 1px solid #efefef;
	.join-btn{
		width: 92vw;
		height: 40px;
		border-radius: 30px;
		color: #f00;
		border: 1px solid #f00;
		text-align: center;
		line-height: 40px;
		font-size: 16px;
	}
}
.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>
