<template>
	<div>

		<common @asynCallBack="asynCallBack"></common>
		<top-header :pageTitle="pageTitle"></top-header>

		<div class="mui-content vongi-wordcard-sp">
			<div id="slider" class="mui-slider mui-fullscreen vongi-over">
				<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="reloadList(0)" :class="listForm.type=='0'?'mui-active':''">
							<span class="fyy-badge">待处理<span class="mui-badge" v-if="num">{{num}}</span></span>
						</a>
						<a class="mui-control-item" @click="reloadList(1)" :class="listForm.type=='1'?'mui-active':''">
							已处理
						</a>
					</div>
				</div>
				<div class="mui-slider-group">
					<div class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper vongi-over-hei">
							<div class="mui-scroll">
								<ul class="mui-table-view mui-table-view-chevron" v-if="listForm.type==1">
									<li class="mui-table-view-cell mui-media" v-for="mod in recordList">
										<router-link class="mui-navigate-right" :to="{name: 'MasterAttendanceVerifyLeaveInfo', query: {id:mod.id}}">
											<div class="mui-media-object mui-pull-left">
												<img :src="mod.picUrl"></div>
											<div class="mui-media-body">
												{{mod.name}}
												<p class='mui-ellipsis'><span class="colorfe616c">{{mod.typeN}}</span>请假申请</p>
											</div>
											<button type="button" class="mui-btn mui-btn-success mui-btn-outlined" :class="statusColor[mod.status]"
											 v-text="status[mod.status]"></button>
										</router-link>
									</li>
								</ul>
								<NullList :remark="'暂无请假申请记录'" v-if="!recordList.length"></NullList>

								<form class="mui-input-group fyy-checkbox" v-if="listForm.type==0">

									<div class="mui-input-row mui-checkbox mui-left" v-for="mod in recordList">

										<router-link class="mui-navigate-right" :to="{name: 'MasterAttendanceVerifyLeaveInfo', query: {id:mod.id}}">
											<div class="mui-media-object mui-pull-left">
												<img :src="mod.picUrl"></div>
											<div class="mui-media-body">
												{{mod.name}}
												<p class='mui-ellipsis'><span class="colorfe616c">{{mod.typeN}}</span>请假申请</p>
												<h5 class="vongi-bksp-time" v-text="mod.createTime"></h5>
											</div>
										</router-link>

										<input name="checkbox" v-model="selectIndex" :value="mod.id" type="checkbox" v-if="listForm.type==0">
									</div>
								</form>
							</div>

						</div>
					</div>


				</div>
			</div>

			<div class="fyy-bindfyy-btn" v-if="listForm.type==0">
				<form class="mui-input-group">
					<div class="mui-input-row mui-checkbox mui-left">
						<label>全选</label>
						<input name="checkbox" v-model="allclick" value="0" @click="selectAll()" type="checkbox">
					</div>
				</form>
				<button type="button" class="mui-btn mui-btn-danger" @click="openFrom('2','拒绝')">拒绝</button>
				<button type="button" class="mui-btn mui-btn-success" @click="openFrom('1','同意')">同意</button>
			</div>
		</div>

		<!-- 审批弹窗 -->
		<div v-show="openFromVisible" @click="openFromVisible=false" class="mui-backdrop mui-active"></div>
		<div v-show="openFromVisible" class="mui-card fyy-popup">
			<div class="mui-card-header mui-h3">审批意见</div>
			<div class="mui-card-content">
				<div class="mui-input-row">
					<textarea v-model="subForm.approvalExplain" rows="5" placeholder="请输入"></textarea>
				</div>
			</div>
			<div class="vongi-btn">
				<button class="mui-btn mui-btn-primary" @click="doAction">提交</button>
			</div>
		</div>
		<loading :visible="isLoading"></loading>

	</div>
</template>


<script>
	import * as API_Leave from '@/apis/Master/leave'
	import Common from '$project/components/Common.vue'
	import Loading from '$project/components/Loading.vue'
	import TopHeader from '$project/components/TopHeader.vue'
	import isReachBottom from '$project/utils/isReachBottom'
	import NullList from '$project/components/NullList.vue'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		name: 'MasterAttendanceVerifyLeaveList',
		components: {
			Common,
			Loading,
			TopHeader,NullList
		},
		data() {
			return {
				pageTitle: '请假申请审核列表',

				isLoading: false,

				listForm: {
					pageIndex: 1,
					pageSize: 20,
					type: '0',
					totalPage: 1,
					result: 0,
				},
				num: 0,
				recordList: [],
				status: ['待审核', '已批准', '已拒绝'],
				statusColor: ['', 'status_a', 'status_r'],
				selectIndex: [],
				//审批内容弹窗显示
				openFromVisible: false,
				subForm: {
					id: 0,
					status: 0,
					approvalExplain: '', //说明
				},
				allclick: false
			}
		},
		created() {
			//this.listForm.openId = this.openId;
			//this.listForm.result = this.$route.query.result != null ? this.$route.query.result : 0;
		},
		methods: {
			//同意拒绝
			doAction() {
				console.log(this.selectIndex)
				if (this.checkForm()) {
					this.isLoading = true;
					this.subForm.id = this.selectIndex.toString();
					API_Leave.approved(this.subForm).then(response => {
						this.isLoading = false;

						this.openFromVisible = false;
						this.listForm.pageIndex = 1;
						this.getList();
					}).catch(error => {
						this.isLoading = false;
						mui.toast(error);
					})
				}
			},
			//检测表单
			checkForm() {
				if (!this.subForm.approvalExplain) {
					mui.toast('请填写审核意见');
					return false;
				} else {
					return true;
				}
			},
			reloadList(status) {
				this.listForm.type = status;
				this.listForm.pageIndex = 1;
				this.getList();
			},
			//选择所有
			selectAll() {
				console.log()
				if (this.allclick) {
					this.selectIndex = [];
				} else {
					this.selectIndex = [];
					for (var i in this.recordList) {
						var mod = this.recordList[i];
						this.selectIndex.push(mod.id);
					}
				}
			},
			//显示内容表单
			openFrom(status, val) {
				if (!this.selectIndex.length) {
					mui.toast('请选择要处理的信息');
				} else {
					this.subForm.status = status;
					this.subForm.approvalExplain = val;
					this.openFromVisible = true;
				}
			},
			//info
			detail(id) {
				this.$router.push({
					name: 'MasterAttendanceLeaveInfo',
					query: {
						id: id
					}
				})
			},
			save() {
				this.$router.push({
					name: 'MasterAttendanceLeaveForm',
					query: {

					}
				})
			},
			//获取列表
			getList() {
				this.isLoading = true;
				API_Leave.approvedPageList(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;
							if (this.listForm.type == '0') {
								this.num = 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);
		},
		computed: {
			...mapGetters({
				openId: 'wx_openid',
				token: 'token',
			})
		},

	}
</script>

<style scoped src="$project/assets/css/xpwyfyy.css"></style>
<style scoped src="$project/assets/css/iconfont.css"></style>
<style scoped>
	.status_r {
		color: #fe616c !important;
		border: 1px solid #fe616c !important;
	}

	.status_a {
		color: #05c8af !important;
		border: 1px solid #05c8af !important;
	}
</style>
