<style>
	.teacherOrderInfo .orderInfo_Content {
		width: 100%;
		height:100%;
		padding-top:15px;
		background-color: #F3F5F7;
		position: relative;
	}

	.teacherOrderInfo .orderInfo_List {
		width: 94%;
		padding:10px 15px;
		margin:0 auto 10px;
		background-color: #fff;
		min-height: 100px;
		border-radius:10px;
		font-size:13px;
	}
	.teacherOrderInfo .stuInfo_Title{
		color:#111111;
		font-size: 16px;
		font-weight: bold;
		margin-left:5px;
	}
	.teacherOrderInfo .stuinfo_List{
		width:100%;
		height:50px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom:1px solid #EFEEEB;
	}
	.stuinfo_List:last-child{
		border: 0;
	}
	.teacherOrderInfo .teacherOrder_List{
		width:100%;
		min-height:50px;
		margin-bottom:20px;
		padding-bottom:5px;
		border-bottom:1px solid #EFEEEB;
	}
	.teacherOrder_List:last-child{
		border:0;
	}
	.teacherOrderInfo .stuinfo_Title{
		color:#111111;
		font-size:14px;
	}
	.teacherOrderInfo .stuinfo_RightCon{
		font-weight: bold;
	}
	.teacherOrderInfo .stu_OrderRoom{
		color: #111111;
		font-size: 14px;
		margin-top:5px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom:20px;
	}
	.teacherOrderInfo .stuinfo_platInfo{
		width:100%;
		height:96px;
		background-color: #E2CC9D;
		color:#BBA16B;
		padding:10px;
		border-radius: 9px;
		margin:20px 0 10px 0;
	}
	.teacherOrderInfo .orderInfoBtn{
		width:93%;
		height:40px;
		border-radius: 4px;
		background-color: #40766E;
		color:#fff;
		text-align: center;
		line-height: 40px;
		position: absolute;
		bottom:20px;
		margin-left:15px;
	}
	.teacherOrderInfo .teacherName{
		margin-left:5px;
		width:130px;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.teacherOrderInfo .Torder_InnerList{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom:10px;
	}
	.teacherOrderInfo .teach_InfoBtn{
		display:inline-block;
		width:60px;
		height:25px;
		background-color: #40766E;
		color:#fff;
		border-radius: 6px;
		text-align: center;
		line-height: 25px;
		font-size:12px;
	}
	.teacherOrderInfo .teacherOrder_List:last-child{
		margin-bottom:0;
	}
	
	.teacherOrderInfo .teacher_plateList{
		width:100%;
		height:35px;
		background-color: #F8F5EA;
		border-radius: 2px;
		color:#B7A266;
		padding-left:10px;
		font-size:12px;
		line-height: 35px;
		margin:15px 0;
	}
</style>
<template>
	<view class="quick-box teacherOrderInfo" style="height:100vh;background:#F3F5F7;">
			<u-empty v-if="dataList.length==0" text="暂无数据" mode="data"></u-empty>
			<view class="orderInfo_Content" v-else>
				<view class="orderInfo_List">
					<view style="display:flex;align-items: center;">
						<image style="width:22px;height:36px;" src="../../../static/images/dzf.png"></image>
						<text class="stuInfo_Title">{{dataList.CourseName}}</text>
					</view>
					<view class="stuinfo_List">
						<view class="stuinfo_Title">上课时间</view>
						<view class="stuinfo_Title stuinfo_RightCon">{{dataList.StudyDate}}</view>
					</view>
					<view class="stuinfo_List">
						<view class="stuinfo_Title">课程时长</view>
						<view class="stuinfo_Title stuinfo_RightCon">{{dataList.StudyDuration}}{{dataList.DurationUnit}}</view>
					</view>
					<view class="stuinfo_List">
						<view class="stuinfo_Title">课程类型</view>
						<view class="stuinfo_Title stuinfo_RightCon">{{dataList.CourseClassTypeName}}</view>
					</view>
				</view>
				<view class="orderInfo_List">
					<view class="stu_OrderRoom">
						<view>报名列表</view>
						<view>报名数：{{dataList.OrderList.length}}</view>
					</view>
					<view class="teacherOrder_List" v-for="(subItem,subIndex) in dataList.OrderList">
						<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;width: 100%;">
							<view>
								{{subItem.CreateDate}}
							</view>
							<view style="text-align: right;margin:10px 0;">
								<text v-if="subItem.OrderStaus==2" class="teach_InfoBtn" @click="goSureOrder(subItem)">去确认</text>
								<text v-if="subItem.OrderStaus==3" style="color:#BBA16B;">{{subItem.OrderStausName}}</text>
								<text class="teach_InfoBtn" style="margin-left:10px;" v-if="subItem.OrderStaus==3" @click="sureWancheng(subItem)">确认完成</text>
								<text v-if="subItem.OrderStaus==4" style="color:#969696;">{{subItem.OrderStausName}}</text>
							</view>
						</view>
						
						<view class="Torder_InnerList">
							<view style="display:flex;align-items: center;">
								<image mode="aspectFill" :src="subItem.UserPhoto" style="width: 28px; height: 28px;border-radius: 50%;" ></image>
								<text class="teacherName">{{subItem.UserName}}</text>
							</view>
							<view>
								支付点数：{{subItem.ActualPointNum}}
							</view>
							
						</view>
						<view class="Torder_InnerList">
							<view>
								<image style="width:12px;height:12px;margin-right:3px;" src="../../../static/images/tookie.png" alt=""></image>
								{{subItem.StudyDate}} ({{subItem.StudyDuration}}{{subItem.DurationUnit}})
							</view>
							
						</view>
						<template v-if="subItem.OrderStaus==2">
							<textarea style="height: 50px;width:calc(100vw - 65px);margin-bottom:10px;border: 1px solid #DFDDD8;padding: 5px;border-radius: 4px;" placeholder="请输入房间信息" v-model="sureMsg.RoomInfo"/>
						</template>
						<view class="teacher_plateList" v-if="subItem.RoomInfo&&subItem.OrderStaus!=2">
							{{subItem.RoomInfo}}
						</view>
					</view>
				</view>
			</view>
		<u-popup v-model="showModal" mode="center" length="80%">
			<view style='display: flex;flex-direction: column;align-items: center;background: #fff;'>
				<view style="display: flex;flex-direction: column;height:80px ;margin-left: 15px;width: 100%;">
					<Text style='margin:10px;'>实际点数</Text>
					<input class="uni-input inputM" style='margin-left: 10px;margin-top: 5px;' v-model="comMsg.ActualPointNum" placeholder="输入点数" />
				</view>
				<view style="display: flex;flex-direction: row;align-items: center;height: 50px;border-top: 1px solid #F5F5F5;width: 100%;">
					<view style="width: 50%;display: flex;align-items: center;justify-content: center" @click="showModal=false">
						<Text>取消</Text>
					</view>
					<view style="width: 50%;color: #a0cfff;display: flex;align-items: center;justify-content: center" @click="confirm">
						<Text>确定</Text>
					</view>
				</view>
			</view>
		</u-popup>
		<u-modal v-model="show" :content="content" :show-cancel-button='true' @confirm='queren'></u-modal>			
		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth='gbAuth'></auth>
	</view>
</template>
<script>
	import auth from "@/components/auth/index";
	import tabbar from "@/components/tabbar/index";
	export default {
		components: {
			auth
		},
		data() {
			return {
				pageTitle: "课程详情",
				loading: true,
				mainColor: "",
				u: {},
				msg:{
					CourseId:0,
				},
				sureMsg:{
					CourseId:0,
					TeacherId:0,
					RoomInfo:'',
					ID:0
				},
				comMsg:{
					ActualPointNum:0,
					ID:0
				},
				//内容数据
				dataList: {},
				show:false,
				content:'',
				showAuth:false,
				showModal:false,
			};
		},
		created() {
			this.mainColor = this.$uiConfig.mainColor;
		},
		mounted() {
			let currentPages = getCurrentPages();
			let u = "/" + currentPages[currentPages.length - 1].route;
			let pages = wx.getStorageSync("basedata") ?
				wx.getStorageSync("basedata").bar_title : [];
			pages.forEach((x) => {
				if (x.value == u) {
					this.pageTitle = x.new_name ? x.new_name : x.name;
				}
			});
			uni.setNavigationBarTitle({
				title: this.pageTitle,
			});
		},
		onLoad(option) {
			this.u = uni.getStorageSync("mall_UserInfo");
			if (!this.u) {
				this.u = {
					nickName: "未登录",
					avatarUrl: ""
				};
				this.showAuth = true;
			}
			this.msg.CourseId = option.ID;
			this.getData();
		},
		methods: {
			reloadUserinfo() {
				this.u = uni.getStorageSync("mall_UserInfo");
				this.getContent();
			},
			//关闭登录窗口
			gbAuth() {
				uni.navigateBack()
			},
			//获取列表数据
			getData(){
				uni.showLoading({
					title: '加载中'
				});
				this.request2({
						url: "/api/AppletPoint/GetPointTeacherCourseDetail",
						data: this.msg,
					},
					(res) => {
						uni.hideLoading();
						if (res.resultCode == 1) {
							this.dataList = res.data;
					    }
					}
				);	
			},
			//确认订单
			goSureOrder(item){
				if(this.sureMsg.RoomInfo==''){
				     uni.showToast({
				     	title: '房间信息不能为空',
				     	icon:'none'
				     })
				     return;
				 }
				this.sureMsg.CourseId = item.CourseId;
				this.sureMsg.TeacherId = this.dataList.TeacherId;
				this.sureMsg.ID = item.ID;
				this.show = true;
				this.content = '是否确认？'
							},
			queren(){
				this.request2({
						url: "/api/AppletPoint/GetConfirmTeacherCourseOrder",
						data: this.sureMsg,
					},
					(res) => {
						uni.hideLoading();
						if (res.resultCode == 1) {
							this.getData();
					    }
					}
				);	
			},
			//确认完成
			sureWancheng(item){
				this.showModal=true;
				this.comMsg.ID = item.ID;
				this.comMsg.ActualPointNum = item.TotalPointNum;
			},
			confirm(){
				this.request2({
						url: "/api/AppletPoint/GetCompleteTeacherCourseOrder",
						data: this.comMsg,
					},
					(res) => {
						if (res.resultCode == 1) {
							this.getData();
							this.showModal=false;
					    }
					}
				);	
			}
		},
	};
</script>
