<style>
	.friendcircle {
		width: 100%;
		height: 100vh;
		background: #FFF;
		font-family: aa;
	}
	.friendcircle .ftBox {
		width: 100%;
		padding: 0 15px;
		margin-top: 20px;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		
	}
	.friendcircle .ftBox-left{
		margin-right: 15px;
	}
	.friendcircle .ftBox-right{
		width: 1;
		flex: 1;
		flex-direction: column;
	}
	.friendcircle .text{
		color: #A68237;
		font-size: 12px;
	}
	.friendcircle .text2{
		font-size: 12px;
		color: #333333;
	}
	.friendcircle .r-sj{
		font-size: 11px;
		color: #B0B0B0;
		display: flex;flex-direction: row;
		align-items: center;
		justify-content: space-between;
		position: relative;
		margin-top: 5px;
	}
	.friendcircle .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;
		
	}
	.friendcircle .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: -8px;
		font-size: 11px;
		color: #FFFFFF;
	}
	.dianrow{
		display: flex;flex-direction: row;
		align-items: center;
	}
	.dianrow text{margin-left: 3px;}
	.friendcircle .imgmode{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.friendcircle .fileimg{
		width: 100%;height: 100%;
	}
	.friendcircle .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;
	}
	.friendcircle .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;
	}
	.friendcircle .friendarea{
		position: relative;
		width: 100%;
		background: #F5F5F5;
		border-radius: 5px;
		margin-top: 10px;
	}
	.friendcircle .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;
	}
	.friendcircle .areagood{
		width: 100%;
		padding: 10px;
		display: flex;flex-direction: row;
		align-items: flex-start;
		
		
	}
	.areagood-r{
		width: 1;
		flex:1;
		margin-left: 10px;
		max-height: 300px;
		overflow-y: auto;
	}
	.friendcircle .comment{
		width: 100%;
		height: 80px;
		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: 999999999;
	}
	.friendcircle .comment-pl{
		width: 56px;
		height: 26px;
		font-size: 13px;
		color: #FFF;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 3px;
		
	}
	.friendcircle .commentinput{
		width: calc(100vw - 120px);
		height: 30px;
		background: #F3FAF8;
		border-radius: 15px;
		font-size: 13px;
		padding: 0 10px;
	}
	.friendcircle .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;
	}
	.friendcircle .mynews-top {
		width: 100%;
		height: 60px;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left: 0;
		top: 0;
		background: #FFF;
		z-index: 2;
	}
	
	.friendcircle .top-box {
		padding: 0 12px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 30px;
		border-radius: 15px;
		background: #40766E;
		font-size: 14px;
		color: #FFFFFF;
		position: relative;
	}
	.friendcircle .badgestyle{
		padding: 0 5px;
		font-size: 11px;
		color: #FFFFFF;
		position: absolute;
		right: -5px;
		top: -5px;
		background: #C92B2B;
		border-radius: 8px;
	
	}
</style>
<template>
	<div class='friendcircle'>
		<view class="mynews-top" v-if="Messagecount>0">
			<view class="top-box" @click="gomymessage()">
				<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/wodehufong.png" mode="widthFix" style="width: 16px;height: auto;"></image>
				<text style="margin-left: 6px;">我的互动消息</text>
				
				<view class="badgestyle">
					{{Messagecount>99?'99+':Messagecount}}
				</view>
			</view>
		</view>
		<u-empty v-if="g.length == 0" text="暂无动态" mode="list"></u-empty>
		<view v-if="g.length > 0" style="width: 100vw;height: 100vh;overflow: hidden;">
			<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scroll='inputscroll' @scrolltolower="lower"
			 :style="{ height: '100%' }">
				<view class="ftBox" v-for="(x, i) in g" :key="i" :style="{'margin-top':Messagecount>0 && i==0?'80px':'20px'}">
					<view class="ftBox-left">
						<u-avatar :src="x.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;">{{x.createEmName}}</view>
						<view class="text2" style="font-size: 14px;margin-bottom: 5px;">{{x.content}}</view>
						<!-- 图片模式 -->
						<view class="imgmode" v-if="x.fileType==1">
							<view v-if="x.files.length==1" style="width: 150px;height:200px;margin-bottom: 6px;" @click="previewImage(0,x.files)">
								<image :src="x.files[0]" mode="aspectFill" class="fileimg"></image>
							</view>
							<view v-if="x.files.length==2 || x.files.length==4" v-for="(item, iq) in x.files" :key="iq" @click="previewImage(iq,x.files)"
							 style="width: 240rpx;height:240rpx;margin-bottom: 6px;margin-right: 6px;">
								<image :src="item" mode="aspectFill" class="fileimg"></image>
							</view>
							<view v-if="(x.files.length==3 || x.files.length>4) && iq<9" v-for="(item, iq) in x.files" :key="iq" @click="previewImage(iq,x.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 && x.files.length>9">
									9+
								</view>
							</view>
						</view>
						<view class="imgmode" v-if="x.fileType==2">
							<view style="width: 100px;height:120px;margin-bottom: 6px;position: relative;">
								<video :id="'myVideo'+i" :src="x.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="enlarge(x.files[0],i)">
									<u-icon name="play-circle-o" :size="50" color="#FFF"></u-icon>
								</view>
							</view>
						</view>
						<view v-if="x.fileType==3" class="audios" @click.stop="playVoice(x,i)">
							<view class="andiostyle" >
								<image v-if="x.playshow==false" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/Sound.png" mode="widthFix" style="width: 19px;height: auto;"></image>
								<image v-if="x.playshow==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;" v-if="x.address && x.address!=''">
							{{x.address}}
						</view>
						<view class="r-sj">
							<text>{{x.createTime}}</text>
							<view class="r-sj-d" @click="getdian(x,i)">
								<view class="dian"></view>
								<view class="dian"></view>
							</view>
							<view class="diancaoz" v-if="x.dianshow==true">
								<view class="dianrow" @click="dianzan(x,i)">
									<u-icon name="like-o" :size="30" color="#FFF"></u-icon>
									<text>
										{{x.hasLike==false ?'赞':'取消'}}
									</text>

								</view>
								<view class="dianrow" @click="pinglun(x,i)">
									<u-icon name="comment-o" :size="30" color="#FFF"></u-icon>
									<text>
										评论
									</text>
								</view>
							</view>
						</view>

						<view class="friendarea" v-if="(x.likeList && x.likeList.length>0) || x.commentList && x.commentList.length>0">
							<!-- //三角形 -->
							<view class="sjx"></view>
							<view class="areagood" v-if=" x.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 x.likeList" :key="iq">{{item.empName}}{{x.likeList.length!=iq+1?'、':''}}</text>
								</view>
							</view>
							<view v-if="x.likeList.length>0 && x.commentList.length>0" style="width: 100%;height: 1px;background: rgb(226, 226, 226);"></view>
							<view class="areagood" v-if=" x.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 x.commentList" :key="iq" style="width: 100%;margin-bottom: 7px;" @click="huifu(x,i,item,iq)" @longpress='longpress(x,i,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>
				<u-loadmore :status="status" :load-text="loadText" :font-size="24" :margin-top="20" :margin-bottom="20" bg-color="#FFF" />
				<view style="width: 100%;height: 85px;"></view>
			</scroll-view>
				<!-- 输入框 -->
				<view class="comment" v-if="focu==true" :style="{'bottom':inputheight,'height':is_bang}">
					<input type="text" v-model="commentMsg.Content" :placeholder='placeholder' class="commentinput" :focus='focu' @focus='getfocus'  @blur='inputheight=0'>
					<view class="comment-pl" :style="{background:mainColor}" @click="addComment">评论</view>
				</view>
				
		</view>
		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth='gbAuth'></auth>
		<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>
		</view>
		<tabbar v-if='barshow==0'></tabbar>
	</div>
</template>

<script>
	const innerAudioContext = uni.createInnerAudioContext();
	import auth from "../../components/auth/index.vue";
	import tabbar from "@/components/tabbar/index";
	export default {
		components: {
			auth,
			tabbar
		},
		data() {
			return {
				pageTitle: "朋友圈",
				showAuth: false,
				msg: {
					pageIndex: 1,
					pageSize: 15,
					UserTeacher: 0,
					CreateBy: '',
					UserId: 0,
				},
				mainColor: "",
				secondary: '',
				pricecolor: '',
				page_count: 1,
				g: [],
				loading: false,
				status: "loadmore",
				count: 0,
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
				windowWidth: 0,

				nowbofo: false,

				placeholder: '评论',
				focu: false, //是否获取焦点
				commentMsg: {
					ArticleId: 0,
					CommentId: 0,
					Content: '',
				},
				choiceId: 0,//保存评论和点赞时候的id
				show:false,
				user:'',//点击用户保存的数据
				Messagecount:0,
				playindex:0,
				controls:false,//显示默认控件
				dianindex:0,//点的索引
				inputheight:0,//键盘的高度
				is_bang:0,
				barshow:0,
			}
		},
		created() {
			this.is_bang = this.$uiConfig.is_bang ? 85 : 52;
			this.contentHeight = this.$utils.calcContentHeight(-40) + "px";
			this.mainColor = this.$uiConfig.mainColor;
			this.secondary = this.$uiConfig.secondary;
			this.pricecolor = this.$uiConfig.pricecolor;
			this.windowWidth = this.$utils.SystemInfo().windowWidth;
			this.msg.UserId = uni.getStorageSync("mall_UserInfo").UserId ? uni.getStorageSync("mall_UserInfo").UserId : 0;
		},
		mounted() {
			let currentPages = getCurrentPages();
			let u = "/" + currentPages[currentPages.length - 1].route;
			let pages = wx.getStorageSync("basedata") ?
				wx.getStorageSync("basedata").bar_title : [];
			pages.forEach((x) => {
				if (x.value == u) {
					this.pageTitle = x.new_name ? x.new_name : x.name;
				}
			});
			uni.setNavigationBarTitle({
				title: this.pageTitle,
			});

		},
		onLoad(options) {
			if(options ){
				if(options.ID){
					this.msg.UserTeacher=options.ID
				}
				if(options.barshow){
					this.barshow=options.barshow
				}
			}
			this.u = uni.getStorageSync("mall_UserInfo");
			if (!this.u) {
				this.u = {
					nickName: "未登录",
					avatarUrl: ""
				};
				this.showAuth = true;
			} else {
				this.init();
			}
		},
		onShow(){
			if (!this.u) {
				
			} else {
				this.getDMCount();
				
			}
		},
		onUnload(){
			innerAudioContext.stop();
		},
		methods: {
			init() {
				this.loading = true;
				this.request2({
						url: '/api/AppletSchool/GetDynamicList',
						data: this.msg
					},
					res => {
						if (res.resultCode == 1) {
							this.loading = false;
							this.count = res.data.count;
							res.data.pageData.forEach(x => {
								x.playshow = false;
								x.dianshow = false;
							})
							this.g = this.g.concat(res.data.pageData);
							this.page_count = res.data.pageCount;
							if (this.page_count == 1) {
								this.status = "nomore";
							}
						}
						this.getDMCount()
					}
				);
			},
			getDMCount(){
				this.request2({
						url: '/api/AppletEducation/GetDynamicMessageCount',
						data: {}
					},
					res => {
						if (res.resultCode == 1) {
							this.Messagecount = res.data
						};
						
					}
				);
			},

			//语音播放
			playVoice(x,i) {
				let that = this
				if (innerAudioContext.src != x.files[0]) { //如果切换听其他的语音
					innerAudioContext.stop();
					this.nowbofo = false;
					this.g[this.playindex].playshow=false;
					this.playindex= i
				}else{
					this.playindex= i
				}
				innerAudioContext.src = x.files[0];
				if (this.nowbofo == false) {
					innerAudioContext.play()
					this.nowbofo = true;
					this.g[i].playshow=true
					innerAudioContext.onEnded(()=>{
						innerAudioContext.stop()
						this.nowbofo == false
						this.g[this.playindex].playshow=false
					})
				} else {
					innerAudioContext.pause();
					this.nowbofo = false;
					this.g[i].playshow=false
				}
			},
			getList() {
				this.msg.pageIndex = 1;
				this.g = [];
				this.init();
			},
			lower(e) {
				console.log(2)
				if (this.msg.pageIndex < this.page_count) {
					this.msg.pageIndex++;
					this.status = "loading";
					this.init();
				} else {
					this.status = "nomore";
				}
			},
			reloadUserinfo() {
				this.u = uni.getStorageSync("mall_UserInfo");
				// this.showAuth=false;
				this.init();
			},
			//关闭登录窗口
			gbAuth() {
				uni.navigateBack()
			},
			getdian(x, i) { //点击点点
				if(this.dianindex == i){
					this.g[i].dianshow = !this.g[i].dianshow;
					this.dianindex = i
				}else{
					this.g[this.dianindex].dianshow =false;
					this.g[i].dianshow = !this.g[i].dianshow;
					this.dianindex = i
				}
				
				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.g[i].hasLike = !this.g[i].hasLike;
							this.g[i].dianshow = false; //隐藏按钮
							this.init2(1)
						}
					}
				);
			},
			getfocus(){
					let data = uni.getSystemInfoSync().system.indexOf('iOS')
					if(data==-1){
						this.inputheight = '24px'
					}
				  
				
			},
			pinglun(x, i) { //评论
		
				this.focu = false;
				this.commentMsg.Content = '';
				this.placeholder = '评论';
				this.focu = true;
				this.choiceId = x.id;
				this.$forceUpdate()
				this.g[i].dianshow = false; //隐藏按钮
				this.commentMsg = {
					ArticleId: x.id,
					CommentId: 0,
					Content: '',
				}
			},
			inputscroll() { //滚动时触发
				//初始化内容
				this.focu = false;
				this.commentMsg.Content = '';
				this.placeholder = '评论';
				this.g[this.dianindex].dianshow =false;

			},
			longpress(x,i,item,iq){
				if(x.createEmpId == this.msg.UserId){
					this.user={
						x:x,
						i:i,
						item:item,
						iq:iq,
					}
					this.show=true
				}
			},
			huifu(x,i,item,iq){
				this.user={
					x:x,
					i:i,
					item:item,
					iq:iq,
				}
				if(this.msg.UserId == this.user.item.empId){//自己点自己的时候处理
					this.show=true
				}else{
					
					this.focu = true;
					this.choiceId = x.id;
					this.$forceUpdate()
					this.commentMsg = {
						ArticleId: x.id,
						CommentId: item.commentId,
						Content: '',
					}
					this.placeholder = '回复'+item.empName
				}
				
				
			},
			mydelete(){//删除自己的回复
				this.request2({
						url: '/api/AppletEducation/GetDynamicDeleteComment',
						data: {commentId:this.user.item.commentId}
					},
					res => {
						if (res.resultCode == 1) {
							this.g[this.user.i].commentList.splice(this.user.iq,1)
							uni.showToast({
								title: res.message,
								icon: 'none',
								duration: 2000
							});
							this.show = false;
						}
					}
				);
			},
			addComment() {
				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.init2(2)
						}
					}
				);
			},
		
			init2(type) { //根据id去查询当前的数据 只更新当前数据
				this.request2({
						url: '/api/AppletSchool/GetDynamicList',
						data: {
							pageIndex: 1,
							pageSize: 1,
							UserTeacher: 0,
							CreateBy: '',
							UserId: 0,
							Id: this.choiceId
						}
					},
					res => {
						if (res.resultCode == 1) {
							this.g.forEach((x, j) => {
								if (res.data.pageData[0].id == x.id) {
									if (type == 2) { //评论
										this.g[j].commentList = res.data.pageData[0].commentList
									} else if (type == 1) { //点赞
										this.g[j].likeList = res.data.pageData[0].likeList;
									}
								}
							})
						}
					}
				);
			},
			//图片预览
			previewImage(index, images) {
				uni.previewImage({
					urls: images,
					current: index,
				});
			},
			
			paste(){//复制
				uni.setClipboardData({
				  data: this.user.item.content,
				});
			},
			gomymessage(){//我的动态消息
				innerAudioContext.stop();
				uni.navigateTo({
					url: '/pages/friendcircle/medynamic' 
				})
				
			},
			enlarge(file,i) {
				// 全屏
				innerAudioContext.stop();
				this.videoContext = uni.createVideoContext('myVideo'+i);
				this.videoContext.requestFullScreen({
					direction:0
				})
				// uni.navigateTo({
				// 	url: '/pages/friendcircle/enlargevideo?file=' + file
				// })
				
			},
			videoControl(e){
				if(e.detail.fullScreen==false){
					this.videoContext.stop()
					this.controls=false
				}else{
					this.videoContext.play()
					this.controls=true
				}
			}
		}
	}
</script>
