<template>
	<view>
		<view class="">
			<pic-text :info="detailinfo" :isDetail="true" :index="-1" :stopVideo="stopVideo" @addComment="changeCommentNum" :currentPlay="currentPlay" @changePlay="changePlay()"></pic-text>
		</view>
		<view class="">
			<view style="font-size: 18px;font-weight: bold;padding: 10px;color: #333;">评论</view>
			<view style="padding: 0px 10px;color: #333;">
				<view class="comment-item" v-for="(item, index) in commentList" :key="index">
					<view class="dis-flex">
						<image class="avatar2" :src="item.avatar" mode="" @click="toHomePage(item.mid)"></image>
						<view class="name">{{ item.nickname }}</view>
						<view style="font-size: 12px;margin-right: 20upx;" @click="like(item)">
							<text v-show="!item.is_fabulous" class="iconfont icon-like" style="font-size: 30upx;padding-right: 8upx;"></text>
							<text v-show="item.is_fabulous" class="iconfont icon-likefill" style="font-size: 30upx;padding-right: 8upx;color: #f00;"></text>
							<text v-if="item.likenum>0">{{item.likenum}}</text>
						</view>
						<view style="margin-right: 20upx;" v-if="myMid == item.mid" @click="editCommentShow(item,index)">
							<text class="iconfont icon-bianji" style="font-size: 30upx;padding-right: 8upx;"></text>
						</view>
						<view style="margin-right: 20upx;" v-if="myMid == item.mid" @click="deleteComt(item,index)">
							<text class="iconfont icon-delete" style="font-size: 30upx;padding-right: 8upx;"></text>
						</view>
					</view>
					<view style="padding-left: 38px;font-size: 14px;margin: 5px auto 10px;" @click="replyShow(item.id, item.mid, item.list, item.nickname)">{{ item.content }}</view>
					<view class="dis-flex" style="padding-left: 38px;">
						<view class="comment-num" @click="showReply()">{{ item.list.length }}条回复</view>
						<view style="color: #999999;font-size: 12px;">{{ item.createtime }}</view>
					</view>
					<view class="" v-show="item.list.length>0" style="padding-left: 38px;">
						<view v-for="(items,indexs) in item.list" :key="indexs" class="dis-flex" style="padding: 4px 0px;" @click="replyShow(item.id, items.smid, item.list, items.reply_name)">
							<view style="flex: 1;">
								<span class="name" style="color: #4280c5;">{{ items.reply_name }}</span>
								<span style="font-size: 13px;margin: 0px 2px;">回复</span>
								<span class="name" style="color: #4280c5;">{{ items.name }}</span>
								<span style="font-size: 13px;">:</span>
								<span style="font-size: 13px;margin: 0px 2px;white-space: pre-wrap;word-break: break-all;">{{ items.content }}</span>
							</view>
							<view>
								<text class="iconfont icon-bianji" v-if="myMid == items.smid" style="color: #80A9D6;font-size: 30upx;padding-right: 20upx;" @click.stop="xghuPopShow(items,index,indexs)"></text>
								<text class="iconfont icon-delete" v-if="myMid == items.smid" style="color: #ff4444;font-size: 30upx;" @click.stop="deletehcomnt(items,index,indexs)"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="text-align: center;font-size: 14px;padding: 20px;" @click="showMoreComment">
				<text style="color: #f00;" v-if="!commentText">查看更多评论</text>
				<text v-else>{{commentText}}</text>
			</view>
		</view>
		<view class="">
			<view style="font-size: 18px;font-weight: bold;padding: 10px;color: #333;">热门推荐</view>
			<view style="padding: 0px 10px;">
				<block v-for="(item, index) in communityList" :key="index">
					<view @click="toDetails(item.id)" style="border-bottom: 1px solid #efefef;">
						<pic-text :info="item" :index="index" :stopVideo="stopVideo" :currentPlay="currentPlay" @changePlay="changePlay()"></pic-text>
					</view>
				</block>
			</view>
		</view>
		<!-- 评论弹窗 -->
		<view style="width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index:9;
		background-color: rgba(0,0,0,.3);" v-if="rpShow" @click.stop="rpShow=false"></view>
		<view class="reply-wrapper" v-if="rpShow">
			<textarea @click.stop class="my-text" v-model="rpText" name="" id="" cols="30" rows="10" placeholder="回复"></textarea>
			<button type="primary" style="margin: 20rpx 80rpx;border-radius: 50px;" @click.stop="reply">发送</button>
		</view>
	</view>
</template>

<script>
// 这个页面参考 'pages/subPages/postDetails/postDetails?id='
import App from '@/common/js/app.js';

import picText from "@/components/template/pic_text/pic_text.vue"
export default {
	data() {
		return {
			detailinfo: {},
			id: null,//帖子id
			commentList: [],
			commentPage: 1,
			page_index: 10,
			forwardTotal: 0,
			commentTotal: null,
			appreciateTotal: 0,
			commentText: null,//文字“查看更多评论”
			communityList: [],//热门推荐
			page_index: 10,
			indexShow: -1,
			rpText: '',//回复。修改回复。修改评论弹出框
			rpShow: false,
			myMid: null,
			items: [],
			commentItem: {},//编辑评论时的信息
			popType: "",//edReply编辑回复，edCom编辑评论
			CommentNum: 1, //1增加评论，2删除评论
			stopVideo: 0,
			scrollLock: false,
			scrollTimer: null,
			currentPlay: -2,//当前正在播放的视频在列表中的索引,-2表示没有正在播放，-1是帖子详情的视频
		}
	},
	components:{
		picText
	},
	onLoad(e) {
		let _this = this;
		_this.id = e.id;
		uni.setStorageSync('DetailsId',_this.id);
		_this.poster = uni.getStorageSync('platformInfor').videoimg;
		_this.myMid = uni.getStorageSync('userinfo').mid;
		_this.examine = e.examine || 0;
		uni.getStorage({
			key: 'location',
			success: function(res) {
				_this.lat = res.data.latitude;
				_this.lng = res.data.longitude;
			}
		});
		
		this.commentList = [];
		this.init(this.id);
		this.getHotList();
	},
	onShow() {
	},
	methods: {
		init(id){
			let _this = this,
				client = App.getClientType();
			_this.getCommentList(id);
			let curLoction = uni.getStorageSync('curLoction'),
				// 手动选择位置信息
				agencyData = uni.getStorageSync('agencyData');
			if (client === "1" || client === "3") {
				if (!!curLoction) {
					if (!!agencyData) {
						_this.getDetailinfo(id, curLoction)
					} else {
						App.getAreaId(curLoction, "", "", (options) => {
							console.log(options,'post1');
							_this.getDetailinfo(id, curLoction)
						})
					}
				} else {
					if (!!agencyData) {
						_this.getDetailinfo(id, _this.currentLoction)
					} else {
						App.getLocation().then(res => {
							App.getAreaId(res, "", "", (options) => {
								_this.$nextTick(function() {
									_this.getDetailinfo(id, res)
								})
							});
							_this.setData({
								currentLoction: res
							});
							uni.setStorageSync('curLoction', res);
						})
					}
				}
			} else {
				_this.getDetailinfo(id)
			}
		},
		getCommentList(id){
			let _this = this;
			let data = {
				id: _this.id || id,
				page: _this.commentPage,
				page_index: _this.page_index
			};
			App._post_form('&p=pocket&do=commentList', data, res => {
				_this.commentList = [..._this.commentList, ...res.data.list];
				_this.commentTotal = res.data.total;
				if (_this.commentPage == res.data.total || res.data.list.length < 2) {
					_this.commentText = '已无更多数据';
				}else{
					_this.commentText = null;
				}
			});
		},
		showMoreComment(){
			let _this = this;
			if (!_this.commentText) {
				if (_this.page_index == 2) {
					_this.page_index = 10;
					let data = {
						id: _this.id,
						page: _this.commentPage,
						page_index: _this.page_index
					};
					App._post_form('&p=pocket&do=commentList', data, res => {
						_this.commentList = res.data.list;
						_this.commentTotal = res.data.total;
						if (_this.commentPage == res.data.total) {
							_this.commentText = '已无更多数据';
						}
					});
				} else {
					_this.commentPage++;
					_this.page_index = 10;
					_this.getCommentList();
				}
			}
		},
		// 获取帖子详细信息
		getDetailinfo(id = "", location = "") {
			let _this = this;
			let data = {
				id: _this.id || id,
				lat: !!location ? location.latitude : "",
				lng: !!location ? location.longitude : "",
				examine: _this.examine
			};
			App._post_form(
				'&p=pocket&do=detail',
				data,
				res => {
					let newData = {...res.data}
					newData.comment_list = {total:newData.comment_total};//传给组件需要
					newData.id = _this.id;//传给组件需要
					_this.setData({
						detailinfo: newData,
					})
				},
				fail => {
					if (fail.message == '掌上信息已关闭') {
						App.navigationTo({
							url: 'pages/mainPages/index/index'
						});
					}
				}
			);
		},
		getHotList(page = 1, isPage = false){
			let _this = this;
			let data = {
				id: 0,//0对应掌上生活的全部类目
				two_id: undefined,
				page,
				page_index: _this.page_index,
				homeflag: 1,
				keyword:'',
			};
			
			App._post_form('&p=pocket&do=infoList', data, res => {
				console.log(res, '--------------')
				let list = [];
				if (!isPage) {
					if (res.data.list.length > 0) {
						list = res.data.list;
						list = list.sort(function(){// 乱序一下
							return Math.random() - 0.5;
						});
						_this.setData({
							communityList: list
						})
					} else {
						
					}
				} else {
					
				};
			});
		},
		lookimg(){},
		operationShow(e) {},
		getover(id,bor){},
		changeCommentNum(data){
			if(this.CommentNum === 1){
				this.commentList.unshift(data);
				let newData = {...this.detailinfo}
				newData.comment_list.total++;//传给组件需要
				this.setData({
					detailinfo: newData,
				})
			}else{
				let newData = {...this.detailinfo}
				newData.comment_list.total--;//传给组件需要
				this.setData({
					detailinfo: newData,
				})
				this.CommentNum = 1;
			}
		},
		// 打开编辑评论弹框
		editCommentShow(item,index){
			let _this = this;
			_this.commentItem = item;
			_this.commentItem.index = index;
			_this.rpText = item.content;
			_this.rpShow = true;
			_this.popType = 'edCom';
		},
		// 修改评论
		changeComment(){
			let _this = this;
			if(_this.rpText == _this.commentItem.content){
				uni.showToast({
					icon:'none',
					title:'请先进行修改'
				});
				return
			}
			let datas = {
				id:_this.commentItem.id,
				type:1,
				text:_this.rpText
			}
			App._post_form('&p=pocket&do=changeComment', datas, res =>{
				uni.showToast({
					title: '修改成功'
				})
				_this.commentList.map((item,index)=>{
					if(index == _this.commentItem.index){
						item.content = _this.rpText
					}
				});
				_this.rpText = '';
				_this.rpShow = false;
				_this.commentItem = {};
			})
		},
		/** 删除评论
		 * @param {Object} item
		 * @param {Object} index
		 */
		deleteComt(item,index){
			let _this = this;
			let datas = {
				id:item.id,
				type:0
			}
			App.showError(
				`确认删除此条评论?`,
				data => {
					if (data.confirm) {
						App._post_form('&p=pocket&do=changeComment', datas, res => {
							// _this.plShow = false;
							App.showSuccess('删除成功', () => {
								_this.commentList.map((items,indexs)=>{
									if(index == indexs){
										_this.commentList.splice(indexs,1);
									}
								});
								_this.CommentNum = 2;
								_this.changeCommentNum();
							})
						},fail=>{
						});
					}
				},
				true
			);
		},
		// 打开回复弹窗
		replyShow(cid, amid, items, name) {
			let _this = this;
			_this.rpShow = true;
			_this.cid = cid;//主评论id
			_this.amid = amid;//任意被回复用户的id
			_this.items = items;//主评论的回复列表
			_this.name = name;//任意被回复用户的name
			console.info(_this.items);
		},
		// 发送回复、编辑回复、编辑评论
		reply(){
			if(this.commentItem.content){// 编辑
				if(this.popType=='edReply'){
					this.changeReply();
					return;
				}else if(this.popType=='edCom'){
					this.changeComment();
					return;
				}
			}
			let _this = this;
			let data = {
				id: _this.id,//帖子id
				cid: _this.cid,//主评论id
				amid: _this.amid,//任意被回复用户的id
				text: _this.rpText
			};
			App._post_form('&p=pocket&do=reply', data, res => {
				_this.rpShow = false;
				// _this.isComment = false;
				let arr = {
					content: _this.rpText,
					reply_name: uni.getStorageSync('userinfo').nickname,
					name: _this.name,//任意被回复用户的name
					smid:_this.myMid,//写回复用户的id
					id:res.data
				};
				console.info(_this.items);
				_this.items.push(arr);
				_this.rpText = '';
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
			});
		},
		/** 打开编辑回复弹窗
		 * @param {Object} data 回复的信息
		 * @param {Object} index 主评论的索引
		 * @param {Object} indexs 回复信息的索引
		 */
		xghuPopShow(data,index,indexs){
			let _this = this;
			_this.commentItem = data;
			_this.commentItem.index = index;
			_this.commentItem.indexs = indexs;
			_this.rpText = data.content;
			_this.rpShow = true;
			console.log(this.commentItem);
			_this.popType = 'edReply';
		},
		/** 修改回复
		 * @param {Object} type
		 */
		changeReply(type){
			let _this = this,
			data = {
				id: _this.commentItem.id,
				type: 1,
				text: _this.rpText
			};
			App._post_form('&p=pocket&do=changeReply', data, res => {
				_this.rpShow = false;
				uni.showToast({
					title:'修改成功'
				});
				_this.commentList.map((item,index)=>{
					if(index == _this.commentItem.index){
						item.list.map((items,indexs)=>{
							if(indexs == _this.commentItem.indexs){
								items.content = _this.rpText;
							}
						})
					}
				})
				_this.rpText = '';
				_this.commentItem = {};
			});
		},
		/** 删除回复
		 * @param {Object} item
		 * @param {Object} index
		 * @param {Object} indexs
		 */
		deletehcomnt(item,index,indexs){
			let _this = this;
			let datas = {
				id:item.id,
				type:0
			}
			App.showError(
				`确认删除此条评论?`,
				data => {
					if (data.confirm) {
						App._post_form('&p=pocket&do=changeReply', datas, res => {
							// _this.plShow = false;
							App.showSuccess('删除成功', () => {
								_this.commentList.map((items,i)=>{
									if(index == i){
										items.list.map((itemss,indexss)=>{
											if(indexss == indexs){
												_this.commentList[i].list.splice(indexs,1);
											}
										})
										
									}
								})
							})
						},fail=>{
							// _this.isComment = false;
						});
					}
				},
				true
			);
		},
		like(item){
			App._post_form('&p=pocket&do=fabulousReply', {id: item.id}, res => {
				if(item.is_fabulous){
					uni.showToast({
						title: '取消成功',
						icon:'none'
					})
					item.likenum--;
					item.is_fabulous = false;
				}else{
					uni.showToast({
						title: '点赞成功',
						icon:'none'
					})
					item.likenum++;
					item.is_fabulous = true;
				}
			})
		},
		// 跳转正文详情
		toDetails(id){
			uni.navigateTo({
				url:"/pagesA/pictureTextDetails/pictureTextDetails?id=" + id
			})
		},
		toHomePage(mid){
			App.navigationTo({
				url: 'pages/subPages/homepage/homepage/homepage?mid=' + mid + '&checkType=' + 1
			});
		},
		handlerScroll(){
			if(this.scrollLock){
				clearTimeout(this.scrollTimer);
			}
			this.scrollTimer = setTimeout(()=>{
				this.scrollLock = false;
				this.stopVideo++;
			}, 500)
		},
		changePlay(e){
			this.stopVideo++;//先关闭上一个播放的按钮，再改变当前播放索引=最新播放视频索引
			this.currentPlay = e;
		}
	},
	onShareAppMessage(res){
		let _this = this;
		if (res.from === 'button') {// 来自页面内分享按钮
			let listId = res.target.id;
			let title = res.target.dataset.title;
			App._post_form('&p=pocket&do=shareNum', { id: listId }, res => {
				if(listId == _this.id){
					_this.detailinfo.share++;
				}else{
					for(let index=0;index<_this.communityList.length;index++){
						if(_this.communityList[index].id == listId){
							_this.communityList[index].share++;
						}
					}
				}
				setTimeout(()=>{
					uni.showToast({
						icon: 'none',
						title: '分享成功',
						duration: 2000
					});
				}, 2000)
			});
			return {
				title: '粤职才',
				path: '/pagesA/pictureTextDetails/pictureTextDetails?id='+listId
			}
		}else{
			return {
				title: '粤职才',
				path: '/pages/mainPages/index/index'
			}
		}
	},
	onPageScroll(){
		//页面滚动，视频暂停
		this.scrollLock = true;
		this.handlerScroll();
	},
}
</script>

<style lang="scss">
.dis-flex{
	display: flex;
	align-items: center;
}
.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;
	}
}
.reply-wrapper{
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 9;
	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>
