<template>
	<view>
		<loadlogo v-if="!loadlogo" />
		<block v-if="detailInfo.id">
			<personnal-item :dynamicInfo="detailInfo" @comment="comment" :isDetail="true"></personnal-item>
		</block>
		<!-- 间隔 -->
		<view class="interval"></view>
		<!-- 评论内容 -->
		<view class="content">
			<view class="header">
				<view class="left-info">
					<view class="title">评论</view>
					<view class="num">{{commentNum}}条</view>
				</view>
				<!-- <view class="right-info">
					<view class="hot" :class="{'select' : contentType == 'hot'}" @click="contentType = 'hot'">热门</view>
					<view>/</view>
					<view class="new" :class="{'select' : contentType == 'new'}" @click="contentType = 'new'">最新</view>
				</view> -->
			</view>
			<!-- 单条内容 -->
			<view class="comment-item" v-for="(item,index) in commentList" :key="item.id">
				<view class="user-info">
					<view class="avatar">
						<image :src="item.avatar" mode=""></image>
						<view v-if="item.gneder == 2" class="sex woman">
							<view class="iconfont icon-female"></view>
						</view>
						<view v-else class="sex man">
							<view class="iconfont icon-male"></view>
						</view>
					</view>
					<view class="else-info">
						<view class="name">{{item.nickname}}</view>
						<view class="date">{{item.create_time}}</view>
					</view>
				</view>
				<view class="comment-detail">
					<!-- 评论的内容 -->
					<view class="text"><span v-if="item.reply_id > 0" style="color: #0084FF">@{{item.reply_name}}</span> {{item.content}}</view>
					<view class="line"></view>
					<!-- 评论的评论 -->
					<block v-if="item.list.length">
						<view class="comment-info">
							<view class="info-item" v-for="comment in item.visibilityList" :key="comment.id">
								<view class="name">{{comment.nickname}}：</view>
								<view class="value">{{comment.content}}</view>
							</view>
						</view>
					</block>
					<!-- 点赞评论数量 -->
					<view class="join-info">
						<view class="praise-box">
							<view @click="handleCommentFabulousClick(item.id,index)">
								<image class="praise" v-if="!item.is_fabulous" :src="imgfixUrls + 'dating/bd_praise.svg'" mode=""></image>
								<image class="praise" v-else :src="imgfixUrls + 'dating/bd_light_praise.svg'" mode=""></image>
							</view>
							<view class="num">{{item.fabulous}}</view>
						</view>
						<view class="comment-box" style="margin-left: 50rpx;" @click="reply(item)">
							<image :src="imgfixUrls + 'dating/bd_message1.svg'" mode=""></image>
							<view class="num">{{item.list.length}}</view>
						</view>
					</view>
					<block v-if="item.is_show_btn">
						<view v-if="!item.is_open" class="open-btn" @click="handleOpenClick(item,'open')">展开</view>
						<view v-else class="open-btn" @click="handleOpenClick(item,'close')">收起</view>
					</block>
				</view>
				<view class="interval" style="margin-top: 30rpx;"></view>
			</view>
		</view>
		<!-- 评论 -->
		<view class="footer">
			<input type="text" :focus="is_focus" @blur="is_focus = false" v-model="commentContent" :placeholder="placeholder" placeholder-style="font-size: 28rpx" />
			<view class="submit-btn" @click="submitComment">发布</view>
		</view>
		<!-- 返回按钮 -->
		<view class="back-btn" @click="goindex">返回</view>
	</view>
</template>

<script>
	import App from '@/common/js/app.js';
	import Loadlogo from '@/components/template/loadlogo.vue';
	import personnalItem from '../template/personalItem.vue'
	export default {
		data() {
			return {
				loadlogo: false,
				detailInfo: {},  //动态信息
				lng: '',
				lat: '',
				dynamic_id: 0,  //动态id
				reply_id: 0,  //回复动态的id
				currentPage: 1, //当前页
				totalPage: 1,  //总页数
				commentContent: '',  //评论内容
				commentList: [],  //评论列表
				commentNum: 0,  //评论数量
				is_focus: false,  //评论输入框是否聚焦
				placeholder: '请输入评论...',  //评论输入框的placeholder
				
				
			}
		},
		onLoad(e) {
			let _this = this
			_this.dynamic_id = e.id
			uni.getLocation({
			    type: 'wgs84',
			    success(res) {
					_this.lng = res.longitude
					_this.lat = res.latitude
			    }
			})
			_this.getDynamicDetailInfo(e.id)
			_this.getDynamicComment()
		},
		components: {
			personnalItem,
			Loadlogo
		},
		methods: {
			// 获取动态详情
			getDynamicDetailInfo(id) {
				let _this = this
				App._post_form(
					`&p=dating&do=dynamicDesc`,
					{
						id: id,
						lng: _this.lng,
						lat: _this.lat,
					},
					res => {
						_this.detailInfo = res.data || {}
					},
					false,
					() => {
					}
				);
			},
		
			// 获取动态评论
			getDynamicComment() {
				let _this = this
				App._post_form(
					`&p=dating&do=dynamicComment`,
					{
						dynamic_id: _this.dynamic_id,
						page: _this.currentPage,
						page_index: 10
					},
					res => {
						let list = res.data.list.map(item => {
							item.is_show_btn = item.list.length > 3  //是否显示展开按钮  评论大于三条显示
							item.is_open = false  //是否展开
							item.visibilityList = item.list.slice(0,3)  //默认未展开时显示前3条评论
							return item
						})
						_this.commentList = [..._this.commentList,...list]
						_this.totalPage = res.data.total
						_this.commentNum = res.data.list.length
						_this.currentPage ++
						_this.loadlogo = true
					},
					false,
					() => {
					}
				);
			},
		
			// 评论点赞
			handleCommentFabulousClick(id,index) {
				let _this = this
				App._post_form(
					`&p=dating&do=commentFabulous`,
					{
						id: id
					},
					res => {
						if(res.errno == 0) {
							if(_this.commentList[index].is_fabulous) {
								_this.commentList[index].fabulous --
							}else {
								_this.commentList[index].fabulous ++
							}
							_this.commentList[index].is_fabulous = !_this.commentList[index].is_fabulous
						}
					},
					false,
					() => {
					}
				);
			},
		
			// 回复评论
			reply(item) {
				this.placeholder = `回复${item.nickname}：`
				this.is_focus = true
				this.reply_id = item.id
				console.log(this.reply_id,'reply_id')
			},
			
			// 评论动态
			comment() {
				this.placeholder = '请输入评论...'
				this.is_focus = true
				this.reply_id = 0
			},
		
			// 展开和收起评论
			handleOpenClick(item,type) {
				item.is_open = !item.is_open
				item.visibilityList = type === 'open' ? item.list : item.list.slice(0,3)
			},
		
			//发布评论内容
			submitComment() {
				let _this = this
				console.log(_this.reply_id,'reply_id111')
				// 评论动态
				App._post_form(
					`&p=dating&do=addComment`,
					{
						dynamic_id: _this.dynamic_id,
						content: _this.commentContent,
						reply_id: _this.reply_id
					},
					res => {
						_this.currentPage = 1
						_this.commentList = []
						_this.getDynamicComment(_this.dynamic_id)
						_this.commentContent = ''
						if(res.errno == 0) {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					},
					false,
					() => {
					}
				);
			},
		
			goindex(){
				let pages = getCurrentPages();
				console.log(pages);
				if(pages.length == 1){
					App.navigationTo({
						url: "pages/subPages2/blindDate/personal"
					})
				}else{
					uni.navigateBack({
						delta:1
					})
				}
			},
		
		},
		onReachBottom() {
			if(this.currentPage <= this.totalPage) {
				this.getDynamicComment()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.interval {
		width: 690rpx;
		height: 8rpx;
		margin: auto;
		background-color: #F8F8F8;
	}

	.content {
		width: 690rpx;
		margin: 30rpx auto 130rpx;
		.header {
			width: 100%;
			height: 50rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left-info {
				height: 100%;
				display: flex;
				align-items: flex-end;
				.title {
					height: 100%;
					line-height: 50rpx;
					font-size: 36rpx;
					font-weight: bold;
					color: #333;
					margin-right: 10rpx;
				}
				.num {
					height: 36rpx;
					line-height: 36rpx;
					color: #999;
					font-size: 24rpx;
				}
			}
			.right-info {
				height: 40rpx;
				color: #999;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				.hot {
					margin-right: 10rpx;
				}
				.new {
					margin-left: 10rpx;
				}
				.select {
					font-weight: bold;
					color: #333;
				}
			}
		}
		.comment-item {
			width: 690rpx;
			height: auto;
			margin: auto;
			padding-top: 30rpx;
			.user-info {
				width: 100%;
				height: 90rpx;
				display: flex;
				align-items: center;
				.avatar {
					width: 90rpx;
					height: 90rpx;
					border-radius: 45rpx;
					position: relative;
					image {
						width: 90rpx;
						height: 90rpx;
						border-radius: 45rpx;
					}
					.sex {
						width: 30rpx;
						height: 30rpx;
						border-radius: 15rpx;
						position: absolute;
						right: 0;
						bottom: 0;
						color: #fff;
						line-height: 30rpx;
						text-align: center;
						.iconfont {
							font-size: 24rpx;
						}
					}
					.woman {
						transform: rotate(45deg);
						background-color: #FE83AF;
					}
					.man {
						background-color: #0084FF;
					}
				}
				.else-info {
					height: 100%;
					margin-left: 20rpx;
					.name {
						height: 40rpx;
						line-height: 40rpx;
						margin-top: 4rpx;
						font-size: 28rpx;
						font-weight: bold;
						color: #333;
					}
					.date {
						height: 32rpx;
						line-height: 32rpx;
						margin-top: 10rpx;
						font-size: 24rpx;
						color: #999;
					}
				}
			}	
			.comment-detail {
				width: 580rpx;
				height: 40rpx;
				line-height: 40rpx;
				height: auto;
				margin: 0 0 0 110rpx;
				.text {
					width: 100%;
					height: auto;
					line-height: 40rpx;
					font-size: 28rpx;
					color: #333;
					padding: 40rpx 0;
				}
				.join-info {
					width: 100%;
					height: 34rpx;
					display: flex;
					align-items: center;
					margin-top: 30rpx;
					.praise-box,.comment-box {
						display: flex;
						align-items: flex-end;
						color: #333;
						font-size: 28rpx;
						image {
							width: 34rpx;
							height: 34rpx;
						}
						.num {
							margin-left: 10rpx;
						}
					}
				}
				.line {
					width: 100%;
					height: 2rpx;
					background-color: #EEEEEE;
				}
				.comment-info {
					width: 100%;
					// max-height: 170rpx;
					height: auto;
					padding-top: 10rpx;
					overflow: hidden;
					.info-item {
						width: 100%;
						height: auto;
						line-height: 34rpx;
						display: flex;
						font-size: 24rpx;
						color: #333;
						margin-top: 10rpx;
						.name {
							font-weight: bold;
						}
					}
				}
				.open-btn {
					font-size: 28rpx;
					color: #333;
					font-weight: bold;
					margin-top: 20rpx;
					display: flex;
					justify-content: flex-end;
				}
			}
		}
	}

	// 展开样式
	.open {
		max-height: 999999999rpx !important;
	}
	
	.footer {
		width: 690rpx;
		height: 70rpx;
		padding: 15rpx 30rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: 1rpx solid #EEEEEE;
		position: fixed;
		left: 0;
		bottom: 0;
		font-size: 28rpx;
		input {
			width: 570rpx;
			height: 40rpx;
			padding: 15rpx 0 15rpx 30rpx;
			border-radius: 35rpx;
			background-color: #F8F8F8;
		}
		.submit-btn {
			height: 40rpx;
			color: #999;
			font-weight: bold;
		}
	}

	.back-btn {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 100rpx;
		background: linear-gradient(270deg, #FF8E88 0%, #FDAD28 100%);
		font-size: 28rpx;
		color: #fff;
		position: fixed;
		right: 30rpx;
		bottom: 250rpx;
	}

</style>
