<template>
	<!-- 公告 消息 提示 页面 -->
	<view class="notice">
		<!-- <view class="head">
			<view class="head_l">消息中心</view> 
		</view> -->
		<view class="toptabbar flex">
			<view class="toptabbaritem flex1" :class="{active:navactive==0}" @tap="tagglenav(0)">
				<view class="navnames">本店消息</view>
			</view>
			<view class="toptabbaritem flex1" :class="{active:navactive==1}" @tap="tagglenav(1)">
				<view class="navnames">平台消息</view>
			</view>
		</view>
	  <block v-if="navactive==0" v-for="(item,index) of list" :key="index">
		<view class="list" @tap="todetailes"> 
			<view class="msgboxs">
				<view class="list_l twoline">{{item.title}} </view> 
				<view class="list_l">{{item.msg_text.content}}</view> 
			</view>
			<view class="list_03">
				<view class="list_l">{{item.day}} {{item.time}}</view> 
			</view>
		</view>
	  </block>	
	  
	  <block v-if="navactive==1" v-for="(item,index) of listow" :key="index">
	  		<view class="list" @tap="todetailes"> 
	  			<view class="msgboxs">
	  				<view class="list_l twoline">{{item.title}} </view> 
	  				<view class="list_l">{{item.msg_text.content}}</view> 
	  			</view>
	  			<view class="list_03">
	  				<view class="list_l">{{item.day}} {{item.time}}</view> 
	  			</view>
	  		</view>
	  </block>	
	  
	  <pageScrollTo v-if="isshowtop" ></pageScrollTo>
	  <!-- 返回顶部 -->
	</view>
</template>

<script>
	import {storeAdvices,geTPublicadvices} from "@/utils/api/api.js";
	import pageScrollTo from "@/components/pageScrollTo/pageScrollTo.vue"
	export default {
		components:{
			pageScrollTo
		},
		data() {
			return {
				navactive:0,//tab的选中  0是添加  1是分类管理
				list:[],
				listow:[],
				page:0,//分页
				pages:0,
				istoall:true,//瀑布流开关
				istoalls:true,//瀑布流开关
				isshowtop:false,
			};
		},
		onLoad() {
			this.storeAdvicesfun();
			this.geTPublicadvicesfun();
		},
		//下拉刷新
		onPullDownRefresh(){
			this.list=[];
			this.listow=[];
			this.page=0;//分页
			this.pages=0;//分页
			this.istoall=true;//瀑布流开关
			this.istoalls=true;//瀑布流开关
			this.storeAdvicesfun();
			this.geTPublicadvicesfun();
			// uni.stopPullDownRefresh();//结束下拉刷新
		},
		//处理瀑布流
		onReachBottom() {
			
			if(this.istoall){
				
				this.storeAdvicesfun();
			};
			if(this.istoalls){
				
				this.geTPublicadvicesfun();
			}
		},
		//监听滚动
		onPageScroll(e){
			//console.log(e.scrollTop);
			//处理返回顶部
			if(e.scrollTop>400){
				this.isshowtop = true;
			}else{
				this.isshowtop = false;
			}
		},
		methods:{
			//tab切换
			tagglenav(numbers){
				this.navactive = numbers;
			},
			//查看消息详情 处理消息
			todetailes(){
				//做不了 ~~~
				
				// if(true){//type==1
				// 	uni.navigateTo({
				// 		url:"/pages/order/detail/detail",
				// 	})
				// }
				
			},
			// 本店消息
			async storeAdvicesfun(){
				this.page++;
				let res = await storeAdvices({
					page:this.page,
				});
				uni.stopPullDownRefresh();//结束下拉刷新
				if(res.code==0){

					if(res.data){
						if(res.data.length!=0){
							this.list = [...this.list,...res.data]
						}else{
							this.istoall = false;
							this.$api.msg("没有更多了哦~");
						}
					}else{
						this.istoall = false;
						this.$api.msg("没有更多了哦~");
					}
				}else{
					this.$api.msg(res.msg);
				}
			},
			// 平台消息
			async geTPublicadvicesfun(){
				this.pages++;
				let res = await geTPublicadvices({
					page:this.pages,
				});
				uni.stopPullDownRefresh();//结束下拉刷新
				if(res.code==0){
			
					if(res.data){
						if(res.data.length!=0){
							this.listow = [...this.listow,...res.data]
						}else{
							this.istoalls = false;
							this.$api.msg("没有更多了哦~");
						}
					}else{
						this.istoalls = false;
						this.$api.msg("没有更多了哦~");
					}
				}else{
					this.$api.msg(res.msg);
				}
			}
			
		}
	}
</script>

<style lang="scss">
	.toptabbar{
		width: 100%;
		height: 88upx;
		background: rgba(255,255,255,1);
		// padding: 0 100upx;
		box-sizing: border-box;
		line-height: 88upx;
		.toptabbaritem{
			height: 88upx;
			line-height: 88upx;
			text-align: center;
			.navnames{
				display: inline-block;
			}
		}
		.toptabbaritem:nth-child(2){
			border-left:1px solid rgba(245,241,241,1);
		}
		.toptabbaritem.active .navnames{
			border-bottom: 2px solid $base_color;
		}
	}

.notice{
	.msgboxs{
		.list_l{
			margin-bottom: 10upx;
		}
	}
	.head{display: flex;background-color:$base_color ;justify-content: space-between;padding: 50upx 24upx}
	.head_l{color: #fff;font-size: 40upx;}
	.head_r{background-color: #fff;color: #E2481D;height: 60upx;line-height: 60upx;width: 200upx;border-radius: 40upx;text-align: center;font-size: 32upx;}
	.list{margin: 20upx; background-color: #fff;padding: 20upx;}
	.list_01{color: #C1C1C1;padding-bottom: 20upx;}
	.list_02{display: flex;justify-content: space-between;font-size: 28upx;padding-bottom: 20upx;}
	.list_03{color: #C1C1C1;display: flex;justify-content: space-between;}
}
</style>
