<style>
	.eduorderDetail {
		background: #f0f4f7;
		font-family: 'oswald';
		padding: 0 5px;
		padding-bottom: 60px;
		height: 100vh;
	}

	.eduorderDetail .orderItem {
		background-color: #fff;
		margin-bottom: 10px;
		padding: 0 15px;
		border-radius: 10px;
	}

	.eduorderDetail .order_big {
		font-size: 14px;
		color: #08090E;
		font-weight: bold;
	}

	.eduorderDetail .order_mini {
		font-size: 11px;
		color: #919191;
		margin-top: 10px;
	}

	.eduorderDetail .orderCar {
		background: #fff;
		padding: 10px 0;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		flex-direction: row;
		font-family: aa;
	}

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

	.eduorderDetail .order_small {
		font-size: 14px;
		color: #1C1E1F;
	}

	.eduorderDetail .order_GName {
		width: 100%;
		height: 50px;
		border-top: 1px solid rgba(0, 0, 0, 0.03);
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.eduorderDetail .order_dList {
		border-bottom: 1px solid rgba(0, 0, 0, 0.03);
		padding: 20px 0;
	}

	.order_dList:last-child {
		border-bottom: 0;
	}

	.eduorderDetail .order_comLeft {
		margin-left: 70px;
	}

	.eduorderDetail .order_Tprice {
		display: flex;
		justify-content: space-between;
	}

	.order_redPrice {
		color: #F20707;
		font-size: 14px;
	}

	.order_Apply,
	.order_Sure {
		width: 50%;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 60px;
	}

	.eduorderDetail .order_ImgS {
		width: 17px;
		height: 17px;
		margin-right: 5px;
	}

	.eduorderDetail .order_Line {
		width: 1px;
		height: 40px;
		background-color: #e2e2e2;
	}

	.eduorderDetail .order_nonBtm {
		border-bottom: 0 !important;
	}

	.eduorderDetail .btn-box {
		display: flex;
		flex-direction: row-reverse;
		height: 60px;
		padding: 10px 20px;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 2;
		border-top: 1px solid #f5f5f5;
		background: #fff;
		display: flex;
		align-items: center;
	}

	.order_Btn_Com {
		padding: 5px 10px;
		border: 1px solid #999999;
		border-radius: 6px;
		color: #999999;
		font-size: 12px;
		float: right;
		margin-right: 15px;
	}

	.eduorderDetail .collect_right {
		margin-left: 15px;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		padding: 3px;
	}

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

	.eduorderDetail .collect_price {
		height: 20px;
		text-align: right;
		font-size: 16px;
		color: #ff4544;
	}
	.edu_orderList{
		border-bottom: 1px solid rgba(0, 0, 0, 0.03);
		padding:15px 0;
	}
</style>
<template>
	<view class="eduorderDetail">
		<template>
			<view class="orderItem">
				<view class="orderCar" v-for="(item,index) in dataList.DetailList" :key="index" @click="goDetail(item)">
					<view class="order_carImg">
						<image mode="aspectFit" :src="item.CoverImagePath" style="width: 100%; height: 100%;border-radius: 4px;">
						</image>
					</view>
					<view class="collect_right" :style="{'width': (windowWidth -166)+'px'}">
						<view class="collect_Name">{{item.GoodsName}}</view>
						<view class="collect_price">
							<template v-if="item.Final_Price>0">
								<text style="font-size:13px;">￥</text>{{item.Final_Price}}
							</template>
							<template v-if="item.Final_Price==0">
								<text style="font-size:13px;color: #999999;">免费</text>
							</template>
						</view>
					</view>
				</view>
			</view>
			<view class="orderItem">
				<view class="order_dList order_Tprice">
					<text class="order_small">订单编号</text>
					<text class="order_big" style="margin-left:20px;">{{dataList.OrderNo}}</text>
				</view>
				<view class="order_dList order_Tprice">
					<text class="order_small">下单时间</text>
					<text class="order_big" style="margin-left:20px;">{{dataList.CreateDate}}</text>
				</view>
				<view class="order_dList order_Tprice">
					<text class="order_small">支付方式</text>
					<text class="order_big" style="margin-left:20px;">{{dataList.PaymentWayName}}</text>
				</view>
			</view>
			<view class="orderItem">
				<view class="order_dList order_Tprice">
					<text class="order_small">商品总额</text>
					<text class="order_big">¥ {{dataList.Income}}</text>
				</view>
				<view class="order_dList order_Tprice">
					<text class="order_small">优惠</text>
					<text class="order_big">¥ {{dataList.CouponMoney}}</text>
				</view>
				<!-- <view class="order_dList order_Tprice">
					<text class="order_small">积分使用/抵扣</text>
					<text class="order_big">{{dataList.DetailList[0].IntegralNumber!=null?dataList.DetailList[0].IntegralNumber:'0'}}积分/-¥{{dataList.DetailList[0].IntegralMoney!=null?dataList.DetailList[0].IntegralMoney:'0'}} </text>
				</view> -->
				<view class="order_dList" style="text-align: right" :class="{'order_nonBtm':dataList.OrderStatus!=3}">
					<text class="order_big">实付款：</text>
					<text class="order_redPrice">¥ {{dataList.Income}}</text>
				</view>
				<view class="btn-box" v-if="dataList.OrderStatus == 1">
					<view class="item">
						<view class="order_Btn_Com" v-on:click.stop="payment(dataList)" style="color:#00D6A6;border-color:#00D6A6;">立即支付</view>
					</view>
					<view class="item">
						<view class="order_Btn_Com" @click="cancel">取消订单</view>
					</view>
				</view>
			</view>
		</template>
		<after-sale :list="dataList.DetailList" v-if="showAfter" @close="closeAfterHandler"></after-sale>
		<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='dataList.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>
	</view>
</template>

<script>
	import payCom from '@/components/pay/pay';
	import afterSale from "@/components/userorder/after-sale";
	export default {
		components: {
			afterSale,
			payCom
		},
		data() {
			return {
				pageTitle: '订单详情',
				mainColor: '',
				msg: {
					OrderId: 0,
					NewUserId:0,
				},
				dataList: {},
				showAfter: false,
				themCustomStyle: {
					marginLeft: "20px",
					padding: "0 2rpx",
					color: "#FFF",
				},
				showModal: false,
				Cancelmsg: {
					OrderId: 0,
					Type: 1,
					Remark: '',
				},
				payInfo: {
					OpenId: '',
					OrderId: '',
					OrderPayType: 1,
					GoodsName: ''
				},
				payBtn: false,
				payExit: false,
				windowWidth: 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,
			});
			this.windowWidth = this.$utils.SystemInfo().windowWidth;
		},
		onLoad(option) {
			this.u = uni.getStorageSync("mall_UserInfo");
			this.msg.OrderId = option.OrderId;
			if(option.NewUserId){
				this.msg.NewUserId = option.NewUserId;
			}
			this.payInfo.OpenId = uni.getStorageSync('mall_UserInfo').OpenId;
			this.getData();
		},
		methods: {
			//获取数据
			getData() {
				this.request2({
						url: "/api/AppletEducation/GetAppletGuidecarOrderOrderInfo",
						data: this.msg,
					},
					(res) => {
						if (res.resultCode == 1) {
							console.log(res, '数据');
							this.dataList = res.data;
						}
					}
				);
			},
			closeAfterHandler() {
				this.showAfter = false;
			},
			//取消订单
			cancel() {
				this.showModal = true;
				this.Cancelmsg.OrderId = this.dataList.OrderId;
				this.Cancelmsg.Type = this.dataList.OrderStatus;
				this.Cancelmsg.Remark = ''
			},
			confirm() {
				let that = this
				if (that.Cancelmsg.Type == 2 && that.Cancelmsg.Remark == '') {
					uni.showToast({
						title: '备注不能为空',
						icon: 'none'
					})
					return
				}
				let pages = getCurrentPages(); // 当前页面
				uni.requestSubscribeMessage({ //订阅消息 退款和审核通知
					tmplIds: that.dataList.template_message_list,
					complete(res) {
						that.request2({
								url: '/api/AppletOrder/CancelAppletGoodsOrderInfo',
								data: that.Cancelmsg
							},
							(res) => {
								that.showModal = false;
								uni.showToast({
									title: res.message,
									icon: 'none'
								})
								uni.redirectTo({
									url: "/pages/school/personal/orderList?status=1",
								});

							}
						);
					}
				})
			},
			//支付
			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
			},
			closePay() {
				this.payBtn = false;
				this.payExit = true;
			},
			exitPay() {
				this.payExit = false;
			},
			//跳转至课程详情
			goDetail(item){
				uni.navigateTo({ url: '/pages/school/courseInfo?GoodsId='+item.GoodsId });
			}
		}
	}
</script>
