<template>
	<view class="new-box">
		<u-tabs class="tabs-box" :list="tabList" height="100" :is-scroll="false"  bar-width="375" bar-height="4" :offset="[5, 106]" :bold="false" active-color="#1890ff" :current="tabIndex" @change="tabChange"></u-tabs>
		<mescroll-body class="new-mescroll u-skeleton" ref="mescrollRef" top="100" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption" >
			<view class="new-list" v-if="newsList && newsList.length > 0">
				<view class="new-list-item " v-for="(item,index) in newsList" :key="index" @tap="goDetail(index)">
					<view class="item-icon-box u-skeleton-circle" :class="item.clicks===0 && tabIndex ==0 ?'unread':''">
						<view v-if="item.level=='urgent'" class="item-icon">
							<view class="iconfont icon-icon_notice"></view>
						</view>
						<view v-else-if="item.level=='warning'" class="item-icon">
							<view class="iconfont icon-gaojing"></view>
						</view>
						<view v-else-if="item.level=='important'" class="item-icon">
							<view class="iconfont icon-alert"></view>
						</view>
						<view v-else class="item-icon bg-info">
							<view class="iconfont icon-xiaoxi"></view>
						</view>
					</view>
					<view class="item-content">
						<view class="item-time u-skeleton-fillet">{{item.createdAt||'-'}}</view>
						<view class="item-title u-line-1 u-skeleton-fillet">{{item.title}}</view>
						<view class="item-content-txt u-line-1 u-skeleton-fillet">{{item.remark||''}}</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<!--引用组件-->
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		data() {
			return {
				newsList:[],
				unreadNewIdList:[],
				loading: true, // 是否显示骨架屏组件
				upOption:{
					page:{
						num : 0 ,
						size : 12 ,
						time : null
					},
					noMoreSize: 4, 
					empty:{
						icon:'https://hcwl-cdn.cdn.bcebos.com/hcapp/iotos/app/iconImg/new.png',
						use : true ,
						tip: '~ 消息列表为空 ~',
					  fixed: true,
						top: "200rpx",
					},
					bgColor:"#fff"
				},
				isToken:false,
				tabList:[{
					name: '我的信息',
					count: 0
				}, {
					name: '系统公告',
					count: 0
				}],
				tabIndex: 0
			}
		},
		mixins:[MescrollMixin],
		onShow() {
			console.log("消息页show")
			this.isToken = uni.getStorageSync('token');
			if(this.isToken){
				this.mescroll.resetUpScroll();
			}
		},
		methods:{
			tabChange(index) {
				this.tabIndex = index;
				this.mescroll.resetUpScroll();
			},
			/*上拉加载的回调*/
			upCallback(page) {
				console.log("查询数据",page)
				this.newsList = []; //追加新数据
				this.mescroll.endBySize(0, 0); // 推荐
				this.loading = false;
				
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				let obj = {
					page:pageNum,
					limit:pageSize,
				}
				if (this.isToken) {
					if(this.tabIndex==0){
						this.$api.newApi.getNewsList(obj).then((res)=>{
							console.log("当前获取到消息",res)
							if (res.data.list && res.data.list.length>0) {
								// 接口返回的当前页数据列表 (数组)
								let curPageData = res.data.list; 
								// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
								let curPageLen = curPageData && curPageData.length; 
								//设置列表数据
								console.log(curPageLen,res.data.total);
								if(pageNum == 1){
									this.newsList = []; //如果是第一页需手动置空列表
									this.getUnreadNewNum();
								} 
								this.newsList = this.newsList.concat(curPageData); //追加新数据
								this.mescroll.endBySize(curPageLen, res.data.total); // 推荐
								this.loading = false;
								console.log("newsList",this.newsList)
							} else{
								this.newsList = [];
								this.mescroll.endErr();
								this.mescroll.showEmpty();
								this.loading = false;
							}
						}).catch(()=>{
							this.$u.toast('服务器开小差了呢，请您稍后再试')
							this.newsList = [];
							//联网失败, 结束加载
							this.mescroll.endErr();
							this.mescroll.showEmpty();
							this.loading = false;
						})
					}else{
						this.$api.newApi.getNoticeList(obj).then((res)=>{
							console.log("当前获取到公告",res)
							if (res.data.list && res.data.list.length>0) {
								// 接口返回的当前页数据列表 (数组)
								let curPageData = res.data.list; 
								// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
								let curPageLen = curPageData && curPageData.length; 
								//设置列表数据
								console.log(curPageLen,res.data.total);
								if(pageNum == 1){
									this.newsList = []; //如果是第一页需手动置空列表
									this.getUnreadNewNum();
								} 
								this.newsList = this.newsList.concat(curPageData); //追加新数据
								this.mescroll.endBySize(curPageLen, res.data.total); // 推荐
								this.loading = false;
								console.log("newsList",this.newsList)
							} else{
								this.newsList = [];
								this.mescroll.endErr();
								this.mescroll.showEmpty();
								this.loading = false;
							}
						}).catch(()=>{
							this.$u.toast('服务器开小差了呢，请您稍后再试')
							this.newsList = [];
							//联网失败, 结束加载
							this.mescroll.endErr();
							this.mescroll.showEmpty();
							this.loading = false;
						})
					}
				}else{
					this.newsList = [];
					this.mescroll.endErr();
					this.mescroll.showEmpty();
					this.loading = false;
				}
				
			},
			// 跳转消息详情
			goDetail(index){
				console.log("当前点击消息",this.newsList[index])
				let obj = JSON.stringify(this.newsList[index]);
				uni.navigateTo({
					url: '../new/detail?obj=' + encodeURIComponent(obj)
				})
			},
			getUnreadNewNum(){
				this.$api.newApi.getNewsCount({}).then((res)=>{
					console.log("当前获取未读消息数量",res)
					if(res.code == 0){
						if(res.data.letterCount){
							uni.showTabBarRedDot({
							        index: 3
							})
						}else{
							uni.hideTabBarRedDot({
							        index: 3
							})
						}
						this.tabList[0].count = res.data.letterCount;
						// this.tabList[1].count = res.data.publicCount;
					}else{
						uni.showToast({
						    title: res.msg,
								icon:"none",
						    duration: 2000
						});
					}
				}).catch(()=>{
					this.$u.toast('服务器开小差了呢，请您稍后再试')
				})
			},
			// getUnreadNewIdList(){
			// 	this.$api.getUnreadNewIdList({}).then((res)=>{
			// 		console.log("当前获取未读消息id列表",res)
			// 		if (res.data.ids && res.data.ids.length>0) {
			// 			this.unreadNewIdList = res.data.ids;
			// 		} else{
			// 			this.unreadNewIdList = [];
			// 		}
			// 	}).catch(()=>{
			// 	})
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.bg-error{
		background-color: $u-type-error;
	}
	.bg-warning{
		background-color: $u-type-warning;
	}
	.bg-info{
		background-color: $u-type-info;
	}
	.tabs-box{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
	}
	.new-box{
		height: 100%;
		.new-list{
			
			.new-list-item{
				display: flex;
				align-items: center;
				padding: 15rpx 30rpx;
				border-bottom: 1px solid #f2f2f2;
				.item-icon-box{
					position: relative;
					margin-right: 20rpx;
					&.unread::after{
						content: '';
						position: absolute;
						top: -15rpx;
						left: -15rpx;
						width: 16rpx;
						height: 16rpx;
						border-radius: 50%;
						border: 1px solid #fff;
						background-color: red;
					}
					.item-icon{
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						box-shadow: 2px 2px 2px -2px rgba(159,159,159,0.66);
						-webkit-box-shadow: 2px 2px 2px -2px rgba(159,159,159,0.66);
						-moz-box-shadow: 2px 2px 2px -2px rgba(159,159,159,0.66);
						background: linear-gradient(0deg, #C0E8FF 0%, #FFFFFF 64%);
						.iconfont{
							// color: #fff;
							font-size: 46rpx;
							background-image: -webkit-linear-gradient(90deg, #3BBCFF, #006CFF);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}
					}
				}
				
				.item-content{
					flex: 1;
					width: 0;
					height: 100rpx;
					display: flex;
					flex-direction: column;
					// justify-content: space-around;
					.item-time{
						display: flex;
						justify-content: flex-end;
						color: $u-tips-color;
						font-size: 24rpx;
						line-height: 24rpx;
					}
					.item-title{
						display: flex;
						align-items: center;
						font-weight: bold;
						font-size: 30rpx;
						line-height: 36rpx;
						width: 560rpx;
						margin-bottom: 5rpx;
					}
					
					.item-content-txt{
						width: 100%;
						color: $u-tips-color;
						font-size: 24rpx;
					}
				}
			}
			
		}
	}
	
</style>