<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="">
					<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="" 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="../assets/attendancedetail/-s-暂无.png">
					<div>{{['没有出勤','暂无离校','暂无未到校','没有请假'][navIndex]}}的宝宝</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'babyActivity',
		data() {
			return {
				navArr:[
					{icon:'../assets/attendancedetail/icon-attendancedetail.png',title:'出勤详情',num:12},
					{icon:'../assets/attendancedetail/icon-lixiao.png',title:'离校情况',num:0},
					{icon:'../assets/attendancedetail/icon-qingj.png',title:'未到校宝宝',num:0},
					{icon:'../assets/attendancedetail/icon-weidao.png',title:'请假宝宝',num:0},
				],
				navIndex:0,
				teatherArr:[
					{teatherImg:'',teatherName:'张跑跑',status:0},
					{teatherImg:'',teatherName:'张跑跑',status:1},
					{teatherImg:'',teatherName:'张跑跑',status:2},
					{teatherImg:'',teatherName:'张跑跑',status:3},
					{teatherImg:'',teatherName:'张跑跑',status:0},
					{teatherImg:'',teatherName:'张跑跑',status:0},
					{teatherImg:'',teatherName:'张跑跑',status:0},
					{teatherImg:'',teatherName:'张跑跑',status:0},
				],
				isNothing:false
			}
		},
		methods: {
			chooseNavEv(e){
				this.navIndex = e;
				this.isNothing = true;
			}
		},
		mounted() {
			
		}
	}
</script>
