<template>
	<view class="">
		<Navbar>
			<view class="navbar">
				<van-icon name="arrow-left" size="36rpx" @click="back" />
				<i class="iconfont icon-calendar" style="font-size: 60rpx;" @click="isShowCalendar=true"></i>
				<view class="dateStr" @click="isShowCalendar=true">
					{{dateStr}}
				</view>
				<view class="year">
					{{year}}
				</view>
			</view>
		</Navbar>
		<view v-if="teacherList.length>0">
			<swiper class="swiper" circular previous-margin="36rpx" next-margin="36rpx" :current="current"
				@change="changeSwiper">
				<swiper-item v-for="(item,index) in teacherList" :key="index"
					style="display: flex;align-items: center;">
					<view class="swiper-item" :class="current== index ? 'activeSwiper' : 'swiper-item'">
						<view class="imgBox">
							<image :src="item.TeacherHead" mode="aspectFill"
								style="width: 100%;height: 100%;border-radius: 20rpx;box-shadow: 4rpx 3rpx 10rpx 0rpx #D6DCE4;">
							</image>
						</view>
						<view class="teacherInfo">
							<view class="teacherInfoNameBox">
								<text class="teacherInfoName">{{item.TeacherName}}</text>
								<text class="teacherInfoBtn">可报入</text>
							</view>
							<view class="TeacherIntro" v-if="item.TeacherIntro" v-html="item.TeacherIntro">
							</view>
							<view class="TeacherIntro" v-else>
								暂无教师介绍
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<van-calendar :show="isShowCalendar" @close="isShowCalendar=false" :minDate="minDateStr" :maxDate="maxDateStr"
			@confirm="onConfirmCalendar" />

		<view class="top" v-if="courselist.length>0">
			<view class="topinfo">
				<text>下次预约课程</text>
				<text @click="goRecord">更多预约</text>
			</view>
			<view class="topinfoCourse">
				<text v-if="basics.IsNextAppoint">{{basics.CourseName||'暂无'}}</text>
				<text v-else>课程已约完</text>
			</view>
			<view class="CourseTime" v-if="basics.IsNextAppoint">
				({{basics.NextClassHours||0}}课时.{{basics.NextAppointMinutes||0}}分钟)
			</view>
			<view class="borderB"></view>
		</view>
		<view class="list" v-if="courselist.length>0&&basics.IsNextAppoint">
			<view v-for="(item,index) in courselist" :key="index">
				<view class="type2box" v-if="Array.isArray(item)">
					<view v-for="(_item,_index) in item" :key="_index" class="type2">
						<view class="left">
							<text class="leftItem" style="color: #111111;">{{_item.StartTime}}</text>
							<i class="iconfont icon-moreandroid leftItem"></i>
							<text class="leftItem">{{_item.EndTime}}</text>
							<image
								src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/coffee.png"
								mode=""
								style="width: 38rpx;height: 38rpx;position: absolute;left:50%;transform: translateX(-50%);bottom: -8rpx;z-index:1"
								v-if="_index!==item.length-1"></image>
						</view>
						<view class="right">
							<view class="classroom" style="width: 100%;">
								<text class="schoolName">
									{{schoolName}}
								</text>
								<text class="">
									{{roomName}}教室
								</text>
							</view>

							<view class="desc" style="width: 100%;">
								<image
									src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/book.png"
									mode="" style="width: 30rpx;height: 30rpx;margin-right: 10rpx;"></image>
								{{_item.Description||''}}
							</view>
						</view>

					</view>
					<view class="yuyueBox">
						<image
							src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/people.png"
							mode="" style="width: 30rpx;height: 30rpx;"></image>
						<view class="yuyueNum">
							已报{{item[0].PeopleNum||0}}人
						</view>
						<view class="yuyueBtn" v-if="item[0].State===0||item[0].State==3"
							@click="checkCourseType2(item)">
							预约
						</view>
						<view class="yuyueBtn" style="opacity: 0.5;" v-if="item[0].State==4">
							已预约
						</view>
					</view>

				</view>
				<view class="type1" v-else>
					<view class="left">
						<text class="leftItem" style="color: #111111;">{{item.StartTime}}</text>
						<i class="iconfont icon-moreandroid leftItem"></i>
						<text class="leftItem">{{item.EndTime}}</text>
					</view>
					<view class="right">
						<view class="classroom" style="width: 100%;">
							<text class="schoolName">
								{{schoolName}}
							</text>
							<text class="">
								{{roomName}}教室
							</text>
						</view>

						<view class="desc" style="width: 100%;">
							<image
								src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/people.png"
								mode="" style="width: 30rpx;height: 30rpx;margin-right: 10rpx;"></image>
							已报{{item.PeopleNum||0}}人
						</view>

					</view>
					<view class="yuyueBtn" v-if="item.State===0||item.State==3" @click="checkCourse(index)">
						预约
					</view>
					<view class="yuyueBtn" style="opacity: 0.5;" v-if="item.State==4">
						已预约
					</view>
				</view>
			</view>
		</view>
		<view class="noCourse" v-if="courselist.length==0&&teacherList.length>0">
			<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/noCourse.png" mode=""
				style="width: 166rpx;height: 166rpx;"></image>
			<view class="noCourseText">
				暂无可约课程
			</view>
		</view>
		<view class="noCourse" v-if="teacherList.length==0">
			<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/noCourse.png" mode=""
				style="width: 166rpx;height: 166rpx;"></image>
			<view class="noCourseText">
				暂无可约老师
			</view>
		</view>
		<van-overlay :show="showlay" :lockScroll="false">
			<view class="laybox">
				<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/yuyuesuccess.png"
					mode="widthFix" style="width: 100%;height: 162rpx;border-radius: 24rpx 24rpx 0 0;"></image>
				<view class="layboxTitle">
					预约成功
				</view>
				<view class="layboxBtn1" @click="goRecord(),showlay=false">
					查看课表
				</view>
				<view class="layboxBtn2" @click="showlay=false">
					继续预约
				</view>
				<view class="layboxBtn3" @click="goIndex">
					返回首页
				</view>
			</view>
		</van-overlay>
		<OtherTeacherTime :show="showOtherTime" :infoList="OtherTimeList" @close="closeOtherTeacherTime"
			@change="changeTime" @goOn="subscribe(ShiftSortArr)" />
	</view>
</template>

<script>
	import {
		ref,
		toRefs,
		reactive,
		getCurrentInstance,
		onMounted
	} from 'vue'
	import {
		DateFormat,
		getToday
	} from '../../utils/date.js'
	import Navbar from '../../components/navbar.vue'
	import OtherTeacherTime from '../../components/subscribe/otherTeacherTime.vue'
	export default {
		components: {
			Navbar,
			OtherTeacherTime
		},
		props: ['day'],
		setup(props) {
			const {
				proxy
			} = getCurrentInstance()
			const data = reactive({
				isShowCalendar: false,
				showlay: false,
				date: "2月1号",
				dateStr: "",
				year: "",
				minDateStr: new Date().getTime(),
				maxDateStr: new Date().getTime(),
				current: 0,
				teacherList: [],
				msg: {
					Date: props.day,
					School_Id: '-1',
				},
				basics: {},
				courselist: [],
				schoolName: "",
				roomName: "",
				latestTime: "00:00", //最后预约的课时
				showOtherTime: false,
				OtherTimeList: [],
				ShiftSortArr: [], //暂存选中的时段
			})
			const methods = {
				onConfirmCalendar(val) {
					data.isShowCalendar = false
					this.getDateData(val.detail)
					data.msg.Date = DateFormat(val.detail)
					data.current = 0
					this.getTeacherList()
					console.log(86, data.msg.Date)
				},
				// 获取日期
				getDateData(d) {
					let date = new Date()
					if (d) {
						date = new Date(d)
					}
					let year = date.getFullYear()
					let week = date.getDay()
					let weekStr = ""
					let month = date.getMonth() + 1
					let day = date.getDate()
					switch (week) {
						case 0:
							weekStr = '周日';
							break;
						case 1:
							weekStr = '周一';
							break;
						case 2:
							weekStr = '周二';
							break;
						case 3:
							weekStr = '周三';
							break;
						case 4:
							weekStr = '周四';
							break;
						case 5:
							weekStr = '周五';
							break;
						case 6:
							weekStr = '周六';
							break;
					}
					data.year = year
					data.dateStr = month + "月" + day + '号(' + weekStr + ')'
				},
				changeSwiper(val) {
					data.current = val.detail.current
					data.courselist = data.teacherList[val.detail.current].CourseTimeList
					data.schoolName = data.teacherList[val.detail.current].SchoolName
					data.roomName = data.teacherList[val.detail.current].RoomName
					methods.courseGroup()
					data.courselist.map(e => {
						if (e.State == 4) {
							data.latestTime = e.StartTime
						}
					})
				},
				//获取老师列表
				getTeacherList() {
					uni.showLoading({
						title: '加载中...'
					})
					proxy.$request("/AppletCenter/GetScrollAppointmentTeacherList", data.msg).then(res => {
						if (res.Code == 1) {
							data.teacherList = res.Data;
							if (data.teacherList.length > 0) {
								data.courselist = data.teacherList[0].CourseTimeList
								data.schoolName = data.teacherList[0].SchoolName
								data.roomName = data.teacherList[0].RoomName
								methods.courseGroup()

								data.courselist.map(e => {
									if (e.State == 4) {
										data.latestTime = e.StartTime
									}
								})
							} else {
								data.courselist = []
							}
							uni.hideLoading()
						}
					})
				},
				// 课程分组
				courseGroup() {
					let obj = {}
					data.courselist.map((item, index) => {
						if (item.SortIdentify) {
							if (!obj[item.SortIdentify]) {
								obj[item.SortIdentify] = [item]
							} else {
								obj[item.SortIdentify].push(item)
							}
						}
					})
					data.courselist.forEach((e, i) => {
						if (obj[e.SortIdentify] && obj[e.SortIdentify].length > 1) {
							data.courselist.splice(i, 1, obj[e.SortIdentify])
						}
					})
					data.courselist = Array.from(new Set(data.courselist))
				},
				//获取约课的基础信息
				getBaseInfo() {
					proxy.$request("/AppletCenter/GetScrollAppointmentBaseInfo", {}).then(res => {
						if (res.Code == 1) {
							data.basics = res.Data;
							const date = new Date()
							const y = date.getFullYear()
							const m = date.getMonth() + 1
							const d = date.getDate()
							const curMonthMaxDay = new Date(y, m, 0).getDate()
							const day = d + res.Data.AppointDay - 1

							// 跨月
							//日历最大值 start
							let maxYear = y
							let maxMonth = m
							let maxDay = day
							if (maxDay > curMonthMaxDay && m !== 12) {
								maxDay = day - curMonthMaxDay
								maxMonth = m + 1
							} else if (maxDay > curMonthMaxDay && m === 12) {
								// 跨年
								maxYear = y + 1
								maxMonth = 1
								maxDay = day - curMonthMaxDay
							}
							const maxStr = maxYear + '-' + (maxMonth < 10 ? '0' + maxMonth : maxMonth) + '-' +
								(maxDay < 10 ? '0' + maxDay : maxDay)
							data.maxDateStr = new Date(maxStr).getTime()
							//日历最大值 end
							//日历最小值 start
							if (res.Data.AdvanceDay) {
								let minYear = y
								let minMonth = m
								let minDay = d+res.Data.AdvanceDay
								if (minDay > curMonthMaxDay && m !== 12) {
									minDay = day - curMonthMaxDay
									minMonth = m + 1
								} else if (minDay > curMonthMaxDay && m === 12) {
									// 跨年
									minYear = y + 1
									minMonth = 1
									minDay = day - curMonthMaxDay
								}
								const minStr = minYear + '-' + (minMonth < 10 ? '0' + minMonth : minMonth) +
									'-' + (minDay<10?'0'+minDay:minDay)
								data.minDateStr = new Date(minStr).getTime()
								this.getDateData(minStr)
								data.msg.Date = minStr
							}
							if (res.Data.Scroll_OpenSchool == 1) {
								let schoolId = uni.getStorageInfoSync('userInfo').School_Id
								data.msg.School_Id = schoolId
							}
							this.getTeacherList()
							
						}
					})
				},
				//更新约课的基础信息
				updateBaseInfo() {
					proxy.$request("/AppletCenter/GetScrollAppointmentBaseInfo", {}).then(res => {
						if (res.Code == 1) {
							data.basics = res.Data;
						}
					})
				},
				updateTeacherList() {
					uni.showLoading({
						title: '加载中...'
					})
					proxy.$request("/AppletCenter/GetScrollAppointmentTeacherList", data.msg).then(res => {
						if (res.Code == 1) {
							data.teacherList = res.Data;
							console.log(355, data.latestTime)
							if (data.teacherList.length > 0) {
								data.courselist = data.teacherList[data.current].CourseTimeList
								data.schoolName = data.teacherList[data.current].SchoolName
								data.roomName = data.teacherList[data.current].RoomName
								methods.courseGroup()
							} else {
								data.courselist = []
							}
							uni.hideLoading()
						}
					})
				},
				goRecord() {
					uni.navigateTo({
						url: '/pages/appointment/mySubscribe',
					});
				},
				goIndex() {
					uni.switchTab({
						url: '/pages/index/index'
					})
				},
				//选课
				checkCourse(index) {
					if (data.basics.AdvanceDay == 1 && data.basics.ScrollETime) {
						const lateTime = new Date(getToday() + ' ' + data.basics.ScrollETime).getTime()
						const nowTime = new Date().getTime()
						const targetDay = parseInt(data.msg.Date.slice(-2))
						const curDay = parseInt(getToday().slice(-2))
						if (nowTime > lateTime && (targetDay - curDay === 1)) {
							uni.showToast({
								icon: 'none',
								title: `${data.basics.ScrollETime}点后不可预约明天课程`
							})
							return
						}
					}
					if (data.basics.AppointDate) {
						const lateDate = new Date(data.basics.AppointDate).getTime()
						const curSubDate = new Date(data.msg.Date).getTime()
						if (curSubDate < lateDate) {
							uni.showToast({
								icon: 'none',
								title: `不能预约${data.basics.AppointDate}之前的日期`
							})
							return
						}
					}
					let curCourse = data.courselist[index]
					let RemainTime = data.basics.NextAppointMinutes - curCourse.Minutes //剩余课时
					const ShiftSortArr = [curCourse]
					if (RemainTime > 0) {
						if (index + 1 == data.courselist.length) {
							uni.showToast({
								icon: 'none',
								title: "课时不足，请预约其他时间段"
							})
							return
						} else {
							console.log(428, ShiftSortArr)
							this.mapNextCourse(index, ShiftSortArr, RemainTime)
						}
					} else if (RemainTime == 0) {
						this.ShiftSortArr = ShiftSortArr
						this.validateAppointment(ShiftSortArr)
					} else {
						uni.showToast({
							icon: 'none',
							title: "课时不匹配，请预约其他时间段"
						})
					}

				},
				//课时不足，依次加入下一节
				mapNextCourse(index, ShiftSortArr = [], RemainTime) {
					let nexIndex = index + 1
					let nexCourse = data.courselist[nexIndex]
					if (!Array.isArray(nexCourse)) {
						let RemainTime2 = RemainTime - nexCourse.Minutes //剩余课时
						ShiftSortArr.push(nexCourse)
						if (RemainTime2 === 0) {
							this.ShiftSortArr = ShiftSortArr
							this.validateAppointment(ShiftSortArr)
						} else if (RemainTime2 > 0) {
							this.mapNextCourse(nexIndex, ShiftSortArr, RemainTime2)
						} else {
							uni.showToast({
								icon: 'none',
								title: "课时不匹配，请预约其他时间段"
							})
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: "课时不匹配，请预约其他时间段"
						})
					}
				},
				//预约已有学员的课
				checkCourseType2(item) {
					if (data.basics.AdvanceDay == 1) {
						const lateTime = new Date(getToday() + ' ' + data.basics.ScrollETime).getTime()
						const nowTime = new Date().getTime()
						if (nowTime > lateTime) {
							uni.showToast({
								icon: 'none',
								title: `${data.basics.ScrollETime}点后不可预约明天课程`
							})
							return
						}
					}
					if (data.basics.AppointDate) {
						const lateDate = new Date(data.basics.AppointDate).getTime()
						const curSubDate = new Date(data.msg.Date).getTime()
						if (curSubDate < lateDate) {
							uni.showToast({
								icon: 'none',
								title: `需预约${data.basics.AppointDate}之后的日期`
							})
							return
						}
					}
					let total = item.reduce((pre, cur) => {
						return cur.Minutes + pre
					}, 0)
					if (data.basics.NextAppointMinutes == total) {
						this.ShiftSortArr = item
						this.validateAppointment(item)
					} else {
						uni.showToast({
							icon: 'none',
							title: "课时不匹配，请预约其他时间段"
						})
					}
				},
				subscribe(ShiftSortArr) { //立即预约
					const techerInfo = data.teacherList[data.current]
					const obj = {
						Date: data.msg.Date,
						AccountId: techerInfo.AccountId,
						TeacherId: techerInfo.TeacherId,
						ShiftSort: ShiftSortArr.map(e => e.Sort).toString(),
						CourseId: data.basics.CourseId,
						ChapterNo: data.basics.NextAppointChapterNo,
					}
					uni.requestSubscribeMessage({
						tmplIds: data.basics.TempleteList,
						success(res) {
							proxy.$request("/AppletCenter/SetScrollAppointment", obj).then(res => {
								if (res.Code == 1) {
									methods.updateBaseInfo()
									methods.updateTeacherList()
									data.showlay = true
								}
							})
							// console.log(486, res)
							// if (res[data.basics.TempleteList[0]] == 'accept') {

							// } else {
							// 	uni.showToast({
							// 		icon: 'none',
							// 		title: "订阅失败，请重新预约"
							// 	})
							// }

						},
						fail() {
							uni.showToast({
								icon: 'none',
								title: "订阅失败，请重新预约"
							})
						}
					})
				},
				back() {
					uni.navigateBack({
						delta: 1
					});
				},
				// 验证约课时段
				validateAppointment(ShiftSortArr) {
					const techerInfo = data.teacherList[data.current]
					const msg = {
						Date: data.msg.Date,
						AccountId: techerInfo.AccountId,
						TeacherId: techerInfo.TeacherId,
						ShiftSort: ShiftSortArr.map(e => e.Sort).toString(),
						CourseId: data.basics.CourseId,
						ChapterNo: data.basics.NextAppointChapterNo,
					}
					proxy.$request("/AppletCenter/ValidateToDayAppointment", msg).then(res => {
						if (res.Data.State == 0 || res.Data.State == 1) {
							this.subscribe(ShiftSortArr)
						} else if (res.Data.State == 2 || res.Data.State == 3) {
							console.log('验证约课时段', res)
							data.OtherTimeList = res.Data.TimeList
							data.showOtherTime = true
						}
					})
				},
				// IsShowBtn(s='00:00'){
				// 	let eArr=data.latestTime.split(':')
				// 	let eStr=eArr[0]*3600+eArr[1]*60
				// 	let sArr=s.split(':')
				// 	let sStr=sArr[0]*3600+sArr[1]*60
				// },
				closeOtherTeacherTime(val) {
					data.showOtherTime = val
				},
				//切换-预约其他老师的课
				changeTime(item) {
					const obj = {
						Date: data.msg.Date,
						AccountId: item.AccountId,
						TeacherId: item.TeacherId,
						ShiftSort: item.ShiftSort,
						CourseId: data.basics.CourseId,
						ChapterNo: data.basics.NextAppointChapterNo,
					}
					uni.requestSubscribeMessage({
						tmplIds: data.basics.TempleteList,
						success(res) {
							proxy.$request("/AppletCenter/SetScrollAppointment", obj).then(res => {
								if (res.Code == 1) {
									data.showOtherTime = false
									let findIndex = data.teacherList.findIndex(e => {
										return e.TeacherId == item.TeacherId
									})
									console.log(findIndex)
									if (findIndex) {
										data.current = findIndex
									}
									methods.updateBaseInfo()
									methods.updateTeacherList()
									data.showlay = true
								}
							})
							// if (res[data.basics.TempleteList[0]] == 'accept') {

							// } else {
							// 	uni.showToast({
							// 		icon: 'none',
							// 		title: "订阅失败，请重新预约"
							// 	})
							// }

						},
						fail() {
							uni.showToast({
								icon: 'none',
								title: "订阅失败，请重新预约"
							})
						}
					})
				},
			}
			onMounted(() => {
				methods.getDateData()
				methods.getBaseInfo()

			})
			return {
				...toRefs(data),
				...methods
			}
		},
	}
</script>

<style scoped>
	.navbar {
		display: flex;
		align-items: center;
		height: 100%;
		padding: 0 30rpx;
	}

	.navbar .dateStr {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #111111;
		margin-right: 6rpx;
	}

	.navbar .year {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #888888;
	}

	.swiper {
		height: 360rpx;
	}

	.swiper-item {
		width: 100%;
		height: 235rpx;
		margin: 0 10rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		box-shadow: 4rpx 3rpx 10rpx 0rpx rgba(212, 212, 212, 0.6);
		box-sizing: border-box;
	}

	.swiper-item .imgBox {
		width: 280rpx;
		height: 360rpx;
		overflow: hidden;
	}

	.activeSwiper {
		height: 295rpx !important;
		padding: 0 !important;
	}

	.teacherInfo {
		box-sizing: border-box;
		padding: 30rpx;
		flex-grow: 1;
		width: 378rpx;
		height: 100%;
		overflow: hidden;
	}

	.teacherInfoNameBox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.teacherInfoName {
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #111111;
	}

	.teacherInfoBtn {
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #4C50E7;
	}

	.top {
		width: 678rpx;
		background-color: #4C50E7;
		border-radius: 24rpx 24rpx 0px 0px;
		margin: 60rpx auto;
		box-sizing: border-box;
		padding: 30rpx 40rpx;
		position: relative;
	}

	.topinfo {
		display: flex;
		justify-content: space-between;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #989BF6;
		margin-bottom: 10rpx;
	}

	.topinfoCourse {
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		margin-bottom: 4rpx;
		white-space: nowrap;
		overflow-x: auto;
	}

	.top .borderB {
		position: absolute;
		bottom: 0rpx;
		left: -18rpx;
		/* z-index: 2; */
		width: 95vw;
		height: 25rpx;
		border-radius: 12rpx;
		background: linear-gradient(0deg, rgba(17, 21, 177, 0.5), rgba(17, 21, 177, 0.2), rgba(17, 21, 177, 0.01));
	}

	.CourseTime {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}

	.TeacherIntro {
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #888888;
		height: 200rpx;
		overflow-y: scroll;
	}

	.list .type1 {
		width: 678rpx;
		height: 196rpx;
		background: #FFFFFF;
		box-shadow: 2rpx 4rpx 40rpx 0rpx rgba(212, 212, 212, 0.6);
		border-radius: 16rpx;
		margin: 10rpx 0;
		display: flex;
		margin: 0 auto;
		margin-bottom: 30rpx;
		overflow: hidden;
		position: relative;
	}

	.type1 .left {
		width: 165rpx;
		height: 100%;
		background-color: #F5F5F5;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-content: space-around;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.type1 .leftItem {
		width: 100%;
		text-align: center;
		color: #cfcfcf;
	}

	.type1 .right {
		width: 360rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-content: space-around;
		box-sizing: border-box;
		padding: 20rpx 0 20rpx 30rpx;
		position: relative;
	}

	.type1 .classroom {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #111111;
	}

	.type1 .desc {
		display: flex;
		align-items: center;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #888888;
	}

	.classroom .schoolName {
		margin-right: 30rpx;
	}

	.type1 .yuyueBtn {
		position: absolute;
		right: 35rpx;
		top: 50%;
		transform: translateY(-50%);
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		height: 50rpx;
		width: 90rpx;
		background-color: #4C50E7;
		border-radius: 25rpx;
	}

	.type2box {
		width: 678rpx;
		margin: 0 auto;
		border-radius: 16rpx;
		box-shadow: 2rpx 4rpx 40rpx 0rpx rgba(212, 212, 212, 0.6);
		margin-bottom: 30rpx;
		box-sizing: border-box;
		position: relative;
	}

	.type2 {
		width: 100%;
		height: 196rpx;
		background-color: #FFFFFF;
		display: flex;
	}

	.type2 .left {
		width: 165rpx;
		height: 100%;
		background-color: #F5F5F5;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-content: space-around;
		box-sizing: border-box;
		padding: 20rpx;
		position: relative;
	}

	.type2 .leftItem {
		width: 100%;
		text-align: center;
		color: #cfcfcf;
	}

	.type2 .right {
		width: 360rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-content: space-around;
		box-sizing: border-box;
		padding: 20rpx 0 20rpx 30rpx;
		position: relative;
		border-bottom: 1px solid #E9E9E9;
	}

	.type2 .classroom {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #111111;
	}

	.type2 .desc {
		display: flex;
		align-items: center;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #888888;
		white-space: nowrap;
		overflow-x: auto;
	}

	.type2box .yuyueBox {
		position: absolute;
		right: 35rpx;
		top: 50%;
		transform: translateY(-50%);
		text-align: center;
	}

	.type2box .yuyueNum {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #888888;
		margin-bottom: 20rpx;
	}

	.type2box .yuyueBtn {

		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		height: 50rpx;
		width: 90rpx;
		background-color: #4C50E7;
		border-radius: 25rpx;
	}

	.noCourse {
		margin-top: 25vh;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.noCourseText {
		width: 100%;
		text-align: center;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #111111;
		margin-top: 10rpx;
	}

	.laybox {
		width: 462rpx;
		height: 607rpx;
		background-color: #FFFFFF;
		border-radius: 24rpx;
		position: fixed;
		top: 50%;
		left: 50%;
		z-index: 9;
		transform: translate(-50%, -50%);
	}

	.laybox .layboxTitle {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #111111;
		text-align: center;
		margin-top: 20rpx;
	}

	.laybox .layboxBtn1 {
		width: 292rpx;
		height: 80rpx;
		background-color: #4C50E7;
		border-radius: 40rpx;
		margin: 30rpx auto;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.laybox .layboxBtn2 {
		width: 292rpx;
		height: 80rpx;
		background-color: #E4E5FB;
		border-radius: 40rpx;
		margin: 30rpx auto;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #4C50E7;
	}

	.laybox .layboxBtn3 {
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #BBBCCE;
		margin-top: 30rpx;
	}
</style>
