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

	.orderInfo_List {
		width: 94%;
		padding:10px 15px;
		margin:0 auto 10px;
		background-color: #fff;
		min-height: 100px;
		border-radius:10px;
	}
	.stuInfo_Title{
		color:#111111;
		font-size: 16px;
		font-weight: bold;
		margin-left:5px;
	}
	.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;
	}
	.stuinfo_Title{
		color:#111111;
		font-size:14px;
	}
	.stuinfo_RightCon{
		font-weight: bold;
	}
	.stu_OrderRoom{
		color: #111111;
		font-size: 14px;
		margin-top:5px;
	}
	.stuinfo_platInfo{
		width:100%;
		height:96px;
		background-color: #E2CC9D;
		color:#BBA16B;
		padding:10px;
		border-radius: 9px;
		margin:20px 0 10px 0;
	}
	.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;
	}
	.teacherName{
		margin-left:5px;
	}
</style>
<template>
	<view class="quick-box" 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" style="display: flex;align-items: center;">
							<image mode="aspectFill" :src="dataList.TeacherLogo" style="width: 25px; height: 25px;border-radius: 50%;" ></image>
							<text class="teacherName">{{dataList.TeacherName}}</text>
						</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 class="stuinfo_List">
						<view class="stuinfo_Title">上课状态</view>
						<view class="stuinfo_Title stuinfo_RightCon">
							<text :style="{'color':dataList.OrderStaus==1?'#12D9B0':''}">{{dataList.OrderStatusName}}</text>
						</view>
					</view>
					<view class="stuinfo_List" v-if="dataList.OrderStaus==1">
						<view class="stuinfo_Title">花费点数</view>
						<view class="stuinfo_Title stuinfo_RightCon" :style="{'color':dataList.OrderStaus==1?'#F96729':''}">{{dataList.TotalPointNum}}点</view>
					</view>
				</view>
				<view class="orderInfo_List">
					<view class="stu_OrderRoom">房间信息</view>
					<view class="stuinfo_platInfo">
						<text v-if="dataList.RoomInfo">{{dataList.RoomInfo}}</text>
					</view>
				</view>
				<view class="orderInfoBtn" v-if="dataList.OrderStaus==1" @click="goPayClass">
					支付 {{dataList.TotalPointNum}}点
				</view>
			</view>
		<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:{
					OrderId:0,
				},
				//内容数据
				dataList: {},
				show:false,
				content:'',
				showAuth:false,
				paymsg:{
					ID:0,
					CourseId:0,
					StudyDate:'',
					StudyDuration:'',
					TotalStudyDuration:'',
					DurationUnit:'',
					OrderStaus:'',
					TotalPointNum:'',
					BasePointNum:''
				},
			};
		},
		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;
			}
			console.log(option,'option');
			this.msg.OrderId = option.OrderId;
			this.getData();
		},
		methods: {
			reloadUserinfo() {
				this.u = uni.getStorageSync("mall_UserInfo");
				// this.showAuth=false;
				this.getContent();
			},
			//关闭登录窗口
			gbAuth() {
				uni.navigateBack()
			},
			//获取列表数据
			getData(){
				uni.showLoading({
					title: '加载中'
				});
				this.request2({
						url: "/api/AppletPoint/GetPointOrderInfo",
						data: this.msg,
					},
					(res) => {
						uni.hideLoading();
						if (res.resultCode == 1) {
							this.dataList = res.data;
							console.log(res,'数据来也');
					    }
					}
				);	
			},
			//去支付
			goPayClass(){
				this.show= true;
				this.content= '确定花费'+this.dataList.TotalPointNum+'点数支付吗？';
				this.paymsg.ID = this.dataList.ID;
				this.paymsg.CourseId = this.dataList.CourseId;
				this.paymsg.StudyDate = this.dataList.StudyDateStr;
				this.paymsg.StudyDuration = this.dataList.StudyDuration;
				this.paymsg.TotalStudyDuration = this.dataList.TotalStudyDuration;
				this.paymsg.DurationUnit = this.dataList.DurationUnit;
				this.paymsg.OrderStaus = this.dataList.OrderStaus;
				this.paymsg.TotalPointNum = this.dataList.TotalPointNum;
				this.paymsg.BasePointNum = this.dataList.BasePointNum;
			},
			queren(){
				this.request2({
						url: '/api/AppletPoint/GetSetTeacherCourseOrder',
						data: this.paymsg
					},
					res => {
						
					}
				);
			},
		},
	};
</script>
