<style>
	.order_Content {
		width: 100%;
	}

	.order_Inner {
		width: 100%;
		padding: 20px;
		margin-bottom: 10px;
		background-color: #fff;
	}

	.order_NContent {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 13px;
		color: #121212;
	}

	.order_Status {
		color: #FF4048;
		color: 12px;
	}

	.order_Car {
		display: flex;
		justify-content: space-between;
		margin-top: 15px;
	}

	.order_Price {
		color: #121212;
		font-size: 15px;
	}

	.order_carImg {
		width: 124px;
		height: 70px;
		border-radius: 4px;
		box-shadow: 0 4px 10px 1px #D2D2D2;
	}

	.order_middle {
		font-size: 13px;
		color: #121212;
		width: 62%;
	}

	.order_eduName {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin-bottom: 3px;
		font-size: 14px;
		color: #1B1D1E;
	}

	.order_BtnList {
		margin-top: 20px;
		position: relative;
		height: 30px;
	}

	.order_Btn_inner {
		width: 70%;
		position: absolute;
		right: 0;
	}

	.order_EduBtn_Com {
		padding: 5px 10px;
		border: 1px solid #9A9A9A;
		border-radius: 4px;
		color: #9A9A9A;
		font-size: 12px;
		float: right;
		margin-left: 15px;
	}
	.payOrderBtn{
		border:1px solid #00d6a6!important;
	}
	.order_Btn_inner .order_Btn_Com:first-child {
		margin-right: 0;
	}
	.course-head{
		width:100%;
	}
	.order_TotalPrice{
		text-align: right;
		margin-top:15px;
		font-size:13px;
	}
</style>
<template>
	<view class="quick-box" style="height:100vh;">
		<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_Inner" v-for="(item,index) in dataList" :key="index" @click="goDetail(item)">
					<view class="order_NContent">
						<view>{{getCreateTime(item.CreateDate)}}</view>
						<view>订单号：{{item.OrderNo}}</view>
						<view class="order_Status" v-if="item.OrderStatus==1" :style="{color:mainColor}">{{item.OrderStatusName}}</view>
						<view class="order_Status" v-if="item.OrderStatus==5" style="color:#121212">{{item.OrderStatusName}}</view>
						<view class="order_Status" v-if="item.OrderStatus==7" style="color:#9A9A9A">{{item.OrderStatusName}}</view>
					</view>
					<view class="order_Car" v-for="(x,j) in item.DetailList" :key="x">
						<view class="order_carImg">
							<image mode="aspectFit" style="width: 100%; height: 100%;border-radius: 4px;" :src="x.CoverImagePath" />
							</image>
						</view>
						<view class="order_middle">
							<view class="order_eduName">{{x.GoodsName}}</view>
							<view style="margin-bottom:5px;">
								{{x.TripSTime}}
							</view>
							<view style="text-align: right;margin-top:15px;">
								<!-- <text style="color:#9A9A9A;font-size:12px;">实付：</text> -->
								<text style="font-size:12px;color:#121212">¥{{x.Unit_Price}}</text>
							</view>
						</view>
					</view>
					<view class="order_TotalPrice">应付金额：¥{{item.Income}}</view>
					<view class="order_BtnList">
						<view class="order_Btn_inner">
							<view class="order_EduBtn_Com payOrderBtn" v-if="item.OrderStatus==1" @click.stop="payment(item)" :style="{'color':mainColor}">立即支付</view>
							<view class="order_EduBtn_Com" v-if="item.OrderStatus==1" @click.stop="cancel(item,index)">取消订单</view>
							<view class="order_EduBtn_Com payOrderBtn" v-if="item.OrderStatus==5||item.OrderStatus==7" :style="{'color':mainColor}">查看详情</view>
						</view>
					</view>
				</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>
		</scroll-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;align-items: center;justify-content: center;height:70px ;">
					<Text>是否取消订单？</Text>
				</view>
				<view style="display: flex;flex-direction: column;height:80px ;margin-left: 15px;width: 100%;" v-if='subItem.OrderStatus==2'>
					<Text style='margin-left: 10px;margin-top: 5px;'>备注</Text>
					<input class="uni-input inputM" style='margin-left: 10px;margin-top: 5px;' v-model="Cancelmsg.Remark" 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>
		<payCom v-if="payBtn" :payInfo="payInfo" @closePay="closePay"></payCom>
		<u-popup v-model="payExit" mode="center" :mask-close-able="false">
			<view style="background:#fff;width:500rpx">
				<view style="padding:10px 0 0 10px">提交失败</view>
				<view style="text-align:center;padding-bottom:40rpx">
					<view style="margin:80rpx 0">支付取消</view>
					<span @click="exitPay" style="padding:10rpx 50rpx;color:#fff;background:#19be6b;border-radius: 12px;">确定</span>
				</view>
			</view>
		</u-popup>
		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth='gbAuth'></auth>
	</view>
</template>
<script>
	import payCom from '@/components/pay/pay';
	import auth from "@/components/auth/index";
	import tabbar from "@/components/tabbar/index";
	export default {
		components: {
			auth,
			payCom
		},
		data() {
			return {
				pageTitle: "课程订单",
				loading: true,
				mainColor: "",
				u: {},
				scrollHeight: 0,
				pageCount: 1,
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
				msg:{
					pageIndex:1,
					pageSize:5,
					StartTime:'',
					EndTime:'',
					OrderStatus:0
				},
				headData: [], //头部切换数据
				current: 0,
				//内容数据
				dataList: [],
				showModal: false,
				subItem: {},
				index: 0,
				Cancelmsg: {
					OrderId: 0,
					Type: 1,
					Remark: '',
				},
				payInfo: {
					OpenId: '',
					OrderId: '',
					OrderPayType: 1,
					GoodsName: ''
				},
				payBtn:false,
				payExit:false,
				showAuth: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,
			});
			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.payInfo.OpenId=uni.getStorageSync('mall_UserInfo').OpenId;
				this.getHeadList();
				// this.getContent();
			}
		},
		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/AppletEducation/EducationOrderStatusEnumList",
						data: {},
					},
					(res) => {
						if (res.resultCode == 1) {
							this.headData = res.data;
							var obj = {
								Id: 0,
								Name: '全部'
							}
							this.headData.unshift(obj)
							this.msg.OrderStatus=this.headData[this.current].Id;
							this.getContent();
						}
					}
				);
			},
			//点击头部切换
			getChild(i) {
				this.current = i;
				this.msg.OrderStatus = this.headData[this.current].Id;
				this.getContent(1);
			},
			//获取内容
			getContent(num) {
				if (num == 1) {
					this.dataList = [];
				}
				uni.showLoading({
					title: '加载中'
				});
				this.request2({
						url: "/api/AppletEducation/GetAppletGoodsEducationOrderPageList",
						data: this.msg,
					},
					(res) => {
						uni.hideLoading();
						if (res.resultCode == 1) {
							this.dataList = this.dataList.concat(res.data.pageData);
							this.pageCount = res.data.pageCount;
						}
					}
				);
			},
			//滚动加载
			lower(e) {
				if (this.msg.pageIndex < this.pageCount) {
					this.msg.pageIndex++;
					this.status = "loading";
					this.getContent();
				} else {
					this.status = "nomore";
				}
			},
			//跳转
			goUrl(item) {
				if (item.LinkUrl && item.LinkUrl.length > 0) {
					uni.navigateTo({
						url: item.LinkUrl,
					});
				}
			},
			//取消订单
			cancel(e, index) {
				this.showModal = true;
				this.Cancelmsg.Remark = '',
				this.index = index;
				this.subItem = e;
				this.Cancelmsg.OrderId = e.OrderId;
				this.Cancelmsg.Type = e.OrderStatus == 1 ? 1 : 2;
			},
			//确认订单
			confirm() {
				let that = this
				// that.showModal = false;
				if (that.Cancelmsg.Type == 2 && that.Cancelmsg.Remark == '') {
					uni.showToast({
						title: '备注不能为空',
						icon: 'none'
					})
					return
				}
				uni.requestSubscribeMessage({
					tmplIds: that.dataList[0].template_message_list,
					complete(res) {
						that.request2({
								url: '/api/AppletOrder/CancelAppletGoodsOrderInfo',
								data: that.Cancelmsg
							},
							(res) => {
								that.showModal = false;
								if (that.Cancelmsg.Type == 1) {
									uni.showToast({
										title: res.message,
										icon: 'none'
									})
									that.dataList.splice(that.index, 1);
								} else {
									uni.showToast({
										title: "取消成功，请等待审核",
										position: "bottom",
										icon: "none",
										duration: 2000,
									});
									that.msg.pageIndex = 1;
									that.dataList = [];
									that.getContent();
								}
							}
						);
					}
				})
			},
			//再次购买
			buy(y) {
				let ShoppingCartIdList = [];
				let forms = {};
				let good = {
					// MallId: y.MallId,
					DetailList: [],	
					Use_Integral: 0,
					User_Coupon_Id: 0,
					DeliveryMethod: 0,
					AddressId: 0,
				};
				y.DetailList.forEach((x) => {
					ShoppingCartIdList.push(x.Id)
					let g = {
						GoodsId: x.GoodsId,
						Number: x.Number,
						SpecificationSort: x.SpecificationSort,
					};
					good.DetailList.push(g);
				});
				forms = good;
				uni.navigateTo({
					url: '/pages/order-submit/order-submit?formData=' + encodeURIComponent(JSON.stringify(forms)) +
						'&IsFormShoppingCart=2&ShoppingCartIdList=' + JSON.stringify(ShoppingCartIdList)
				});
			},
			payment(e){
				this.payInfo.OrderId = e.OrderId;
				this.payInfo.GoodsName = e.DetailList[0].GoodsName.slice(0,10);
				this.payInfo.PaymentWay = e.PaymentWay;	
				this.payInfo.total_price = e.Income;	
				this.payBtn=true
			},
			exitPay() {
				this.payExit = false;
			},
			closePay() {
				this.payBtn = false;
				this.payExit = true;
			},
			//跳转到详情
			goDetail(item){
				uni.navigateTo({ url: '/pages/school/personal/orderDetail?OrderId='+item.OrderId})
			},
			//格式化日期
			getCreateTime(item){
				if(item){
					let time=''
					var time1 = item.split("-").join(".");
					var time2 = time1.split(" ")[0];
				    var time3 = item.split(" ")[1].substring(0,5);
					time = time2+' '+time3;
					return time;
				}
			}
		},
	};
</script>
