<template>
	<view class="page-yy-form">
		<uni-nav-bar :fixed="true" height="200rpx" title="课程预约" color="#FFF" left-icon="left" backgroundColor="rgb(0,0,0,0)" :border="false" @clickLeft="onBack"/>
		
		<view class="date-list"> 
			<block v-for="(it,index) in dateList"> 
				<view class="date-item" :class="activeIndex==index?'active':''" @click="onSetDate(it,index)">
					<view class="week">
						<view class="text">{{it.week}}</view>
					</view>
					<view class="day">{{it.day}}</view>
				</view> 
			</block> 
		</view>
		<view class="time-list">
			<scroll-view>
				<view class="times" > 
					<block v-for="(it,index) in timeList"> 
						<block v-for="(item,itemIndex) in it">
							<view class="item" :class="item.status.className" @click="onSetStatus(index,itemIndex,item)" >
								<view class="time"><text class="text">{{item.time}}</text></view>
								<view class="status">								
									<text class="text">{{item.status.statusText}}</text>
								</view>
							</view>
						</block>
					</block>
				</view>
			</scroll-view>
		</view> 
		
		<view class="footer">
			<button class="btn" @click="onConfirm">立即预约</button>			 
		</view>
		<uni-popup ref="popPackage">
			 <FitPackageForm :courseInfo="courseInfo" @onCloseRenew="onCloseRenew" :packageList="packageList"></FitPackageForm>
		</uni-popup>
		
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import FitPackageForm from '@/components/FitPackageForm/FitPackageForm.vue'
	export default {
		components:{
			FitPackageForm
		},
		data() {
			return {
				dateList:[],
				activeIndex:0,
				timeList:[],
				planList:[], 
				queryForm:{
					courseId:0,
					teacherId:0,
					startTime:'',
					endTime:'',
				},
				courseInfo:null,
				selectedItem:[],
				packageList:[],//套餐列表
			};
		},
		async onLoad(option){
			this.queryForm.courseId=option.courseId||0;
			this.queryForm.teacherId=option.teacherId||0; 
			await this.loadCourseInfo();
		},
		onShow() { 
			 
			this.initDate();  
		},
		computed: {
			...mapState(['systemInfo', 'store_id', 'userInfo']),
		},
		methods:{ 
			
			onConfirm(e){
				let _this=this;
				 
				if(_this.ticketList.length>0){
					//已有优惠券
					_this.onAddYY();
				}else{
					//没有优惠券 
					_this.$refs.popPackage.open("bottom");
				}  
			},
			
			onCloseRenew(e){
				let _this=this;
				_this.loadCourseInfo();
				_this.$refs.popPackage.close();
			},
			
			async onAddYY(){
				let _this=this; 
				let par={
					courseId:_this.courseInfo.id,
					teacherId:_this.queryForm.teacherId,
					startTime:_this.selectedItem[0].fullTime,
					endTime:_this.selectedItem[_this.selectedItem.length-1].fullTime,
					ticketId:_this.ticketList[0].id,
					planId:_this.selectedItem[0].status.planId,
				};
				let res=await _this.$http.request('fitness/addYY',par, "", "", true);
				if(res.code==200){
					uni.showToast({
						title:"您的预约已成功提交",
						icon:"success"
					}) 
					this.loadCourseInfo();
					this.initDate();
				}else{
					uni.showToast({
						title:res.message,
						icon:"error"
					})
				} 
			},
			
			onBack(e){
				uni.navigateBack(-1);
			},
			//先择状态
			onSetStatus(index,itemIndex,item){
				let _this=this;
				let timeLen=_this.courseInfo.timeLen; 
				var j=itemIndex;
				var i=index;
				if(item.status.className!='active'){
					return;
				}
				_this.resetSelected();
				_this.selectedItem=[]; 
				 
				for(;i<_this.timeList.length;i++){
					for(;j<4;j++){ 
						
						if(_this.timeList[i][j].status.className!='active'){
							uni.showToast({
								title:"请选择开放的时间预约",
								icon:"none"
							})
							break;
						}
						
						_this.timeList[i][j].status.className="selected"; 
						_this.selectedItem.push(_this.timeList[i][j]);
						timeLen--; 
						if(timeLen<=0)break;
					}
					j=0;
					if(timeLen<=0)break;
				} 
				
			},
			//重置选项
			resetSelected(){
				let _this=this;
				let i=0,j=0; 
				for(i=0;i<_this.timeList.length;i++){
					for(j=0;j<4;j++){
						if(_this.timeList[i][j].status.className=='selected'){
							_this.timeList[i][j].status.className='active';
						}
					}
				}
			},
			//加载课程信息
			async loadCourseInfo(){
				let _this=this;
				let res=await _this.$http.request('course/getCourseInfo',{id:_this.queryForm.courseId,userId:_this.userInfo.id}, "", "", true);
				_this.courseInfo=res.data.info; 
				_this.ticketList=res.data.ticketList;
				_this.packageList=res.data.packageList; 
			},
			
			 
			initTime(){
				let _this=this;
				let data=[];
				let step=['00','15','30','45'];  
				let d=new Date();
				var i=0;
				if(_this.activeIndex==0){ 
					i=d.getHours();
				} 
				for(;i<=23;i++){
					let subData=[];
					for(var j=0;j<step.length;j++){ 
						let FullTime=_this.dateList[_this.activeIndex].date+" "+i+":"+step[j]+":00"; 
						subData.push({
							time:(i<10?"0"+i:i)+":"+step[j],
							fullDate:_this.dateList[_this.activeIndex].date,
							fullTime:FullTime,
							timeInt:Date.parse(FullTime),
							status:_this.checkTime(FullTime),  
						}) 
					}
					data.push(subData);
				}  
				this.timeList=data;
			},
			//搜索已预约人数
			findReqQty(yyList,time){ 
				let qty=0;
				for(var i=0;i<yyList.length;i++){
					if(yyList[i].time==time/1000){
						qty=yyList[i].qty;
						break;
					}
				}
				return qty;
			},
			//检测日期状态
			checkTime(dateTime){
				let _this=this;
				let status="active";
				let statusText="可预约"; 
				let timeInt=Date.parse(dateTime); 
				let planId=0;
				let haveStatus =false;
				for(var i=0;i<_this.planList.length;i++){
					let item=_this.planList[i]; 
					if(timeInt>item.startTimeInt*1000 && timeInt<=item.endTimeInt*1000){ 
						let reqQty=_this.findReqQty(item.yyList,timeInt); 
						if(reqQty<item.allowQty){
							statusText="可预约 "+reqQty+"/"+item.allowQty;
							planId=item.id;
							status="active";//可以预约
						}else{
							statusText="已约满";//+item.reqQty+"/"+item.allowQty;
							status="Full";//可以预约
						}  
						haveStatus=true;
						break;
					}
				} 
				
				if(!haveStatus){
					status="disabled";
					statusText="--"; 
				} 
				 
				
				return {
					planId:planId,
					statusText:statusText,
					className:status, 
				};
			},
			 
			//获取计划数据
			async getPlanData(){
				let _this=this;
				let query={}
				let res=await _this.$http.request('course/plan', _this.queryForm, "", "", true);
				_this.planList=[];
				if(res.code==200){ 
					_this.planList.push(res.data);
				} 
			}, 
			//设置数据
			async onSetDate(e,index){
				this.activeIndex=index; 
				this.queryForm.startTime=this.dateList[index].date +" 00:00:00";
				this.queryForm.endTime=this.dateList[index].date +" 23:59:59";
				await this.getPlanData(); 
				this.initTime();
			}, 
			//初始化数据
			async initDate(){
				let _this=this;
				let d=new Date();
				let weeks=['日','一','二','三','四','五','六']; 
				_this.dataList=[];
				for(var i=0;i<7; i++){  
					let temp={
						'date':d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate(),
						'week':weeks[d.getDay()],
						'day':d.getDate()<10?'0'+d.getDate():d.getDate(),
					} 
					_this.dateList.push(temp); 
					d.setDate(d.getDate() + 1);
				} 
				_this.queryForm.startTime=_this.dateList[0].date +" 00:00:00";
				_this.queryForm.endTime=_this.dateList[0].date +" 23:59:59";
				await _this.getPlanData();
				_this.initTime();
			},
		}
	}
</script>

<style lang="scss">
@import './Reserve.scss'
</style>
