<!--workStatus:1-工作，2-外出，3-出差，4-休假-->
<!--result:0-缺卡，1-正常，2-迟到，3-早退, 4-出差，5-请假-->
<!--type:0=设备打卡，1=外勤打卡、2=补卡-->
<!--status:0：无操作， 1:机器打卡记录，2：请假审批详情，3：外勤打卡、补卡审批详情-->

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

		<div class="mui-content vongi-admin-kqtj">
			<div class="fyy-temper-date vongi-flxtop">
				<a class="mui-col-xs-12" @click="selectData">{{subForm.queryDate}}<span class="mui-icon iconfont icon-xiajiantou"></span></a>
			</div>
			<div class="vongi-flxtop vongi-kqtj-tab ">
				<div class="vongi-top-bread vongi-bread">
					<a @click="filter('',1)" :class="[''].indexOf(subForm.resultN)>-1?'mui-active':''">全部</a>
					<a @click="filter('1',workCount)" :class="['1'].indexOf(subForm.resultN)>-1?'mui-active':''">正常({{workCount}})</a>
					<a @click="filter('2',lateCount)" :class="['2'].indexOf(subForm.resultN)>-1?'mui-active':''">迟到({{lateCount}})</a>
					<a @click="filter('3',leaveEarlyCount)" :class="['3'].indexOf(subForm.resultN)>-1?'mui-active':''">早退({{leaveEarlyCount}})</a>
					<a @click="filter('0',absentCount)" :class="['0'].indexOf(subForm.resultN)>-1?'mui-active':''">缺卡({{absentCount}})</a>
					<a @click="filter('4',businessCount)" :class="['4'].indexOf(subForm.resultN)>-1?'mui-active':''">出差({{businessCount}})</a>
					<a @click="filter('5',vacationCount)" :class="['5'].indexOf(subForm.resultN)>-1?'mui-active':''">请假({{vacationCount}})</a>
					<a @click="filter('6',outCount)" :class="['6'].indexOf(subForm.resultN)>-1?'mui-active':''">外出({{outCount}})</a>
					<button @click="menuShow=true" type="button" class="mui-btn mui-icon mui-icon-arrowdown"></button>
				</div>
				<div v-if="menuShow" class="vongi-top-bread-list">
					<div class="vongi-top-bread flew">
						<a @click="filter('',1)" :class="[''].indexOf(subForm.resultN)>-1?'mui-active':''">全部</a>
						<a @click="filter('1',workCount)" :class="['1'].indexOf(subForm.resultN)>-1?'mui-active':''">正常({{workCount}})</a>
						<a @click="filter('2',lateCount)" :class="['2'].indexOf(subForm.resultN)>-1?'mui-active':''">迟到({{lateCount}})</a>
						<a @click="filter('3',leaveEarlyCount)" :class="['3'].indexOf(subForm.resultN)>-1?'mui-active':''">早退({{leaveEarlyCount}})</a>
						<a @click="filter('0',absentCount)" :class="['0'].indexOf(subForm.resultN)>-1?'mui-active':''">缺卡({{absentCount}})</a>
						<a @click="filter('4',businessCount)" :class="['4'].indexOf(subForm.resultN)>-1?'mui-active':''">出差({{businessCount}})</a>
						<a @click="filter('5',vacationCount)" :class="['5'].indexOf(subForm.resultN)>-1?'mui-active':''">请假({{vacationCount}})</a>
						<a @click="filter('6',outCount)" :class="['6'].indexOf(subForm.resultN)>-1?'mui-active':''">外出({{outCount}})</a>
						<button @click="menuShow=false" type="button" class="mui-btn mui-icon mui-icon-arrowup"></button>
					</div>
				</div>
			</div>
			<!-- <div class="vongi-bread vongi-kqtj-tab vongi-flxtop">
				<a @click="filter('',1)" :class="[''].indexOf(subForm.resultN)>-1?'mui-active':''">全部</a>
				<a @click="filter('1',workCount)" :class="['1'].indexOf(subForm.resultN)>-1?'mui-active':''">正常({{workCount}})</a>
				<a @click="filter('2',lateCount)" :class="['2'].indexOf(subForm.resultN)>-1?'mui-active':''">迟到({{lateCount}})</a>
				<a @click="filter('3',leaveEarlyCount)" :class="['3'].indexOf(subForm.resultN)>-1?'mui-active':''">早退({{leaveEarlyCount}})</a>
				<a @click="filter('0',absentCount)" :class="['0'].indexOf(subForm.resultN)>-1?'mui-active':''">缺卡({{absentCount}})</a>
				<a @click="filter('4',businessCount)" :class="['4'].indexOf(subForm.resultN)>-1?'mui-active':''">出差({{businessCount}})</a>
				<a @click="filter('5',vacationCount)" :class="['5'].indexOf(subForm.resultN)>-1?'mui-active':''">请假({{vacationCount}})</a>
				<a @click="filter('6',outCount)" :class="['6'].indexOf(subForm.resultN)>-1?'mui-active':''">外出({{outCount}})</a>
			</div> -->
			<div class="vongi-kqtj-center vongi-tab-top">
				<div class="vongi-bread">
					<template v-for="(item,index) in navList">
						<a :class="navCanClick(item,index)?'color4fc5f7':''" @click="reloadItem(item,index)" v-text="item.name"></a>
						<span v-if="index!=navList.length-1" class="mui-icon mui-icon-forward"></span>
					</template>
				</div>
				<ul v-if="!isLast" class="mui-table-view margin10">
					<li v-for="(item,index) in companyList" class="mui-table-view-cell">
						<a class="mui-navigate-right" @click="reloadNext(item)">{{item.name}}（{{item.number}}）</a>
					</li>
				</ul>
				<!--部门-->
				<div class="vongi-work" style="margin-bottom:80px;">
					<div v-if="recordList.length>0" class="mui-content-padded">
						<h5 class="flew-items"><span class="iconfont icon-guanliyuan color4fc5f7"></span>组织人员</h5>
					</div>
					<div class="vongi-kqtj-list">
						<div v-for="(item,index) in recordList" class="mui-card">
							<div class="mui-card-header">
								{{index+1}}.{{item.name}}
								<button type="button" class="mui-btn  mui-btn-royal mui-btn-outlined" :style="setColor(item.workStatus,'workStatus')"
								 @click="goToStatusInfo(item.workStatus,item.statusId)">{{item.workStatusN}}<span v-if="['2','3','4'].indexOf(item.workStatus)>-1"
									 class="mui-icon mui-icon-forward"></span></button>
							</div>
							<div class="mui-card-content">
								<div class="mui-card-content-inner flew">
									<div @click="getBusinessId(iten.status, iten.id)" v-for="(iten,indy) in item.list" class="mui-col-xs-3 vongi-center vongi-clasadmin-ma">
										<p v-text="iten.time"></p>
										<a :class="'mui-media-body '+(iten.result!='0'?'mui-navigate-right ':'')" :style="setColor(iten.result,'result')">
											<span v-if="iten.result!='0'" :class="'iconfont '+(iten.status=='1'?'icon-_renlianshibie ':(iten.status=='3'?'icon-shouji ':'')) +'color4fc5f7'"></span>
											{{iten.remark}}
										</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!-- <div class="vongi-clasadmin vongi-kqtj-bot">
					<div class="vongi-clasadmin-list">
						<div @click="filter('1',workCount)" class="vongi-clasadmin-ma mui-col-xs-2">
							<span :class="['','1'].indexOf(subForm.resultN)>-1?'color55f868':'colorAAA'" v-text="workCount"></span>
							<div class="mui-media-body">正常</div>
						</div>
						<div @click="filter('2',lateCount)" class="vongi-clasadmin-ma mui-col-xs-2">
							<span :class="['','2'].indexOf(subForm.resultN)>-1?'colorf8b155':'colorAAA'" v-text="lateCount"></span>
							<div class="mui-media-body">迟到</div>
						</div>
						<div @click="filter('3',leaveEarlyCount)" class="vongi-clasadmin-ma mui-col-xs-2">
							<span :class="['','3'].indexOf(subForm.resultN)>-1?'colorf8b155':'colorAAA'" v-text="leaveEarlyCount"></span>
							<div class="mui-media-body">早退</div>
						</div>
						<div @click="filter('0',absentCount)" class="vongi-clasadmin-ma mui-col-xs-2">
							<span :class="['','0'].indexOf(subForm.resultN)>-1?'colorfe616c':'colorAAA'" v-text="absentCount"></span>
							<div class="mui-media-body">缺卡</div>
						</div>
						<div @click="filter('4',businessCount)" class="vongi-clasadmin-ma mui-col-xs-2">
							<span :class="['','4'].indexOf(subForm.resultN)>-1?'colorda94f8':'colorAAA'" v-text="businessCount"></span>
							<div class="mui-media-body">出差</div>
						</div>
						<div @click="filter('5',vacationCount)" class="vongi-clasadmin-ma mui-col-xs-2">
							<span :class="['','5'].indexOf(subForm.resultN)>-1?'colorda94f8':'colorAAA'" v-text="vacationCount"></span>
							<div class="mui-media-body">请假</div>
						</div>
					</div>
				</div> -->
			</div>

		</div>

		<loading :visible="isLoading"></loading>
	</div>
</template>

<script>
	require('$project/assets/js/mui.picker.min.js');
	import * as API_Attendance from '@/apis/Master/attendance'
	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 {
		mapGetters,
		mapMutations
	} from 'vuex'
	import {
		currentTimeStamp,
		parseUnixTime
	} from '$project/utils'
	export default {
		name: 'MasterAttendanceStatisticList',
		components: {
			Common,
			Loading,
			TopHeader
		},
		data() {
			return {
				pageTitle: '考勤统计',

				isLoading: false,

				subForm: {
					queryDate: '',
					alarmConfigId: '',
					companyId: '',
					pageIndex: 1,
					pageSize: 10,
					totalPage: 1,
					resultN: ''
				},
				absentCount: 0,
				workCount: 0,
				leaveEarlyCount: 0,
				lateCount: 0,
				businessCount: 0,
				vacationCount: 0,
				outCount: 0,
				recordList: [],

				companyList: [],
				isLast: false,
				nowLevel: 0,
				navList: [{
					name: '首页',
					id: '',
					hasNext: true,
				}],

				menuShow: false,

			}
		},
		created() {
			this.subForm.queryDate = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');
		},
		methods: {
			//获取公司列表
			getCompanyList() {
				//切换公司人员选第一页
				this.subForm.pageIndex = 1;

				this.isLoading = true;
				API_Attendance.getCompanyList(this.subForm).then(response => {
					this.isLoading = false;

					this.companyList = response.list;
					//如果只有一条数据，自动点到里面一层
					if (this.companyList.length == 1 && this.nowLevel == 0) {
						this.reloadNext(this.companyList[0]);
					} else {
						this.getPersonList();
					}

				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			//获取下级公司列表
			reloadNext(item) {
				if (!this.isLast) {
					this.subForm.companyId = item.id;
					this.nowLevel++;
					this.getCompanyList();
					this.navList.push(item);

					this.isLast = !item.hasNext;
				}
			},
			//获取人员列表
			getPersonList() {
				this.isLoading = true;
				API_Attendance.getNewPrsonList(this.subForm).then(response => {
					this.isLoading = false;

					if (response.groupList.length > 0) {
						if (this.subForm.pageIndex == 1) {
							this.recordList = response.groupList[0].personList;
							//this.subForm.pageIndex = response.groupList[0].pageNumber;
							//this.subForm.totalPage = response.groupList[0].totalPage;
						} else {
							this.recordList = [
								...this.recordList,
								...response.groupList[0].personList
							];
						}

						this.subForm.pageIndex = response.groupList[0].pageNumber;
						this.subForm.totalPage = response.groupList[0].totalPage;
					}
					this.subForm.pageIndex++;

					//this.recordList = response.groupList;
					this.absentCount = response.absentCount;
					this.workCount = response.workCount;
					this.leaveEarlyCount = response.leaveEarlyCount;
					this.lateCount = response.lateCount;
					this.businessCount = response.businessCount;
					this.vacationCount = response.vacationCount;
					this.outCount = response.outCount;

				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			//面包屑选择加载
			reloadItem(item, index) {
				this.navList = this.navList.slice(0, index + 1);
				this.nowLevel = index;
				this.subForm.companyId = item.id;
				this.getCompanyList();
				this.isLast = !item.hasNext;
			},
			//判断面包屑是否可点击
			navCanClick(item, index) {
				if (index > 0) {
					if (index == this.nowLevel) {
						return false;
					} else {
						return true;
					}
				} else {
					return true;
				}
			},
			//选择日期
			selectData() {
				var _this = this;
				var picker = new mui.DtPicker({
					"type": "date",
					"beginYear": 2020,
					"endYear": 2040,
					"endDate": new Date(),
					"value": _this.subForm.queryDate
				});
				picker.show(function(rs) {
					_this.subForm.queryDate = rs.text;
					//获取公司列表
					_this.getCompanyList();
					picker.dispose();
				});
			},
			//获取跳转详情的id
			getBusinessId(status, id) {
				if (status != '0') {
					this.isLoading = true;
					API_Attendance.getBusinessId(id).then(response => {
						this.isLoading = false;

						this.goToInfo(status, response.id);

					}).catch(error => {
						this.isLoading = false;
						mui.toast(error);
					})
				}
			},
			//跳转到详情页
			goToInfo(status, id) {
				if (status != '0') {
					if (status == '1') {
						//设备打卡
						this.$router.push({
							name: 'MasterAttendanceTemperatureInfo',
							query: {
								id: id
							}
						})
					} else if (status == '2') {
						//请假详情
						this.$router.push({
							name: 'MasterAttendanceLeaveInfo',
							query: {
								id: id
							}
						})
					} else if (status == '3') {
						//外勤、补卡详情
						this.$router.push({
							name: 'MasterAttendanceInfo',
							query: {
								id: id,
								remark: 1,
							}
						})
					}
				}
			},
			goToStatusInfo(workStatus, statusId) {
				if (statusId) {
					if (workStatus == '2') {
						//外出
						this.$router.push({
							name: 'MasterEgressInfo',
							query: {
								id: statusId,
								remark: 1,
							}
						})
					} else if (workStatus == '3') {
						//出差
						this.$router.push({
							name: 'MasterBusinessTravelInfo',
							query: {
								id: statusId,
								remark: 1,
							}
						})
					} else if (workStatus == '4') {
						//休假
						this.$router.push({
							name: 'MasterAttendanceLeaveInfo',
							query: {
								id: statusId,
								remark: 1,
							}
						})
					}
				} else {
					if (workStatus != '1') {
						mui.toast('无记录');
					}
				}
			},
			//下拉事件
			handleScrool() {
				if (isReachBottom()) {
					console.log('到达底部')
					if (this.subForm.pageIndex < this.subForm.totalPage && this.isLoading == false) {
						this.getPersonList();
					} else {
						return;
					}
				}
			},
			//过滤筛选条件
			filter(status, num) {
				if (num > 0) {
					if (this.subForm.resultN == status) {
						this.subForm.resultN = '';
					} else {
						this.subForm.resultN = status;
					}
					this.subForm.pageIndex = 1;
					this.getPersonList();
					this.menuShow = false;
				}
			},
			//设置颜色
			setColor(value, type) {
				var color = '';
				if (type == 'result') {
					if (value == '0') {
						color = '#FF6666'
					} else if (value == '1') {
						color = '#389E0D;'
					} else if (value == '2') {
						color = '#FF8800;'
					} else if (value == '3') {
						color = '#FF8800;'
					} else if (value == '4') {
						color = '#FF8800;'
					}
				} else if (type == 'workStatus') {
					if (value == '1') {
						color = '#3385FF';
					} else if (value == '2') {
						color = '#FF8800';
					} else if (value == '3') {
						color = '#FF8800';
					} else if (value == '4') {
						color = '#8855FF';
					}
				}

				return 'border-color:' + color + ';color:' + color + '; ';
			},
			asynCallBack() {

			},
		},
		mounted() {
			//获取列表
			this.getCompanyList();
			//监控下拉加载事件
			var _this = this;
			window.addEventListener('scroll', _this.handleScrool);
		},
		destroyed() {
			//销毁监听事件
			var _this = this;
			window.removeEventListener('scroll', _this.handleScrool);
		},
		computed: {
			...mapGetters({
				openId: 'wx_openid',
				token: 'token',
				person_data: 'person_data',
				person_popedom: 'person_popedom',
			})
		},
		//keepalive监控判断
		beforeRouteLeave(to, from, next) {
			console.log(to.name);
			if (['MasterEgressInfo', 'MasterBusinessTravelInfo', 'MasterAttendanceTemperatureInfo', 'MasterAttendanceLeaveInfo',
					'MasterAttendanceInfo'
				].indexOf(to.name) > -1) {
				this.$store.commit('SET_KEEP_ALIVE_COMPONENTS', ['MasterAttendanceStatisticList'])
			} else {
				this.$store.commit('SET_KEEP_ALIVE_COMPONENTS', [])
			}
			next()
		},
	}
</script>

<style scoped src="$project/assets/css/sczpfyy.css"></style>
<style scoped src="$project/assets/css/xpwyfyy.css"></style>
<style src="$project/assets/css/iconfont.css"></style>
<style src="$project/assets/css/mui.picker.min.css"></style>
<style scoped>
	.colorAAA {
		color: #AAAAAA;
	}
</style>
