<!--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">
			<ul class="mui-table-view" style="margin-bottom: 10px;"  >
			 					<li class="mui-table-view-cell " style="text-align: center;"  >
			 						<span class="mui-icon mui-icon mui-icon-arrowleft" @click="optMonth(0)"></span>	{{year}}.{{(month>9?"":"0")}}{{month}}	<span class="mui-icon mui-icon mui-icon-arrowright" @click="optMonth(1)"></span>
			 					</li>
			</ul>
			
			<div class="vongi-index flew-sp flew-items" style="margin-bottom: 10px;">
				<div class="vongi-index-top">
					<div class="mui-media-object mui-pull-left">
						<img :src="person_data?(person_data.faceImageUrl+'?x-oss-process=image/resize,h_50,m_lfit'):''">
					</div>
					<div class="mui-media-body">
						<h3 v-if="person_data">{{person_data.name}}</h3>
 					</div>
				</div>
				<div class="vongi-index-right flew-items flew-sp">
					
					应出勤<a class="mui-pull-right" >{{obj.attendanceDays}}</a>天 / 实出勤<a class="mui-pull-right" >{{obj.totalAttendanceDays}}</a>天
				</div>
			</div>
			
			
			 <ul class="mui-table-view"> 
					
			        <li class="mui-table-view-cell mui-collapse"  v-for="(it,index) in recordList"  v-if="it.list.length" >
			            <a class="mui-navigate-right" href="#">{{it.name}}
						<span style="float: right;  margin-right: 20px; color: rgba(136, 136, 136, 100); ">{{it.list.length}}次</span></a>
			            <div class="mui-content-padded vongi-work">
			               
							<ul class="mui-table-view">
								<li v-for="(item,index) in it.list" class="mui-table-view-cell">
									{{item.recordTime}}
									<div class="mui-media-body">
										<button type="button" class="mui-btn mui-btn-primary" v-if="item.result=='1' && item.status=='1'" @click="goToInfo(item.supplementWorkId)">{{item.type=='1'?'已外勤打卡':'已补卡'}}</button>
										<button type="button" class="mui-btn mui-btn-primary" v-if="item.result=='0' && item.status=='3'" @click="goToInfo(item.supplementWorkId)">已拒绝</button>
										<button type="button" class="mui-btn mui-btn-primary" v-if="item.result=='0' && item.status=='0'" @click="goToInfo(item.supplementWorkId)">审核中</button>
										<button type="button" class="mui-btn mui-btn-primary" v-if="item.result=='0' && item.status===null" @click="applybk(item.id,item.recordTime)">申请补卡</button>
										<span :style="'color:'+statusColor[item.result]" v-text="status[item.result]">缺卡</span>
									</div>
								</li>
							</ul>
			            </div>
			        </li>
				 
					
			    </ul>

		</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: 'MasterAttendanceStatistic',
		components: {
			Common,
			Loading,
			TopHeader
		},
		data() {
			return {
				pageTitle: '考勤统计',
				year:0,
				month:1,
				
				listForm:{
					date: '2021-06',
				},
				isLoading: false,
				obj:{},
				recordList: [],
				status: ['缺卡', '正常', '迟到', '早退', '请假','出差'],
				statusColor: ['#fe616c', '#05c8af', '#f6f448', '#f6f448', '#f6f448', '#f6f448'],
				
				rightLink: {
					show: true,
					icon: 'icon-shijian',
					style: 'font-size:14px;color:#000;',
					title: '缺卡记录'
				},

			}
		},
		created() {
			 this.month= new Date().getMonth()+1;
			 this.year= new Date().getYear()+1900;
		},
		methods: {
			optMonth(opt){
				
				if(opt){
					if( this.month==12){
						 this.month=1;
						  this.year++;
					}else{
						 this.month++;
					}
				}else{
					if( this.month==1){
						 this.month=12;
						  this.year--;
					}else{
						 this.month--;
					}
				}
				this.getList();
			},
			//申请补卡
			applybk(id,time) {
				this.$router.push({
					name: 'MasterAttendanceApply',
					query: {
						id: id,
						time:time
					}
				})
			},
			//跳转申请补卡详情
			goToInfo(id) {
				this.$router.push({
					name: 'XsyApprovalInfo',
					query: {
						id: id,
						formId:'applyWork'
					}
				})
			},
			//获取列表
			getList() {
				this.isLoading = true;
				var obj={
					date:this.year+"-"+(this.month>9?"":"0")+this.month
				}
				this.recordList=[];
				API_Attendance.statistics(obj).then(response => {
					var status=this.status
					//this.recordList = response.list;
					var recordList=[
						{
														 result:"1",
														 name:status[1],
														 list:[],
						}
					]
					
					response.list.forEach(function(item, index) {
						var bl=true;
						
						 for(var i in recordList){
							 var it=recordList[i];
							 if(it.result==item.result){
								 bl=false;
								 it.list.push(item);
								 break
							 }
						 }
						 if(bl){
							 var my={
								 result:item.result,
								 name:status[item.result],
								 list:[],
							 }
							 my.list.push(item)
							 recordList.push(my)
						 }
						 
						 
					})
					this.recordList=recordList;
					console.log(this.recordList)
					this.obj=response;
					
					this.isLoading = false;
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			}, 
			 
			//选择日期
			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();
				});
			},
		 
			asynCallBack() {

			},
		},
		mounted() {
			//获取列表
		//	this.getCompanyList();
			this.getList();
		},
		destroyed() {
			
		},
		computed: {
			...mapGetters({
				openId: 'wx_openid',
				token: 'token',
				person_data: 'person_data',
				person_popedom: 'person_popedom',
			})
		},
		
	}
</script>
<style scoped src="$project/assets/css/xpgj.css"></style>

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