<template>
	<div>
		<!-- 主体内容 -->
		<div class="attendance-box">
			<div class="attendance-left">
				<div @click="chooseNavEv(index)" class="attendance-left-item-box" :class="navIndex==index?'attendance-active':''" v-for="(item,index) in navArr" :key="index">
					<img :src="item.icon">
					<div>{{item.title}}（{{item.num}}）</div>
				</div>
			</div>
			<div class="attendance-right">
				<div v-if="!showDetail" style="display: flex;flex-wrap: wrap;">
					<div v-if="!isNothing" class="attendance-right-item-box" @click="goDetail(index)" v-for="(item,index) in babyArr" :key="index">
						<img :src="item.Head_Img" alt="">
						<span>{{item.DisplayName}}</span>
						<div :style="{background:['#9C7CFA','#FF9393','#D3D3D3','#F4B52F'][item.CheckResult]}">{{['正常','未到校','离校','请假'][item.CheckResult]}}</div>
					</div>
					<div v-if="isNothing" class="nothing-box">
						<img src="../../static/img/attendancedetail/icon-nothing.png">
						<div>{{['没有出勤','暂无离校','暂无未到校','没有请假'][navIndex]}}的宝宝</div>
					</div>
				</div>
				<attendanceBabuDetail v-if="showDetail" :dataObj="dataObj" @backNews="backNews"></attendanceBabuDetail>
			</div>
		</div>
	</div>
</template>
<script>
	import attendanceBabuDetail from '@/components/attendanceBabuDetail.vue';
	export default {
		components:{
			attendanceBabuDetail
		},
		name: 'babyActivity',
		data() {
			return {
				navArr:[
					{icon:require('../../static/img/attendancedetail/icon-attendancedetail.png'),title:'出勤详情',num:0},
					{icon:require('../../static/img/attendancedetail/icon-lixiao.png'),title:'离校情况',num:0},
					{icon:require('../../static/img/attendancedetail/icon-weidao.png'),title:'未到校宝宝',num:0},
					{icon:require('../../static/img/attendancedetail/icon-qingj.png'),title:'请假宝宝',num:0},
				],
				navIndex:0,
				babyArr:[],
				isNothing:false,
				cunArr:[],
				showDetail:false,
				dataObj:''
			}
		},
		methods: {
			goDetail(e){
				console.log(e);
				this.showDetail = true;
			},
			// 继承详情返回事件
			backNews(e){
				this.showDetail = e;
			},
			chooseNavEv(e){
				this.navIndex = e;
				if(e==0){
					this.babyArr = this.cunArr;
				} else {
					this.babyArr = this.cunArr.filter(item=>{item.CheckResult==e});
				}
				this.babyArr.length ? this.isNothing = false : this.isNothing = true
			},
			// 获取出勤详情数量问题
			async checkAttendanceNum(){
				let data = await this.$axios({
					// 调用 serviceAPI
					url: this.$https.getstudentattendanceinfo,
					methods: "get",
					params: {
						EquipmentGuid: "yaohaotest001"
					},
				});
				let leftInfo = data.data.data;
				
				this.navArr[0].num = leftInfo.toSchoolNum;
				this.navArr[1].num = leftInfo.outSchoolNum;
				this.navArr[2].num = leftInfo.notSchoolNum;
				this.navArr[3].num = leftInfo.leaveSchoolNum;
				this.babyArr = leftInfo.list;
				this.cunArr = leftInfo.list;
			},
			// 获取出勤详情数量问题
			async queryattendancebyidEv(){
				let data = await this.$axios({
					// 调用 serviceAPI
					url: this.$https.queryattendancebyid,
					methods: "get",
					params: {
						EquipmentGuid: "yaohaotest001"
					},
				});
				console.log(data.data.data);
				
			},
		},
		mounted() {
			// 获取出勤数据
			this.checkAttendanceNum();
			// 获取当前学生信息
			this.queryattendancebyidEv();
		}
	}
</script>
