<template>
<div>
		<common @asynCallBack="asynCallBack"></common>
	<loading :visible="isLoading"></loading>
    <header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">{{mymod.title}}</h1>
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			
			<a  @click="doRightLink" v-show="false&&!switchTab" class="fyy-bar mui-pull-right">
				<span class="mui-icon" >
					<span class="header-right-wz" style="font-size:14px">
						统计<i></i>
					</span>
					
				</span>
			</a>
			
		</header>
		<div class="mui-content vongi-wordcard-sp">
			<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
				<div class="mui-scroll">
					<a class="mui-control-item " @click="mySwitchTab(true)" :class="{'mui-active':switchTab}" >
						<span class="fyy-badge">待处理<span class="mui-badge" v-show="mybadge">{{mybadge}}</span></span>
					</a>
					<a class="mui-control-item"  @click="mySwitchTab(false)" :class="{'mui-active':!switchTab}"   >
						已处理
					</a>
				</div>
			</div>
			<div id="slider" class="mui-slider mui-fullscreen vongi-over">
				
				<div class="mui-slider-group">
					
					<div  class="mui-slider-item mui-control-content " v-show="switchTab">
						<div  class="mui-scroll-wrapper vongi-over-hei" >
							<div class="mui-scroll">
								<div class="mui-input-group fyy-checkbox">
									
									<div class="mui-input-row mui-checkbox mui-left" v-for="item,i in recordList">
										
											<router-link :to="{name:'XsyApprovalInfoSp',query:{id:item.id,procinstActUserId:item.procinstActUserId,formId:listmod[item.procinstType].formId}}" class="mui-media-body">
											
											<h4 class="flew-sp margin10">{{item[mymod.name?mymod.name:'name']}}{{formId=='Need'?'的'+item.procinstTypeName:mymod.text1}}申请
												<span class="color999 mui-h5" v-if="formId!='Need'">{{item.createTime}}</span>
												<span class="  mui-h5" style="color: #1677FF;font-size: 14px;" v-if="formId=='Need'">{{item.procinstTypeName}}</span>
											</h4>
											<h5 class='mui-ellipsis color999'>{{mymod.text2}}：{{item[mymod.param]}}</h5>
										
										</router-link>
										<input name="checkbox" v-model="ids" :value="item.procinstActUserId" type="checkbox" >
									</div>
									<NullList :remark="'暂无申请记录'" v-if="!recordList.length"></NullList>
									 
								</div>
							</div>
						</div>
					</div>
					<div  class="mui-slider-item mui-control-content" v-show="!switchTab">
						<div class="searchclass" style="">
							<div class="mui-input-row mui-plus-hidden">
								<input type="search" class="mui-input-speech mui-input-clear"
									v-model="listForm2.name" @search="getList2(true)"
								 placeholder="输入姓名搜索" data-input-clear="4" data-input-speech="4">
								 
								<span class="mui-icon mui-icon-clear mui-hidden"></span>
								<span  @click="getList2(true)" 
								style="width: 20%;font-size: 18px;    top: 12px;"
								class="mui-icon mui-icon-speech mui-icon-search">筛选</span>
							</div>
						</div>								
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view mui-table-view-chevron">
									<li class="mui-table-view-cell mui-media" v-for="item,i in recordList2">
										<router-link :to="{name:'XsyApprovalInfo',query:{id:item.id,formId:listmod[item.procinstType].formId}}" class="mui-media-body">
										
											<h4 class="flew-sp margin10">{{item.name}}{{formId=='Need'?'的'+item.procinstTypeName:mymod.text1}}申请
											
												<span class="color999 mui-h5" v-if="formId!='Need'">{{item.createTime}}</span>
												<span class="color999 mui-h5" v-if="formId=='Need'">
													
													<button class="mui-btn   mui-btn-outlined" style="padding: 2px 10px;" :class="{'mui-btn-primary':item.action==0,
													'mui-btn-danger':item.action==2||item.action==3,
													'mui-btn-success':item.action==1||item.action==4}"   >{{item.actionName}}</button>
												</span>
											</h4>
											
											<h5 class='mui-ellipsis color999 flew-sp flew-items'>{{mymod.text2}}：{{item[mymod.param]}}
											<button v-if="formId!='Need'" class="mui-btn   mui-btn-outlined"  style="padding: 2px 10px;" :class="{'mui-btn-primary':item.action==0,
											'mui-btn-danger':item.action==2||item.action==3,
											'mui-btn-success':item.action==1||item.action==4}"   >{{item.actionName}}</button>
															
										 
											
											</h5>
										</router-link>
									</li>
									
								</ul>
								<div 
								style="
								    text-align: center;
								    margin-top: 5px;
								    color: #9e9e9e;
								"
								v-if="recordList2.length&&recordList2.length==listForm2.recordsTotal">----已经到底了----</div>
								<NullList :remark="'暂无已处理记录'" v-if="!recordList2.length"></NullList>
								
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="fyy-bindfyy-btn" v-show="switchTab">
				<form class="mui-input-group">
					<div class="mui-input-row mui-checkbox mui-left">
						<label>全选</label>
						<input v-model="allSelect" value="1" type="checkbox" @click="selectAll" :checked="recordList.length==ids.length">
						
					</div>
				</form>
				<button type="button" class="mui-btn mui-btn-danger" @click="openFrom('3')">拒绝</button>
				<button type="button" class="mui-btn mui-btn-success" @click="openFrom('1')">同意</button>
			</div>
		</div>
		<!--弹窗-->
		<div class="mui-popup mui-popup-in vongi-mui-pop"  v-show="showApprovalBl">
			<div class="mui-popup-inner vongi-pop-inner">
				<div class="mui-popup-title">审核意见</div>
				<div class="mui-popup-input">
					<textarea id="textarea" rows="3" v-model="subForm.content" placeholder="可输入审核意见"></textarea>
				</div>
			</div>
			<div class="mui-popup-buttons">
				<span class="mui-popup-button"  @click="showApprovalBl=false">取消</span>
			<span class="mui-popup-button mui-popup-button-bold" @click="doAction">提交</span></div>
		</div>
		<div class="mui-popup-backdrop mui-active" v-show="showApprovalBl"></div>
</div>
</template>


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

	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
		},
		props: {
			formId: {
				require: true,
				default: '',
			},
		},
		data() {
			return {
				mymod:{},
				listmod:[{
					title:"待办事项",
					text1:"",
					text2:"申请时间",
					formId:"",
					 
					param:"createTime"
				},{
					title:"调班审核",
					text1:"的调班",
					text2:"调班日期",
					formId:"exchangeWork",
					param:"adjustDate"
				},{
					title:"请假审核",
				 
					text1:"的请假",
					text2:"请假日期",
					formId:"leaveWork",
					param:"adjustDate"
				},{
					title:"出差审核",
				 
					text1:"的出差",
					text2:"出差日期",
					formId:"travelWork",
					param:"startTime"
				},{
					title:"补卡审核",
					text1:"的补卡",
					text2:"补卡日期",
					formId:"applyWork",
					param:"supplementDate"
				},{
					title:"批量补卡审核",
				 
					text1:"的补卡",
					text2:"补卡日期",
					formId:"batchApplyWork",
					param:"supplementDate"
				},{
					title:"批量加班审核",
				 
				text1:"的加班",
				text2:"加班日期",
					formId:"batchExtraWork",
					param:"supplementDate"
				},{
					title:"加班审核",
				 
					text1:"的加班",
					text2:"加班日期",
					formId:"extraWork",
					param:"supplementDate"
				},{
					title:"携物出场",
				
					text1:"的携物出场",
					text2:"出场日期",
					formId:"commerceWork",
					param:"adjustDate"
				},{
					title:"食堂接待",
				
					text1:"的接待",
					text2:"用餐安排",
					formId:"treatWork",
					param:"diningName",
					name:"companyName",
				}],
				allSelect:[],
				ids:[],
				switchTab:true,
				mybadge:0,
				pageTitle: '调班审核',
				showApprovalBl:false,
				isLoading: false,
							
				listForm: {
					procinstType:1,
					pageIndex: 1,
					pageSize: 10,
					totalPage: 1,
				},
				recordList: [],
				
				listForm2: {
					procinstType:1,
					pageIndex: 1,
					pageSize: 20,
					totalPage: 1,
					name:'',
				},
				recordList2: [],
				subForm: {
					
					procinstActUserIds: '',
					content: '',
					status: ''
				},
			}
		},
		created() {
			if(this.formId=="key"){
				var formId= this.$route.query.formId;
				for(var i in this.listmod){
					if(this.listmod[i].formId==formId){
						this.formId=i;
						break
					}
				}
				
			}
			
			this.listForm.procinstType=this.formId;
			this.listForm2.procinstType=this.formId;
			if(this.formId=="Need"){
				this.listForm.procinstType="";
				this.listForm2.procinstType="";
			}
		},
		methods: {
			doRightLink(){
				
			},
			leaveItem(detail){
				if(this.formId=="2"){
					if(detail.startTime==detail.endTime&&detail.startTimeQuantum=='0'&&detail.endTimeQuantum=='1'){
						detail.adjustDate="自"+detail.startTime;
					}else if(detail.startTime==detail.endTime){
						detail.adjustDate="自"+detail.startTime+(detail.startTimeQuantum!=''?(detail.startTimeQuantum=='1'?'下午':'上午'):'');
					}else{
							detail.adjustDate="自"+detail.startTime+(detail.startTimeQuantum!=''?(detail.startTimeQuantum=='1'?'下午':'上午'):'');
						detail.adjustDate+="至"+detail.endTime+(detail.endTimeQuantum!=''?(detail.endTimeQuantum=='1'?'下午':'上午'):'');
					}
				}
				if(this.formId=="6"||this.formId=="7"){
					detail.supplementDate=detail.startTime+" "+detail.hours+"小时"
				}
				if(!detail.procinstType){
					detail.procinstType=this.formId;
				}
				
				
			},
			mySwitchTab(bl){
				this.switchTab=bl;
				if(bl){
					if(this.recordList.length==0){
						this.getList()
					}
				}else{
					if(this.recordList2.length==0){
						this.getList2()
					}
				}
			},
			//检测表单
			checkForm() {
				if (false) {
					mui.toast('请选择要处理的信息');
					return false;
				} else {
					return true;
				}
			},
			//同意拒绝
			doAction() {
				this.subForm.procinstActUserIds = this.ids.join(',');
				if (this.checkForm()) {
					this.isLoading = true;
					API.examineSubmit(this.subForm).then(response => {
						this.isLoading = false;
			
						this.showApprovalBl = false;
						this.listForm.pageIndex = 1;
						this.recordList2=[];
						mui.toast("操作成功");
						this.getList();
					}).catch(error => {
						this.isLoading = false;
						mui.toast(error);
					})
				}
			},
			//显示内容表单
			openFrom(status) {
				if (!this.ids.length) {
					mui.toast('请选择要处理的信息');
				} else {
					this.subForm.status = status;
					this.subForm.content = status == 1 ? '同意' : '拒绝';
					this.showApprovalBl = true;
					//直接点击处理，不需要弹窗理由框,又需要弹窗理由框了
					//this.doAction();
				}
			},
			//选择所有
			selectAll() {
				
				if (this.allSelect.length) {
					this.ids = [];
				} else {
					var selectIdList = [];
					this.recordList.forEach(function(item, index) {
						selectIdList.push(item.procinstActUserId);
					})
					this.ids = selectIdList;
				}
			},
			//获取列表
			getList2(bl) {
				if(bl){
					this.listForm2.pageIndex=1
				}
				this.isLoading = true;
				API.alreadyExamineShiftList(this.listForm2).then(response => {
					if (response) {
						for(var i in response.data){
							
							
							this.leaveItem(response.data[i])
						}
						if (this.listForm2.pageIndex == 1) {
							this.recordList2 = response.data;
							this.listForm2.pageIndex = response.pageNumber;
							this.listForm2.totalPage = response.totalPage;
							
							
						} else {
							this.recordList2 = [
								...this.recordList2,
								...response.data
							];
						}
						this.listForm2.recordsTotal=response.recordsTotal
					}
					
					this.listForm2.pageIndex++;
					this.isLoading = false;
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			 //获取列表
			 getList() {
			 	this.isLoading = true;
			 	API.waitExamineShiftList(this.listForm).then(response => {
			 		if (response) {
						for(var i in response.data){
							this.leaveItem(response.data[i])
						}
			 			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.switchTab){
						if (this.listForm.pageIndex <= this.listForm.totalPage && this.isLoading == false) {
							this.getList();
						} else {
							return;
						}
					}else{
						if (this.listForm2.pageIndex <= this.listForm2.totalPage && this.isLoading == false) {
							this.getList2();
						} else {
							return;
						}
					}
			 		
			 	}
			 },
		 
			asynCallBack() {

			},
		
		},
	mounted() {
		if(this.formId=="Need"){
			this.mymod=this.listmod[0];
		}else{
			this.mymod=this.listmod[this.formId];
		}
	
		if(this.switchTab){
			this.getList();
		}else{
			this.getList2();
		}
		
		//监控下拉加载事件
		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>
	.searchclass{
		background-color: white;
	}
	.searchclass input{
		margin-left: 10px;
		margin-top: 8px;
		    margin-bottom: 3px;
		    padding: 4px 8px;
		    background-color: #F0F0F0;
		    max-width: 75%;
			
		    font-size: 16px;
		    top: 12px;
	}
</style>
