<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 margin60">
			<div class="mui-content-padded" >
				<ul class="mui-table-view fyy-view" v-for="item,i in recordList"  @click="gotoItem(item)"  style="margin-bottom: 20px;">
					<li class="mui-table-view-cell">
						<label>调班对象：</label>
						<span>{{item.name}}<span class="mui-pull-right color55f868">{{item.statusName}}</span></span>
					</li>
					<li class="mui-table-view-cell">
						<label>调班日期：</label>
						<span>{{item.adjustDate}}</span>
					</li>
					<li class="mui-table-view-cell">
						<label>提交时间：</label>
						<span>{{item.submitDate}}</span>
					</li>
				</ul>
				
				 
			</div>
			<NullList :remark="'暂无调班申请记录'" v-if="!recordList.length"></NullList>
			
		</div>
		<div class="fyy-footer">
			<div class="bindfyy-btn">
				<button type="button" class="mui-btn mui-btn-primary " @click="gotoUrl">安排调班</button>
			</div>
		</div>
		<loading :visible="isLoading"></loading>
	</div>
</template>


<script>
	
	import * as API from '@/apis-xsy/applyclass'
 
	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'
	
	import {
		mapGetters,
		mapMutations
	} from 'vuex'

	export default {
		name: '',
		components: {
			Common,
			Loading,
			TopHeader,NullList
		},
		data() {
			return {
			 
			 
				pageTitle: '调班记录',
			 
				isLoading: false,			
				listForm: {
					pageIndex: 1,
					pageSize: 10,
					totalPage: 1,
				},
				recordList: [],
				
			  
			}
		},
		created() {
			 
		},
		methods: {
			gotoItem(item){
				this.$router.push({
				    name: "XsyPlanClassInfo",
					query:{id:item.id}
				})
			},
			gotoUrl(){
				 this.$router.push({
				     name: "XsyPlanClassAdd",
				 })
			},
			 //获取列表
			 getList() {
			 	this.isLoading = true;
			 	API.arrangeShiftList(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>

