<template>
	<view class="index-box">
		<view class="titleHeader">
			<view class="titleHeader-year">
				<view>{{year}}年{{month}}月</view>
				<view>计划 {{total}}节课</view>
			</view>
			<lxCalendar ref="lxCalendar" @chang="getData" :titleList="titleList" :weeks="weeks"></lxCalendar>
			<view v-if="weekShow" class="thisWeek" @click="clickWeek">本周</view>
		</view>
		<view class="content-box" v-if="dataList.length>0&&total>0">
			<scroll-view scroll-y="true" style="width:100%;height: 100%;">
				<classList :classList="dataList"></classList>
			</scroll-view>
			<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1656570277000_611.png"
			class="addicon"
			style="width: 157rpx;height: 157rpx;"
			@click="addPlan"/>
		</view>
		<view class="noCourse-box" v-else>
			<view class="noCourse">
				<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1656556494000_644.png" mode=""
					style="width: 426rpx;height: 344rpx;"></image>
			</view>
			<view class="addTitle">
				<view @click="addPlan">
					添加上课计划
				</view>
			</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 lxCalendar from './lx-calendar/lx-calendar.vue'
	import {
		RemovePlanAppointment,GetStuPlanAppointment
	} from "../../api/erp";
	export default {
		components: {
			Navbar,
			classList,
			lxCalendar
		},
		props: ['day'],
		setup(props) {
			const {
				proxy
			} = getCurrentInstance()
			const data = reactive({
				year: "",
				month:"",
				day:"",
				msg:{
					StartDate: "",
					EndDate: "",
				},
				total:0,
				dataList:[],
				titleList:[
					{date:'',list:[]},
					{date:'',list:[]},
					{date:'',list:[]},
					{date:'',list:[]},
					{date:'',list:[]},
					{date:'',list:[]},
					{date:'',list:[]},
				],
				weekList:[],
				weekShow:false,
				weekType:'',
				weekTime:'',
				weeks:''
			})
			const methods = {
				addPlan(){
					uni.navigateTo({
						url: '/pages/bookAclass/addPlan',
					});
				},
				back() {
					uni.navigateBack({
						delta: 1
					});
				},
				// 获取当前日期
				getDateData(d) {
					let date = new Date()
					if (d) {
						date = new Date(d)
					}
					data.year = date.getFullYear()
					data.month = date.getMonth() + 1
					data.day = date.getDate()
				},
				// 取消约课
				CancelClass(){
					uni.showModal({
                        title: '提示',
                        content: '将要取消该约课,是否继续',
                        success: function (res) {
                            if (res.confirm) {
                                let Msg = {
                                    ExamId: item.ExamId
                                }
								let res = RemovePlanAppointment(Msg);
								if (res.Code ==1) {
									uni.showToast({
										title:'删除成功',
										icon:'none',
										duration: 500
									})
								}
                            } else if (res.cancel) {
                                
                            }
                        }
                    });
				},
				// 实现方法
				getMonday(dates) {
					data.weekType = dates
					let arr = [],weekOne='';
					let todayTimeStr = new Date(new Date().toLocaleDateString()).getTime();
					var day = (new Date().getDay() - 1) * 24 * 60 * 60 * 1000;
					weekOne = todayTimeStr - day;
					if(dates == 0){//本周
						weekOne = todayTimeStr - day;//周一 0点的时间戳
					}
					// 一天的时间戳
					let dayTime = 24 * 60 * 60 * 1000;
					if(dates == -1){//上一周
						weekOne = data.weekTime - 7 * 24 * 60 * 60 * 1000;
					}else if(dates==1){//下一周
						weekOne = data.weekTime + 7 * 24 * 60 * 60 * 1000;
					}
					data.weekTime = weekOne;
					for(let i=0;i<7;i++){
						let timeOne_year = new Date(new Date(weekOne + i * dayTime)).getFullYear();
						let timeOne_month = new Date(new Date(weekOne + i * dayTime)).getMonth() + 1>=10?new Date(new Date(weekOne + i *
						dayTime)).getMonth() + 1:'0' + (new Date(new Date(weekOne + i *
						dayTime)).getMonth() + 1);
						let timeOne_date = new Date(new Date(weekOne + i * dayTime)).getDate()>=10?(new Date(new Date(weekOne + i *
						dayTime)).getDate())-1:'0'+(new Date(new Date(weekOne + i *
						dayTime)).getDate()-1);
						arr.push(timeOne_year+'-'+timeOne_month+'-'+timeOne_date);
					}
					data.weekList = arr
					data.weeks = data.weekList[0]
					return arr;
				},
				// 本周
				clickWeek(){
					this.$refs.lxCalendar.clickWeek(data.weekList[0])
					data.weekShow = false				
					let list = []
					list = data.weekList[0].split('-')
					data.month = list[1]
					data.msg.StartDate = data.weekList[0]
					data.msg.EndDate = data.weekList[6]
					that.getList()
					
				},
				getData(arr){
					let list = []
					list = arr[0].date.split('-')
					data.year = list[0]
					data.month = list[1]<10?'0'+list[1]:list[1]
					data.msg.StartDate = arr[0].date
					data.msg.EndDate = arr[6].date
					that.getList()
				},
				async getList(){
					data.dataList = []
					if(data.msg.StartDate){
						uni.showLoading({
							title: '加载中...'
						})
						let res = await GetStuPlanAppointment(data.msg);
						if (res.Code ==1) {
							data.titleList.forEach((i,indexs)=>{
								i.list = []
							})
							let arr = []
							data.dataList = res.Data
							if(res.Data.length>0){
								data.dataList.forEach((item,index)=>{
									item.SubList.sort((a,b)=>a.Sort-b.Sort)
									item.SubList.forEach(i=>{
										arr.push(i)
									})
									data.titleList.forEach((i,indexs)=>{
										if(index==indexs){
											i.date = item.DateStr.slice(8,10)
											if(item.SubList.length>0){
												i.list = item.SubList
											}else{
												i.list = []
											}
										}
									})
								})
							}
							data.total = arr.length
							uni.hideLoading()
						}
					}
				},
				
			}
			let that = methods;
			onMounted(() => {
				that.getMonday(0)
				that.getDateData()
			})
			return {
				...toRefs(data),
				...methods
			}
		},
		onLaunch(){
			
		},
		onShow(){
			
			this.getList()
		}
	}
</script>

<style scoped>
	
	.index-box{
		background: #F7F5F6;
		position: fixed;
		bottom: 0;
		top: 0;
		left: 0;
		right: 0;
	}
	.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: 342rpx;
	}
	.noCourse {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.titleHeader{
		position: relative;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		/* padding: 0 36rpx; */
	}
	.thisWeek{
		position: absolute;
		right: 0;
		top: 45rpx;
		border-radius: 50rpx 0 0 50rpx;
		background: #ffffff;
		padding: 5rpx 10rpx 5rpx 13rpx;
		font-size: 24rpx;
	}
	.titleHeader-year{
		display: flex;
		justify-content: center;
		font-size: 36rpx;
		font-weight: 800;
		color: #111111;
		padding: 41rpx 0 37rpx 0;
	}
	.titleHeader-dateStr{
		display: flex;
		flex-wrap: nowrap;
		position: relative;
	}
	.position{
		position: absolute;
		top: 50rpx;
		z-index: 2;
		width: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		background: rgba(255,255,255,1);
		box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(255,255,255, 0.2);
		border-radius: 50%;
	}
	.week{
		position: absolute;
		top: -75rpx;
		right: -40rpx;
		border-radius: 20rpx 0 0 20rpx;
		background: rgba(255,255,255,1);
		box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(255,255,255, 0.2);
		font-size: 24rpx;
		line-height: 40rpx;
		padding: 0 10rpx;
	}
	.clickLeft{
		left: -30rpx;
	}
	.clickRight{
		right: -30rpx;
	}
	.titleHeader-content{
		width: 89rpx;
		overflow: hidden;
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		color: #111111;
		border-radius: 20rpx;
		padding: 17rpx 5rpx;
	}
	.titleHeader-content.activeOne{
		background: #E4E5FB;
	}
	.titleHeader-name{
		font-size: 24rpx;
		font-weight: 400;
		text-align: center;
	}
	.titleHeader-num{
		font-size: 30rpx;
		font-weight: 500;
		text-align: center;
		padding: 23rpx 0;
	}
	.titleHeader-mark{
		display: flex;
		padding: 0 28rpx;
		justify-content: center;
		flex-wrap: wrap;
	}
	.titleHeader-mark view{
		width: 8rpx;
		height: 8rpx;
		border-radius: 50%;
		margin-right: 5rpx;
		margin-bottom: 5rpx;
	}
	.titleHeader-mark view.activeOne{
		background: #FC952A;
	}
	.titleHeader-mark view.activeTwo{
		background: #B966FF;
	}
	.titleHeader-mark view.activeThree{
		background: #35B881;
	}
	.titleHeader-mark view.activeFour{
		background: #FE606A;
	}
	.titleHeader-mark view.activeFive{
		background: #0588F8;
	}
	.titleHeader-mark view.activeSix{
		background: #33BED9;
	}
	.addTitle{
		display: flex;
		justify-content: center;
		padding: 84rpx 0 0 0;
		text-align: center;
	}
	.addTitle view{
		width: 292rpx;
		height: 80rpx;
		background: #4C50E7;
		border-radius: 40rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #ffffff;
	}
	.content-box{
		position: fixed;
		top: 329rpx;
		left: 0;
		right: 0;
		bottom: 0;
		background: #ffffff;
		border-radius: 50rpx 50rpx 0 0;
		padding: 80rpx 0 0 0;
	}
	.addicon{
		position: fixed;
		right: 50rpx;
		top: 269rpx;
		z-index: 2;
	}
	
</style>
