<template>
	<view class="attention">
		<view class="attention-h">
			<view class="nav-bar" :style="{'height': navHeight}">
				<view style="" class="nav_max"  :style="{'width': titleWidth}">
					<view class="attention-scarch flex al-item-center" @click="search">
						<view class="input_box flex">
						  <text  class="iconfont icon-search" style="font-size: 58rpx;"></text>	
						  <!-- <input disabled="true" placeholder="大家都在搜..." type="text"  v-model="searchVlaue"  /> -->
						</view>
					</view>
					<view class="flex flex1 j-between" style="padding: 0 66rpx 0 60rpx;">
						<view class="item position-r" @tap="goto" data-url='/diary/attention/attention' data-opentype="redirectTo">
							<text class="txt n-tv">关注</text>
						</view>
						<view class="item position-r" @tap="goto" data-url='/diary/evernote/evernote' data-opentype="redirectTo">
							<text class="txt n-tv">笔记</text>
						</view>
						<view class="item position-r" @tap="goto" data-url='/diary/video/video' data-opentype="redirectTo">
							<text class="txt n-tv">视频</text>
						</view>
						<view class="item position-r"  @tap="goto" data-url='/diary/live/live' data-opentype="redirectTo">
							<text class="txt font-w">直播</text>
							<text class="heng position-a"></text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" :style="{'height': hearHeight + 'px'}"></view>


		<view class="add" :style="{'background-color': t('color1')}" @click="addShow= true"></view>
		<view class="add_box" @click="addShow = false" v-if="addShow">
			<view class="content" @click.stop="">
				<view class="item" @click="toAdd('diary')">
				发布笔记
				</view>
				<view class="item" @click="toAdd('video')">
				发布视频 
				</view>
				<view class="item" @click="addShow= false">
				取消
				</view>
			</view>
		</view>
	<!-- {{JSON.stringify(datalist)}} -->
	<view style="padding: 20rpx;">
		<dp-liveroom :data='datalist'></dp-liveroom>
	</view>
		<loading v-if="loading"></loading>
		<nomore v-if="!isData"></nomore>
		<dp-tabbar :opt="opt" @getmenuindex="getmenuindex"></dp-tabbar>
		<view class="tsinfo" v-if="!isNote">
			<!-- :style="{'background-image': 'url('+ event_rul +'/static/img/static/icon/9d3ab5fa33dedcde23ba05c8e9cdf999.png)'}" -->
			<text>发布笔记,让大家开始认识你吧</text>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {	
			return{
				navHeight: 0,
				titleWidth: 0,
				opt:{},
				hearHeight: 0,
				pagenum:1,
				isNote:1,
				loading:false,
				isload: false,
				nomore:false,
				nodata:false,
				datalist:[],

				addShow:false,
				animation:'',
				
				event_rul: app.globalData.event_url,
			}
		},
		onLoad(opt) {
			this.opt = app.getopts(opt);
		   let elemetn
			// #ifdef MP-WEIXIN
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			uni.getSystemInfo({
				success: res => {
					elemetn = res.statusBarHeight
				}
			})
			this.titleWidth = menuButtonInfo.left + 'px'
			 // #endif
			// #ifdef MP-WEIXIN
			this.navHeight = ((menuButtonInfo.bottom + menuButtonInfo.top) - elemetn) + 'px'
			// console.log(menuButtonInfo,elemetn, 'navheight')
			// #endif
			 // #ifndef MP 
			this.navHeight = 45 + 'px'
			this.titleWidth = '100vw'
			 // #endif 
			 
			
			 
		  this.getList()
			

		},
		onShow() {
			this.animation = uni.createAnimation({
			  transformOrigin: "50% 0 50%",
			  duration: 600,
			  timingFunction: "linear",
			  delay: 0
			})
			setTimeout(()=>{
				this.anima()
			},1000)
		},
		onReady() {
			let query = uni.createSelectorQuery().in(this)
			query.select('.attention-h').boundingClientRect()
			query.exec(res => {
				this.hearHeight = res[0].height
			})
		},
		onReachBottom(e) {
		if (!this.nodata && !this.nomore) {
		  this.pagenum = this.pagenum + 1;
					 this.getList()
		}

		},
	
		onPageScroll(e) {
			this.pageScroll = e.scrollTop
		},
		methods:{
			getList(){
				
			let that = this;
			var page = that.pagenum;
			that.loading = true;
			that.nomore = false;
			that.nodata = false;
			app.post('ApiZhiwei/liveList', {pagenum: page}, function (res) {
							  				that.loading = false;
			  var data = res.list;
			  that.isNote = res.isNote;
			  if (page == 1) {
				  
			    that.datalist =data;
			    if (data.length == 0) {
			      that.nodata = true;
			    }
			  }else{
			    if (data.length == 0) {
			      that.nomore = true;
			    } else {
			      var datalist = data;
			      var newdata = datalist.concat(data);
			      that.datalist = newdata;
			    }
			  }
							  				that.loaded();
			});
			
		
			},
			anima(){
				this.animation.translateX(4).step()
				this.animation.translateX(-4).step()
				setTimeout(()=>{
					this.anima()
				},1000)
			},
			search() {
				uni.navigateTo({
					url:'/diary/search/search?keyword='+this.searchVlaue
				})
			},
			
			toAdd(e){
				this.addShow = false;
				
				uni.navigateTo({
					url:'/diary/issue/issue?type='+e
				})
			},
			addZero(num) {
			    return num < 10 ? '0' + num : num;
			},
			getTimes(time) {
				let times = new Date(time*1000)
				let year = times.getFullYear()
				let month = this.addZero(times.getMonth() + 1)
				let date = this.addZero(times.getDate())
				let hoursys = this.addZero(times.getHours())
				let minutesys = this.addZero(times.getMinutes())
				let secondsys = this.addZero(times.getSeconds())
				
				let dateNow = new Date().getTime();  // 获取当前时间
				let timeDiff = dateNow - (time * 1000);  //时间差的毫秒数
				let days = Math.floor(timeDiff / (24 * 3600 * 1000)); // 计算出天数
				let leavel1 = timeDiff % (24 * 3600 * 1000); // 计算天数后剩余的时间
				let hours = Math.floor(leavel1 / (3600 * 1000)); // 计算天数后剩余的小时数
				let leavel2 = timeDiff % (3600 * 1000); // 计算剩余小时后剩余的毫秒数
				let minutes = Math.floor(leavel2 / (60 * 1000));
				// console.log(days, hours,minutes, 'mmmmmmmmmmm999999999999',times)
				return  days > 0 ? year +'.'+ month +'.'+ date + ' ' +hoursys +':' + minutesys : (24 > hours  &&  hours > 0) ?  hours + '小时前' : minutes > 0 ? minutes + '分钟前'  : '刚刚'
				
			},
		}
	}
</script>

<style lang="scss">
	.tsinfo{
		    position: fixed;
		    right: 140rpx;
		    top: 66%;
			z-index: 10;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			height: 76rpx;
			border-radius: 8rpx;
			background-size: 100%;
			background-color: rgba(255,255,255, .8);
			border: 2rpx solid #0A5D3B;
			animation: tsinfo 1.2s infinite;
		text{
			position: relative;
			padding:0 16rpx;
			color: #0A5D3B;
			font-size: 26rpx;
			letter-spacing:2rpx;
		}	

	}
	.tsinfo::after {
		content: '';
		width: 10rpx;
		height: 10rpx;
		border-top: 2rpx solid #0A5D3B;
		border-right: 2rpx solid #0A5D3B;
		background-color: rgba(255,255,255, .8);
		position: absolute;
		top: 50%;
		right: -8rpx;
		transform: translateY(-50%) rotate(45deg);
	}
	.add {
	z-index: 10;
	width: 100rpx;
	height: 100rpx;
	line-height: 100rpx;
	text-align: center;
	border-radius: 28rpx;
	border:6rpx solid #fff;
	background-image: linear-gradient(to bottom right, #00AE68, #096742);
	position: fixed;
	right: 20rpx;
	top: 65%;
	}
	.add:after {
		content: '';
		width: 50%;
		height: 4rpx;
		background-color: #fff;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.add:before {
		content: '';
		width: 4rpx;
		height: 50%;
		background-color: #fff;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.add_box{
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		background-color: rgba($color: #000000, $alpha: 0.4);
		z-index: 9999999;
	
		.content{
			background-color: #fff;
			padding-bottom: 20rpx;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			.item{
				padding: 30rpx;
				// border-bottom: 1px solid red;
			}
		}
	}
	.attention {
	
		.color-gray {
			color: #999;
		}
		.attention-h {
			width: 100%;
			background-color: #fff;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 15;
		}
		.nav-bar {
			display: flex;
			align-items: flex-end;
			
			.nav_max{
				display: flex;
				justify-content: space-between;
				margin-bottom: 4px;
				height: 32px;
				
			   .item{
				   display: flex;
				   align-items: center;
				   justify-content: center;
				   flex-direction: column;
				   font-size: 30rpx;
				   // font-weight: bold;
				   // padding: 0 20rpx;
				   .txt{
					   font-size: 32rpx;
					   color: #333333;
					   z-index: 2;
				   }
				   .n-tv {
					   color: #999;
				   }
				   .heng{
					   // z-index: 1;
					   // margin-top: 4rpx;
					   bottom: 0;
					   width: 44rpx;
					   border-radius: 4rpx;
					   height: 6rpx;
					   background-color: #0A5D3B;
				   }
			   }
			}
		}
	
		.attention-scarch {
			
			padding-left: 4rpx;
		}
	
		
	
	}
	@keyframes tsinfo {
		0% {transform:  translateX(8rpx);}
		50% {transform:  translateX(-8rpx);}
		100% {transform: translateX(8rpx);}
	}
</style>
