<template>
	<view>
		<view class="navigation">
			<view class="title">
				启航教培管家·家长端
			</view>
			<view class="identity" @click="show = true">
				<view class="picture">
					<u-avatar v-if="form.headPhoto != null" class="avatar"
						:src="form.headPhoto+'?x-oss-process=image/resize,m_fill,w_256,h_256'" size="48">
						<img src="" alt="">
					</u-avatar>
				</view>
				<view class="name">
					{{form.studentName}}
				</view>
				<view class="icon">
					<img src="../../../assets/img/riLine-exchange-line@1x.png" alt="">
				</view>
			</view>
		</view>
		<u-select v-model="show" mode="single-column" :list="studentList" @confirm="confirm"></u-select>
		<view class="head">
			<view class="wrap">
				<u-swiper :list="list"></u-swiper>
			</view>

		</view>
		<view class="my-app">
			<view class="app-items">
				<view class="item" @click="gotoUrl('pages/parents/classSchedule/classSchedule')">
					<view class="icon-box"
						style="background: linear-gradient(180deg, rgba(89,222,232,1) 1%,rgba(13,186,199,1) 100%)">
						<img src="../../../assets/img/riFill-calendar-2-fill@1x.png" alt="">
					</view>
					<view class="text">
						课程表
					</view>
				</view>
				<view class="item">
					<view class="icon-box"
						style="background: linear-gradient(180deg, rgba(169,147,255,1) 1%,rgba(129,97,255,1) 100%);">
						<img src="../../../assets/img/riFill-quill-pen-fill@1x.png" alt="">
					</view>
					<view class="text">
						请假
					</view>
				</view>
				<view class="item">
					<view class="icon-box"
						style="background: linear-gradient(180deg, rgba(91,160,242,1) 1%,rgba(26,118,226,1) 100%);">
						<img src="../../../assets/img/riFill-calendar-2-fill@1x.png" alt="">
					</view>
					<view class="text">
						机构报名
					</view>
				</view>
				<view class="item">
					<view class="icon-box"
						style="background: linear-gradient(180deg, rgba(255,189,96,1) 1%,rgba(255,150,0,1) 100%);">
						<img src="../../../assets/img/riFill-folder-user-fill@1x(1).png" alt="">
					</view>
					<view class="text">
						学员文件
					</view>
				</view>
				<view class="item">
					<view class="icon-box"
						style="background: linear-gradient(180deg, rgba(169,147,255,1) 1%,rgba(129,97,255,1) 100%);">
						<img src="../../../assets/img/riFill-bank-card-fill@1x.png" alt="">
					</view>
					<view class="text">
						缴费记录
					</view>
				</view>
				<view class="item">
					<view class="icon-box"
						style="background: linear-gradient(180deg, rgba(255,189,96,1) 1%,rgba(255,150,0,1) 100%);">
						<img src="../../../assets/img/riFill-file-edit-fill@1x.png" alt="">
					</view>
					<view class="text">
						签到记录
					</view>
				</view>
				<view class="item">
					<view class="icon-box"
						style="background: linear-gradient(180deg, rgba(89,222,232,1) 1%,rgba(13,186,199,1) 100%);">
						<img src="../../../assets/img/riFill-file-edit-fill@1x.png" alt="">
					</view>
					<view class="text">
						测温记录
					</view>
				</view>
				<view class="item">
					<view class="icon-box"
						style="background: linear-gradient(180deg, rgba(91,160,242,1) 1%,rgba(26,118,226,1) 100%);">
						<img src="../../../assets/img/riFill-file-edit-fill@1x.png" alt="">
					</view>
					<view class="text">
						校长信箱
					</view>
				</view>
			</view>
		</view>

		<!-- 最近课程 -->
		<view class="course">
			<view class="title">
				<img src="../../../assets/img/riFill-calendar-todo-fill@1x.png" alt="">最近课程
			</view>
			<view class="course-infos">
				<view class="info-box" v-for="(item,index) in courseList" :key="index"
					@click="gotoUrl('pages/parents/classSchedule/classScheduleDetails')">
					<view class="position today" v-if="item.courseDate == date">
						今
					</view>
					<view class="position tomorrow" v-if="item.courseDate == tomorrow">
						明
					</view>
					<view class="class-name">
						{{item.className}}
					</view>
					<view class="location-time">
						<view class="location">
							{{item.classroom}}
						</view>
						<view class="time">
							{{item.coursePeriods}}
						</view>
					</view>
					<view class="date">
						{{item.courseDate}}
					</view>
				</view>
				<view class="info-box info-box2">
					<view class="position tomorrow">
						明
					</view>
					<view class="class-name">
						周开琴书法班2
					</view>
					<view class="location-time">
						<view class="location">
							4楼6教室
						</view>
						<view class="time">
							09:30-10:45
						</view>
					</view>
					<view class="date">
						2023.1.4
					</view>
				</view>
			</view>
		</view>


		<!-- 课程推荐 -->
		<view class="recommend">
			<view class="title">
				<view class="title">
					<img src="../../../assets/img/riFill-award-fill@1x.png" alt="">课程推荐
				</view>
			</view>
			<view class="classify">
				<view class="item" v-for="(item,index) in chosenList" :key="index"
					:class="chosenActive == index ? 'chosen' : ''" @click="chosenClick(item,index)">
					{{item.name}}
				</view>
				<!-- <view class="item">
					精品试听
				</view>
				<view class="item">
					为您优选
				</view>
				<view class="item">
					机构推荐
				</view> -->
			</view>
			
			<view class="infos-box">
				<view class="picture">
					<img src="../../../assets/img/classify1.png" alt="">
				</view>
				<view class="infos">
					<view class="name">
						魔方记忆力
					</view>
					<view class="tips">
						<view class="item">
							基础入门
						</view>
						<view class="item">
							思维训练
						</view>
					</view>
					<view class="teacher-price">
						<view class="teacher">
							<view class="photo">
								<img src="../../../assets/img/teacher.png" alt="">
							</view>
							<view class="name">
								鲁老师
							</view>
						</view>
						<view class="price">
							低至30元/课
						</view>
					</view>
				</view>
			</view>
<view class="infos-box">
				<view class="picture">
					<img src="../../../assets/img/classify1.png" alt="">
				</view>
				<view class="infos">
					<view class="name">
						跆拳道
					</view>
					<view class="tips">
						<view class="item">
							强身健体
						</view>
						<view class="item">
							磨练意志
						</view>
					</view>
					<view class="teacher-price">
						<view class="teacher">
							<view class="photo">
								<img src="../../../assets/img/teacher.png" alt="">
							</view>
							<view class="name">
								鲁老师
							</view>
						</view>
						<view class="price">
							低至30元/课
						</view>
					</view>
				</view>
			</view>
			<view class="infos-box">
				<view class="picture">
					<img src="../../../assets/img/classify1.png" alt="">
				</view>
				<view class="infos">
					<view class="name">
						中国舞十级班
					</view>
					<view class="tips">
						<view class="item">
							专业考证
						</view>
						<view class="item">
							限时报名
						</view>
					</view>
					<view class="teacher-price">
						<view class="teacher">
							<view class="photo">
								<img src="../../../assets/img/teacher.png" alt="">
							</view>
							<view class="name">
								鲁老师
							</view>
						</view>
						<view class="price">
							低至30元/课
						</view>
					</view>
				</view>
			</view>
			<u-divider>没有更多了</u-divider>
		</view>
		<ParentsTabbar :current="0" ref="tabbarMain"></ParentsTabbar>
	</view>
</template>

<script>
	import * as classScheduleApi from '@/apis/parents/classSchedule.js'
	import * as mineApi from '@/apis/parents/mine.js'
	import ParentsTabbar from '@/components/ParentsTabbar.vue'
	
	export default {
		components: {
			ParentsTabbar
		},
		data() {
			return {
				chosenList: [
					{name: '全部'},
					{name: '精品试听'},
					{name: '为您优选'},
					{name: '机构推荐'}
				],
				chosenActive: 0,
				date: '',
				tomorrow: '',
				weekDate: [],
				weekN: ["一", "二", "三", "四", "五", "六", "日"],
				activeClass: 0,
				weekDate1: '',
				courseList: [],
				form: {
					studentName: '',
					headPhoto: ''
				},
				show: false,
				studentList: [],
				studentId: '',
				list: [{
					image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
				}, ],
			}
		},
		onReady() {
			if(this.carhelp.getStudentId()) {
				this.studentId = this.carhelp.getStudentId().studentId;
				this.getStudentDetail();
				this.getToday();
			}
			
			this.getStudentList();
		},
		methods: {
			chosenClick(item,index) {
				this.chosenActive = index;
			},
			getCourseList() {
				this.courseList = [];
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				classScheduleApi.loadMySchedule({
					studentId: this.studentId,
					startDate: this.date,
					endDate: this.weekDate[6].day
				}).then((response) => {
					uni.hideLoading();
					this.courseList =  response.data;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getToday() {
				this.weekDate = [];
				let date = new Date(); //当前日期
				let year = date.getFullYear(); //当前年
				let month = date.getMonth() + 1; //当前月
				let day = date.getDate(); //当天
				let mydate = new Date(year, month - 1, day);
				let weekday = mydate.getDay();
				this.weekDate1 = new Date(year, month - 1, day + 1 - weekday);
				this.getWeekDate(true);
			},
			getWeekDate(bl) {
				let weekDate2 = new Date(this.weekDate1.getTime());
				for (var i = 0; i < 7; i++) {
					for (var j = 0; j < this.weekN.length; j++) {
						if (i == j) {
							this.weekDate.push({
								week: this.weekN[j],
								day: this.getFormatDate(new Date(weekDate2.setDate(this.weekDate1.getDate() + i))),
								isDotShow: false
							})
						}
					}
				}
			
				if (bl) {
					let date = new Date(); //当前日期
					date = this.getFormatDate(date);
					for (var m = 0; m < this.weekDate.length; m++) {
						if (date == this.weekDate[m].day) {
							this.activeClass = m;
							this.date = this.weekDate[m].day;
							this.tomorrow = this.weekDate[m+1].day;
						}
					}
					this.getCourseList();
				}
			},
			getFormatDate(date) {
				let myyear = date.getFullYear();
				let mymonth = date.getMonth() + 1;
				let myweekday = date.getDate();
				if (mymonth < 10) {
					mymonth = "0" + mymonth;
				}
				if (myweekday < 10) {
					myweekday = "0" + myweekday;
				}
			
				return (myyear + "-" + mymonth + "-" + myweekday);
			},
			getStudentDetail() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				mineApi.getStudentDtl({
					studentId: this.studentId
				}).then((response) => {
					uni.hideLoading();
					this.form.studentName = response.data.studentName;
					this.form.headPhoto = response.data.headPhoto;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			confirm(e) {
				this.carhelp.setStudentId({studentId: e[0].value});
				this.studentId = e[0].value;
				this.getStudentDetail();
			},
			getStudentList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				mineApi.studentList().then((res) => {
					uni.hideLoading();
					var list = res.data.studentList;
					for (var i = 0; i < list.length; i++) {
						this.studentList.push({
							value: list[i].studentId,
							label: list[i].studentName
						})
					} 
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		padding-bottom: 100px;
	}
	.navigation {
      display: flex;
	  justify-content: space-between;
	  height: 44px;
	  background-color: rgba(13, 186, 199, 1);
	  padding: 0 16px;
	  .title{
		  line-height: 44px;
		  color: #ffffff;
		  font-size: 20px
	  }
	  .identity{
		  display: flex;
		  align-items:center;
		  .picture{
			  width: 24px;
			  height: 24px;
			  border-radius: 50px;
			  overflow: hidden;
			  margin-right: 4px;
			  img{
				  width: 100%;
				  height: 100%;
				  vertical-align: middle;
			  }
			  
		  }
		  .name{
			  margin-right: 4px;
			  color: rgba(255, 255, 255, 1);
		  }
		  .icon{
			  img{
				  vertical-align: middle;
			  }
		  }
	  }
		
		
	}

	.head {
		background: linear-gradient(179.89deg, rgba(13, 186, 199, 1) 61.7%, rgba(244, 246, 246, 1) 97.7%);
		padding-bottom: 100px;

		.wrap {
			padding: 16px;
		}

	}


	.my-app {
		margin: -100px 16px 16px 16px;
		border-radius: 12px 12px 0px 0px;
		padding: 16px;
		background-color: #fff;


		.app-items {
			display: flex;
			flex-wrap: wrap;

			.item {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 40rpx;

				.icon-box {
					width: 40px;
					height: 40px;
					text-align: center;
					border-radius: 8px;
					position: relative;

					.count {
						width: 28px;
						height: 16px;
						line-height: 16px;
						border-radius: 50px;
						background-color: rgba(238, 49, 56, 1);
						color: rgba(255, 255, 255, 1);
						font-size: 10px;
						text-align: center;
						position: absolute;
						top: -16rpx;
						right: -28rpx;
					}

					img {
						margin: 8px 0;


					}
				}

				.text {
					margin-top: 16rpx;
				}
			}
		}

	}

	// 最近课程
	.course {

		margin: auto;
		margin-top: 16px;
		width: 91.4%;

		.title {
			height: 20px;
			line-height: 20px;
			margin-bottom: 14px;
			color: #333333;
			font-weight: bold;

			img {
				vertical-align: middle;
				margin-right: 8px;
			}
		}

		.course-infos {
			display: flex;
			justify-content: space-between;

			.info-box {
				border-top: 2px solid #0DBAC7;
				background: linear-gradient(to right, #E4F8E3, #dcf5f6);
				width: 47.8%;
				padding: 24rpx 0 14rpx 24rpx;
				box-shadow: 2px 2px 2px 2px #e7e9e9;
				border-radius: 8px;
				position: relative;

				.position {
					width: 48rpx;
					height: 40rpx;
					line-height: 40rpx;
					position: absolute;
					top: 0;
					right: 16rpx;
					text-align: center;
					border-radius: 0px 0px 4px 4px;
					font-size: 12px;
					color: #fff;
				}

				.today {
					background-color: #0DBAC7;
				}

				.tomorrow {
					background-color: #0086FF;
				}

				.class-name {
					height: 20px;
					color: rgba(51, 51, 51, 1);
					font-size: 14px;
				}

				.location-time {
					margin-top: 8rpx;
					display: flex;
					justify-content: start;
					color: rgba(119, 119, 119, 1);
					font-size: 12px;

					.time {
						margin-left: 8rpx;
					}
				}

				.date {
					color: rgba(119, 119, 119, 1);
					font-size: 12px;
					margin-top: 8rpx;
				}
			}

			.info-box2 {
				border-top: 2px solid #0086FF;
			}
		}
	}

.recommend{
	margin:32px 16px ;
	.title {
		height: 20px;
		line-height: 20px;
		margin-bottom: 14px;
		color: #333333;
		font-weight: bold;
	
		img {
			vertical-align: middle;
			margin-right: 8px;
		}
	}
	.classify{
		display: flex;
		margin-bottom: 24px;
		.item{
			border-radius: 12px;
			line-height: 32px;
			background-color: rgba(255, 255, 255, 1);
			color: rgba(119, 119, 119, 1);
			text-align: center;
			border: 1px solid rgba(204, 204, 204, 1);
			padding: 0 8px;
			margin-left: 12px;
		}
		.chosen{
			border: 1px solid rgba(13, 186, 199, 1);
			color: rgba(13, 186, 199, 1);
		}
	}
	.infos-box{
		border-radius: 12px;
		background-color: rgba(255, 255, 255, 1);
		padding: 12px;
		margin-bottom: 12px;
		display: flex;
		.picture{
			width: 200rpx;
			height: 200rpx;
			border-radius: 4px;
			overflow: hidden;
			img{
				width: 100%;
				height: 100%;
			}
		}
		.infos{
			flex: 1;
			margin-left: 12px;
			.name{
				color: rgba(51, 51, 51, 1);
				font-size: 16px;
			}
			.tips{
				display: flex;
				margin-top: 8px;
				.item{
					padding: 0 8px;
					line-height: 20px;
					border-radius: 4px;
					background-color: rgba(241, 243, 244, 1);
					color: rgba(16, 16, 16, 1);
					font-size: 12px;
					margin-right: 8px;
				}
			}
			.teacher-price{
				margin-top: 44rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.teacher{
					display: flex;
					align-items: center;
					.photo{
						width: 32px;
						height: 32px;
						border-radius: 50px;
						overflow: hidden;
						margin-right: 8px;
						img{
							width: 100%;
							height: 100%;
						}
					}
				}
				.price{
					color: rgba(255, 61, 0, 1);
				}
			}
		}
	}
}

</style>
