<style>
	.postDetails{
		width: 100%;
		height: 100vh;
		background: #FFF;
		font-family: aa;
	}
	.postDetails .details{
		padding: 15px;
		display: flex;
		flex-direction: column;
		
	}
	.postDetails .details-title{
		font-size: 18px;
		color: #111111;
		line-height: 25px;
		font-weight: bold;
	}
	.postDetails .details-info{
		width: 100%;
		height: 35px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 15px;
		
	}
	.postDetails .details-info-l{
		display: flex;
		align-items: center;
	}
	.postDetails .details-info-c{
		width: calc(100vw - 30px - 35px - 10px - 75px);
		height: 35px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 10px;
	}
	.postDetails .gstyle{
		position: absolute;right: 0;bottom: 0;
		width: 15px;
		height: 15px;
		
	}
	.postDetails .details-info-r{
		width: 70px;
		height: 25px;
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 13px;
		color: #FFF;
	}
	.postDetails .activitytime{
		width: 100%;
		height: 30px;
		border-radius: 2px;
		margin-top: 15px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #F0F0F0;
		font-size: 11px;
		color: #111111;
		padding:  0 15px;
	}
	.postDetails .content{
		font-size: 13px;
		color: #111111;
		line-height: 18px;
		margin-top: 15px;
	}
	.postDetails .imgs{
		width: 100%;
		height: auto;
		margin-top: 10px;
		border-radius: 15px;
	}
	.postDetails .esignup{
		width: 100%;
		height: 85px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-top: 1px solid #E2E2E2;
	}
	.postDetails .esignup-b{
		margin-top: 15px;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.postDetails .btn{
		width: 100%;
		height: 55px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		left: 0;
		bottom: 0;
		padding: 0 15px;
	}
	.postDetails .btn-l{
		width: calc(100vw - 30px - 90px - 25px);
		height: 35px;
		display: flex;
		align-items: center;
		background: #F5F5F5;
		font-size: 13px;
		color: #B2B2B2;
		border-radius: 17.5px;
		padding: 0 10px;
	}
	.postDetails .btn-r{
		width: 90px;
		height: 35px;
		border-radius: 17.5px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		color: #FFFFFF;
	}
	.postDetails .btn2{
		width: 100%;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		padding: 15px;
		position: fixed;
		left: 0;
		bottom: 0;
		background: #FFF;
		
	}
	.postDetails .btn2-l{
		display: flex;
		flex-direction: column;
		width: calc(100vw - 30px - 50px - 25px);
	}
	.postDetails .btn2-l-input{
		width: 100%;
		height: 60px;
		margin-top: 10px;
		padding: 5px;
		border-radius: 4px;
		background: #F5F5F5;
		
	}
	.postDetails .btn2-r{
		width: 50px;
		display: flex;
		flex-direction: column;
		align-items: center;
		
	}
	.postDetails .btn2-r-send{
		width: 45px;
		height: 24px;
		border-radius: 12px;
		font-size: 10px;
		color: #FFF;
		display: flex;align-items: center;
		justify-content: center;
		
		
	}
	.postDetails .pl-top{
		width: 100%;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 15px;
		
	}
	.postDetails .pl-top-name{
		width: calc(100vw - 30px - 30px - 10px - 50px);
		font-size: 13px;
		color: #111111;
		font-weight: 500;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin-left: 10px;
	}
	.postDetails .pl-content{
		
		margin-top: 5px;
		font-size: 12px;
		color: #222222;
	}
	.postDetails .twopl{
		
		margin-top: 15px;
		background: #F5F5F5;
		border-radius: 2px;
		padding:7px 10px;
		
	}
	.postDetails .pl-left{
		width: calc(100vw - 30px - 40px);
		margin-left: 40px;
	}
	.postDetails .pubox{
		width: 100%;
		height:calc(100vh * 0.95) ;
		
	}
	.postDetails .pubox-top{
		width: 100%;
		height: 45px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
		color: #111;
		padding:0 15px;
	}
	.postDetails .heng{
		width: 100%;
		height: 5px;
		background:#F5F5F5 ;
		margin-top: 5px;
	}
	.postDetails .twolist{
		padding: 15px;
		
	}
	.postDetails .comment{
		width: 100%;
		height: 55px;
		padding: 0 15px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		left: 0;
		bottom: 0;
		background: #FFF;
		
	}
	.postDetails .commentinput{
		width: calc(100vw - 120px);
		height: 30px;
		background: #F3FAF8;
		border-radius: 15px;
		font-size: 13px;
		padding: 0 10px;
	}
	.postDetails .comment-pl{
		width: 56px;
		height: 26px;
		font-size: 13px;
		color: #FFF;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 3px;
		
	}
</style>
<template>
	<view class="postDetails">
		<view
		  style="
		    height: calc(100vh - 50px);
		    width: calc(100vw);
		    overflow: hidden;
			
		  "
		>
		  <scroll-view
		    :scroll-y="true"
		    :enable-back-to-top="true"
		    :enable-flex="true"
		    @scrolltolower="lower"
			@scroll='inputscroll'
		    style="height: 100%;"
		  >
		    <view class="details">
				<view class="details-title">{{details.ActivityTitle}}</view>
				<view class="details-info">
					<view class="details-info-l">
						<view style="width: 35px;height: 35px;border-radius: 50%;position: relative;">
							<image :src="details.Photo" style="width: 100%;height: 100%;border-radius: 50%;"></image>
							<image class="gstyle" v-if="details.Sex==1" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nan-b.png" ></image>
							<image class="gstyle" v-if="details.Sex==2" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nv-b.png" ></image>
						</view>
						<view class="details-info-c">
							<view style="width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-size: 14px;color: #111111;font-weight: bold;">{{details.UserName}}</view>
							<view style='font-size: 11px;color: #858687;' v-if="details.CreateDate">
								{{details.CreateDate.split(' ')[0].split('-')[1]}}-{{details.CreateDate.split(' ')[0].split('-')[2]}}
							</view>
						</view>
					</view>
					<view class="details-info-r" :style="{background:mainColor}">
						{{details.IsFocus==true?'已关注':'关注'}}
					</view>
				</view>
				<view class="activitytime" v-if='details.IsOpenEnroll==1'>
					<text>活动截止时间：{{details.Deadline}}</text>
					<text>{{gettime()}}</text>
				</view>
				<view class="content">
					{{details.Content}}
				</view>
				<view style="width: 100%;" v-if="details.ImageList.length>0">
					<view v-for="(x, i) in details.ImageList" :key="i">
						<image :src="x" mode="widthFix" class="imgs" @click="previewImage(i,details.ImageList)"></image>
					</view>
				</view>
				<view class="esignup">
					<view v-if='Enrollcount==0' style="font-size: 12px;color: #111111;">暂无人报名</view>
					<view v-if='Enrollcount>0'>
						{{EnrollList[0].UserName}}等{{Enrollcount}}人已报名
					</view>
					<view class="esignup-b">
						<image :src="x.Photo" v-for="(x, i) in EnrollList" :key="i" style="width: 22px;height: 22px;border-radius: 50%;margin-right: 5px;"></image>
						<view style="padding: 0 5px;height: 22px;border-radius: 11px;font-size: 11px;color: #FFFFFF;display: flex;align-items: center;justify-content: center;">{{Enrollcount}}</view>
					</view>
				</view>
				<view style="font-size: 16px;color: #111111;display: flex;align-items: center;font-weight: bold;">
					<text>评论</text>
					<text style="margin-left: 15px;">({{details.ReplyNum}})</text>
				</view>
				
				<u-empty v-if="g.length == 0" text="暂无回复" mode="list"></u-empty>
				<view v-if="g.length > 0">
					<view v-for="(x, i) in g" :key="i" style="width: 100%;">
						<view class="pl-top">
						  <view style="display: flex;align-items: center;">
							  <view style="width: 30px;height: 30px;border-radius: 50%;position: relative;">
								<image :src="x.Photo" style="width: 100%;height: 100%;border-radius: 50%;"></image>
								<image class="gstyle" v-if="x.Sex==1" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nan-b.png" ></image>
								<image class="gstyle" v-if="x.Sex==2" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nv-b.png" ></image>
							  </view>
							  <view class="pl-top-name">{{x.UserName}}</view>
						  </view>
						  <view style='font-size: 11px;color: #858687;' v-if="x.CreateDate">
						  	{{x.CreateDate.split(' ')[0].split('-')[1]}}-{{x.CreateDate.split(' ')[0].split('-')[2]}}
						  </view>
						</view>
						<view class="pl-content pl-left" @click="replyone(x)">
							{{x.Content}}
						</view>
						<view class="pl-imgs pl-left" v-if="x.ImageList.length>0">
							<view v-for="(item, index) in x.ImageList" :key="index">
								<image :src="item" mode="widthFix" class="imgs" @click="previewImage(index,x.ImageList)"></image>
							</view>
						</view>
						<view class="pl-left twopl" v-if="x.ReplyList.length>0" @click="showtwo(x)">
							<view style="font-size: 11px;color: #333333;margin: 5px 0;" v-for="(item, index) in x.ReplyList" :key="index">
								<text :style="{color:mainColor}">{{item.ReplyUserName}}</text>：{{item.Content}}
							</view>
							<view v-if="x.ReplyList.length>3" style="font-size: 11px;color: #00C6C1;margin: 5px 0">
								查看全部
							</view>
						</view>
					</view>
				  
				</view>
		    </view>
		 
			<u-loadmore
				v-if="g.length > 0"
			  :status="status"
			  :load-text="loadText"
			  :font-size="24"
			  :margin-top="20"
			  :margin-bottom="20"
			  bg-color="#FFF"
			/>
			<view style="width: 100%;height: 50px;"></view>
		  </scroll-view>
		</view>
		<view class="btn" v-if="showreply==false">
			<view class="btn-l" @click="showreply=true">
				说点什么呗
			</view>
			<view class="btn-r" :style="{background:mainColor}">
				立即报名
			</view>
		</view>
		<view class="btn2" v-if="showreply==true">
			<view class="btn2-l">
				<view style="font-size: 11px;color: #B2B2B2;">
					回复{{ParentName}}
				</view>
				<view class="btn2-l-input">
					<textarea
					  style="height: 100px;width: 100%;"
					  placeholder="聊两句~"
					  v-model="sendMsg.Content"
					  maxlength='2000'
					  :focus='showreply'
					  confirm-type='send'
					  @blur='initialize()'
					/>
				</view>
			</view>
			<view class="btn2-r">
				<u-icon name="photo-o" :size="45" color="#737373" style='margin-bottom: 5px;' @click='getimgs()' v-if='sendMsg.ParentId==0'></u-icon>
				<view class="btn2-r-send" :style="{background:mainColor}" @click="setSend(1)">
					发表
				</view>
			</view>
		</view>
		<!-- 二级回复弹出 -->
		<u-popup v-model="twoshow" mode="bottom" border-radius="20">
			<view class="pubox" >
				<view class="pubox-top">
					<view></view>
					<text>回复</text>
					<u-icon name="cross" color="#555" size="40" @click='twoshow=false'></u-icon>
				</view>
				<view >
					<scroll-view scroll-y="true" style="height: calc(100vh * 0.95 - 115px);margin-bottom: 70px;"  @scrolltolower="lower2" @scroll='inputscroll2'>
						<view  style="padding:0 15px;">
							<view class="pl-top">
							  <view style="display: flex;align-items: center;">
								  <view style="width: 30px;height: 30px;border-radius: 50%;position: relative;">
									<image :src="twodata.Photo" style="width: 100%;height: 100%;border-radius: 50%;"></image>
									<image class="gstyle" v-if="twodata.Sex==1" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nan-b.png" ></image>
									<image class="gstyle" v-if="twodata.Sex==2" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nv-b.png" ></image>
								  </view>
								  <view class="pl-top-name">{{twodata.UserName}}</view>
							  </view>
							  <view style='font-size: 11px;color: #858687;' v-if="twodata.CreateDate">
							  	{{twodata.CreateDate.split(' ')[0].split('-')[1]}}-{{twodata.CreateDate.split(' ')[0].split('-')[2]}}
							  </view>
							</view>
							<view class="pl-content pl-left">
								{{twodata.Content}}
							</view>
							<view class="pl-imgs pl-left" v-if="twodata.ImageList.length>0">
								<view v-for="(item, index) in twodata.ImageList" :key="index">
									<image :src="item" mode="widthFix" class="imgs" @click="previewImage(index,twodata.ImageList)"></image>
								</view>
							</view>
						</view>
						
						<view class="heng"></view>
						<view class="twolist">
							<view>{{twocount}}条回复</view>
							<view v-for="(x, i) in g2" :key="i">
								<view class="pl-top">
								  <view style="display: flex;align-items: center;">
									  <view style="width: 30px;height: 30px;border-radius: 50%;position: relative;">
										<image :src="x.Photo" style="width: 100%;height: 100%;border-radius: 50%;"></image>
										<image class="gstyle" v-if="x.Sex==1" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nan-b.png" ></image>
										<image class="gstyle" v-if="x.Sex==2" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nv-b.png" ></image>
									  </view>
									  <view class="pl-top-name">{{x.UserName}}</view>
								  </view>
								  <view style='font-size: 11px;color: #858687;' v-if="x.CreateDate">
								  	{{x.CreateDate.split(' ')[0].split('-')[1]}}-{{x.CreateDate.split(' ')[0].split('-')[2]}}
								  </view>
								</view>
								<view class="pl-content pl-left" @click="replyone(x,2)">
									<text v-if="x.ReplyUserName!=''">回复 <text :style="{color:mainColor}">{{x.ReplyUserName}}</text>：</text>
									{{x.Content}}
								</view>
							</view>
						</view>
						
						
					</scroll-view>
				</view>
				<view class="comment"  >
					<input type="text" 
					v-model="sendMsg.Content" 
					:placeholder="ParentName!=''?'回复：'+ParentName:'聊两句~'"
					 class="commentinput"  
					 :focus='showreply2'
					 confirm-type='send'
					 
					  >
					<view class="comment-pl" :style="{background:mainColor}" @click.stop="setSend(2)">发表</view>
				</view>
				
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				pageTitle: "活动详情",
				mainColor: "",
				msg:{
					pageIndex:1,
					pageSize:20,
					ActivityId:0,
					Id:0,
				},
				twoshow:false,
				page_count: 1,
				g: [],
				loading: false,
				status: "loadmore",
				loadText: {
				  loadmore: "轻轻上拉，加载更多",
				  loading: "努力加载中",
				  nomore: "没有更多了",
				},
				g2:[],//二级的列表
				page_count2: 1,
				status2: "loadmore",
				loadText2: {
				  loadmore: "轻轻上拉，加载更多",
				  loading: "努力加载中",
				  nomore: "没有更多了",
				},
				msg2:{
					pageIndex:1,
					pageSize:20,
					ParentId:0,
				},
				details:{},//详情内容
				EnrollList:[],
				Enrollcount:0,
				showreply:false,
				showreply2:false,
				sendMsg:{
					ActivityId:0,//活动Id
					Content:'',
					ParentId:0,//上级评论 默认0
					ReplyUserId:0,//回复用户id
					ImageList:[],//图片列表
				},
				ParentName:'',
				twodata:{},//弹窗的数据
				twocount:0,
			}
		},
		created() {
			this.mainColor = this.$uiConfig.mainColor;
			uni.setNavigationBarTitle({
			  title: this.pageTitle,
			});
		},
		onLoad(options) {
			if(options && options.Id){
				this.msg.ActivityId = options.Id;
				this.sendMsg.ActivityId = options.Id;
				this.getActivityInfo()
			}
			let UserId = uni.getStorageSync('mall_UserInfo')?uni.getStorageSync('mall_UserInfo').UserId : 0;
			this.sendMsg.ReplyUserId = UserId
		},
		methods:{
			getActivityInfo(){
				this.request2(
					{
						url: '/api/AppletMiai/GetActivityInfo',
						data: {ActivityId:this.msg.ActivityId}
					},
					res => {
						this.details = res.data
						
						this.init()//评论列表
						this.GetActivityEnrollPageList()//获取招募贴报名列表
					}
				);
			},
			init(type=1){//为1的时候需要重新渲染列表 为2的时候在最前面添加一个
				this.request2(
					{
						url: '/api/AppletMiai/GetActivityDiscussPageList',
						data: this.msg
					},
					res => {
						
						if(res.resultCode==1){
							if(type==1){
								this.g = this.g.concat(res.data.pageData);
									 this.page_count = res.data.pageCount;
									 if (this.page_count == 1) {
									   this.status = "nomore";
								}
							}else{
								this.g.unshift(res.data.pageData[0])
							}
							
						}
					}
				);	
			},
			GetActivityEnrollPageList(){
				this.request2(
					{
						url: '/api/AppletMiai/GetActivityEnrollPageList',
						data: this.msg
					},
					res => {
						this.EnrollList = res.data.pageData;
						this.Enrollcount = res.data.count;
						
					}
				);
			},
			lower(e) {
			  if (this.msg.pageIndex < this.page_count) {
			    this.msg.pageIndex++;
				this.status = "loading";
			    this.init();
			  } else {
			    
				this.status = "nomore";
			  }
			},
			gettime(){//判断 活动是进行还是结束
				let text = '进行中';
				if((new Date()).getTime() >= (new Date(this.details.Deadline)).getTime()){
					text = 已结束
				}
				return text
			},
			//图片预览
			previewImage(index, images) {
				uni.previewImage({
					urls: images,
					current: index,
				});
			},
			inputscroll(){//页面滚动时的处理
				this.showreply = false
			},
			setSend(type=1){
				let Id = this.sendMsg.ParentId
				uni.showLoading({
					title:'发表中~'
				})
				this.request2(
					{
						url: '/api/AppletMiai/SgetActivityDiscussInfo',
						data: this.sendMsg
					},
					res => {
						uni.hideLoading()
						uni.showToast({
							title: '发表成功',
							icon: 'none',
						})
						if(type==1){
							if(Id == 0){//回复楼主时
								this.init(2)
							}else{//回复其他用户时 二级评论
								this.request2(
									{
										url: '/api/AppletMiai/GetActivityDiscussPageList',
										data: {pageIndex:1,pageSize:20,ActivityId:this.sendMsg.ActivityId,Id:Id}
									},
									res => {
										if(res.resultCode==1){
											for(let i =0;i<this.g.length;i++){
												if(this.g[i].Id == res.data.pageData[0].Id){
													this.g[i] = res.data.pageData[0]
													this.$forceUpdate()
													return
												}
											}
										}
									}
								);	
							}
						}else{
							 this.init2();
							 this.initialize();
							 this.sendMsg.ParentId = this.twodata.Id
							 this.ParentName='';
							 this.sendMsg.Content = ''
						}
						
						this.initialize()
					}
				);
			},
			getimgs(){
				let sendMsg =  encodeURIComponent(JSON.stringify(this.sendMsg))
				uni.navigateTo({
					url: '/pages/blindDate/sendimg?sendMsg=' +  sendMsg
				})
			},
			Children(){
				this.initialize()
				this.msg.pageIndex=1
				this.init(2)
				this.request2(
					{
						url: '/api/AppletMiai/GetActivityInfo',
						data: {ActivityId:this.msg.ActivityId}
					},
					res => {
						this.details = res.data
					}
				);
				
			},
			initialize(type=1){//初始值发送的内容
				this.sendMsg.Content ='';
				this.sendMsg.ParentId =0;
				this.sendMsg.ImageList =[];
				this.ParentName='';
				this.showreply = false
				this.showreply2 = false
			},
			replyone(x,type=1){
				this.sendMsg.ParentId =  x.Id;
				this.ParentName = x.UserName;

				if(type==1){
					this.showreply = true
				}
				if(type==2){
					this.showreply2 = true
				}
			},
			lower2(){
				if (this.msg2.pageIndex < this.page_count2) {
				  this.msg2.pageIndex++;
				  this.status2 = "loading";
				  this.init2();
				} else {
				  
					this.status2 = "nomore";
				}
			},
			showtwo(x){//显示二级弹窗
				this.twodata = x;
				this.twoshow = true;
				this.msg2.ParentId = x.Id
				this.sendMsg.ParentId = x.Id
				this.init2()
			},
			inputscroll2(){//二级回复时
				this.sendMsg.ParentId = this.twodata.Id;
				this.sendMsg.Content = ''
				this.ParentName='';
			},
			init2(){
				this.request2(
					{
						url: '/api/AppletMiai/GetActivityReplyPageList',
						data: this.msg2
					},
					res => {
						
						if(res.resultCode==1){
							this.g2 = this.g2.concat(res.data.pageData);
							 this.page_count2 = res.data.pageCount;
							 this.twocount = res.data.count
							 if (this.page_count2 == 1) {
							   this.status2 = "nomore";
							}
						}
					}
				);	
				
			}
			
		}
	}
</script>


