<template>
	<view class="addPlan-box">
		<view class="addPlan-header-box">
			<view class="header-hint">点击方框选择计划上课时间</view>
			<view class="header-content">
				<view class="header-title">
					<view class="header-moon">{{month}} 月</view>
					<view class="header-Festival">
						<view>6</view>
						<view>节</view>
					</view>
				</view>	
				<view v-for="(item,index) in titleList" :key="index"
				class="header-week">
					<view>{{item.num}}</view>
					<view>{{item.name}}</view>
				</view>
			</view>
		</view>
		<view class="addPlan-content-box" v-if="lessonList.length>0">
			<scroll-view scroll-y="true" style="width:100%;height: 100%;">
				<view class="content-text">
					<view class="text-left">
						<view class="left-num">
							<view></view>
							<view></view>
						</view>
					</view>
					<view class="text-right">
						<view class="status-box border0">
							<view v-for="(i,index) in 7" :key="index"
							class="text-img">
								&nbsp;&nbsp;
							</view>
						</view>
					</view>
				</view>
				<view class="content-text" v-for="(item,index) in classList" :key="index">
					<view class="text-left">
						<view class="left-num">
							<view>{{item.name}}</view>
							<view>{{item.StartTime+'-'+item.EndTime}}</view>
						</view>
					</view>
					<view class="text-right"
					:class="{'border0':item.id==6}">
						<view class="status-box">
							<view v-for="(i,indexs) in item.list" :key="indexs"
							class="text-img"
							:class="{'activeOne':item.id==1&&i.DetailsId,
							'activeTwo':item.id==2&&i.DetailsId,
							'activeThree':item.id==3&&i.DetailsId,
							'activeFour':item.id==4&&i.DetailsId,
							'activeFive':item.id==5&&i.DetailsId,
							'activeSix':item.id==6&&i.DetailsId}"
							@click="checked(item,i,indexs)">
								&nbsp;&nbsp;
								<view class="bottom"></view>
							</view>
						</view>
						<view v-if="item.id!=6" class="height30">&nbsp;&nbsp;</view>
					</view>
				</view>
				<view class="content-text" v-for="(i,index) in 2" :key="index">
					<view class="text-left">
						<view class="left-num">
							<view></view>
							<view></view>
						</view>
					</view>
					<view class="text-right">
						<view class="status-box border0">
							<view v-for="(i,keys) in 7" :key="keys"
							class="text-img">
								&nbsp;&nbsp;
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="addPlan-buttom">
			<view @click="back">
				添加完毕	
			</view>
		</view>
	</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 classList from '../../components/bookAclass/classList.vue'
	import {
		RemovePlanAppointment,GetPlanTime,SetPlanAppointment
	} from "../../api/erp";
	export default {
		components: {
			Navbar,
			classList
		},
		props: ['day'],
		setup(props) {
			const {
				proxy
			} = getCurrentInstance()
			const data = reactive({
				isShowCalendar: false,
				month:"",
				titleList:[],
				lessonList:[],
				classList:[
					{name:'第一节',
					StartTime:'09:30',
					EndTime:"11:00",
					id:1,list:[

					]},
					{name:'第二节',
						StartTime:'11:10',
						EndTime:"12:40",
						id:2,list:[

					]},
					{name:'第三节',
						StartTime:'13:30',
						EndTime:"15:00",
						id:3,list:[
							
					]},
					{name:'第四节',
						StartTime:'15:10',
						EndTime:"16:40",
						id:4,list:[

						]},
					{name:'第五节',
						StartTime:'16:50',
						EndTime:"18:20",
						id:5,list:[

					]},
					{name:'第六节',
						StartTime:'19:00',
						EndTime:"20:30",
						id:6,list:[

					]},
				]
			})
			const methods = {
				back() {
					uni.navigateBack({
						delta: 1
					});
				},
				// 选择
				checked(item,i,index){
					uni.showLoading({
						title: '加载中...'
					})
					data.lessonList = []
					if(i.DetailsId){
						let data = {
							DetailsId: i.DetailsId
						}
						that.Cancel(data)
					}else{
						let data = {
							Date: i.SubDate,
							StartTime:i.StartTime,
							EndTime: i.EndTime,
							DetailsId: i.DetailsId
						}
						that.addClassSubmit(data)
						
					}
					data.classList.forEach((items)=>{
						items.list = []
					})
				},
				// 取消
				async Cancel(data){
					let res = await RemovePlanAppointment(data);
					if (res.Code == 1) {
						that.GetPlanTimeFun()
					}
				},
				async addClassSubmit(data){
					let res = await SetPlanAppointment(data);
					if (res.Code == 1) {
						that.GetPlanTimeFun()
					}
				},
				// 获取可预约时间范围
				async GetPlanTimeFun(){
					// uni.showLoading({
					// 	title: '加载中...'
					// })
					let res = await GetPlanTime({});
					if (res.Code == 1) {
						res.Data.forEach((item,index)=>{
							if(index==0){
								data.month = item.DateStr.slice(5,7)
							}
							let datas = {
								name: that.getDateData(item.DateStr),
								num: item.DateStr.slice(8,10)
							}
							data.titleList.push(datas)
						})
						data.lessonList = []
						data.lessonList = res.Data
						data.lessonList.forEach((item,index)=>{
							data.classList.forEach((items,indexs)=>{
								item.TimeList.forEach((itemT,indexT)=>{
									if(indexs==indexT){
										items.list.push(itemT)
									}
								})
							})	

						})
						uni.hideLoading()
					}
				},
				// 获取日期
				getDateData(d) {
					let date = new Date(d)
					let week = date.getDay()
					let weekStr = ""
					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;
					}
					return weekStr
				},
			}
			let that = methods;
			onMounted(() => {
				uni.showLoading({
					title: '加载中...'
				})
				that.GetPlanTimeFun()

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

<style scoped>
	.index-box{
		background: #F7F5F6;
	}
	.navbar {
		display: flex;
		align-items: center;
		height: 100%;
		padding: 0 30rpx;
		background: #F5F5F5;
	}

	.navbar .dateStr {
		flex-grow: 1;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #111111;
		margin-right: 6rpx;
		text-align: center;
	}
	.noCourse-box{
		position: fixed;
		left: 0;
		right: 0;
		top: 475rpx;
	}
	.addPlan-header-box{
		position: fixed;
		top: 0;
		/* 137rpx */
		left: 0;
		right: 0;
		z-index: 2;
		padding: 0 14rpx 15rpx 14rpx;
		background: #F5F5F5;
		border-radius: 0 0 50rpx 50rpx;
		box-shadow: 0 1rpx 10rpx rgb(0 0 0 / 20%),
		 0 3rpx 6rpx rgb(0 0 0 / 14%), 
		 0 3rpx 6rpx -4rpx rgb(0 0 0 / 12%)
	}
	.header-hint{
		color: #4C50E7;
		font-size: 26rpx;
		font-weight: 500rpx;
		padding: 14rpx 0;
		text-align: center;
	}
	.header-content{
		display: flex;
	}
	.header-title{
		width: 102rpx;
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background: #4C50E7;
		border-radius: 20rpx;
		padding: 26rpx 9rpx 15rpx 9rpx;
	}
	.header-moon{
		flex: 1;
		margin-bottom: 18rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #FFFFFF;
		opacity: 0.6;
		text-align: center;
	}
	.header-Festival{
		display: flex;
		padding: 17rpx 20rpx 10rpx 20rpx;
		background: #373BD7;
		border-radius: 20rpx;
	}
	.header-Festival view:first-child{
		color: #FFFFFF;
		font-size: 46rpx;
		font-weight: bold;
		font-family: Source Han Sans CN;
	}
	.header-Festival view:last-child{
		font-size: 26rpx;
		font-weight: 500;
		color: #FFFFFF;
		opacity: 0.6;
		padding: 20rpx 0 0 0;
		margin-left: 2rpx;
	}
	.header-week{
		width: 89rpx;
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		border-radius: 20rpx;
	}
	.header-week.activeOne{
		background: #E5E6FA;
	}
	.header-week view{
		flex: 1;
		text-align: center;
	}
	.header-week view:first-child{
		margin-top: 15rpx;
		font-size: 48rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #111111;
	}
	.header-week view:last-child{
		font-size: 20rpx;
		font-weight: 400;
		color: #111111;
		margin-top: 10rpx;
	}
	.addPlan-content-box{
		background: #ffffff;
		margin-top: 200rpx;
	}
	.content-text{
		display: flex;
	}
	.text-left{
		width: 110rpx;
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		padding: 0 10rpx;
		
	}
	.left-num{
		text-align: right;
		margin-top: 20rpx;
	}
	.left-num view:first-child{
		font-size: 28rpx;
		font-weight: 800;
		color: #111111;
		text-align: right;
		margin-bottom: 5rpx;
	}
	.left-num view:last-child{
		background: #EEEEEE;
		border-radius: 10rpx;
		font-size: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 300;
		color: #B3B3B3;
		text-align: center;
	}
	.text-right{
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		border-bottom: 2rpx solid #E3E1E7;
		border-left: 2rpx solid #E3E1E7;
	}
	.text-right.solid{
		border-bottom: 2rpx solid #E3E1E7;
	}
	
	.status-box{
		display: flex;
		border-bottom: 2rpx dashed #E3E1E7;
	}
	.text-right.border0{
		border-bottom: 0;
	}
	.status-box.border0{
		border: 0;
	}
	.height30{
		height: 50rpx;
		background: #FAFAFA;
	}
	.text-img{
		flex: 1;
		height: 99rpx;
		border-right: 2rpx solid #E3E1E7;
		position: relative;
	}
	.text-img:last-child{
		border: 0;
	}
	.text-img.activeOne{
		background: url(https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1656577024000_737.png)no-repeat center #FFEEDB;
		background-size: 39rpx 38rpx;
		border-right: 2rpx solid #E3E1E7;
	}
	.text-img.activeOne .bottom{
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		border-bottom: 4rpx solid #FF9526;
	}
	.text-img.activeTwo{
		background: url(https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1656577024000_986.png)no-repeat center #EED9FE;
		background-size: 39rpx 38rpx;
		border-right: 2rpx solid #E3E1E7;
	}
	.text-img.activeTwo .bottom{
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		border-bottom: 4rpx solid #B967FE;
	}
	.text-img.activeThree{
		background: url(https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1656577024000_779.png)no-repeat center #D6F2E6;
		background-size: 39rpx 38rpx;
		border-right: 2rpx solid #E3E1E7;
	}
	.text-img.activeThree .bottom{
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		border-bottom: 4rpx solid #35B87A;
	}
	.text-img.activeFour{
		background: url(https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1656577019000_548.png)no-repeat center #FFF2F2;
		background-size: 39rpx 38rpx;
		border-right: 2rpx solid #E3E1E7;
	}
	.text-img.activeFour .bottom{
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		border-bottom: 4rpx solid #FF6167;
	}
	.text-img.activeFive{
		background: url(https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1656577024000_644.png)no-repeat center #E5F3FF;
		background-size: 39rpx 38rpx;
		border-right: 2rpx solid #E3E1E7;
	}
	.text-img.activeFive .bottom{
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		border-bottom: 4rpx solid #0088FF;
	}
	.text-img.activeSix{
		background: url(https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1656577024000_746.png)no-repeat center #EAF8FB;
		background-size: 39rpx 38rpx;
		border-right: 2rpx solid #E3E1E7;
	}
	.text-img.activeSix .bottom{
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		border-bottom: 4rpx solid #3BC0DE;
	}
	.addPlan-buttom{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 43rpx;
		padding: 0 90rpx;
	}
	.addPlan-buttom view{
		line-height: 90rpx;
		background: #4C50E7;
		box-shadow: 0rpx 11rpx 43rpx 0rpx rgba(76, 80, 231, 0.58);
		border-radius: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
	}
</style>
