<template>
	<div class="scheduleChat">
		<div class="m-header">
		<!-- <p>日程提醒<span class="right1" @click="letSmall">—</span></p> -->
		<p class="yiwei">
			<!-- <span :class="{islook:isread==1}" @click="readMe(1)">未读</span>
			<span :class="{islook:isread==2}" @click="readMe(2)">已读</span> -->
				<span>全部提醒</span>
			<img src="../../assets/chat/all.png" class="allImg">
		</p>
		</div>
		<div class="m-body">
			<p v-if="isEmty" class="isEmty">暂无日程提醒</p>
			<ul v-loading="loading">
				<li v-for="item in list">
					<div class="right-m">
						<p><span v-if="item.date=='-1'">已过期</span>
							<img src="../../assets/chat/noread.png" class="isRead" v-if="item.status==1">
						</p>
						<p class="d-content">{{item.content}}</p>
						<p>{{item.remindTime}}</p>
					</div>
				</li>
				<div v-infinite-scroll="loadMore"
				infinite-scroll-disabled="busy"
				style="text-align:center;">
                 <span v-if="!isEmty">{{isLoad}}</span>
     		  </div>
			</ul>
		</div>
	</div>
</template>

<script>
  import Vue from 'vue'
  import infiniteScroll from 'vue-infinite-scroll'
  Vue.use(infiniteScroll)
	import { getApi, postApi,getMessage} from "../../api/commonApi"
	export default {
		name: 'scheduleChat',

		data() {
			return {
					isread:'1',
					isEmty:false,
					list:[],
					loading:false,
					isLoad:'....加载中',
						page: '1',
						busy: false,//是否正在加载过程中
						totalPage:''
			}
		},
		　created() {
			this.getList()
		},
		watch:{
			isread(val){
				this.page=1
				this.list=[]
				this.getList()
			}
		},
		methods: {
			getList(){
				let that = this;
				that.loading=true
 				getApi('/system/schedule/msg/list', {
 					userId:localStorage.getItem('userId'),//用户id【必传】
 					status:that.isread,// 1.未读 2.已读【必传】
 					page:that.page,//页码【可选】
 					limit:'10',//每页条数【可选】
 				}, function(data) {
 					// that.list=data.list
					that.totalPage=data.page.totalPage
 					for(var i=0;i<data.page.list.length;i++){
						that.list.push(data.page.list[i])
					}
 					if(that.list.length==0){
 						that.isEmty=true
 						that.busy=false
 					}else{
 						that.isEmty=false
 						that.busy=false
 					}
 					that.loading=false
 				}, function(data) {});

			},
			//缩小窗口
			letSmall(){
				this.$emit('isSmall',true)
			},
			//已读未读
			readMe(index){
				this.isread=index
			},
					//加载更多
			loadMore() {


				//官方示例中延迟了1秒，防止滚动条滚动时的频繁请求数据
				setTimeout(() => {
					this.page++
					if(this.page>this.totalPage){

						this.isLoad='没有更多了....'
					}else{
						this.busy = true;
						this.getList()
					}
					//这里请求接口去拿数据，实际应该是调用一个请求数据的方法
				}, 1500);
			},
		}
	}
</script>

<style scoped>
	@import "../wechat/wechat.css";
	@import "../wechat/scheduleChat.css";
</style>
<style>

</style>
