<style scoped>
	.orderList {
		width: 100%;
		min-height: 100vh;
		box-sizing: border-box;
		padding: 30rpx;
		background-color: #fff;
	}

	.OrderItem {
		width: 100%;
		height: auto;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 40rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;
		box-shadow: 0 0 40rpx rgba(0, 0, 0, .07);
	}

	.Order_Top {
		display: flex;
		align-items: center;
		margin: 30rpx 0;
	}

	.Order_label {
		color: #AFB0B5;
		font-size: 24rpx;
	}

	.Order_Number {
		color: #0000ff;
		font-size: 24rpx;
	}
	.Order_Type{
		box-sizing: border-box;
		padding: 4rpx 14rpx;
		font-size: 20rpx;
		background-color: #2961fe;
		margin-left: 20rpx;
		color: #FFFFFF;
		border-radius: 20rpx;
	}
	.courseName {
		font-size: 40rpx;
		margin-bottom: 20rpx;
		font-weight: 500;
		color: #000000;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.Order_Complete {
		color: #21D188;
	}

	.Order_Cancel {
		color: #999999;
	}

	.Order_noPay {
		color: #2FB4FB;
	}

	.p-lc-c {
		display: flex;
		align-items: center;
		color: #B3B3B5; 


	}

	.p-lc-item {
		flex: 1;
		text-align: center;
		font-size: 24rpx;
		display: inline-block;


	}

	.p-lc-item:last-child .item-val {
		border: none;
	}

	.item-val {
		color: #8E8D92;
		font-size: 32rpx;
		font-weight: bold;
		box-sizing: border-box;
		padding: 10rpx 0;
		margin: 10rpx 0;
		display: block;
		border-right: 1rpx solid #C7C7C7;
	}

	.di {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%
	}

	/* image {
		width: 20px;
		height: 20px;
	} */
</style>
<template>
	<view class="orderList">
		<van-empty description="暂无数据" v-if="orderList.length === 0" />
		<view v-if="orderList.length > 0">
			<view class="OrderItem" v-for="(item,index) in orderList" :key="index">
				<view class="courseName">{{item.CourseName}}</view>
				<view class="Order_Top">
					<view class="Order_label">订单号：</view>
					<view class="Order_Number">#{{item.OrderId}}</view>
					<view class="Order_Type" v-if="item.ClassScrollType===1">
						跟班
					</view>
					<view class="Order_Type" style="background-color: #29CC40;" v-if="item.ClassScrollType===2">
						约课
					</view>
				</view>
				<view class="p-lc-c">
					<view class="p-lc-item">
						<view>客户</view>
						<view class="item-val">
							{{item.GuestName}}
						</view>
						<view class="di">学员</view>
					</view>
					<view class="p-lc-item">
						<view>总课时</view>
						<view class="item-val">
							{{item.TotalHours}}
						</view>
						<view class="di">课时</view>
					</view>
					<view class="p-lc-item">
						<view>完成课时</view>
						<view class="item-val">
							{{item.CompleteHours}}
						</view>
						<view class="di">课时</view>
					</view>
					<view class="p-lc-item">
						<view>状态</view>
						<view class="item-val">
							<image
								src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/zhengchang.png"
								mode="heightFix" style="height:36rpx" v-if="item.OrderState==1"></image>
							<image
								src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/tuichu.png"
								mode="heightFix" style="height:36rpx" v-if="item.OrderState==2"></image>
							<image
								src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/quxiao.png"
								mode="heightFix" style="height:36rpx" v-if="item.OrderState==3"></image>
							<image
								src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/daifukuan.png"
								mode="heightFix" style="height:36rpx" v-if="item.OrderState==4"></image>
						</view>
						<view class="di">
							<text class="di" v-if="item.OrderState==1">正常</text>
							<text class="di" v-if="item.OrderState==2">退学</text>
							<text class="di" v-if="item.OrderState==3">取消</text>
							<text class="di" v-if="item.OrderState==4">待付款</text>
						</view>
					</view>
				</view>
			</view>
			<Loadmore :state="pageState" />
		</view>
	</view>
</template>

<script>
	import {
		ref,
		reactive,
		toRefs,
		toRef,
		getCurrentInstance,
		watch,
		computed,
		onMounted,
		inject,
	} from "vue";
	import Loadmore from "../../components/loadmore.vue";
	import bottom from "../../components/bottom";
	export default {
		components: {
			bottom,
			Loadmore,
		},
		setup(props, context) {
			let {
				proxy
			} = getCurrentInstance();
			let data = reactive({
				pageTitle: "合同列表",
				msg: {
					pageIndex: 1,
					pageSize: 10,
					OrderType: 1
				},
				pageCount: 0,
				orderList: [],
				pageState: "more",
				timer: null, //防抖
			});
			const methods = {
				jumpPage(url) {
					uni.navigateTo({
						url: url,
					});
				},
				getData() {
					proxy.$request("/AppletIndex/GetOrderPage", data.msg).then((res) => {
						if (data.timer) data.timer = null;
						if (data.msg.pageIndex === 1) {
							data.orderList = res.Data.PageData;
						} else {
							data.orderList = [...data.orderList, ...res.Data.PageData];
						}
						data.pageCount = res.Data.PageCount
						if (data.msg.pageIndex >= res.Data.PageCount) {
							data.pageState = "none";
						} else {
							data.pageState = "more";
						}
					});

				},
			};
			let that = methods;
			return {
				...toRefs(data),
				...methods
			};
		},
		onLoad(options) {
			this.msg.OrderType = options.type
			this.getData();
			if (options.type == 1) {
				this.pageTitle = '语培订单'
			} else if (options.type == 2) {
				this.pageTitle = '留学订单'
			}
			uni.setNavigationBarTitle({
				title: this.pageTitle
			});
		},
		onReachBottom() {
			if (this.msg.pageIndex < this.pageCount) {
				data.pageState = "loading";
				if (this.timer) clearTimeout(this.timer);
				this.timer = setTimeout(() => {
					this.msg.pageIndex++;
					that.getList();
				}, 1000);
			} else {
				this.pageState = "none";
			}
		}
	};
</script>
