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

	.order_List {
		width: 94%;
		padding:10px 15px;
		margin:0 auto 10px;
		background-color: #fff;
		min-height: 100px;
		border-radius:10px;
		position: relative;
	}
	.student_Title{
		display: flex;
		justify-content: space-between;
		border-bottom:1px solid #EFEEEB;
		align-items: center;
		padding-bottom:10px;
	}
	.student_ClassName{
		width:130px;
		color:#111111;
		font-size:14px;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
		margin:-5px 0 0 20px;
		font-weight: bold;
	}
	.stu_InfoBtn{
		width:70px;
		height:25px;
		background-color: #40766E;
		color:#fff;
		border-radius: 6px;
		text-align: center;
		line-height: 25px;
		font-size:12px;
	}
	.stu_delBtn{
		width:45px;
		height:25px;
		margin-left:10px;
		border-radius: 6px;
		border:1px solid red;
		color:red;
		text-align: center;
		line-height: 25px;
		font-size: 12px;
	}
	.teacherName{
		color:#111111;
		font-size:14px;
		margin-left:5px;
	}
	.stu_tookie{
		font-size:12px;
		margin-top:2px;
	}
	.stu_plateList{
		width:100%;
		height:35px;
		background-color: #F8F5EA;
		border-radius: 2px;
		color:#B7A266;
		padding-left:10px;
		font-size:12px;
		line-height: 35px;
		margin:10px 0;
	}
	.stu_Dian{
		color:gray;
		margin:-6px 10px 0 10px;
	}
	.stu_StutasImg{
		width:22px;
		height:36px;
		position: absolute;
		left:10px;
		top:-4px;
	}
</style>
<template>
	<view class="quick-box" style="height:100vh;background:#F3F5F7;">
		<view class="course-head">
			<u-tabs name="Name" :list="headData" v-if="headData&&headData.length>1" :is-scroll="false" :current="current" :bar-width="80" :font-size="28"
			 :active-color="mainColor" :bold="false" @change="getChild"></u-tabs>
		</view>
		<u-empty v-if="dataList.length==0" text="暂无数据" mode="data"></u-empty>
 		<scroll-view v-else :scroll-y="true" style="background-color: #f0f4f7;" :enable-back-to-top="true" :enable-flex="true"
		 @scrolltolower="lower" :style="{ 'height': `calc(100% - ${scrollHeight})`}">
			<view class="order_Content">
				<view class="order_List" v-for="(item,index) in dataList" :key="index" @click="goDetail(item)">
					<image v-if="item.OrderStaus==1" src="../../../static/images/dzf.png" class="stu_StutasImg"></image>
					<image v-if="item.OrderStaus==2" src="../../../static/images/dsk.png" class="stu_StutasImg"></image>
					<image v-if="item.OrderStaus==3" src="../../../static/images/ygs.png" class="stu_StutasImg"></image>
					<image v-if="item.OrderStaus==4" src="../../../static/images/ywc.png" class="stu_StutasImg"></image>
					<view class="student_Title">
						<view class="student_ClassName">{{item.CourseName}}</view>
						<view v-if="item.OrderStaus==1" style="display: flex;">
							<view class="stu_InfoBtn" @click.stop="goPayClass(item)">去支付</view>
							<view class="stu_delBtn" @click.stop="delOrder(item)">删除</view>
						</view>
						<text v-if="item.OrderStaus==2" style="color:#4699FC;">待确认</text>
						<text v-if="item.OrderStaus==3" style="color:#BBA16B;">待上课</text>
						<text v-if="item.OrderStaus==4" style="color:#969696;">完成</text>
					</view>	
					<view style="display: flex;align-items: center;margin-top:13px;">
						<view style="display:flex;align-items: center;width: calc(100vw - 180px);">
							<image mode="aspectFill" :src="item.TeacherLogo" style="width: 35px; height: 35px;border-radius: 50%;" ></image>
							<view style="height: 35px;display: flex;flex-direction: column;justify-content: space-between;">
								<text class="teacherName">{{item.TeacherName}}</text>
								<text style="font-size: 12px;margin-left: 5px;">{{item.CourseClassTypeName}}</text>
							</view>
						</view>
						<!-- <view class="stu_tookie" style="display: flex;align-items: center;margin-left:20px;">
							
							<text class="stu_Dian">.</text>{{item.CourseClassTypeName}}<text class="stu_Dian">.</text>
						</view> -->
						<!-- <view style="font-size: 12px;">{{item.OrderStatusName}}</view> -->
						<view class="stu_tookie" style="margin-top: 10px;width: 130px;text-align: right;">
							<image style="width:12px;height:12px;margin-right:3px;" src="../../../static/images/tookie.png" alt=""></image>
							{{item.StudyDate}} ({{item.StudyDuration}}{{item.DurationUnitName}})
						</view>
					</view>
					<!-- <view class="stu_tookie" style="margin-top: 10px;">
						<image style="width:12px;height:12px;margin-right:3px;" src="../../../static/images/tookie.png" alt=""></image>
						{{item.StudyDate}} ({{item.StudyDuration}}{{item.DurationUnitName}})
					</view> -->
					<view class="stu_plateList" v-if="item.RoomInfo" :style="{'color:#969696':item.OrderStaus==4}">
						<text v-if="item.RoomInfo">{{item.RoomInfo}}</text>
					</view>
				</view>
				<view style="padding:10px 0;">
					<u-loadmore :status="status" :load-text="loadText" :font-size="24" :margin-top="0" :margin-bottom="0" bg-color="#f0f4f7" />
				</view>
			</view>
		</scroll-view>
		<u-modal v-model="show" :content="content" :show-cancel-button='true' @confirm='queren'></u-modal>
		<u-modal v-model="show2" :content="content2" :show-cancel-button='true' @confirm='queren2'></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: {},
				scrollHeight: 0,
				pageCount: 1,
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
				msg:{
					pageIndex:1,
					pageSize:5,
					OrderStaus:0,
					TeacherId:0,
					CourseId:0,
					ID:0,
					StartTime:'',
					EndTime:''
				},
				paymsg:{
					ID:0,
					CourseId:0,
					StudyDate:'',
					StudyDuration:'',
					TotalStudyDuration:'',
					DurationUnit:'',
					OrderStaus:'',
					TotalPointNum:'',
					BasePointNum:''
				},
				headData: [], //头部切换数据
				current: 0,
				//内容数据
				dataList: [],
				index: 0,
				showAuth:false,
				show:false,
				content:'',
				show2:false,
				content2:'',
				delMsg:{
				  OrderId:0
				}
			};
		},
		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,
			});
			setTimeout(() => {
				this.getHeadHeight();
			}, 1000);
		},
		onLoad(option) {
			this.u = uni.getStorageSync("mall_UserInfo");
			if (!this.u) {
				this.u = {
					nickName: "未登录",
					avatarUrl: ""
				};
				this.showAuth = true;
			} else {
				this.current = option.status || 0;
				this.getHeadList();
			}
		},
		methods: {
			reloadUserinfo() {
				this.u = uni.getStorageSync("mall_UserInfo");
				// this.showAuth=false;
				this.getContent();
			},
			//关闭登录窗口
			gbAuth() {
				uni.navigateBack()
			},
			getHeadHeight() {
				let that = this;
				const query = uni.createSelectorQuery().in(this);
				query
					.select(".course-head")
					.boundingClientRect((data) => {
						that.scrollHeight = data.height + "px";
					})
					.exec();
			},
			//获取头部数据
			getHeadList() {
				this.request2({
						url: "/api/AppletPoint/GetOrderStausEnumList",
						data: {},
					},
					(res) => {
						if (res.resultCode == 1) {
							this.headData = res.data;
							var obj = {
								Id: 0,
								Name: '全部'
							}
							this.headData.unshift(obj);
							this.msg.OrderStaus=this.headData[this.current].Id;
							this.getContent();
						 }
					}
				);
			},
			//获取列表数据
			getContent(num){
				if (num == 1) {
					this.dataList = [];
				}
				uni.showLoading({
					title: '加载中'
				});
				this.request2({
						url: "/api/AppletPoint/GetPointOrderPageList",
						data: this.msg,
					},
					(res) => {
						uni.hideLoading();
						if (res.resultCode == 1) {
							console.log(res,'数据来也');
							this.dataList = this.dataList.concat(res.data.pageData);
							this.pageCount = res.data.pageCount;
					    }
					}
				);
			},
			//点击头部切换
			getChild(i) {
				this.current = i;
				this.msg.OrderStaus = this.headData[this.current].Id;
				this.getContent(1);
			},
			
			//滚动加载
			lower(e) {
				if (this.msg.pageIndex < this.pageCount) {
					this.msg.pageIndex++;
					this.status = "loading";
					this.getContent();
				} else {
					this.status = "nomore";
				}
			},
			//点击支付
			goPayClass(item){
				this.show= true;
				this.content= '确定花费'+item.TotalPointNum+'点数支付吗？';
				console.log(item,'item');
				this.paymsg.ID = item.ID;
				this.paymsg.CourseId = item.CourseId;
				this.paymsg.StudyDate = item.StudyDateStr;
				this.paymsg.StudyDuration = item.StudyDuration;
				this.paymsg.TotalStudyDuration = item.TotalStudyDuration;
				this.paymsg.DurationUnit = item.DurationUnit;
				this.paymsg.OrderStaus = item.OrderStaus;
				this.paymsg.TotalPointNum = item.TotalPointNum;
				this.paymsg.BasePointNum = item.BasePointNum;
			},
			queren(){
				this.request2({
						url: '/api/AppletPoint/GetSetTeacherCourseOrder',
						data: this.paymsg
					},
					res => {
						if(res.resultCode==1){
							this.content = res.message;
						}
					}
				);
			},
			//删除订单
			delOrder(item){
				this.show2= true;
				this.content2= '确定删除该订单？';
				this.delMsg.OrderId = item.ID;
			},
			queren2(){
				this.request2({
						url: '/api/AppletPoint/GetDeletePointOrderInfo',
						data: this.delMsg
					},
					res => {
						if(res.resultCode==1){
							this.getContent(1);
						}
					}
				);
			},
			
			//跳转到详情
			goDetail(item){
				uni.navigateTo({ url: '/pages/appointment/personal/studentAppointmentInfo?OrderId='+item.ID})
			},
		},
	};
</script>
