<template>
	<div>
		<error-page v-if="showError" @closeError="closeError"></error-page>
		<!-- 主体内容 -->
		<div v-if="!showError" class="main">
			<!-- 左侧 -->
			<div class="main-left">
				<!-- 班级情况 -->
				<div class="class-left-one">
					<div class="baby-left-content">
						<div class="class-left-title">
							<div class="pultitle">班级情况</div>
						</div>
						<div class="baby-content-box">
							<div class="class-situation class-item-box" v-if="className!=''">{{className}}</div>
							<!-- 班级老师 -->
							<div class="class-item-box" v-if="teatherArr.length!=0">
								<div class="teather-title">班级老师</div>
								<div class="teather-box">
									<div v-for="(item,index) in teatherArr" :key="index">
										<img :src="item.AvatarUrl" >
										<span>{{item.TeacherName}}</span>
										<!-- <label @click="goDetail(index)" style="font-size: 14px;margin-top: 10px;color: #9c7cfa;">查看详情</label> -->
									</div>
								</div>
							</div>
							<!-- 当前活动 -->
							<div v-for="(item,index) in dangArr.Content" :key="index" class="class-item-box" style="height: 210px;">
								<div class="teather-title">当前活动</div>
								<div class="class-active">
									<label>{{item.TimePart}}</label>
									<label>{{item.Name}}</label>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 右侧 -->
			<div class="class-main-right">
				<div v-if="!showDetail">
					<div class="class-left-title">
						<!-- <div class="pultitle" >宝宝课表第{{weekNum}}周（{{dateTime}}）</div> -->
						<div class="pultitle" >宝宝课表第{{weekNum}}周</div>
					</div>
					<div class="baby-content-box">
						<div class="time-title-box">
							<div v-for="(item,index) in kebiaoArr" :key="index">{{item}}</div>
						</div>
						<template v-if="dataArr.length!=0">
							<div class="tiam-data-box" v-for="(item,index) in dataArr" :key="index">
								<div class="time-left" :style="{background:['#C3AEFF','#F1D470','#FF9393'][index]}">{{item.Ampm}}</div>
								<div style="width: 100%;">
									<div class="time-right-box" v-for="(itemt,indext) in item.Content" :key="indext">
										<div class="time-item clips1" style="border-radius: 10px 0 0 10px;display: flex;">
											<div></div>
											<div>{{itemt.TimePart}}</div>
										</div>
										<div class="clips1 time-item">{{itemt.Week1Name}}</div>
										<div class="clips1 time-item">{{itemt.Week2Name}}</div>
										<div class="clips1 time-item">{{itemt.Week3Name}}</div>
										<div class="clips1 time-item">{{itemt.Week4Name}}</div>
										<div class="clips1 time-item">{{itemt.Week5Name}}</div>
									</div>
								</div>
							</div>
						</template>
						<loading :isShow="showLoading_right"></loading>
					</div>
				</div>
				<div v-if="showDetail" style="background-color: #FFFFFF;border: 3px solid #7240c5;width: 100%;height: 100%;border-radius: 20px;overflow: hidden;">
					<teacherStyleDetail :teacherInfo="teacherInfo" @backstyle="backstyle"></teacherStyleDetail>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import teacherStyleDetail from '@/components/teacherStyleDetail.vue';
	export default {
		components:{
			teacherStyleDetail
		},
		name: 'babyActivity',
		data() {
			return {
				weekNum:0,
				dateTime:0,
				className:'',
				teatherArr:[],
				kebiaoArr:['时间','星期一','星期二','星期三','星期四','星期五'],
				dataArr:[],
				isNothing:false,
				dangArr:[],
				timer:null,
				showLoading_right:true,
				showError:false,
				showDetail:false,
				teacherInfo:{}
			}
		},
		methods: {
			// 查看教师详情
			goDetail(e){
				if(this.$storage.get('network')){
					this.teacherInfo = this.teatherArr[e];
					console.log(this.teatherArr[e]);
					// this.showLoading = true;
					this.getteachers_demeanor_detailEv(this.teacherInfo.TeacherGuid);
				} else {
					this.showError = true;
				}
			},
			// 关闭教师详情
			backstyle(){
				this.showDetail = false;
			},
			async getteachers_demeanor_detailEv(guid) {
				console.log(guid,'guid');
				if(this.$storage.get('network')){
					let data = await this.$axios({
						// 调用 serviceAPI
						url: this.$https.getteachers_demeanor_detail,
						methods: "get",
						params: {
							Guid:guid,
							OrgGuid:this.$storage.get('orgGuid')
						},
					});
					this.teacherInfo = data.data.data;
					this.$storage.set('teacherInfo',this.teacherInfo);
				} else {
					this.teacherInfo = this.$storage.get('teacherInfo');
				}
				this.showDetail = true;
				// this.showLoading = false;
			},
			closeError(){
				this.showError = false;
			},
			// 查看一周的宝宝课表
			async getbabycourseEv() {
				if(this.$storage.get('network')){
					this.showError = false;
					let data = await this.$axios({
						url: this.$https.getbabycourse,
						methods: "get",
						params: {
							EquipmentID: this.$storage.get('EquipmentID'),
						},
					});
					if(data.data.data!=undefined){
						let newData = data.data.data;
						// 第几周
						this.weekNum = newData[0].NowWeekNo;
						this.$storage.set('weekNum',this.weekNum);
						// 时间
						let newTime = newData[0].NowDate.slice(0,10).split('/');
						this.dateTime = `${newTime[2]}年${newTime[1]}月${newTime[0]}日`;
						this.$storage.set('dateTimeacti',this.dateTime);
						// 一周安排
						this.dataArr = newData[0].WeekData;
						this.$storage.set('dataArracti',this.dataArr);
					}
				} else {
					this.weekNum = this.$storage.get('weekNum');
					this.dateTime = this.$storage.get('dateTimeacti');
					this.dataArr = this.$storage.get('dataArracti');
					if(this.weekNum==undefined){
						this.showError = true;
					}
				}
				this.showLoading_right = false;
			},
			// 当前活动
			async schedulingWebEv() {
				if(this.$storage.get('network')){
					let data = await this.$axios({
						url: this.$https.schedulingWeb,
						methods: "get",
						params: {
							EquipmentID: this.$storage.get('EquipmentID'),
						},
					});
					if(data.data.data!=undefined){
						let newData = data.data.data;
						let newDate = new Date();
						let timeDate = `${newDate.getHours()}.${newDate.getMinutes()}`;
						if('8.00' <= timeDate && timeDate <= '11.55') {
							this.dangArr = newData[0].WeekData[0];
						} else if('11.55' <= timeDate && timeDate <= '15.00') {
							this.dangArr = newData[0].WeekData[1];
						} else if('15.00' <= timeDate && timeDate <= '17.00') {
							this.dangArr = newData[0].WeekData[2];
						}
						this.$storage.set('dangArracti',this.dangArr);
					}
				} else {
					this.dangArr = this.$storage.get('dangArracti');
				}
			},
			// 班级情况
			async classStatusEv() {
				if(this.$storage.get('network')){
					let data = await this.$axios({
						url: this.$https.classStatus,
						methods: "get",
						params: {
							EquipmentID: this.$storage.get('EquipmentID'),
						},
					});
					if(data.data.data!=undefined){
						this.teatherArr = data.data.data.Teachers;
						this.className = data.data.data.ClassName;
						this.$storage.set('teatherArracti',this.teatherArr);
						this.$storage.set('classNameactu',this.className);
					}
				} else {
					this.teatherArr = this.$storage.get('teatherArracti');
					this.className = this.$storage.get('classNameactu');
				}
			},
			
		},
		mounted() {
			// 查看一周的宝宝课表
			this.getbabycourseEv();
			// 当前活动
			this.schedulingWebEv();
			// 班级情况
			this.classStatusEv();
			// 各一分钟调用一次当前活动
			this.timer = setInterval(()=>{
				this.schedulingWebEv();
			},1000)
		},
		destroyed(){
			clearInterval(this.timer);
		}
	}
</script>
