<template>
	<view v-if="showPostImg">
		<!-- 导航栏区域 -->
		<view class="navBarWrap">
			<view class="navBar">
				<image @click="back" src="../../static/image/back_white.png" mode=""></image>
				<text>发现精彩详情</text>
				<image @click="showMoreHandle = !showMoreHandle" src="../../static/image/gengduo.png" mode=""></image>
				<view class="moreHandleWrap" v-if="showMoreHandle" :style="{height:articleInfo.user.id != userinfo.id ? '72rpx' : '144rpx'}">
					<!-- <view class="handleItem" @click="shareFlag = true">
						<image src="../../static/image/fenxiang-22_1@2x.png" mode=""></image>
						转发
					</view> -->
					<view class="handleItem" @click="report">
						<image src="../../static/image/jubao-9_1@2x.png" mode=""></image>
						{{articleInfo.user.id != userinfo.id ? '举报' : '编辑'}}
					</view>
					<view class="handleItem" v-if="articleInfo.user.id == userinfo.id" @click="delAct">
						<image src="../../static/image/shanchu-9_1.png" mode=""></image>
						删除
					</view>
				</view>
			</view>
		</view>
		<view class="empTopH"></view>
		<!-- @change="changeImg" -->
		<!-- :style="{height:swiperHeight+'px'}" 990 1010-->
		<swiper class="imgSwiper" @change="changeImg" :indicator-dots="articleInfo.images.length > 1 ? true : false" :indicator-active-color="'#35655f'" :indicator-color="'rgba(0,0,0,0.3)'" :circular="true" :duration="300">
			<swiper-item v-for="(item,index) in articleInfo.images" :key="index" @click="closeAllAlert">
				<view class="swiper-item" :style="{'align-items':swiperHeight >= 480 ? 'flex-start' : 'center'}">
					<image :src="item" mode="aspectFill" :class="{tempH:swiperHeight >= 480}"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="postInfoWrap" @click="closeAllAlert">
			<!-- 用户信息区域 -->
			<view class="userInfoWrap">
				<view class="userInfoLeft">
					<view class="userIcon" @click="goMainPage(articleInfo.user.id)">
						<image :src="articleInfo.user.avatar" style="width: 93rpx;height: 93rpx;border-radius: 20rpx 0 20rpx 0;" mode="aspectFill"></image>
					</view>
					<view class="userNameAddress">
						<view class="userName">
							<text style="font-size: 32rpx;color: #35655f;">{{articleInfo.user.nickname}}</text>
						</view>
						<view class="userAddress" v-if="articleInfo.province != ''">
							<image src="../../static/image/weizhi-5_1@2x.png" style="width: 26rpx;height: 26rpx;" mode=""></image>
							<text style="color: #969799;font-size: 24rpx;">{{articleInfo.province}}</text>
						</view>
					</view>
				</view>
				<view class="userInfoRight" v-if="articleInfo.user.id != userinfo.id">
					<view class="gzBtn" @click="follow">
						{{articleInfo.is_follow_user == 1 ? '已关注' : '关注'}}
					</view>
					<view class="lwBtn" @click="showSendGift = true" v-if="plat == 'android' || (plat == 'ios' && switchTab == '1')">
						送礼物
					</view>
				</view>
			</view>
			<view class="postTitle">
				{{articleInfo.title}}
			</view>
			<view class="postContent">
				<rich-text :nodes="articleInfo.content" space='emsp'></rich-text>
			</view>
			<view class="postTime">
				<image src="../../static/image/shijian-52_1@2x.png" mode=""></image>
				{{articleInfo.createtime}}
			</view>
			<view class="commentList">
				<view v-for="(item,index) in remarkList" :key="index">
					<view class="commentItem">
						<image @click="goMainPage(item.user.id)" :src="item.user.avatar" style="width: 93rpx;height: 93rpx;border-radius: 20rpx 0 20rpx 0;" mode="aspectFill"></image>
						<view class="commentRight">
							<view class="userNickName">
								<text style="color: #969799;font-size: 28rpx;">{{item.user.nickname}}</text>
								<text style="color: #969799;font-size: 28rpx;">{{item.createtime}}</text>
							</view>
							<view @longtap="openAskHandle(index)" @click="hideAskHandle(item.id,index)" style="font-size: 28rpx;line-height: 42rpx;padding-top: 8rpx;position: relative;">
								{{item.content}}
								<view class="askHandleWrap" v-if="item.showAskHandle">
									<view class="handleItem" @click="reply(item.id,index)">
										<image src="../../static/image/huifu.png" mode=""></image>
										回复
									</view>
									<view class="handleItem" @click="handleAsk(item.id,index,item.user.id)">
										<image src="../../static/image/jubao-9_1@2x.png" mode=""></image>
										{{item.user.id != userinfo.id ? '举报' : '删除'}}
									</view>
								</view>
							</view>
							<text @click="showRep(index)" style="font-size: 28rpx;color: #5176d1;padding-top: 16rpx;" v-if="item.article_reply.length > 0 && !item.showReply">展开{{item.article_reply.length}}条回复</text>
						</view>
					</view>
					<view v-if="item.showReply" class="commentSubItem" v-for="(subItem,subIndex) in item.article_reply" :key="subIndex">
						<view style="display: flex;align-items: center;">
							<image @click="goMainPage(subItem.user.id)" :src="subItem.user.avatar" style="width: 68rpx;height: 68rpx;border-radius: 20rpx 0 20rpx 0;" mode="aspectFill"></image>
						</view>
						<view class="commentRight">
							<view class="userNickName">
								<text style="color: #969799;font-size: 28rpx;">{{subItem.user.nickname}}</text>
								<text style="color: #969799;font-size: 28rpx;">{{subItem.createtime}}</text>
							</view>
							<view style="font-size: 24rpx;position: relative;" @longtap="openReplyHandle(index,subIndex)" @click="hideReplyHandle(index,subIndex)">
							{{subItem.content}}
								<view class="replyHandleWrap" v-if="subItem.showReplyHandle && subItem.user.id == userinfo.id">
									<view class="handleItem" @click="handleReply(subItem.id,index,subIndex,subItem.user.id)">
										<image src="../../static/image/jubao-9_1@2x.png" mode=""></image>
										删除
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		<view :style="{height: keyboardHeight+100 +'rpx'}"></view>
		<view class="otherHandleWrap" :style="{bottom: keyboardHeight+'rpx'}">
			<view class="sayWhat">
				<image src="../../static/image/icon_faqi@2x.png" mode="" style="width: 32rpx;height: 32rpx;margin-right: 8rpx;"></image>
				<input :focus="firstFocus" class="inpTxt" type="text" v-model="content" placeholder="说点什么" :adjust-position="false"/>
			</view>
			<text style="color: #969799;font-size: 32rpx;" @click="remark">发送</text>
			<view class="userHandle">
				<image @click="like" class="handleImg" :src="articleInfo.is_like == 1 ? '../../static/image/yidianzan.png' : '../../static/image/dianzan_img.png'" mode=""></image>
				<text class="handleNum">{{articleInfo.like_num}}</text>
				<!-- <image @click="showCommentAlert = true" class="handleImg" src="../../static/image/liuyan_img.png" mode=""></image><text class="handleNum">{{articleInfo.remark_num}}</text> -->
				<image @click="collect" class="handleImg" :src="articleInfo.is_collect == 1 ? '../../static/image/yishoucang.png' : '../../static/image/shoucang_img.png'" mode=""></image>
				<text class="handleNum">{{articleInfo.collect_num}}</text>
			</view>
		</view>
		<!-- 送礼物弹框 -->
		<send-gift v-if="showSendGift" :toUserId="articleInfo.user.id" @closeSendGift="showSendGift = false"></send-gift>
		<!-- 评论内容弹框 -->
		<view class="commentAlert" v-if="showCommentAlert">
			<view class="commentNum">
				<text style="font-size: 28rpx;line-height: 100rpx;">共{{remarkList.length}}条评论</text>
				<image @click="showCommentAlert = false" class="closeBtn" src="../../static/image/close.png" style="width: 32rpx;height: 32rpx;" mode=""></image>
			</view>
			<scroll-view scroll-y class="commentList">
				<view v-for="(item,index) in remarkList" :key="index">
					<view class="commentItem">
						<image :src="item.user.avatar" style="width: 93rpx;height: 93rpx;" mode=""></image>
						<view class="commentRight">
							<view class="userNickName">
								<text style="color: #969799;font-size: 28rpx;">{{item.user.nickname}}</text>
								<text style="color: #969799;font-size: 28rpx;">{{item.createtime}}</text>
							</view>
							<text @longtap="reply(item.id)" style="font-size: 28rpx;line-height: 42rpx;padding-top: 8rpx;">{{item.content}}</text>
							<text @click="item.showReply = true" style="font-size: 28rpx;color: #5176d1;padding-top: 16rpx;" v-if="item.article_reply.length > 0 && !item.showReply">展开{{item.article_reply.length}}条回复</text>
						</view>
					</view>
					<view v-if="item.showReply" class="commentSubItem" v-for="(subItem,subIndex) in item.article_reply" :key="subIndex">
						<image :src="subItem.user.avatar" style="width: 68rpx;height: 68rpx;" mode=""></image>
						<view class="commentRight">
							<view class="userNickName">
								<text style="color: #969799;font-size: 28rpx;">{{subItem.user.nickname}}</text>
								<text style="color: #969799;font-size: 28rpx;">{{subItem.createtime}}</text>
							</view>
							<text style="font-size: 28rpx;line-height: 42rpx;padding-top: 8rpx;">{{subItem.content}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="bottomBtn">
				<view class="sayWhatInp">
					<image src="../../static/image/edit_comment.png" mode="" style="width: 32rpx;height: 32rpx;margin-right: 8rpx;"></image>
					<!-- <input class="inpTxt" type="text" v-model="content" placeholder="说点什么" :adjust-position="false"/> -->
				</view>
				<view style="color: #969799;font-size: 32rpx;" @click="remark">
					发送
				</view>
			</view>
		</view>
		<share v-if="shareFlag" @close="shareFlag = false"></share>
	</view>
</template>

<script>
	import share from '@/components/share.vue'
	import sendGift from '@/components/sendGift.vue'
	import {mapState} from "vuex"
	// var apiUrl = 'http://landlord.t.brotop.cn/api'
	var apiUrl = 'http://app.zhaodizhu.cn/api'
	export default{
		data(){
			return{
				imgWidth:0,
				imgHeight:0,
				swiperHeight:0,
				keyboardHeight:0,
				showPostImg:false,
				shareFlag:false,
				firstFocus:false,
				showCommentAlert:false,//展示评论内容弹框
				showSendGift:false,
				article_remark_id:'',
				remarkList:[],
				content:'',//评论内容
				remarkType:'',//评论类型
				article_id:'',
				articleInfo:{},
				//查询评论列表参数
				remarkQueryParam:{
					article_id:'',
					page:1,
					pageNum:15
				},
				showMoreHandle:false,
				switchTab:'1',
				plat:'android'
			}
		},
		components:{
			sendGift,share
		},
		computed:{
			...mapState(["isLogin","userinfo"])
		},
		onLoad(e) {
			this.$request('/common/getConfig',{type:'8'}).then((res)=>{
				this.switchTab = res.data.switch
				this.plat = plus.os.name.toLowerCase()
			})
			//监听键盘高度变化
			uni.onKeyboardHeightChange(res => {
			  if(res.height == 0){
				  this.keyboardHeight = 0
			  }else{
				  this.keyboardHeight = res.height*2 + 10
			  } 
			})
			this.article_id = e.id
		},
		onShow() {
			this.getData()
		},
		methods:{
			getData(){
				let that = this
				this.$request('/article/info',{article_id:that.article_id}).then((res)=>{
					res.data.content = that.textFormat(res.data.content)
					that.articleInfo = res.data
					uni.getImageInfo({
						src:res.data.images[0],
						success: function(image) {
							uni.getSystemInfo({
								success: function (res) {
									that.imgHeight = image.height
									that.swiperHeight = res.windowWidth/image.width * image.height;
									that.showPostImg = true
								}
							});
						}
					});
				})
				this.getRemarkList()
			},
			//轮播图切换
			changeImg(e){
				let that = this
				uni.getImageInfo({
					src:that.articleInfo.images[e.detail.current],
					success: function(image) {
						uni.getSystemInfo({
							success: function (res) {
								that.imgWidth = image.width
								that.imgHeight = image.height
								that.swiperHeight = res.windowWidth/image.width * image.height;
							}
						});
					}
				});
			},
			textFormat(val) {
				// 格式化文字展示文本域格式文字
				if (val) {
					let newString = val.replace(/\n/g, '_@').replace(/\r/g, '_#');
					newString = newString.replace(/_#_@/g, '<br/>'); // IE7-8
					newString = newString.replace(/_@/g, '<br/>'); // IE9、FF、chrome
					newString = newString.replace(/\s/g, '&nbsp;'); // 空格处理
					return newString;
				}
			},
			//去主页
			goMainPage(userId){
				if(userId == this.userinfo.id){
					uni.switchTab({
						url:'/pages/my/my'
					})
				}else{
					this.href('/pages/index/landHome?id='+userId)
				}
				
			},
			handleAsk(id,index,userId){
				this.remarkList[index].showAskHandle = false
				this.$forceUpdate()
				if(userId != this.userinfo.id){
					uni.navigateTo({
						url:'/pages/index/report?article_remark_id='+id
					})
				}else{
					this.$request('/article_remark/delRemark',{article_remark_id:id}).then((res)=>{
						if(res.code == 1){
							this.getData()
							uni.showToast({
								title:'删除成功'
							})
						}else{
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
						}
					})
				}
			},
			handleReply(id,index,subIndex,userId){
				this.remarkList[index].article_reply[subIndex].showReplyHandle = false
				this.$forceUpdate()
				this.$request('/article_reply/delReply',{article_reply_id:id}).then((res)=>{
					if(res.code == 1){
						this.getData()
						uni.showToast({
							title:'删除成功'
						})
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			openAskHandle(index){
				this.remarkList.forEach(item=>{
					item.showAskHandle = false
				})
				this.remarkList[index].showAskHandle = true
				this.$forceUpdate()
			},
			hideAskHandle(id,index){
				this.article_remark_id = id
				this.remarkType = 'reply'
				this.getFocus('firstFocus')
			},
			openReplyHandle(index,subIndex){
				this.remarkList[index].article_reply[subIndex].showReplyHandle = true
				this.$forceUpdate()
			},
			hideReplyHandle(index,subIndex){
				this.remarkList[index].article_reply[subIndex].showReplyHandle = false
				this.$forceUpdate()
			},
			//回复
			reply(id,index){
				this.remarkList[index].showAskHandle = false
				this.$forceUpdate()
				this.article_remark_id = id
				this.remarkType = 'reply'
				this.getFocus('firstFocus')
			},
			// 获取焦点
			getFocus(nextfocus){
				this[nextfocus] = false     // 不能使用点语法
				this.$nextTick(()=>{
					this[nextfocus] = true
				})
			},
			showRep(index){
				this.remarkList[index].showReply = true
				this.$forceUpdate()
			},
			//删除帖子
			delAct(){
				uni.showModal({
					title:'提示',
					content:'确认删除吗？',
					success: (res) => {
						if(res.confirm){
							this.$request('/article/del',{article_id:this.article_id}).then((res)=>{
								if(res.code == 1){
									uni.setStorageSync('refreshMy',true)
									uni.setStorageSync('refreshFindWonderful',true)
									uni.navigateBack({
										delta:1
									})
									setTimeout(()=>{
										uni.showToast({
											title:'删除成功'
										})
									},500)
								}else{
									uni.showToast({
										title:res.msg,
										icon:'none'
									})
								}
							})
						}
					}
				})
				
			},
			//关注
			follow(){
				this.$request('/user_follow_log/follow',{to_user_id:this.articleInfo.user_id}).then((res)=>{
					if(res.code == 1){
						this.getData()
						uni.showToast({
							title:res.msg+'成功'
						})
					}
				})
			},
			//举报
			report(){
				this.showMoreHandle = false
				if(this.articleInfo.user.id != this.userinfo.id){
					uni.navigateTo({
						url:'/pages/index/report?article_id='+this.article_id
					})
				}else{
					uni.navigateTo({
						url:'/pages/findWonderful/publishPost?article_id='+this.article_id
					})
				}
				
			},
			//关闭所有弹框
			closeAllAlert(){
				this.showMoreHandle = false
				this.remarkList.forEach(item=>{
					item.showAskHandle = false
				})
				this.$forceUpdate()
			},
			//点赞
			like(){
				this.$request('/article/like',{article_id:this.article_id}).then((res)=>{
					this.getData()
				})
			},
			//收藏
			collect(){
				this.$request('/article/collect',{article_id:this.article_id}).then((res)=>{
					this.getData()
				})
			},
			//获取评论列表
			getRemarkList(){
				this.remarkQueryParam.article_id = this.article_id
				this.$request('/article_remark/getArticleList',this.remarkQueryParam).then((res)=>{
					this.remarkList = res.data.data
				})
			},
			//评论
			remark(){
				if(this.remarkType == 'reply'){
					if(this.content == ''){
						uni.showToast({
							title:'请输入回复内容',
							icon:'none'
						})
						return
					}
					uni.request({
						url:apiUrl+'/article_reply/submitReply',
						method:'POST',
						header: {
							'content-type': 'application/x-www-form-urlencoded', 
							'token': uni.getStorageSync('token')
						},
						data:{
							article_remark_id:this.article_remark_id,
							content:this.content
						},
						success: (res) => {
							this.content = ''
							this.remarkType = 'send'
							this.article_remark_id = '' 
							this.getRemarkList()
						}
					})
				}else{
					if(this.content == ''){
						uni.showToast({
							title:'请输入评论内容',
							icon:'none'
						})
						return
					}
					this.$request('/article_remark/submit',{
						article_id:this.article_id,
						content:this.content
					}).then((res)=>{
						this.content = ''
						this.getData()
						this.getRemarkList()
					})
				}
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			href(url){
				this.$href(url)
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 导航栏区域 */
	.navBarWrap{
		position: fixed;width: 100%;z-index: 1; height: calc(var(--status-bar-height) + 88rpx);background: #35655f;
		.navBar{
			padding: var(--status-bar-height) 32rpx 0 32rpx;
			height: 88rpx;
			display: flex;align-items: center;justify-content: space-between;
			color: #fff;
			image{width: 44rpx;height: 44rpx;}
			.moreHandleWrap{
				position: absolute;
				width: 168rpx;
				background: #fff;
				top: calc(var(--status-bar-height) + 48rpx);
				right: 46rpx;
				border-radius: 10rpx;
				.handleItem{
					display: flex;
					justify-content: center;
					align-items: center;
					height: 72rpx;
					color: #35655f;
					font-size: 28rpx;
					image{width: 32rpx;height: 32rpx;margin-right: 16rpx;}
				}
			}
		}
	}
	.empTopH{
		height: calc(88rpx + var(--status-bar-height));
	}
	.imgSwiper{
		height: 1028rpx;
		.swiper-item{
			height: 1028rpx;
			width: 750rpx;
			display: flex;
			justify-content: center;
			image{width: 750rpx;}
			.tempH{height: 980rpx;}
		}
	}
	.postInfoWrap{
		padding: 0 32rpx;
		.userInfoWrap{
			height: 168rpx;display: flex;justify-content: space-between;align-items: center;
			.userInfoLeft{
				display: flex;
				.userIcon{width: 93rpx;}
				.userNameAddress{
					padding-left: 9rpx;
					.userAddress{display: flex;align-items: center;}
				}
			}
			.userInfoRight{
				display: flex;align-items: center;justify-content: space-between;width: 260rpx;
				.gzBtn{font-size: 22rpx;color: #35655f;text-align: center;line-height: 52rpx;width: 122rpx;height: 52rpx;border: 1rpx solid #35655f;border-radius: 103rpx;}
				.lwBtn{font-size: 22rpx;color:#fff;text-align: center;line-height: 52rpx;width: 122rpx;height: 52rpx;background: #35655f;border-radius: 102rpx;}
			}
		}
		.postTitle{
			font-size: 36rpx;
		}
		.postContent{
			padding-top: 24rpx;
			font-size: 30rpx;
			line-height: 42rpx;
			color: #646566;
		}
		.postTime{
			padding-top: 74rpx;
			display: flex;
			align-items: center;
			color: #969799;
			font-size: 24rpx;
			image{width: 24rpx;height: 24rpx;margin-right: 8rpx;}
		}
		.commentList{
			padding-top: 38rpx;
			.commentItem{
				display: flex;padding: 10rpx 0;
				.commentLeft{width: 93rpx;}
				.commentRight{
					width: 597rpx;padding-left: 13rpx;
					.userNickName{display: flex;justify-content: space-between;}
					.askHandleWrap{
						position: absolute;
						width: 140rpx;
						top: -90rpx;
						left: 100rpx;
						border-radius: 10rpx;
						border: 2rpx solid #35655f;
						.handleItem{
							display: flex;
							justify-content: center;
							align-items: center;
							height: 50rpx;
							color: #35655f;
							font-size: 28rpx;
							image{width: 32rpx;height: 32rpx;margin-right: 16rpx;}
						}
					}
				}
			}
			.commentSubItem{
				display: flex;padding: 10rpx 0 10rpx 106rpx;
				.commentRight{
					flex: 1;padding-left: 13rpx;
					.userNickName{display: flex;justify-content: space-between;}
					.replyHandleWrap{
						position: absolute;
						width: 140rpx;
						top: -90rpx;
						left: 100rpx;
						border-radius: 10rpx;
						border: 2rpx solid #35655f;
						.handleItem{
							display: flex;
							justify-content: center;
							align-items: center;
							height: 50rpx;
							color: #35655f;
							font-size: 28rpx;
							image{width: 32rpx;height: 32rpx;margin-right: 16rpx;}
						}
					}
				}
			}
		}
	}
	/* 其他操作区域 */
	.otherHandleWrap{
		background: #fff;
		position: fixed;width: 686rpx;height:100rpx;padding: 0 32rpx;display: flex;justify-content: space-between;align-items: center;
		box-shadow: 0rpx -12rpx 14rpx 0rpx rgba(59,98,194,0.03);
		.sayWhat{
			width: 350rpx;height: 64rpx;background: #f7f8fa;border-radius: 64rpx;display: flex;padding-left: 24rpx;align-items: center;
			.inpTxt{height: 32rpx;font-size: 26rpx;}
		}
		.userHandle{
			display: flex;align-items: center;
			.handleImg{width: 42rpx;height: 42rpx;margin: 0 12rpx 0 24rpx;}
			.handleNum{color: #646566;font-size: 30rpx;}
		}
	}
	/* 评论内容弹框 */
	.commentAlert{position: fixed;width: 750rpx;height: 1000rpx;bottom: 0;background: #fff;border-radius: 30rpx 30rpx 0 0;}
	.commentAlert .commentNum{height: 100rpx;position: relative;text-align: center;}
	.commentNum .closeBtn{position: absolute;top:30rpx;right: 30rpx;}
	.commentAlert .commentList{height: 800rpx;padding: 0 30rpx;}
	.commentList .commentItem{display: flex;padding: 10rpx 0;}
	.commentItem .commentLeft{width: 93rpx;}
	.commentItem .commentRight{width: 597rpx;padding-left: 13rpx;}
	.commentRight .userNickName{display: flex;justify-content: space-between;}
	.commentList .commentSubItem{
		display: flex;padding: 10rpx 0 10rpx 106rpx;
		.commentRight{
			flex: 1;padding-left: 13rpx;
			.userNickName{display: flex;justify-content: space-between;}
		}
	}
	.commentAlert .bottomBtn{height: 100rpx;background: #ffffff;box-shadow: 0rpx -12rpx 14rpx 0rpx rgba(59,98,194,0.03);padding: 0 32rpx;display: flex;align-items: center;justify-content: space-between;}
	.bottomBtn .sayWhatInp{width: 590rpx;height: 64rpx;background: #f7f8fa;border-radius: 64rpx;display: flex;align-items: center;padding-left: 20rpx;}
	.sayWhatInp .inpTxt{width: 518rpx;height: 32rpx;font-size: 26rpx;}
	
</style>