<template>
	<view class="container">
	
	<view class="attention-h">
		<view class="nav-bar" :style="{'height': navHeight}">
			<view style="width: 70%; margin-bottom:4px; height: 32px; justify-content: space-around;" class="nav_max">
				<view class="attention-scarch flex al-item-center">
					<view class="input_box"  @click="goto" data-url='/diary/search/search'>
					  <text  class="iconfont icon-search"></text>	
					 <!-- <input disabled=""  placeholder="大家都在搜..." type="text" /> -->
					</view>
				</view>
				<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/index/index' data-opentype="redirectTo">
					<text class="txt">推荐</text>
					<text class="heng position-a"></text>
				</view>
				<view class="item position-r" @tap="goto" data-url='/diary/live/live' data-opentype="redirectTo">
					<text class="txt n-tv">直播</text>
					<!-- <text class="heng"></text> -->
				</view>
			</view>
		</view>

	</view>

		<view class="" :style="{'height': hearHeight + 'px'}"></view>
		<view class="swiper_box">
			<swiper style="width: 100%; height: 100%;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item @click="goto" :data-url='item.page_url'  v-for="(item,index) in info.banner_list" :key='index'> 
					<image :src="item.pic_url" mode=""></image>
				</swiper-item>
			
			</swiper>
	
		</view>
		
		<view class="nav_box">
			<!-- <view class="item">
				<text class="iconfont icon-icon--"></text>
				<text>烹饪教程</text>
			</view>
			<view class="item">
				<text style="background-color: #efcb6f;" class="iconfont icon-shucai"></text>
				<text>怎么选菜</text>
			</view> -->
			<view class="item" @click="toCenter(item.id)" v-for="(item,index) in info.top_tab" :key='index'>
				<text :style="{'background-color':colors[index%3].color}"  :class="'iconfont '+colors[index%3].icofont "></text>
				
				<text class="txt">{{item.topic_name}}</text>
			</view>
		</view>
		<view class="info_box">
			<view class="title_box">
				<view class="left">
					热门话题
				</view>
				<view class="right" style="display: flex; align-items: center;" @click="goto" data-url='/diary/topic/plaza'>
				<text>话题广场</text>  <text class="iconfont icon-arrow-right"></text>
				</view>
			</view>
			<view class="scroll_box">
				<scroll-view scroll-x="true" >
				<view style="display: flex;">
					<view class="item" @click="toCenter(item.id)" v-for="(item,index) in info.top_hot" :key='index'>
						<view class="top">
							<image :src="item.topic_pic" mode=""></image>
						</view>
						<view class="bot">
							<text class="icon">#</text>
							<text class="txt">{{item.topic_name}}</text>
						</view>
					</view>
				</view>
				</scroll-view>
			</view>
			<view class="list_box">
				<view class="nav_max">
					<view class="item" @click="recTypeFn(1)">
						<text class="txt">笔记</text>
						<text class="heng" v-if="recType == 1"></text>
						<text v-else style="height:8rpx;width:1rpx; margin-top:-10rpx;"></text>
					</view>
					<view class="item" @click="recTypeFn(2)">
						<text class="txt">视频</text>
						<text class="heng" v-if="recType == 2"></text>
						<text v-else style="height:8rpx;width:1rpx; margin-top:-10rpx;"></text>
					</view>
				</view>
				<view class="content">
					
					<view class="nav_min">
						<view class="item " @click="recType_filedFn(1)" :class="{'itemz':recType_filed == 1}">
							综合
						</view>
						<view class="item" @click="recType_filedFn(2)"  :class="{'itemz':recType_filed == 2}">
							最热
						</view>
						<view class="item" @click="recType_filedFn(3)"  :class="{'itemz':recType_filed == 3}">
							最新
						</view>
					</view>
					
					<diary-falls-list @listZanFn='listZanFn' :datalist='datalist' v-if="datalist && datalist.length>0" :navType="recType == 2 ? 'video' : ''"> </diary-falls-list>
					
					<nomore text="没有更多内容了" v-if="nomore"></nomore>
					<nodata text="没有查找到相关内容" v-if="nodata"></nodata>
					
				</view>
			</view>
		</view>
		<view :style="{'background-color': t('color1')}" class="add" @click=" addFn">
		</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>
		<dp-tabbar></dp-tabbar>
		<view class="tsinfo"  v-show='!info.isNote' >
			<!-- :style="{'background-image': 'url('+ event_rul +'/static/img/static/icon/9d3ab5fa33dedcde23ba05c8e9cdf999.png)'}" -->
			<text>发布笔记,让大家开始认识你吧</text>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	export default{
		onLoad() {
			let elemetn
			// #ifdef MP-WEIXIN
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			uni.getSystemInfo({
				success: res => {
					elemetn = res.statusBarHeight
				}
			})
			 // #endif
			// #ifdef MP-WEIXIN
			this.navHeight = ((menuButtonInfo.bottom + menuButtonInfo.top) - elemetn) + 'px'
			// console.log(menuButtonInfo,elemetn, 'navheight')
			// #endif
			 // #ifndef MP 
			this.navHeight = 60 + 'px'
			 // #endif 
			this.getRecList	()
		
		},
		onReady() {
			let query = uni.createSelectorQuery().in(this)
			query.select('.attention-h').boundingClientRect()
			query.exec(res => {
				this.hearHeight = res[0].height
			})
		},
		onShow(){
		this.getInfo()
			
			 
		},
		data(){
			return{
				
				hearHeight:0,
				navHeight: 0,
				colors:[
					{
					color:'#dbde5d',
					icofont:'icon-icon--',
				},
				{
					color:'#f0cd6e',
					icofont:'icon-shucai',
				},
				{
					color:'#fcb84c',
					icofont:'icon-new',
				},
				],
				addShow:false,
				recType:1,
				recType_filed:1,
				info:{
					isNote:1,
				},
				pagenum:1,
				keyword:'',
				loading:false,
				isload: false,
				nomore:false,
				nodata:false,
				datalist:[],
				
				event_rul: app.globalData.event_url,
			}
		},
		 onReachBottom: function () {
		   if (!this.nodata && !this.nomore) {
		     this.pagenum = this.pagenum + 1;
		 	 this.getRecList()
		   }
		 },
		methods:{

				listZanFn(e){
				this.datalist[e.index].iszan = e.show;
				if(this.datalist[e.index].binfo){
this.datalist[e.index].zan_num = e.num;
}else{
this.datalist[e.index].zan = e.num;
}
			
			},
			addFn(){
				if(app.globalData.mid == 0){
					uni.showModal({
						title: '提示',
						content: '发布需要先登录',
						success: function (res) {
							if (res.confirm) {
								// console.log('用户点击确定');
								// uni.navigateTo({
								// 	url:'/pages/index/login',
								// })
								app.goto('/pages/index/login')
								console.log(app)
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}else{
					this.addShow= true
				
				}
			},
			searchFn(){
				uni.navigateTo({
					url:'/diary/search/search?keyword='+this.keyword
				})
			},
			toAdd(e){
				this.addShow = false;
				
				uni.navigateTo({
					url:'/diary/issue/issue?type='+e
				})
			},
			recType_filedFn(e){
				this.recType_filed = e;
				this.resetList();
			},
			recTypeFn(e){
				this.recType = e;
				this.resetList(0)
			},
			resetList(){
				this.pagenum = 1;
				this.getRecList()
				
			},
			toCenter(id){
		 		uni.navigateTo({
					url:'/diary/topic/topic?id='+id
				})
			},
			getRecList() {
				let that = this;
			   var page = that.pagenum;
				  			that.loading = true;
				  			that.nomore = false;
				  			that.nodata = false;
			   app.get('ApiZhiwei/appNotVideoListIndex', {page: page,type_field:this.recType_filed,type:this.recType}, function (res) {
				  				that.loading = false;
			     var data = res.data;
			     if (page == 1) {
			       that.datalist = data;
			       if (data.length == 0) {
			         that.nodata = true;
			       }
			     }else{
			       if (data.length == 0) {
			         that.nomore = true;
			       } else {
			         var datalist = that.datalist;
			         var newdata = datalist.concat(data);
			         that.datalist = newdata;
			       }
			     }
				  				that.loaded();
			   });
			 },
			getInfo(){
				app.post('ApiZhiwei/appIndex',{},(res)=>{
					this.info = res.data
				})
			},
			
		},
	}
</script>

<style lang="scss">
	.tsinfo{
		    position: fixed;
		    right: 140rpx;
		    top: 51%;
			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);
	}
	
	.nav-bar{
		display: flex;
		align-items: flex-end;
		z-index:9;
	}
	.attention-h {
		width: 100%;
		background-color: #fff;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 3;
	}

	.add {
		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: 50%;
	}
	.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;
			}
		}
	}
	.list_box{
	.content{
		padding: 20rpx;
		margin-top: 20rpx;
		background-color: #f8f9fa;
		.nav_min{
			display: flex;
			margin-bottom: 20rpx;
			// padding: 2;
			.item{
				margin-right: 20rpx;
			}
			.itemz{
				font-weight: bold;
			}
		}
	}
	}
	.nav_max{
		display: flex;
		justify-content: space-around;
		// 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;
			   
		   }
	   }
	}
	
	.info_box{
		.scroll_box{
			padding: 20rpx;
			.item{
				display: flex;
				
                flex-direction: column;
				margin-right: 20rpx;
				width: 300rpx;
				.top{
					width: 300rpx;
					height: 160rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.bot{
					font-size: 30rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 20rpx;
					.icon{
						width: 40rpx;
						height: 40rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 40rpx;
						font-size: 26rpx;
						background-color: #efbe71;
						color: #fff;
					}
					.txt{
						width: 200rpx;
						  overflow: hidden; /*超出长度的文字隐藏*/
						           text-overflow:ellipsis;/*文字隐藏以后添加省略号*/
					            white-space: nowrap; /*强制不换行*/
					}
				}
				
			}
		}
.title_box{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
	.left{
		font-size: 34rpx;
		font-weight: bold;
	}
	.right{
		color: #999;
		.iconfont{
			// margin-top: 4rpx;
		}
	
	}
}		
	}
	.nav_box{
		display: flex;
	    
		justify-content: space-around;
		.item{
			width: 33%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			     white-space: nowrap;      /*超出的空白区域不换行*/
			        overflow: hidden;         /*超出隐藏*/
			        text-overflow: ellipsis;  /*文本超出显示省略号*/
			.iconfont {
				width: 80rpx;
				background-color: #d9dc5d;
				border-radius: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 80rpx;
				font-size: 56rpx;
				color: #fff;
				margin-bottom: 14rpx;
			}
			.txt{
				width: 100%;
				text-align: center;
				white-space: nowrap;      /*超出的空白区域不换行*/
				   overflow: hidden;         /*超出隐藏*/
				   text-overflow: ellipsis;  /*文本超出显示省略号*/
			}
		}
	}
	.swiper_box{
		width: 100%;
		height: 280rpx;
		margin-bottom: 20rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	
	.input_box{
		display: flex;
	
		.iconfont{
			font-size: 50rpx;
		}
		input{
			flex: 1;
		}
	
	}
	.container{
		background-color: #fff;
		min-height: 100vh;
	}
	
	@keyframes tsinfo {
		0% {transform:  translateX(8rpx);}
		50% {transform:  translateX(-8rpx);}
		100% {transform: translateX(8rpx);}
	}
</style>
