<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="!isNothing" class="attendance-right-item-box" v-for="(item,index) in teatherArr" :key="index">
					<img :src="item.teatherImg" alt="">
					<span>{{item.teatherName}}</span>
					<div :style="{background:['#9C7CFA','#FF9393','#D3D3D3','#F4B52F'][item.status]}">{{['正常','未到校','离校','请假'][item.status]}}</div>
				</div>
				<div v-if="isNothing" class="nothing-box">
					<img src="../../static/img/attendancedetail/icon-nothing.png">
					<div>{{['没有出勤','暂无离校','暂无未到校','没有请假'][navIndex]}}的宝宝</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'babyActivity',
		data() {
			return {
				navArr:[
					{icon:require('../../static/img/attendancedetail/icon-attendancedetail.png'),title:'出勤详情',num:12},
					{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,
				teatherArr:[
					{teatherImg:require('../../static/img/seconds/tu-01.png'),teatherName:'张跑跑',status:0},
					{teatherImg:require('../../static/img/seconds/tu-01.png'),teatherName:'张跑跑',status:1},
					{teatherImg:require('../../static/img/seconds/tu-01.png'),teatherName:'张跑跑',status:2},
					{teatherImg:require('../../static/img/seconds/tu-01.png'),teatherName:'张跑跑',status:3},
					{teatherImg:require('../../static/img/seconds/tu-01.png'),teatherName:'张跑跑',status:0},
					{teatherImg:require('../../static/img/seconds/tu-01.png'),teatherName:'张跑跑',status:0},
					{teatherImg:require('../../static/img/seconds/tu-01.png'),teatherName:'张跑跑',status:0},
					{teatherImg:require('../../static/img/seconds/tu-01.png'),teatherName:'张跑跑',status:0},
				],
				isNothing:false
			}
		},
		methods: {
			chooseNavEv(e){
				this.navIndex = e;
				this.isNothing = true;
			},
			// 获取出勤详情数量问题
			async checkAttendanceNum(){
				let data = await this.$axios({
					// 调用 serviceAPI
					url: this.$https.getstudentattendanceinfo,
					methods: "get",
					params: {
						EquipmentID: "yaohaotest001",
					},
				});
				console.log(data);  
			}
		},
		mounted() {
			this.checkAttendanceNum();
		}
	}
</script>
