<template>
	<view class="container">
		<view class="content">
			<view class="item" v-for="(item,index) in datalist" :key='index' @click="toDetail(item)">
			   <view class="left flex1">
			   	<view class="l_left" style="width: 80rpx;">
			   		<image :src="item.headimg" mode=""></image>
			   	</view>
				<view class="l_right" style="width: 500rpx;">
					<view class="p1">
						{{item.nickname}}
					</view>
					<view class="p2">
						<text>{{item.title}}</text>
						<text>{{item.create_time}}</text>
					</view>
					<view class="p3" style="word-break: break-all; word-wrap: break-word;" v-html='item.content'>
					</view>
					<view class="p4">
						<view class="left" @click.stop="commentClick(item)">
							<text class="iconfont icon-xiaoxi"></text>
							回复{{item.type ==1 || item.type ==2?'笔记':'视频' }}
						</view>
					<view class="right" @click.stop="zanFn(item)">
						<text v-if="!item.iszan" class="iconfont icon-aixin"></text>
						<text v-else style="color:red;" class="iconfont icon-aixin_shixin"></text>
											
					</view>
					</view>
				</view>
			   </view>
			   <view class="right"  style="width: 80rpx;">
			   	<image :src="item.coverimg" mode=""></image>
			   </view>
			</view>
		</view>
		<nomore v-if="nomore"></nomore>
		<nodata v-if="nodata"></nodata>
		<view class="plbox-show-mk" v-if="showcomment" @touchmove.stop.prevent="moveHandle">
			<view class="plbox"  :style="menuindex > -1 ? 'bottom:110rpx':''">
				<view class="plbox_title"><text class="plbox_title-t1">回复评论</text><text class="plbox_title-t2"></text></view>
				<image :src="event_rul + '/static/img/static/img/close.png'" class="plbox-close" @tap.stop="commentClick"/>
				<!-- <loading v-if="loading"></loading> -->
				<view style="height:160rpx"></view>
				<!-- <view class="plbox-replyshadow" v-if="hfid!=0" @tap.stop="replyshadowClick"></view> -->
				<view class="pinglun">
					<image @tap="toggleFaceBox" class="pinglun-faceicon" :src="event_rul + '/static/img/static/img/face-icon.png'"></image>
					<input @confirm="sendMessage" @focus="onInputFocus" @input="messageChange" class="pinglun-input" confirmHold="true" confirmType="send" cursorSpacing="20" type="text" :value="message" :placeholder="messageholder"/>
					<view class="pinglun-buybtn" @tap="sendcomment(item)"><text class="pinglun-buybtn-txt">发表</text></view>
				</view>
				<wxface v-if="faceshow" @selectface="selectface"></wxface>
			</view>	
		</view>
	</view>
</template>

<script>
	var app = getApp();
	export default{
		data(){
			return {
				item:'',
				loading:false,
				isload: false,
				nomore:false,
				nodata:false,
				pagenum: 1,
				datalist:[],
				showcomment:false,
				message:'',
				trimMessage:'',
				faceshow:false,
				
				event_rul: app.globalData.event_url,
			}
		},
		onLoad(){
			this.getList();
		},
		onReachBottom: function () {
		  if (!this.nodata && !this.nomore) {
		    this.pagenum = this.pagenum + 1;
			this.getList()
		  }
		},
		methods:{
			toDetail(item){
			let	url = '/activity/luntan/detail'
				if(item.type == 3 || item.type == 4){
					url = '/activity/shortvideo/detail'
				}
				uni.navigateTo({url:url+'?id='+item.ref_id})
				
			},
			
			messageChange: function (e) {
			  this.message = e.detail.value;
			  this.trimMessage = e.detail.value.trim();
			},
			zanFn(item){
				let url ='/ApiShortvideo/pzan'
				if(item.type == 1 ||item.type == 2  ){
					url = 'ApiLuntan/pzan'
				}
				app.post(url,{id:item.comment_id},(res)=>{
					
					if(item.type == 1 ||item.type == 2  ){
						item.iszan = res.type
						console.log(item)
							
					}else{
						item.iszan = res.type
					}
					
				})
			},
			// 发表评论
			sendcomment(){
				
				let message = this.message;
				app.showLoading('提交中');
				// console.log(;为什么)
			 let 	url = 'ApiShortvideo/subpinglun';
			 let data = {id:this.item.ref_id,hfid:this.item.comment_id,content:message,type:1}
				if(this.item.type == 1 || this.item.type == 2 ){
					url = 'ApiLuntan/subpinglun'
					data = {
						content:message,
						hfid:this.item.comment_id,
						userId:app.globalData.mid,
						id:this.item.ref_id,
						type:1
					}
				}
				app.post(url,data, res => {
					app.showLoading(false)
					if(res.msg == '发表评论成功') {
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
						this.message = '';
						this.showcomment = false;
						// this.followNoteList = []
						// this.followNotePages = 1
						// this.getFollowNote()
						// this.message = '';
						// this.hfid = 0;
						// this.messageholder = '发表评论';
						// this.faceshow = false;
						// this.showcomment = false
						// this.isData = true
						// uni.showToast({
						// 	title: '发表成功',
						// 	duration:2000
						// })
						
						// let id = '#city' + this.pinlunIdx
						// uni.pageScrollTo({
						// 	selector: id,
						//     duration: 300
						// }, 1000)
					}else {
						uni.showModal({
							title: '提示',
							content: res.msg,
							showCancel: false,
						});
					}
			
					// console.log(res,'gagallllfabbb6666-----' )
				})
			},
			commentClick:function(item){
				var that = this;
				// this.pinlunIdx = num
				if(item){
					that.item = item
				}
				this.showcomment = !this.showcomment;
				// if(this.showcomment){
					// this.getcommentlist();
				// }
			},
			selectface: function (face) {
			  this.message = "" + this.message + face;
					this.trimMessage = this.message.trim();
			},
			onInputFocus: function (e) {
			  this.faceshow = false
			},
			// 表情显示
			toggleFaceBox: function () {
			  this.faceshow = !this.faceshow
			},
			getList(){
				var that = this;
				var pagenum = that.pagenum;
					that.loading = true;
					that.nomore = false;
					that.nodata = false;
				app.post('ApiMy/commentList', {pagenum: pagenum}, function (res) {
						that.loading = false;
				  var data = res.datalist;
				  if (pagenum == 1) {
				    that.datalist = data;
				    if (data.length == 0) {
				      that.nodata = true;
				    }
				  }else{
				    if (data.length == 0) {
				      that.nomore = true;
				    } else {
				      var datalist = that.datalist;
				      var newdata = datalist.concat(data);
				      that.datalist = newdata;
				    }
				  }
						that.loaded();
				});
			},
		},
	}
</script>

<style lang="scss">
	.pinglun{width:750rpx;padding:0 20rpx;margin:0 auto;display:flex;flex-direction:row;align-items:center;position:absolute;bottom:0;left:0;right:0;height:100rpx;background:#fff;z-index:8;border-top:1px solid #f7f7f7}
	.pinglun-faceicon {	width:46rpx;height:46rpx;	margin-left: 10rpx;margin-right:18rpx}
	.pinglun-input{flex:1;color:#000;font-size:32rpx;padding:0;line-height:100rpx}
	.pinglun-buybtn{margin-left:0.08rpx;background:#FD4A46;height:60rpx;line-height:60rpx;padding:0 30rpx;border-radius:6rpx}
	.pinglun-buybtn-txt{color:#fff;font-size:28rpx;height:60rpx;line-height:60rpx;}
	
	.plbox{width:750rpx;height:rpx;padding:20rpx 20rpx;background:#fff;z-index:6;position:fixed;z-index: 33;left: 0;bottom: 0;}
	.plbox-show-mk {width: 100%; height: 100%;position: fixed;top: 0;left: 0;background-color: rgba(0, 0, 0, .4);z-index: 9999999;}
	.plbox-replyshadow{position:absolute;z-index:7;background:rgba(0,0,0,0.4);width:750rpx;flex:1;left:0;right:0;top:0;bottom:0;}
	.plbox-close{position:absolute;top:10rpx;right:10rpx;z-index:7;width:50rpx;height:50rpx;padding:10rpx;}
	.plbox_title{height:60rpx;line-height:60rpx;margin-bottom:20rpx;display:flex;flex-direction:row}
	.plbox_title-t1{font-size:28rpx;color:#000;font-weight:bold}
	.plbox_title-t2{font-size:28rpx;color:#000;font-weight:bold}
	.plbox_content{height:500rpx;overflow:scroll;display:flex;}
	.plbox_content-plcontent{display:flex;flex-direction:row;vertical-align: middle;color:#111}
	.plbox_content-plcontent-text{ color:#111;font-size:28rpx}
	.plbox_content-plcontent-image{ width:44rpx;height:44rpx;vertical-align: inherit;}
	.plbox_content-item{flex:1;margin-bottom:20rpx;display:flex;flex-direction:row}
	.plbox_content-item-f1{width:80rpx;}
	.plbox_content-item-f1-img{width:60rpx;height:60rpx;border-radius:50%}
	.plbox_content-item-f2{flex:1}
	.plbox_content-item-f2-t1{font-size:28rpx}
	.plbox_content-item-f2-t2{color:#000;margin:10rpx 0;line-height:60rpx;}
	.plbox_content-item-f2-t3{display:flex;flex-direction:row;flex:1}
	.plbox_content-item-f2-t3-x1{color:#999;font-size:26rpx;}
	.plbox_content-item-f2-t3-x2{flex:1;display:flex;flex-direction:row;}
	.plbox_content-item-f2-pzan{display:flex;flex-direction:row}
	.plbox_content-item-f2-pzan-img{width:32rpx;height:32rpx;margin-right:10rpx}
	.plbox_content-item-f2-pzan-txt{font-size:28rpx;color:#666}
	.plbox_content-item-f2-phuifu{margin-left:6px;color:#507DAF;font-size:26rpx}
	.plbox_content-relist{flex:1;background:#f5f5f5;padding:20rpx 20rpx 10rpx 20rpx;margin-bottom:20rpx}
	.plbox_content-relist-item2{font-size:24rpx;margin-bottom:10rpx}
	.plbox_content-relist-headimg{width:30rpx;height:30rpx;border-radius:15rpx;margin-right:8rpx}
	.plbox_content-relist-nickname{color:#333;font-size:24rpx}
	.plbox_content-relist-f2{margin-top:10rpx}
	.container{
		background-color: #fff;
		min-height: 100vj;
	}
   .content{
	   padding: 30rpx 40rpx;
	   .item{
		   display: flex;
		   justify-content: space-between;
		   margin-bottom: 20rpx;
		   
		   .left{
			   display: flex;
			   .l_left{
				   image{
					   width: 60rpx;
					   height: 60rpx;
					   border-radius: 60rpx;
					   border: 1px solid #ccc;
					   margin-right: 20rpx;
				   }
			   }
			   .l_right{
				   .p1{
					   font-weight: bold;
					   font-size: 28rpx;
					   margin-bottom: 10rpx;
				   }
				   .p2{
					   color: #666;
					   margin-bottom: 10rpx;
					   text{
						   margin-right: 20rpx;
						   font-size: 24rpx;
					   }
				   }
				   .p3{
					   margin-bottom: 10rpx;
				   }
				   .p4{
					   display: flex;
					   align-items: center;
					   margin-bottom: 20rpx;
					   .left{
						   display: flex;
						   align-items: center;
						   height: 40rpx;
						   border-radius: 40rpx;
						   background-color: #f2f2f4;
						   padding: 0 20rpx;
						   margin-right: 10rpx;
						   .iconfont{
							   margin-right: 6rpx;
							   font-size: 34rpx;
						   }
					   }
					   .right{
						   width: 40rpx;
						   height: 40rpx;
						   border-radius: 40rpx;
						   display: flex;
						   align-items: center;
						   justify-content: center;
						   background-color: #f2f2f4;
						   .iconfont{
							   // font-size: 2rpx;
						   }
					   }
					
				   }
			   }
		   }
		   .right{
			   image{
				   width: 80rpx;
				   height: 80rpx;
				   border-radius: 10rpx;
			   }
		   }
	   }
   }
</style>
