<style>
	.jz_MyOrder {
		height: 100vh;
		background-color: #ECF1F4;

	}

	.jz_OrderList {
		width: 100%;
		min-height: 334rpx;
		background-color: #fff;
		border-radius: 20px;
		padding: 30px;
		margin-bottom: 15px;
		position: relative;
	}

	.jz_OrderList:first-child {
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}

	.jz_OrderTop {
		display: flex;
		align-items: center;
		position: relative;
		padding-bottom: 27rpx;
		border-bottom: 1px solid #E6E6E6;
	}

	.jz_Oleft {
		color: #111111;
		font-size: 32rpx;
		font-weight: bold;
		width: 70%;
		height: 24px;
		overflow: hidden;
	}

	.jz-Oright {
		color: #111111;
		font-size: 24rpx;
		position: absolute;
		right: 0;
	}

	.jz_MyOrder_img {
		width: 100rpx;
		height: 100rpx;
		margin-top: 20px;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.jz_MyOrder_img img {
		width: 100%;
		height: 100%;
	}

	.jz_XiaDan {
		margin-left: 25rpx;
		color: #333333;
		font-size: 24rpx;
		margin-top: 20px;
	}

	.jz_Zailai {
		background-color: #111111;
		border-radius: 16px;
		width: 150rpx;
		height: 60rpx;
		text-align: center;
		color: #fff;
		line-height: 60rpx;
		font-size: 24rpx;
	}

	.isShowAll {
		height: auto;
	}
	.jz_BtnContent{
		margin-top:15px;
		right:40rpx;
		bottom:20rpx;
		display:flex;
		justify-content: flex-end;
	}
</style>
<template>
	<view class="jz_MyOrder">
		<u-tabs :list="list" :is-scroll="false" :current="current" :active-color="mainColor" @change="change" bar-height='4'
		 height="100"></u-tabs>
		<u-empty v-if="dataList.length==0" text="暂无数据" mode="data"></u-empty>
		<template v-else>
			<view class="jz_MyOrderMain" style="height: calc(100vh - 44px);overflow: hidden;">
				<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower" :style="{ height: '100%' }">
					<view class="jz_OrderList" v-for="(item,index) in dataList" :key="index" @click="goOrderDetail(item)">
						<view class="jz_OrderTop">
							<view class="jz_Oleft" :class="{'isShowAll':!item.isShowHalf}">
								{{item.title}}
							</view>
							<view style="margin-left:10px;">
								<u-icon name="arrow-down" @click.native.stop="getShow(item)" v-if="item.isShowHalf" color="#2979ff" size="28"></u-icon>
								<u-icon name="arrow-up" @click.native.stop="getShow(item)" v-else color="#2979ff" size="28"></u-icon>
							</view>
							<view class="jz-Oright">
								{{item.orderStateName=='占位'?'待付款':item.orderStateName}}
							</view>
						</view>
						<view style="display:flex;">
							<view class="jz_MyOrder_img">
								<img mode='aspectFill' :src="getFirstImg(item.imgCover)" alt="" />
							</view>
							<view class="jz_XiaDan">
								<view>下单时间：{{item.createDate}}</view>
								<view style="margin-top:22rpx;">付款总额：¥{{item.preferPrice}}</view>
							</view>
						</view>
						<view v-if="item.isApplyForCancel==1" style="color:red;font-size:24rpx;margin-left:122rpx;">订单取消，正在确认中！</view>
						<view class="jz_BtnContent">
							<view class="jz_Zailai" style="margin-right:10rpx;" @click="gojz_List">再来一单</view>
							<view v-if="item.orderState==2" class="jz_Zailai" style="width:110rpx;margin-right:10rpx;" @click="goZhifu(item)">付款</view>
							<view v-if="item.isApplyForCancel!=1" class="jz_Zailai" style="width:110rpx;" @click="goCancel(item)">取消</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</template>
	</view>
</template>
<script>
	export default {
		components: {

		},
		data() {
			return {
				pageTitle: '线路订单',
				msg: {
					pageIndex: 1,
					pageSize: 15,
					MiniAppUserId: 0,
					orderState:-1
				},
				mainColor: "",
				list: [{
					name: '全部',
					Id:-1
				}, {
					name: '待付款',
					Id:2
				}, {
					name: '已完成',
					Id:1
				},{
					name: '已取消',
					Id:4
				}],
				current: 0,
				dataList: [],
				page_count: 0,
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
				status: "加载中",
				price:0
			};
		},
		created() {
			this.getOrderInfo();
		},
		onLoad(option) {
			this.current = option.status || 0;
			this.mainColor = this.$uiConfig.mainColor;

			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,
			});
			
		},
		methods: {
			goOrderDetail(item){
				console.log(item)
				uni.redirectTo({
					url: "/pages/jiuzhai/jz_SureOrder?orderId="+item.orderId
				});
			},
			change(i) {
				this.current = i;
				this.msg.orderState = this.list[i].Id;
				this.research();
			},
			//获取第一张图
			getFirstImg(obj) {
				if (obj) {
					let objArr = JSON.parse(obj);
					return objArr[0].Url;
				}
			},
			getShow(item) {
				item.isShowHalf = !item.isShowHalf;
				this.$forceUpdate();
			},
			//跳转
			gojz_List() {
				uni.navigateTo({
					url: "/pages/jiuzhai/jz_Line"
				});
			},
			lower(e) {
				if (this.msg.pageIndex < this.page_count) {
					this.msg.pageIndex++;
					this.status = "loading";
					this.getOrderInfo();
				} else {
					this.status = "nomore";
				}
			},
			research()
			{
				this.msg.pageIndex=1;
				this.getOrderInfo(1);
			},
			getOrderInfo(type) {
				uni.showLoading({
					title:'加载中',
					icon:'none'
				})
				if(type==1){
					this.dataList=[];
				}
				this.userInfo = uni.getStorageSync('mall_UserInfo');
				this.msg.MiniAppUserId = this.userInfo.UserId
				this.apipost("sellorder_post_GetMiniAppTravelOrderList", this.msg,
					res => {
						uni.hideLoading();
						if (res.resultCode == 1) {
							console.log(res, '数据');
							if(type==1){
								this.dataList = res.data.pageData;
							}
							else{
								this.dataList = this.dataList.concat(res.data.pageData);
							}
							
							this.dataList.forEach(x => {
								x.isShowHalf = true;
							})
							this.page_count = res.data.pageCount;
						} else {

						}
					},
					null
				);
			},
			//取消订单
			goCancel(item) {
				//未付款-调用后台取消
				if ((item.paymentTime == null||item.paymentTime=='')&&item.orderState==2) {
					this.apipost(
						"sellorder_post_B2BRemoveOrder", {
							ID: item.orderId
						},
						res => {
							if (res.resultCode == 1) {
								uni.showToast({
									title: '操作成功',
									icon: 'success',
								})
								this.research();
							}
						},
						err => {}
					);
				}	
				else{
					let msg={
						OrderId:item.orderId,
						UserId:uni.getStorageSync('mall_UserInfo').UserId
					}
					//已付款取消申请
					this.apipost("sellorder_post_AppletUserCancelOrder", msg ,
						res => {
							if (res.resultCode == 1) {
								uni.showToast({
									title: '操作成功',
									icon: 'success',
								})
								this.research();
							
							} else {
					
							}
						},
						null
					);
				}
			},
			//付款
			goZhifu(item){
				console.log(item,'item');
				let url='/api/WeChatPay/GetTravlePayInfo'
				let GoodsName = item.title;
					GoodsName = GoodsName.slice(0, 10);
				this.price = item.preferPrice;
				this.request2({
						url: url,
						data: {
							OrderId:item.orderId,
							GoodsName:GoodsName,
							OrderPayType:1,
							OpenId:uni.getStorageSync('mall_UserInfo').OpenId,
						}
					},
					res => {
						let orderInfo = JSON.parse(res.data);
						this.goPay(orderInfo)
					}
				);
			},
			goPay(orderInfo){
				let that=this;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: orderInfo.timeStamp,
					nonceStr: orderInfo.nonceStr,
					package: orderInfo.package,
					signType: orderInfo.signType,
					paySign: orderInfo.sign,
					success: function(res) {
						console.log('success', res);
						uni.showToast({
							title: "支付成功"
						})
						//todo
						uni.redirectTo({
						  url: '/pages/jiuzhai/paysuccess?PreferPrice='+that.price+'&isFrom=1'
						});
					},
					fail: function(err) {
						console.log('fail:', err);
						uni.showToast({
							title: "支付失败"
						})
					}
				});
			}
		}

	};
</script>
