<template>
	<view class="page">
		
		<view class="oinfo" v-if="info">
			 
			<!-- 信息 -->
			<view class="yycon">
				<view class="oscon">
					<view class="osrcon">
						<view class="osname">
							{{info.storeName?info.storeName:''}}
						</view>
						<view class="oscell">
							课程：
							<text class="txt">{{info.claName }}</text>
							<text class="txt">{{info.courseName }}</text>
						</view>
						<view class="oscell">
							授课教练：
							<text class="txt">{{info.teacherName }}</text>
						</view>
						<view class="oscell">
							上课地点：
							<text class="txt">{{info.roomName }}</text>
						</view>
						<view class="oscell">
							上课时间：
							<text class="txt">{{ info.claDate+' '+ info.startTime +'-'+ info.endTime }}</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 进度信息 -->
			<view class="yycon">
				<uni-steps :options="steps" direction="column" :active="2"></uni-steps>
			</view>
			
		</view>
		
		<!-- 是否登录 -->
		<openlogin ref="loginId" @getPhoneNumber="getPhoneNumber"></openlogin> 
		
	</view>
</template>

<script>
	import { myCache } from '../../utils/utils.js';
	import openlogin from "../components/openlogin.vue";
	export default {
		components: {
			openlogin
		},
		data() {
			return {
				openId:"",
				phone:"",
				userid:"",
				id:"",
				info: {
					"courseTimeId": 1935590110594646018,
					"bookId": 1,
					"claName": "普拉提A班",
					"storeName": "慢瑜伽-三台子店",
					"pic": null,
					"claDate": "2025-10-25",
					"weekDay": null,
					"startTime": "16:00:00",
					"endTime": "17:30:00",
					"roomName": null,
					"claColor": null,
					"claTimeStatus": null,
					"bookStatus": 3,
					"createTime": "2025-08-28 14:46:24",
					"code": null,
					"courseName": null,
					"teacherId": null,
					"teacherName": "乐乐老师",
					"checkIn": 1,
					"statusTime": [
						{
							"time": "2025-09-02 17:26:18",
							"status": 0
						},
						{
							"time": "2025-09-02 17:26:18",
							"status": 1
						},
						{
							"time": "2025-09-02 17:26:18",
							"status": 2
						},
						{
							"time": "2025-09-02 17:26:18",
							"status": 3
						}
					]
				},
				steps:
				[
					{title:'已付款',desc:'2025-02-05 13:30'},
					{title:'已预约',desc:'2025-02-05 13:30'},
					{title:'教练已确认',desc:'2025-02-05 13:30'},
					{title:'店长确认，准备上课',desc:''},
					{title:'课程结束',desc:''},
				],
				
			};
		},
		onLoad(options) {
			if(options.id)
			{
				this.id=parseInt(options.id);
				this.getinfo();
			}
		},
		onShow(){
			this.openId = myCache('openId');
			var user = myCache('user');
			this.userid = user.userid? user.userid:'';
			this.phone = user.userphone;
			if(this.userid==""||this.userid=="0"){
				uni.navigateTo({
					url: `/pages/login/login`
				});
			}
		},
		methods: {
			timestampToTime(timestamp) {
			  const date = new Date(timestamp*1000);
			  const Y = date.getFullYear() + '-';
			  const M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
			  const D = (date.getDate() < 10 ? '0'+(date.getDate()) : date.getDate()) + ' ';
			  const h = (date.getHours() < 10 ? '0'+(date.getHours()) : date.getHours()) + ':';
			  const m = (date.getMinutes() < 10 ? '0'+(date.getMinutes()) : date.getMinutes()) + ':';
			  const s = (date.getSeconds() < 10 ? '0'+(date.getSeconds()) : date.getSeconds());
			  return Y+M+D+h+m+s;
			},
			getPhoneNumber(e){
				if(e.phone){
					this.phone = e.phone
				}
				if(e.userid){
					this.userid = e.userid
				}
			},
			iflogin(){
				this.openId = myCache('openId');
				var user = myCache('user');
				this.userid = user.userid? user.userid:'';
				this.phone = user.userphone;
				if(this.userid==""||this.userid=="0"||this.phone==""){
					uni.navigateTo({
						url: `/pages/login/login`
					});
					return false;
				}
				else{
					return true;
				}
			},
			goback(){
				uni.navigateBack({
					delta: 1
				});
			},
			async getinfo() {
				uni.showLoading({
					title: '数据加载中...'
				});
				const {data: res} = await uni.$http.post('/api/course/bookCourseDetail', {"bookId":this.id});
				if(res){
					// 预约信息
					this.info=res;
					this.steps=[];
					// 描述：预约进度：0->预约中；1->教练确认；2->店长确认/预约成功/待上课 3->已取消;4- >已完成/待评价；
					// {title:'已付款',desc:'2025-02-05 13:30'},
					// {title:'已预约',desc:'2025-02-05 13:30'},
					// {title:'教练已确认',desc:'2025-02-05 13:30'},
					// {title:'店长确认，准备上课',desc:''},
					// {title:'课程结束',desc:''},
					if(res.statusTime&&res.statusTime.length>0){
						res.statusTime.forEach(cell=>{
							var ii={
								title: cell.status==0?'已预约':(cell.status==1?'教练已确认':(cell.status==2?'店长已确认':(cell.status==3?'预约已取消':cell.status==4?'课程已结束':''))),
								desc: cell.time
							}
							this.steps.push(ii);
						});
						var lastStatus=res.statusTime[res.statusTim.length-1].status;
						if(lastStatus==0){
							this.steps.push({
								title:'教练待确认',desc:''
							});
							this.steps.push({
								title:'店长确认，准备上课',desc:''
							});
							this.steps.push({
								title:'课程结束',desc:''
							});
						}
						else if(lastStatus==1){
							this.steps.push({
								title:'店长确认，准备上课',desc:''
							});
							this.steps.push({
								title:'课程结束',desc:''
							});
						}
						if(lastStatus==2){
							this.steps.push({
								title:'课程结束',desc:''
							});
						}
					}
					else{
						this.steps.push({
							title:'预约中',desc:''
						});
						this.steps.push({
							title:'教练待确认',desc:''
						});
						this.steps.push({
							title:'店长确认，准备上课',desc:''
						});
						this.steps.push({
							title:'课程结束',desc:''
						});
					}
					this.$forceUpdate();
				}
			},
			
			
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-collapse-item__title-box{
		padding: 0 !important;
	}
	::v-deep .uni-collapse-item__title-text{
		font-weight: 600;
	}
	.page{
		padding: 0;
		position: relative;
		background-image: url('@/static/image/bg.jpg');
		background-attachment: fixed;
		background-size: cover;
		background-position: center center;
		min-height: calc(100vh - var(--window-top) - var(--window-bottom));
	}
	.ret{
		position: fixed;
		top:20rpx;
		left:20rpx;
		background: rgba(0, 0, 0, .3);
		height: 60rpx;
		width: 60rpx;
		border-radius: 50% 50%;
		text-align: center;
		line-height: 60rpx;
		z-index: 9999;
	}
	.submitcon{
		position: fixed;
		display: flex;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 140rpx;
		background-color: #FFFFFF;
		.pcon{
			margin-left: 20rpx;
			margin-top: 28rpx;
			height: 50rpx;
			display: flex;
			flex:1;
			justify-content: flex-start;
			align-items: baseline;
			.hj{
				font-size: 30rpx;
			}
			.rmb{
				font-size: 30rpx;
				font-family: smallYuan;
				color:#89965f ;
				margin-left: 10rpx;
			}
			.zs{
				font-size: 48rpx;
				font-weight: 600;
				font-family: smallYuan;
				color:#89965f ;
			}
			.xs{
				font-size: 28rpx;
				font-weight: 600;
				font-family: smallYuan;
				color:#89965f ;
			}
		}
		.btn{
			background-color: #89965f !important;
			margin: 30rpx 20rpx 0 0;
			border-radius: 50rpx;
			height: 60rpx;
			line-height: 60rpx;
			width: 180rpx;
			font-size: 26rpx;
		}
		.btn::after{
			border:0 !important;
		}
		.gzbtn{
			background-color: #4A4AFF !important;
			margin: 30rpx 20rpx 0 0;
			border-radius: 50rpx;
			height: 60rpx;
			line-height: 60rpx;
			width: 180rpx;
			font-size: 26rpx;
		}
		.gzbtn::after{
			border:0 !important;
		}
		.cancelbtn{
			background-color: #FFFFFF !important;
			margin: 30rpx 20rpx 0 0;
			border-radius: 50rpx;
			height: 60rpx;
			line-height: 60rpx;
			width:180rpx;
			font-size: 26rpx;
			color:#333;
			border:1rpx solid #dddddd;
		}
		.cancelbtn::after{
			border:0 !important;
		}
		.returnbtn{
			background-color: #ff3d0e !important;
			margin: 30rpx 20rpx 0 0;
			border-radius: 50rpx;
			height: 60rpx;
			line-height: 60rpx;
			width:180rpx;
			font-size: 26rpx;
			border:1rpx solid #ff3d0e;
			color:#FFF;
		}
		.returnbtn::after{
			border:0 !important;
		}
		.pjbtn{
			background-color: #FFFFFF !important;
			margin: 30rpx 20rpx 0 0;
			border-radius: 50rpx;
			height: 60rpx;
			line-height: 60rpx;
			width:170rpx;
			font-size: 26rpx;
			border:1rpx solid #f5aa00;
			color:#f5aa00;
		}
		.pjbtn::after{
			border:0 !important;
		}
		.wlbtn{
			background-color: #FFFFFF !important;
			margin: 30rpx 20rpx 0 0;
			border-radius: 50rpx;
			height: 60rpx;
			line-height: 60rpx;
			width:170rpx;
			font-size: 26rpx;
			border:1rpx solid #89965f;
			color:#89965f;
		}
		.wlbtn::after{
			border:0 !important;
		}
	}
	.signimg{
		width: 150rpx;
		height: 180rpx;
		border-radius: 10rpx;
	}
	.oscon{
		margin:0;
		background-color: #f3fafa;
		padding: 16rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		.osimg{
			width: 120rpx;
			height: 120rpx;
			border-radius: 10rpx;
		}
		.osrcon{
			display: flex;
			flex-direction: column;
			flex: 1;
			justify-content: flex-start;
			margin-left: 20rpx;
		}
		.osname{
			line-height: 48rpx;
			font-size:32rpx;
			font-weight: 600;
			color:#009999;
			padding-bottom: 15rpx;
			border-bottom: 1rpx dotted #74defb;
		}
		.oscell{
			display: flex;
			flex-direction: row;
			font-size: 28rpx;
			color:#333;
			padding: 15rpx 0;
			border-bottom: 1rpx dotted #74defb;
			.txt{
				display: flex; flex: 1;
			}
		}
	}
	.ydcon{
		position: relative;
	}
	.yyright{
		position: absolute;
		right: 100rpx;
		top:50rpx;
	}
	.oinfo{
		padding:20rpx;
		position: relative;
		margin-bottom: 160rpx;
		
		.ozc{
			display: flex;
			flex-direction: column;
			background-color: #becba0 ;
			padding: 20rpx;
			border-radius: 16rpx;
			.ozstate{
				font-size: 28rpx;
				color: #333;
				width: 100%;
				margin: 10rpx 0;
			}
			.oztip{
				font-size: 26rpx;
				color: #333;
				width: 100%;
				margin: 0 0 20rpx;
			}
		}
		.owc{
			display: flex;
			flex-direction: column;
			background-color: #89965f ;
			padding: 20rpx;
			border-radius: 16rpx;
			.ozstate{
				font-size: 28rpx;
				color: #FFF;
				width: 100%;
				margin: 6rpx 0 0;
			}
			.oztip{
				font-size: 26rpx;
				color: #FFF;
				width: 100%;
				margin: 0 0 6rpx;
			}
		}
		.oztgray{
			display: flex;
			flex-direction: column;
			background-color: #ddd;
			padding: 20rpx;
			border-radius: 16rpx;
			.ozstate{
				font-size: 28rpx;
				color: #333;
				width: 100%;
				margin: 6rpx 0;
			}
			.oztip{
				font-size: 26rpx;
				color: #747474;
				width: 100%;
				margin: 0 0 20rpx;
			}
		}
		.oztorange{
			display: flex;
			flex-direction: column;
			background-color: #faa755;
			padding: 20rpx;
			border-radius: 16rpx;
			.ozstate{
				font-size: 28rpx;
				color: #FFF;
				width: 100%;
				margin: 6rpx 0;
			}
			.oztip{
				font-size: 26rpx;
				color: #FFF;
				width: 100%;
				margin: 0 0 20rpx;
			}
		}
		.yycon{
			display: flex;
			flex-direction: column;
			justify-content: center;
			background-color: #FFFFFF;
			margin-top: 20rpx;
			padding: 20rpx 20rpx;
			.atitle{
				padding: 10rpx 0 10rpx;
				color:#303133;
				font-size: 30rpx;
				font-weight: 600;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				.price{
					font-size: 36rpx;
				}
			}
			.olist{
				display: flex;
				flex-direction: column;
				padding: 0;
				width: 100%;
				.ocell{
					font-size: 26rpx;
					color:#747474;
					padding: 10rpx 0 10rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
				}
				.ocell1{
					font-size: 26rpx;
					color:#747474;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
				}
			}
			.sqcon{
				padding: 20rpx;
				margin: 20rpx 0;
				background-color: #f5f5f5;
				display: flex;
				flex-direction: column;
				border-radius: 10rpx;
				.sqlist{
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					color: #333333;
					font-size: 26rpx;
					line-height: 50rpx;
				}
			}
		}
	}
	
	.red{
		color:#ff3d0e;
	}
	.green{
		color:#00cd00;
	}
	
	::v-deep.uni-radio-input-checked{
		background-color: #89965f !important;
		border-color: #89965f !important;
		background-clip: content-box!important;
		box-sizing: border-box;
	}
	::v-deep.uni-radio-input-checked::before{
		display: none!important;
	}
	
</style>
