<style>
	.stu_StutasImg{
		width:22px;
		height:36px;
		
	}
	.confirmAppointment .top-item{
		width: 100%;
		height: 43px;
		border-bottom: 1px solid rgba(223, 221, 216, 0.5);
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
		color: #111111;
	}
	.confirmAppointment .t-item-r{
		font-weight: bold;
	}
	.confirmAppointment .bottoms{
		width: 100%;
		height: 100px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 23px;
		position: fixed;
		left: 0;
		bottom: 0;
		background: #F3F5F7;
		
	}
	.bottoms-box{
		width:100% ;
		height: 40px;
		border-radius: 4px;
		background: #40766E;
		font-size: 14px;
		color: #FFFFFF;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.olist{
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.olist-item{
		height: 20px;
		padding: 0 8px;
		border-radius: 3px;
		margin-right: 5px;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 12px;
		color: #FFF;
		margin-top: 5px;
	}
	.subs{
		width: 100px;
		height: 30px;
		background: #E03997;
		font-size: 12px;
		color: FFF;
	}
</style>
<template>
	<view class="confirmAppointment">
		<view class="box">
			<view class="box-top">
				<view class="row-c">
					<image  src="../../static/images/ygs.png" class="stu_StutasImg"></image>
					<text style="font-size: 16px;color: #111111;margin-left: 12px;font-weight: bold;">{{data.CourseName}}</text>
				</view>	
				<view class="top-item" style="margin-top: 10px;">
					<text>上课时间</text>
					<text class="t-item-r">{{data.StudyDateStr}} {{data.WeekStr}} {{data.StudyStartDate}}-{{data.StudyEndDate}}</text>
				</view>
				<view class="top-item">
					<text>上课老师</text>
					<view class="row-c">
						<u-avatar :src="data.TeacherLogo" size='48' mode="circle"></u-avatar>
						<text class="t-item-r" style="margin-left: 5px;">{{data.TeacherName}}</text>
					</view>
				</view>
				<view class="top-item">
					<text>课程类型</text>
					<text class="t-item-r">{{data.StudentNumTypeName}}</text>
				</view>
				<view class="top-item">
					<text>花费点数</text>
					<text class="t-item-r" :style="{color:mainColor}" v-if="data.PointNum>0">{{data.PointNum}}点<text v-if="data.RoomId!=null && data.RoomId>0">(微信直播)</text> </text>
					<text class="t-item-r" :style="{color:mainColor}" v-if="data.PointNum==0&& data.RoomId!=null && data.RoomId>0">免费(微信直播)</text>
					<text class="t-item-r" :style="{color:mainColor}" v-if="data.PointNum==0&& (data.RoomId==null || data.RoomId==0)">免费</text>
				</view>
				<view class="top-item">
					<text>课程时长</text>
					<text class="t-item-r" >{{data.StudyDuration}}{{data.DurationUnitName}}</text>
				</view>
				<view class="top-item" style="border: none;">
					<text>最少约课时长</text>
					<text class="t-item-r" >{{data.MinDuration}}{{data.DurationUnitName}}</text>
				</view>
			</view>
			<!-- <view class="box-top" style="margin-top: 15px;" v-if="data.IsFree==1">
				<view class="top-item" style="border: none;">
					<text>直播</text>
					<text class="t-item-r" :style="{color:mainColor}">微信直播</text>
				</view>
			</view> -->
			<view class="box-top" style="margin-top: 15px;" v-if=" data.StudentNumType==1">
				<view class="top-item">
					<text>课时数量</text>
					<input class="uni-input " type="number"  v-model="classDay" style='text-align: right;' placeholder="输入课时数量" @blur='totalsc'/>
				</view>
				<view class="top-item" style="border: none;" @click="show=true">
					<text>选择预约时间</text>
					<text v-if="addMsg.StudyDate==''" style="font-size: 14px;color: #777777;">请选择预约时间</text>
					<text class="t-item-r" v-else>{{addMsg.StudyDate}}</text>
				</view>
			</view>
		
			<view class="box-top" style="margin-top: 15px;" v-if="data.orderList.length>0 && data.StudentNumType==1">
				<view class="row-c">
					<view style="font-size: 14px;color: #111111;font-weight: bold;">已预约的时间段<text style="font-size: 11px;color: #666666;">(下列的时间段不能预约)</text></view>
				</view>	
				<view class="olist">
					<view class="olist-item" v-for="(item,index) in data.orderList" :key='index' :style="{background:mainColor}">
						{{item.StartStudyDate}} - {{item.EndStudyDate}}
					</view>
				</view>
			</view>
			
			
		</view>
		<view style="width: 100%;height: 130px;"></view>
		<view class="bottoms">
			<view class="bottoms-box" @click="xiadan" v-if="addMsg.TotalPointNum>0">
				支付 {{addMsg.TotalPointNum}}点
			</view>
			<view class="bottoms-box" @click="xiadan" v-if="addMsg.TotalPointNum==0">
				免费预约
			</view>
			<view style="font-size: 11px;color: #666666;">*需要订阅了才能预约下单<text style="color: #DD0000;">(虚拟商品支付成功后不支持退款)</text></view>
		</view>
		

		<u-picker mode="time" v-model="show" :params="params" @confirm = 'confirm'></u-picker>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				mainColor: '',
				secondary: '',
				data:{},
				
				show:false,
				params: {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: true,
					second: false
				},
				addMsg:{
					CourseId:0,//课程id
					StudyDuration:0,//基础学习时长
					DurationUnit:0,//时间单位
					OrderStaus:0,//订单状态
					BasePointNum:0,//基础点数
					
					StudyDate:'',//预约时间
					TotalStudyDuration:0,//总时长
					TotalPointNum:0,//总的点数
					
				},
				classDay:1,
				ifvalue:1,
				
			}
		},
		onLoad(options) {
			console.log(options,'options')
			this.getPointCourseDetail(options.CourseId)
			
		},
		created() {
			this.mainColor = this.$uiConfig.mainColor;
			this.secondary = this.$uiConfig.secondary;
			uni.setNavigationBarTitle({
				title: '预约确定'
			});
		},
		methods:{
			getPointCourseDetail(id){
				this.request2({
						url: '/api/AppletPoint/GetPointCourseDetail',
						data: {CourseId:id}
					},
					res => {
						this.data = res.data;
						this.addMsg.CourseId = this.data.ID;
						this.addMsg.StudyDuration = this.data.StudyDuration;
						this.addMsg.DurationUnit = this.data.DurationUnit;
						this.addMsg.BasePointNum = this.data.PointNum;
						let cday = parseInt(this.data.MinDuration/this.data.StudyDuration);
						if(this.data.MinDuration%this.data.StudyDuration>0){
							cday= cday+1
						}
						this.classDay = cday
						this.ifvalue =cday
						this.totalsc()
						if(this.data.StudentNumType==2){
							this.addMsg.StudyDate = this.data.StudyStartDate
						}
						
					}
				);
			},
			totalsc(){//总时长计算和点数的计算
				if(this.classDay<this.ifvalue){
					uni.showToast({
						title: "不能小于"+this.ifvalue+'课时数量',
						icon:'none'
					})
					
					this.classDay = this.ifvalue
				}
				this.addMsg.TotalStudyDuration = this.classDay * Number(this.data.StudyDuration)
				this.addMsg.TotalPointNum = this.classDay * Number(this.data.PointNum)
			},
			confirm(e){
				uni.hideLoading()
				this.addMsg.StudyDate = e.hour+':'+e.minute
				let msg = JSON.parse(JSON.stringify(this.addMsg))
				msg.StudyDate = this.data.StudyDateStr+' '+this.addMsg.StudyDate+':00'
				this.request2({
						url: '/api/AppletPoint/GetTeacherCourseOrder',
						data: msg
					},
					res => {
					},
					failed=>{
						this.addMsg.StudyDate=''
					}
				);
			},
			xiadan(){
				let that = this;
				if(that.addMsg.StudyDate==''){
					uni.showToast({
						title: '请选择预约时间',
						icon:'none'
					})
					return
				}
				let  RoomId = 0;
				if(that.data.RoomId!=null && that.data.RoomId>0){
					RoomId = that.data.RoomId
				}
				
				//直播订阅 //甲鹤暂时不用 先写在这里
				// if(that.data.RoomId!=null && that.data.RoomId>0){
				// 	let livePlayer = requirePlugin('live-player-plugin')
				// 	const roomId = data.RoomId // 房间 id
				// 	livePlayer.getSubscribeStatus({ room_id: roomId })
				// 		.then(res => {
				// 			if(res.is_subscribe==false){
				// 				uni.showToast({
				// 					title: '订阅了直播才能预约！',
				// 					icon:'none'
				// 				})
				// 				return
				// 			}
				// 		}).catch(err => {
				// 			console.log('get subscribe status', err)
				// 			return
				// 		})
				// }
				let msg = JSON.parse(JSON.stringify(that.addMsg))
				msg.StudyDate = that.data.StudyDateStr+' '+that.addMsg.StudyDate+':00'
				uni.requestSubscribeMessage({
				  tmplIds: that.data.template_message_list,
				  success (res) { 
					  console.log(res)
					  let adopt = true
					  that.data.template_message_list.forEach(x=>{
						  if(res[x]=='reject'){
							  adopt=false
						  }
					  })
					  if(adopt==true){
						  that.request2({//提交订单
						  		url: '/api/AppletPoint/GetSetTeacherCourseOrder',
						  		data: msg
						  	},
						  	res => {
						  		// uni.showToast({
						  		// 	title: '预约成功',
						  		// 	icon:'none'
						  		// })
								uni.redirectTo({//下单成功跳入订单列表
									url: "/pages/appointment/order-success?RoomId="+RoomId 
								});
						  	}
						  );
					  }else{
						  uni.showToast({
						  	title: '没订阅不能预约课程哦！',
						  	icon:'none'
						  })
					  }
					  
				  },
				  fail(err){
					  console.log(err)
					  uni.showToast({
					  	title: '没订阅不能预约课程哦！',
					  	icon:'none'
					  })
				  }
				})
			},
			onSubscribe(e){
				console.log(e)
			}
		}
	}
</script>

<style>
	.confirmAppointment{
		width: 100%;
		height: 100vh;
		background: #F3F5F7;
		padding-bottom: 100px;
		position: relative;
	}
	.confirmAppointment .box{
		padding:0 15px;
	
	}
	.box-top{
		background: #FFFFFF;
		border-radius: 9px;
		padding: 15px;
		
	}
	.row-c{
		display: flex;
		flex-direction: row;
		align-items: center;
	}

</style>
