<style>
	.mynews {
		width: 100%;
		height: 100vh;
		background: #FFF;

	}

	.mynews .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;
	}

	.mynews .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;
	}

	.mynews .ftBox {
		width: 100%;
		padding: 0 15px;
		margin-top: 25px;
	}

	.mynews .interDList {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
	}

	.mynews .interDList-left {
		width: 80px;
		display: flex;
		flex-direction: row;
		align-items: flex-end;
	}

	.mynews .interDList-right {
		width: 1;
		flex: 1;
		font-size: 14px;
		color: #333333;
	}

	.mynews .jiazu {
		font-size: 25px;
		color: #333333;
	}

	.mynews .inter-r-o {
		width: 100%;
		padding: 10px;
		background: #F5F5F5;
		border-radius: 4px;
	}

	.mynews .inter-r-t {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;

	}

	.mynews .inter-r-t-l {
		width: 70px;
		height: 70px;
		border-radius: 4px;
		margin-right: 15px;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.mynews .inter-r-t-r {
		width: 1;
		flex: 1;
		height: 70px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.mynews .inter-r-t-text {
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.mynews .andiostyle {
		width: 100%;
		height: 27px;
		border-radius: 4px;
		padding: 0 15px;
		display: flex;
		background: #FFF;
		flex-direction: row;
		align-items: center;
		margin-top: 10px;
		justify-content: space-between;
	}
	.mynews .badgestyle{
		padding: 1px 4px;
		font-size: 11px;
		color: #FFFFFF;
		position: absolute;
		right: -5px;
		top: -5px;
		background: #C92B2B;
		border-radius: 8px;
	}
	.fbanniu{
		width: 42px;
		height: 42px;
		border-radius: 21px;
		position: fixed;
		right: 20rpx;
		bottom: 80rpx;
		background: #40766E;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		z-index:99
	}
</style>
<template>
	<div class='mynews'>
		
		<!-- 发布动态按钮 -->
		<view class="fbanniu"@click="btnclick">
			<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/fabupyq.png" style="height: 26rpx;" mode="aspectFit"></image>
			<text style="font-size: 10px;color: #FFF;">发布</text>
		</view>
		<!-- <floatbutton :list='list' openIcon='https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/fabupyq.png'
		 background='#40766E' openText='发布' bottom='80' @click='btnclick'></floatbutton> -->
		<u-empty v-if="g.length == 0" text="暂无动态" mode="list"></u-empty>
		<view v-if="g.length > 0" :style="{'width':'100vw','overflow':'hidden','margin-top':Messagecount>0?'60px':'0','height':Messagecount>0?calc('100vh-60px'):'100vh'}">
			<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower" :style="{ height: '100%' }">
				<view class="ftBox" v-for="(x, i) in g" :key="i" @click="godetails(x,i)">
					<view class="jiazu" v-if="x.YearTime!=''">{{x.YearTime}}年</view>
					<view class="interDList">
						<view class="interDList-left">
							<text class="jiazu">{{x.DayTime}}</text>
							<text style="font-size: 14px;color: #333333;margin-left: 5px;">{{x.MonthTime}}月</text>
						</view>
						<view class="interDList-right">
							<view class="inter-r-o" v-if="x.fileType==0">
								{{x.content}}
							</view>
							<view class="inter-r-t wrap" v-if="x.fileType==1"  >
								<view class="inter-r-t-l" @click.stop="previewImage(0,x.files)">
									<image :src="x.files[0]" v-if="x.files.length==1" mode='aspectFill' style="width: 100%;height: 100%;"></image>
									<view v-if="x.files.length==2" v-for="(item, iq) in x.files" :key="iq" :style="{'margin-right':(iq%2 ==0)?'2px':'0',width:'34px','height':'100%'}">
										<image :src="item" mode='aspectFill' style="width: 100%;height: 100%;"></image>
									</view>
									<view style="width: 100%;height: 100%;display: flex;flex-direction: row;" v-if="x.files.length==3">
										<image :src="x.files[0]" mode='aspectFill' style="width: 34px;height: 100%;margin-right: 2px;"></image>
										<view style="width: 34px;height: 100%;display: flex;flex-direction: column;justify-content: space-between;">
											<view v-if="iq!=0" v-for="(item, iq) in x.files" :key="iq" style="width: 34px;height: 34px;">
												<image :src="item" mode='aspectFill' style="width: 100%;height: 100%;"></image>
											</view>
										</view>
									</view>

									<view v-if="x.files.length>3" v-for="(item, iq) in x.files" :key="iq" :style="{'margin-right':(iq%2 ==0)?'2px':'0',width:'34px','height':'34px','margin-bottom':(iq==0||iq==1)?'2px':'0'}">
										<image :src="item" mode='aspectFill' style="width: 100%;height: 100%;"></image>
									</view>
								</view>
								<view class="inter-r-t-r">
									<view class="inter-r-t-text">
										{{x.content}}
									</view>
									<text style="font-size: 11px;color: #BEBEBE;">共{{x.files.length}}张</text>
								</view>
							</view>
							<view class="inter-r-t" v-if="x.fileType==2">
								<view class="inter-r-t-l" style="position: relative;">
									<video :id="'myVideo'+i" :src="x.files[0]" style="width: 70px;height: 70px;" 
									: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(x.files[0],i)">
										<u-icon name="play-circle-o" :size="50" color="#FFF"></u-icon>
									</view>
								</view>
								<view class="inter-r-t-r">
									<view class="inter-r-t-text">
										{{x.content}}
									</view>
								</view>
							</view>
							<view class="inter-r-o" v-if="x.fileType==3">
								<view>
									{{x.content}}
								</view>
								<view class="andiostyle" @click.stop="playVoice(x,i)">
									<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>
					</view>
				</view>

				<u-loadmore :status="status" :load-text="loadText" :font-size="24" :margin-top="20" :margin-bottom="20" bg-color="#FFF" />
			</scroll-view>

		</view>
		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth='gbAuth'></auth>

		</view>
	</div>
</template>

<script>
	const innerAudioContext = uni.createInnerAudioContext();
	import auth from "../../components/auth/index.vue";
	import floatbutton from "./components/com-float-button/com-float-button.vue";
	export default {
		components: {
			auth,
			floatbutton
		},
		data() {
			return {
				pageTitle: "我的动态",
				showAuth: false,
				msg: {
					pageIndex: 1,
					pageSize: 15,
				},
				mainColor: "",
				secondary: '',
				pricecolor: '',
				page_count: 1,
				g: [],
				loading: false,
				status: "loadmore",
				count: 0,
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
				windowWidth: 0,
				list: [{
						name: '文本',
						type: 0,
						url: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/friendwenben.png'
					},
					{
						name: '图文',
						type: 1,
						url: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/friendtuwen.png'
					},
					{
						name: '视频',
						type: 2,
						url: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/friendsp.png'
					},
					{
						name: '语音',
						type: 3,
						url: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/friendyyin.png'
					},
				],
				nowbofo: false,
				Messagecount:0,
				playindex:0,
				controls:false,
			}
		},
		created() {
			
			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;
		},
		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() {
			this.u = uni.getStorageSync("mall_UserInfo");
			if (!this.u) {
				this.u = {
					nickName: "未登录",
					avatarUrl: ""
				};
				this.showAuth = true;
			} else {
				this.init();
				
			}
		},
		onUnload(){
			innerAudioContext.stop();
		},
		methods: {
			init() {
				this.loading = true;
				this.request2({
						url: '/api/AppletEducation/GetMyDynamicList',
						data: this.msg
					},
					res => {
						if (res.resultCode == 1) {
							this.loading = false;
							this.count = res.data.count;
							res.data.pageData.forEach(x => {
								x.playshow = false;
							})
							this.g = this.g.concat(res.data.pageData);
							this.page_count = res.data.pageCount;
							if (this.page_count == 1) {
								this.status = "nomore";
							}
						};
						
					}
				);
			},
			
			btnclick(item) {
				// if (item.type == 2) {
				// 	this.upvideo()
				// } else {
				// 	uni.navigateTo({	
				// 		url: '/pages/friendcircle/release?type=' + item.type
				// 	})
				// 	innerAudioContext.stop();
				// }
				uni.navigateTo({
					url: '/pages/friendcircle/release' 
				})
				innerAudioContext.stop();

			},
			upvideo() {
				let that = this
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera', 'album'],
					success: function(res) {
						console.log(res)
						that.upFile(res.tempFilePath, 1)
						uni.showLoading({
							title: '上传中...'
						})

					},
					fail(err) {
						console.log(err, )
					}
				});
			},
			upFile(filePath, type) {
				let MallBaseId = uni.getStorageSync("mall_UserInfo").MallBaseId ? uni.getStorageSync("mall_UserInfo").MallBaseId :
					1;
				let action = this.host2 + '/api/File/UploadTencent?MallBaseId=' + MallBaseId
				let that = this
				uni.uploadFile({
					url: action,
					filePath: filePath,
					name: 'file',
					formData: {
						user: 'tesdt'
					},
					success: (uploadFileRes) => {
						uni.hideLoading()
						if (uploadFileRes.statusCode == 200) {
							let data = JSON.parse(uploadFileRes.data)
							uni.navigateTo({
								url: '/pages/friendcircle/release?type=2&file=' + data.data
							})
							innerAudioContext.stop();
						}

					},
					fail: function(res) {
						console.log(res)
						wx.showToast({
							title: '上传失败!',
							icon: 'none',
							duration: 1000
						})
					}
				});
			},
			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
				}
			},
			//语音播放
			playVoice(x,i) {
				
				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();
			},
			getsplice(i){
				this.g.splice(i,1)
			},
			lower(e) {
				
				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()
			},
			godetails(x,i){//跳入详情
				uni.navigateTo({
					url: '/pages/friendcircle/mydetails?ID=' + x.id+'&index='+i
				})
				innerAudioContext.stop();
			},
			gomymessage(){//我的动态消息
				innerAudioContext.stop();
				uni.navigateTo({
					url: '/pages/friendcircle/medynamic' 
				})
				
			},
			//图片预览
			previewImage(index, images) {
				uni.previewImage({
					urls: images,
					current: index,
				});
			},
		}
	}
</script>
