<style>
	.mydetails{
		width: 100%;
		height: 100vh;
		background: #FFFFFF;
	}
	.mydetails .box{
		width: 100%;
		
	}
.mydetails .ftBox {
		width: 100%;
		padding: 0 15px;
		margin-top: 20px;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		margin-bottom: 55px;
		
	}
	.mydetails .ftBox-left{
		margin-right: 15px;
	}
	.mydetails .ftBox-right{
		width: 1;
		flex: 1;
		flex-direction: column;
	}
	.mydetails .text{
		color: #A68237;
		font-size: 12px;
	}
	.mydetails .text2{
		font-size: 12px;
		color: #333333;
	}
	.mydetails .r-sj{
		font-size: 11px;
		color: #B0B0B0;
		display: flex;flex-direction: row;
		align-items: center;
		justify-content: space-between;
		position: relative;
		margin-top: 5px;
	}
	.mydetails .r-sj-d{
		width: 26px;
		height: 19px;
		background: #F5F5F5;
		border-radius: 3px;
		display: flex;flex-direction: row;
		align-items: center;justify-content: space-around;padding:0 3px;
		
	}
	.mydetails .dian{
		width: 4px;height: 4px;border-radius: 2px;background: #737373;
	}
	.diancaoz{
		width: 110px;
		height: 30px;
		background: #000000;
		border-radius: 4px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		position: absolute;
		right: 29px;
		bottom: -5px;
		font-size: 11px;
		color: #FFFFFF;
	}
	.dianrow{
		display: flex;flex-direction: row;
		align-items: center;
	}
	.dianrow text{margin-left: 3px;}
	.mydetails .imgmode{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.mydetails .fileimg{
		width: 100%;height: 100%;
	}
	.mydetails .imgc{
		width: 100%;height: 100%;
		background: rgba(0, 0, 0, 0.2);
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		position: absolute;
		left: 0;
		top:0;
		font-size: 30px;
		color: #FFFFFF;
	}
	.mydetails .audios{
		width: 500rpx;
		height: 27px;
		border-radius: 5px;
		padding: 0 15px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		background: #EBEBEB;
	}
	.mydetails .friendarea{
		position: relative;
		width: 100%;
		background: #F5F5F5;
		border-radius: 5px;
		margin-top: 10px;
	}
	.mydetails .sjx{
		width: 0;
		height: 0;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-bottom: 8px solid #F5F5F5;
		position: absolute;
		left: 10px;
		top:-6px;
	}
	.mydetails .areagood{
		width: 100%;
		padding: 10px;
		display: flex;flex-direction: row;
		align-items: flex-start;
		
		
	}
	.areagood-r{
		width: 1;
		flex:1;
		margin-left: 10px;
	}
	.mydetails .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;
		z-index: 9;
	}
	.mydetails .comment-pl{
		width: 56px;
		height: 26px;
		font-size: 13px;
		color: #FFF;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 3px;
		
	}
	.mydetails .commentinput{
		width: calc(100vw - 120px);
		height: 30px;
		background: #F3FAF8;
		border-radius: 15px;
		font-size: 13px;
		padding: 0 10px;
	}
	.mydetails .comment-list{
		width: 100%;
	}
	.popup-box{
		width: 100%;
		border-top-right-radius: 8px;
		border-top-left-radius: 8px;
		background: #FFF;
	}
	.popup-box-item{
		width: 100%;
		height: 40px;
		border-bottom: 1px solid #E7E7E7;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
</style>
<template>
	<view class="mydetails">
		<u-empty v-if="loading==true" text="网络出现故障" mode="wifi"></u-empty>
		<view class="box" v-if="loading==false" @click="blurc">
			<view class="ftBox" >
				<view class="ftBox-left">
					<u-avatar :src="detial.crearteEmPhoto" size='80' mode="square"></u-avatar>
				</view>
				<view class="ftBox-right">
					<view class="text" style="font-size: 14px;font-weight: bold;margin-bottom: 5px;">{{detial.createEmName}}</view>
					<view class="text2" style="font-size: 14px;margin-bottom: 5px;">{{detial.content}}</view>
					<!-- 图片模式 -->
					<view class="imgmode" v-if="detial.fileType==1">
						<view v-if="detial.files.length==1" style="width: 150px;height:200px;margin-bottom: 6px;" @click.stop="previewImage(0,detial.files)">
							<image :src="detial.files[0]" mode="aspectFill" class="fileimg"></image>
						</view>
						<view v-if="detial.files.length==2 || detial.files.length==4" v-for="(item, iq) in detial.files" :key="iq" @click.stop="previewImage(iq,detial.files)"
						 style="width: 240rpx;height:240rpx;margin-bottom: 6px;margin-right: 6px;">
							<image :src="item" mode="aspectFill" class="fileimg"></image>
						</view>
						<view v-if="(detial.files.length==3 || detial.files.length>4) && iq<9" v-for="(item, iq) in detial.files" :key="iq" @click.stop="previewImage(iq,detial.files)"
						 style="width: 160rpx;height:160rpx;margin-bottom: 6px;margin-right: 6px;position: relative;">
							<image :src="item" mode="aspectFill" class="fileimg"></image>
							<view class="imgc" v-if="iq==8 && detial.files.length>9">
								9+
							</view>
						</view>
					</view>
					<view class="imgmode" v-if="detial.fileType==2">
						<view style="width: 100px;height:120px;margin-bottom: 6px;position: relative;">
							<video id="myVideo" :src="detial.files[0]" style="width: 100%;height: 100%;"
							 :controls='controls'
							 :show-center-play-btn='false'
							 :show-fullscreen-btn='false' 
							 @fullscreenchange='videoControl'></video>
							<view style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;display: flex;align-items: center;justify-content: center;"
							 @click.stop="enlarge(detial.files[0])">
								<u-icon name="play-circle-o" :size="50" color="#FFF"></u-icon>
							</view>
						</view>
					</view>
					<view v-if="detial.fileType==3" class="audios" @click.stop="playVoice(detial)">
						<view class="andiostyle" >
							<image v-if="nowbofo==false" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/Sound.png" mode="widthFix" style="width: 19px;height: auto;"></image>
							<image v-if="nowbofo==true" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/bofanggif.gif" mode="widthFix" style="width: 19px;height: auto;"></image>
						</view>
					</view>
					<view class="text" style="font-size: 11px;margin-top: 5px;" v-if="detial.address && detial.address!=''">
						{{detial.address}}
					</view>
					<view class="r-sj">
						<view style="display: flex;flex-direction: row;align-items: center;">
							<text style="margin-right: 5px;">{{detial.createTime}}</text>
							<text v-if='isdelete == true' :style="{'color': mainColor}" @click="showdelete=true">删除</text>
						</view>
						
						<view class="r-sj-d" @click.stop="getdian(detial)">
							<view class="dian"></view>
							<view class="dian"></view>
						</view>
						<view class="diancaoz" v-if="detial.dianshow==true">
							<view class="dianrow" @click.stop="dianzan(detial)">
								<u-icon name="like-o" :size="30" color="#FFF"></u-icon>
								<text>
									{{detial.hasLike==false ?'赞':'取消'}}
								</text>
			
							</view>
							<view class="dianrow" @click.stop="pinglun(detial)">
								<u-icon name="comment-o" :size="30" color="#FFF"></u-icon>
								<text>
									评论
								</text>
							</view>
						</view>
					</view>
			
					<view class="friendarea" v-if="(detial.likeList && detial.likeList.length>0) || detial.commentList && detial.commentList.length>0">
						<!-- //三角形 -->
						<view class="sjx"></view>
						<view class="areagood" v-if=" detial.likeList.length>0" >
							<u-icon name="like-o" :size="30" color="#737373"></u-icon>
							<view class="areagood-r text">
								<text v-for="(item, iq) in detial.likeList" :key="iq">{{item.empName}}{{detial.likeList.length!=iq+1?'、':''}}</text>
							</view>
						</view>
						<view v-if="detial.likeList.length>0 && detial.commentList.length>0" style="width: 100%;height: 1px;background: rgb(226, 226, 226);"></view>
						<view class="areagood" v-if=" detial.commentList.length>0">
							<u-icon name="comment-o" :size="30" color="#737373" style='margin-top: 2px;'></u-icon>
							<view class="areagood-r">
								<view v-for="(item, iq) in detial.commentList" :key="iq" style="width: 100%;margin-bottom: 7px;" @click.stop="huifu(detial,item,iq)"  @longpress='longpress(detial,item,iq)'>
									<view class="text comment-list">
										{{item.empName}}
										<text style="color: #333333;margin: 0 3px;" v-if="item.byReplayEmpId>0">回复</text>
										{{item.byReplayEmpId>0?item.byReplayEmpName:''}}
									</view>
									<view class="text2">{{item.content}}</view>
								</view>
			
							</view>
						</view>
			
					</view>
				</view>
			</view>
			<!-- 输入框 -->
			<view class="comment" :style="{'bottom':inputheight,'height':is_bang}" >
				<input type="text" 
				v-model="commentMsg.Content" 
				:placeholder='placeholder'
				 class="commentinput"  
				 :focus='focu'
				 @blur='inputheight=0'
				  @focus='getfocus' >
				<view class="comment-pl" :style="{background:mainColor}" @click.stop="addComment">评论</view>
			</view>
				
		</view>
		<u-popup v-model="show" mode="bottom" border-radius='14'>
			<view class="popup-box">
				<view class="popup-box-item" @click="paste()">
					复制
				</view>
				<view class="popup-box-item" @click="mydelete()">
					删除
				</view>
				<view style="width: 100%;height: 10px;background: #E7E7E7;"></view>
				<view class="popup-box-item" @click="show=false" style="height: 45px;">
					取消
				</view>
				
			</view>
		</u-popup>
		<u-modal v-model="showdelete" content="删除该朋友圈？" :show-cancel-button='true'	 @cancel='showdelete=false' @confirm='deletepyq()'></u-modal>
	</view>
</template>

<script>
	const innerAudioContext = uni.createInnerAudioContext();
	export default{
		data(){
			return{
				articleId:0,
				loading:false,
				detial:{},
				mainColor: "",
				secondary: '',
				pricecolor: '',
				nowbofo: false,
				
				placeholder: '评论',
				focu: false, //是否获取焦点
				commentMsg: {
					ArticleId: 0,
					CommentId: 0,
					Content: '',
				},
				choiceId: 0,//保存评论和点赞时候的id
				show:false,
				user:'',//点击用户保存的数据
				UserId:0,
				controls:false,//显示默认控件
				isdelete:false,//是否出现删除键
				showdelete:false,//提示删除的弹框
				index:0,//上个页面的索引
				inputheight:0,//键盘的高度
				is_bang:0,
			}
		},
		onLoad(options) {
			if(options && options.ID){
				this.articleId = options.ID;
				this.commentMsg.ArticleId = options.ID
				this.init(1)
			}
			if(options && options.index){
				this.index = options.index;
			}
			uni.setNavigationBarTitle({
				title: '详情',
			});
			this.is_bang = this.$uiConfig.is_bang ? 80 : 52;
			this.mainColor = this.$uiConfig.mainColor;
			this.secondary = this.$uiConfig.secondary;
			this.pricecolor = this.$uiConfig.pricecolor;
			this.UserId = uni.getStorageSync("mall_UserInfo").UserId ? uni.getStorageSync("mall_UserInfo").UserId : 0;
		},
		
		onUnload(){
			innerAudioContext.stop();
		},
		methods:{
			init(type=0){
				if(type==1){//第一次进来判断
					this.loading = true;
				}
				
				this.request2({
						url: '/api/AppletEducation/GetDynamicDetial',
						data: {articleId:this.articleId}
					},
					res => {
						this.loading = false;
						if (res.resultCode == 1) {
							this.detial = res.data;
							this.detial.dianshow = false;
							if(this.detial.createEmpId==this.UserId){//是当前账户 可以进行删除
								this.isdelete = true
							}
						}
					}
				);
			},
			//图片预览
			previewImage(index, images) {
				uni.previewImage({
					urls: images,
					current: index,
				});
			},
			
			//语音播放
			playVoice(x) {
				let that = this
				innerAudioContext.src = x.files[0];
				if (this.nowbofo == false) {
					innerAudioContext.play()
					this.nowbofo = true
					innerAudioContext.onEnded(()=>{
						innerAudioContext.stop()
						this.nowbofo = false
					})
				} else {
					innerAudioContext.pause();
					this.nowbofo = false
				}
			},
			getdian(x, i) { //点击点点
				this.detial.dianshow = !this.detial.dianshow;
				this.$forceUpdate()
			},
			dianzan(x, i) { //点赞
				this.choiceId = x.id;
				let url = '';
				if (x.hasLike == false) {
					url = '/api/AppletEducation/GetDynamicLike'
				} else {
					url = '/api/AppletEducation/GetDynamicCancelLike'
				}
				this.request2({
						url: url,
						data: {
							articleId: x.id
						}
					},
					res => {
						if (res.resultCode == 1) {
							this.detial.hasLike = !this.detial.hasLike;
							this.detial.dianshow = false; //隐藏按钮
							this.init()
						}
					}
				);
			},
			longpress(x,item,iq){
				if(x.createEmpId == this.UserId){
					this.user={
						x:x,
						item:item,
						iq:iq,
					}
					this.show=true
				}
			},
			huifu(x,item,iq){
				this.user={
					x:x,
					
					item:item,
					iq:iq,
				}
				this.focu=false
				if(this.UserId == this.user.item.empId){//自己点自己的时候处理
					this.show=true
				}else{
				
					this.focu = true;
					this.choiceId = x.id;
					
					this.commentMsg = {
						ArticleId: x.id,
						CommentId: item.commentId,
						Content: '',
					}
					this.placeholder = '回复'+item.empName
				}
				
				
			},
			getfocus(){
				let data = uni.getSystemInfoSync().system.indexOf('iOS')
				if(data==-1){
					this.inputheight = '24px'
				}
			},
			pinglun(x) { //评论
				
				this.focu = false;
				this.commentMsg.Content = '';
				this.placeholder = '评论';
				this.focu = true;
				this.choiceId = x.id;
				this.detial.dianshow = false; //隐藏按钮
				this.commentMsg = {
					ArticleId: x.id,
					CommentId: 0,
					Content: '',
				}
			},
			addComment() {
				console.log(this.commentMsg)
				if (this.commentMsg.Content == '') {
					uni.showToast({
						title: '请输入评论',
						icon: 'none',
						duration: 2000
					});
					return
				}
				this.request2({
						url: '/api/AppletEducation/GetDynamicComment',
						data: this.commentMsg
					},
					res => {
						if (res.resultCode == 1) {
							
							this.focu = false;
							this.commentMsg.Content = '';
							this.placeholder = '评论';
							this.init()
						}
					}
				);
			},
			blurc(){
				this.focu=false
				this.commentMsg.Content = '';
				this.placeholder = '评论';
				
			},
			mydelete(){//删除自己的回复
				this.request2({
						url: '/api/AppletEducation/GetDynamicDeleteComment',
						data: {commentId:this.user.item.commentId}
					},
					res => {
						if (res.resultCode == 1) {
							this.detial.commentList.splice(this.user.iq,1)
							uni.showToast({
								title: res.message,
								icon: 'none',
								duration: 2000
							});
							this.show = false;
						}
					}
				);
			},
			paste(){//复制
				uni.setClipboardData({
				  data: this.user.item.content,
				});
			},
			deletepyq(){//删除朋友圈
				this.request2({
						url: '/api/AppletEducation/GetDeleteDynamic',
						data: {articleId:this.articleId}
					},
					res => {
						if (res.resultCode == 1) {
							
							uni.showToast({
								title: res.message,
								icon: 'none',
								duration: 2000
							});
							let that = this
							let pages = getCurrentPages(); // 当前页面
							let beforePage = pages[pages.length - 2]; // 前一个页面
							setTimeout(() => {
								uni.navigateBack({
									success: function() {
										if(that.index==-1){
											beforePage.$vm.getsplice(that.articleId); // 执行前一个页面的created方法
										}else{
											beforePage.$vm.getsplice(that.index); // 执行前一个页面的created方法
										}
										
									}
								});
							}, 500)
							
						}
					}
				);
			},
			enlarge(file) {
				// 全屏
				innerAudioContext.stop();
				this.videoContext = uni.createVideoContext('myVideo');
				this.videoContext.requestFullScreen({
					direction:0
				})
				
			},
			videoControl(e){
				if(e.detail.fullScreen==false){
					this.videoContext.stop()
					this.controls=false
				}else{
					this.videoContext.play()
					this.controls=true
				}
			}
			
		}
	}
</script>

