<template>
<div>
    <header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">就餐记录</h1>
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		</header>
		<div class="mui-content">
			<ul class="mui-table-view vongi-jy-ul">
				<li class="mui-table-view-cell" v-for="item,i in recordList">
					<router-link :to="{name:'XsyMealInfo',query:{id:item.id}}" class="mui-navigate-right">
					
						<div class="mui-media-body">
							{{item.categoryN}}
							<p class='mui-ellipsis'>{{item.recordTime}}</p>
						</div>
						<span>{{item.categoryAmount}}</span>
					 </router-link>
				</li>
				 
			</ul>
			<NullList :remark="'暂无就餐记录'" v-if="!recordList.length"></NullList>
			
		</div>
		<loading :visible="isLoading"></loading>
</div>
</template>


<script>
	import * as API from '@/apis-xsy/meal'
	 

	import  Common from '$project/components/Common.vue'
 	import Loading from '$project/components/Loading.vue'
	import TopHeader from '$project/components/TopHeader.vue'
	import NullList from '$project/components/NullList.vue'
	import isReachBottom from '$project/utils/isReachBottom'
	
 

	export default {
		name: '',
		components: {
			Common,
			Loading,
			TopHeader,NullList
		},
		 
		data() {
			return { 
				pageTitle: '调班审核',
			 
				isLoading: false,
							
				listForm: {
				 
					pageIndex: 1,
					pageSize: 10,
					totalPage: 1,
				},
				recordList: [],
				 
			}
		},
		created() {
		 
			
		},
		methods: {
			 
			 //获取列表
			 getList() {
			 	this.isLoading = true;
			 	API.personDiningList(this.listForm).then(response => {
			 		if (response) {
					 
			 			if (this.listForm.pageIndex == 1) {
			 				this.recordList = response.data;
			 				this.listForm.pageIndex = response.pageNumber;
			 				this.listForm.totalPage = response.totalPage;
							this.mybadge=response.recordsTotal
			 			} else {
			 				this.recordList = [
			 					...this.recordList,
			 					...response.data
			 				];
			 			}
			 		}
			 		this.listForm.pageIndex++;
			 		this.isLoading = false;
			 	}).catch(error => {
			 		this.isLoading = false;
			 		mui.toast(error);
			 	})
			 },
			 //下拉事件
			 handleScrool() {
				 
			 	if (isReachBottom()) {
			 		console.log('到达底部')
				
						if (this.listForm.pageIndex <= this.listForm.totalPage && this.isLoading == false) {
							this.getList();
						} else {
							return;
						}
					
			 		
			 	}
			 },
		 
			asynCallBack() {

			},
		
		},
	mounted() {
		this.getList();
		
		//监控下拉加载事件
		var _this = this;
		window.addEventListener('scroll', _this.handleScrool);
	},
	destroyed() {
		//销毁监听事件
		var _this = this;
		window.removeEventListener('scroll', _this.handleScrool);
	},
	
	}
</script>

<style src="$project/assets/css/iconfont.css"></style>
<style scoped src="$project/assets/css/xpwyfyy.css"></style>
<style src="$project/assets/css/xsy.css"></style>
<style>
</style>
