<template>
	<view class="rili">
		<div class='g_top'>
				<view class="topB" @click="">
					<span class='ztext'>{{STime.month}}月{{STime.day}}日</span>
					<span class='titext'>{{STime.week+' '+STime.hour+':'+STime.minute}}</span>
				</view>
				<view class="topB" style="height: 20px;align-items: center;">
					<span style='font-size: 11px;color: #1C1E1F;'>{{intervalDay}}</span>
					<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/sanjiao.png" mode="aspectFill" style="width: 55px;height: 4px;"></image>
				</view>
				<view class="topB" @click="">
					<span class='ztext'>{{ETime.month}}月{{ETime.day}}日</span>
					<span class='titext'>{{ETime.week+' '+ETime.hour+':'+ETime.minute}}</span>
				</view>			
		</div>
		<view>
			<z-calendar ref="calendar" 
			:datePrice="datePrice" 
			:curryear='curryear'
			:currmonth='currmonth'
			howManyMonth="6" 
			mode="2" 
			@changeDate="changeDate"
			@changeMonth="changeMonth"
			 :defaultSelect="defaultSelect"></z-calendar>	
		</view>
		<view class="time">
			<view class="time_item" @click="showStart=true,timeType=1,defaultTime = qutime">
				<span>取车时间</span>
				<span>{{qutime}}</span>
			</view>
			<view class="time_item" @click="showStart=true,timeType=2,defaultTime = stilltime">
				<span>还车时间</span>
				<span>{{stilltime}}</span>
			</view>
		</view>
		<view class="btn" @click="goconfirm">确定</view>
		<u-picker v-model="showStart" mode="time" :params="params" @confirm='btnStart' :default-time='defaultTime'></u-picker>
		
	</view>
</template>

<script>
	import zCalendar from "./components/njzz-calendar/njzz-calendar.vue"
	export default {
		components:{zCalendar},
		data() {
			return {
				selectedData:{},
				datePrice:[
					
				],
				STime:{},
				ETime:{},
				intervalDay:'',
				defaultSelect:'',
				qutime:'',
				stilltime:'',
				showStart:false,
				defaultTime:'',//默认取、还车时间
				params: {//时间的配置
					hour: true,
					minute: true,
				},
				use_day:0,
				GoodsId:0,
				
				curryear:0,
				currmonth:0,
			};
		},
		onLoad(options){
			if(options){
				this.use_day = options.use_day;
				this.GoodsId = options.GoodsId;
				// this.use_day =3;
				
				if(this.use_day==0.5){
					this.intervalDay='半天'
				}else if(this.use_day>0.5){
					this.intervalDay=this.use_day+'天'
				}
				this.STime = this.getTime(options.StartTime,1)
				this.ETime = this.getTime(options.EndTime,2)
				let startTime = new Date(options.StartTime); // 开始时间
				let year = startTime.getFullYear(); //年
				let month = startTime.getMonth() + 1; //月
				if(month<10){
					month = ('0' + month)
				}
				let Month = year+'-'+month
				this.curryear= year
				this.currmonth= month
				this.getGoodsDateList(Month)
			}
			
		},
		mounted() {
			
			
			
		},
		methods:{
			changeDate(data){ //选择日期事件  可以将data绑定到此页面以用来提交等操作
				
				data= data.replace(/-/g,"/")  
				console.log(data)
				this.selectedData = data;
				this.STime = this.getTime(data+' '+this.qutime)
				 let myDate = new Date(data);
				 if(this.use_day==0.5){
					 this.ETime = this.getTime(data+' '+this.stilltime)
				 }else{
					 myDate=myDate.setDate(myDate.getDate()+(Number(this.use_day)-1));
					 myDate=new Date(myDate);
					  let year = myDate.getFullYear(); //年
					 let month = myDate.getMonth() + 1; //月
					 let day = myDate.getDate(); //日
					 let data2 = year+'/'+month+'/'+day
					 this.ETime = this.getTime(data2+' '+this.stilltime)
				 }
				 
				
				
			},
			
			// 时间转为毫秒 
			timeToSec(time) {
			      var hour = time.split(':')[0]
			      var min = time.split(':')[1]
			      var sec = time.split(':')[2]
			      var s = Number(hour * 3600) + Number(min * 60)
			      return s * 1000
			},
			// 将秒转化成时分秒
			
			goconfirm(){
				let StartTime = this.STime.year+'/'+this.STime.month+'/'+this.STime.day+' '+this.STime.hour+':'+this.STime.minute+':00';
				let EndTime = this.ETime.year+'/'+this.ETime.month+'/'+this.ETime.day+' '+this.ETime.hour+':'+this.ETime.minute+':10';
				
				let quT = this.timeToSec(this.qutime)
				let stillT = this.timeToSec(this.stilltime)
				
				if(this.use_day==0.5){
					if(quT>=stillT){
						uni.showToast({
							title:'还车时间必须大于取车时间',
							icon:'none'
						})
					}else{
						if((stillT-quT)>(6*3600)){
							uni.showToast({
								title:'使用使用不能大于半天',
								icon:'none'
							})
							return
						}
					}
				}else if(this.use_day==1 && (stillT-quT)<(6*3600)){
					uni.showToast({
						title:'使用时间大于半天',
						icon:'none'
					})
					return
				}
				
				let pages = getCurrentPages(); // 当前页面
				let beforePage
				beforePage = pages[pages.length - 2]; // 前一个页面
				setTimeout(()=>{
					 uni.navigateBack({
						 delta:1,
						 success: function() {
							 beforePage.$vm.gotimeconfirm(StartTime,EndTime); // 执行前一个页面的方法
						 }
					 });
				},100)
			},
			getTest(){
				//上面那个是选择日期时自动绑定的方式，但默认赋值之后没有进行选择操作 如何拿到选中的值
				//一般来说设置默认的值在此页面早就拿到了 但如果不想再次处理数据格式可以用以下方式获取组件已经处理好的数据   $refs或者$children请查看vue官方文档
				console.log(this.$refs.calendar.getSelectData())
			},
			changeMonth(nowMonth){
				let Month = nowMonth.year+'-'+nowMonth.month;
				this.getGoodsDateList(Month)
			},
			getGoodsDateList(Month){
				this.request2(
					{
						url: '/api/AppletGCOrder/GetAppletSDGoodsTargetDateList',
						data: {
							GoodsId:this.GoodsId,
							Month:Month
						}
					},
							
					res => {
						let data =res.data;
						let datePrice=[];
						data.forEach(x=>{
							if(x.IsReserve==1 && x.SurplusNum>0){
								let obj = {}
								obj.date = x.Date;
								obj.price = '剩'+x.SurplusNum+'座';
								datePrice.push(obj)
							}
							
						})
						this.datePrice = datePrice
						
						
					}
				);
			},
			btnStart(val){
				
				if(this.timeType==1){
					this.qutime=val.hour+":"+val.minute
					this.STime.hour = val.hour;
					this.STime.minute = val.minute;
				}
				if(this.timeType==2){
					this.stilltime=val.hour+":"+val.minute
					this.ETime.hour = val.hour;
					this.ETime.minute = val.minute;
				}
			},
			getTime(time,type=0){
			   let myDate = new Date(time);
			   let obj = {}
				obj.year = myDate.getFullYear(); //年
				obj.month = myDate.getMonth() + 1; //月
				obj.day = myDate.getDate(); //日
				obj.hour = (myDate.getHours()<10)?"0"+myDate.getHours() : myDate.getHours(); //时
				obj.minute = (myDate.getMinutes()<10)?"0"+myDate.getMinutes() : myDate.getMinutes(); //分
				let days = myDate.getDay();
				obj.week = this.getweek(days)//星期几
				if(type==1){
					if(obj.month<10){
						obj.month = ('0' + obj.month)
					}
					if(obj.day<10){
						obj.day = ('0' + obj.day)
					}
					this.defaultSelect = obj.year+'-'+obj.month+'-'+obj.day;
					this.qutime=obj.hour+':'+obj.minute//初始取车时间
				}else if(type==2){
					this.stilltime=obj.hour+':'+obj.minute//初始还车时间
				}
				return obj
			},
			getweek(day){//根据值返回当前时间的星期几
				if(day==1){
					return '星期一'
				}else if(day==2){
					return '星期二'
				}else if(day==3){
					return '星期三'
				}else if(day==4){
					return '星期四'
				}else if(day==5){
					return '星期五'
				}else if(day==6){
					return '星期六'
				}else if(day==0){
					return '星期日'
				}
			},
	
		}
	}
</script>

<style>
	.rili .time{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		margin-top: 20px;
	}
	.rili .time_item{
		width: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		
	}
	.rili .btn{
		width: 90%;
		margin-left: 5% ;
		height: 44px;
		border-radius: 22px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		margin-top: 30px;
		color: #FFF;
		background-image: linear-gradient(
		  to right,
		  #FF8585,
		  #EE4454
		);
	}
	.rili .g_top{
		width: 92%;
		height: 45px;
		border-radius: 22.5px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		
		padding: 0 20px;
		margin-left: 4%;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.rili  .topB{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			/* align-items: center; */
		}
		.rili  .titext{
			font-size: 22rpx;
			color: #929292;
		}
		.rili  .ztext{
			font-size: 28rpx;
			color: #1C1E1F;
		}
</style>
