<style lang="scss" scoped>
	.allorderList{
		width: 100%;
		height: 100vh;
		background: #ECF1F4;
		.orderList{
			width: 100%;
			border-radius: 10px;
			background: #FFF;
			padding: 20px;
			margin-top: 10px;
		}
		.orderList-top{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #111111;
		}
		.order_xu{
			width: 100%;
			height: 14px;
			border-bottom: 1px dashed  #E6E6E6;
		}
		.order_center{
			width: 100%;
			margin-top: 15px;
			.car-o{
				width: calc(100vw - 40px);
				font-size: 14px;
				color: #111111;
				font-weight: bold;
				display: flex;
				align-items: center;
				overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
				margin-top: 15px;
			}
			.car-w{
				width: 100%;
				font-size: 12px;
				color: #333333;
				font-size: 500;
				margin-top: 5px;
			}
			.hotelbox{
				display: flex;
				margin-top: 15px;
				.hotelbox-r{
					width: calc(100vw - 40px - 60px);
					font-size: 12px;
					.text-t{
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
					
				}
				
			}
			
		}
		.zailaiyidan{
			padding: 0 10px;
			height: 30px;
			background: #111111;
			border-radius: 8px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 12px;
			color: #FFF;
			margin-left: 10px;
		}
		.zailaiyidan2{
			padding: 0 10px;
			height: 30px;
			border-radius: 8px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 12px;
			color: #111;
			margin-left: 10px;
			border: 1px solid #111111;
		}
		
		.s-c-o {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		
		.s-c-l {
			flex: 1;
			width: 1px;
			display: flex;
			align-items: flex-start;
			margin-left: 28px;
		}
		
		.s-c-r {
			width: 80px;
		}
		
		.chufatime {
			width: 44px;
			font-size: 11px;
			font-weight: 500;
			color: #111111;
			line-height: 25px;
		}
		
		.setoutdian {
			width: 5px;
			height: 5px;
			border-radius: 50%;
			background: #111111;
			margin-top: 10px;
			margin-right: 2px;
		}
		
		.s-c-place {
			font-size: 12px;
			color: #333333;
			line-height: 25px;
			width: calc(100vw - 60px - 5px - 100px - 2px);
		}
		.shuxian {
			width: 1px;
			height: 10px;
			background: #111111;
			margin-left: 29px;
		}
		.prices {
			color: #111111;
			font-size: 14px;
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}
</style>
<template>
	<view class="allorderList">
		<u-tabs :list="statusList" :current="current" name="Name" @change="change" :active-color="mainColor" bg-color="#FFF" bar-height='4' :show-bar='showbar'
		 height="100"></u-tabs>
		 <view style="height: calc(100vh - 50px); background: #fff;" v-if="g.length == 0">
		 	<u-empty text="暂无相关订单" mode="order"></u-empty>
		 </view>
		 <view v-if="g.length > 0" style="height: calc(100vh - 50px);width: calc(100vw);overflow: hidden;">
		 	<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower" :style="{ height: '100%' }">
		 		<view class="orderList" v-for="(item, index) in g" :key="index" @click="godetails(item)">
					<view class="orderList-top">
						<span style='font-size: 16px;font-weight: 800;'>{{item.OrderTypeName}} <span style='font-size: 12px;font-weight: normal;'>({{item.OrderNo}})</span></span>
						<span style='font-size: 12px;'>{{item.OrderStatusName}}</span>
					</view>
					<view class="order_xu"></view>
					<view class="order_center" v-if="item.OrderType == 1">
						<view v-for="(x,y) in item.HotelList" :key='y' >
							<view class="hotelbox">
								<image :src="getIconLink(x.HotelImage)" style="width: 50px;height: 50px;border-radius: 8px;margin-right: 10px;"></image>
								<view class="hotelbox-r">
									<view class="text-t">{{x.HotelName}}</view>
									<view>数量:{{x.RoomNumber}}</view>
									<view>单价:￥{{x.Unit_Price}}元</view>
								</view>
							</view>
							<view class="order_xu"></view>
						</view>
					</view>
					<view class="order_center" v-if="item.OrderType == 2">
						<view v-for="(x,y) in item.DiningList" :key='y' >
							<view class="hotelbox">
								<image :src="getIconLink(x.DiningImg)" style="width: 50px;height: 50px;border-radius: 8px;margin-right: 10px;"></image>
								<view class="hotelbox-r">
									<view class="text-t">{{x.MealName}}</view>
									<view>数量:{{x.PeopleNumber}}人</view>
									<view>单价:￥{{x.Unit_Price}}元</view>
								</view>
							</view>
							<view class="order_xu"></view>
						</view>
					</view>
					<view class="order_center" v-if="item.OrderType == 3">
						<view v-for="(x,y) in item.TicketList" :key='y' >
							<view class="hotelbox">
								<image :src="getIconLink(x.TicketImg)" style="width: 50px;height: 50px;border-radius: 8px;margin-right: 10px;"></image>
								<view class="hotelbox-r">
									<view class="text-t">{{x.TicketName}}</view>
									<view>人数:{{x.PeopleNumber}}</view>
									<view>单价:￥{{x.Unit_Price}}元</view>
								</view>
							</view>
							<view class="order_xu"></view>
						</view>
					</view>
					<view class="order_center" v-if="item.OrderType == 4">	
						<view v-for="(x,y) in item.CarList" :key='y' >
							<view class="car-o" >
								<image v-if="item.IsGoBack == 2" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/zhuanghuan.png" mode="aspectFill" style="width: 18px;height: 18px;"></image>
								<image v-if="item.IsGoBack == 1 && y==0" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/gocar.png" mode="aspectFill" style="width: 18px;height: 18px;"></image>
								<image v-if="item.IsGoBack == 1 && y==1" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/returncar2.png" mode="aspectFill" style="width: 18px;height: 18px;"></image>
								<span style='margin-left: 10px;'>{{x.StartCityName}}</span>
								<span style='margin: 0 3px;'>-</span>
								<span>{{x.ArriveCityName}}</span>
							</view>
							<view class="car-w" style="margin-left: 28px;font-weight: bold;line-height: 24px;color: #111111;">
								出发日期:{{x.Date}} {{x.DepartureTime}}
							</view>
							<view class="s-c-box">
								<view class="s-c-o">
									<view class="s-c-l">
										
										<view class="setoutdian"></view>
										<view class="s-c-place">{{x.DepartAddress}}</view>
									</view>
									<view class="s-c-r prices">
										<span style='margin-top: 3px;font-size: 11px;'>单价￥</span>
										<span style='font-weight: bold;'>{{x.Unit_Price}}</span>
										
									</view>
								</view>
								<view class="shuxian"></view>
								<view class="s-c-o">
									<view class="s-c-l">
										
										<view class="setoutdian" style="background: #DFBE6E;"></view>
										<view class="s-c-place">{{x.ArriveAddress}}</view>
									</view>
									
								</view>
							</view>
							<!-- <view class="car-w">
								上车地点:{{x.DepartAddress}}
							</view>
							<view class="car-w">
								下车地点:{{x.ArriveAddress}}
							</view>
							<view class="car-w">
								出发时间:{{x.Date}} {{x.DepartureTime}}
							</view>
							<view class="car-w">
								总数:{{x.PeopleNumber+x.ChildNumber}}人  单价:￥{{x.Unit_Price.toFixed(2)}}元
							</view> -->
							<view class="order_xu"></view>
						</view>
						
					</view>
					<view style="width: 100%;display: flex;align-items: center;justify-content: space-between;margin-top: 10px;font-size: 14px;color: #111111;">
						<view style="" >
							<span v-if="item.OrderType == 4">
								人数：{{item.CarList[0].PeopleNumber+item.CarList[0].ChildNumber}}人
							</span>
							
						</view>
						<view>
							￥{{item.PreferPrice}}元
						</view>
					</view>
					
					<view style="display: flex;justify-content: flex-end;margin-top: 5px;">
						<view class="zailaiyidan" v-if="item.OrderStatus == 3 || item.OrderStatus == 4 || item.OrderStatus == 5" @click.stop="onemoreorder(item)">
							再来一单
						</view>
						
						<view class="zailaiyidan2" @click.stop="getCancel(item,index)" 
							v-if='item.IsApplyForCancel!=1 && (item.OrderStatus==1||item.OrderStatus==2 ||item.OrderStatus==3 ) && getquxiao(item)'>
							取消
						</view>
						<view class="zailaiyidan" v-if="item.OrderStatus == 1" @click.stop="queren(item,index)">
							未付款
						</view>
						
					</view>
		 		</view>
		 		<u-loadmore :status="status" :load-text="loadText" :font-size="24" :margin-top="20" :margin-bottom="20" bg-color="#ECF1F4" />
				<view style="width: 100%;height: 85px;"></view>
		 	</scroll-view>
		 </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='item.OrderStatus!=1'>
		 			<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: #2979ff;display: flex;align-items: center;justify-content: center" @click="confirm">
		 				<Text>确定</Text>
		 			</view>
		 		</view>
		 	</view>
		 </u-popup>
		 <auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth='goback'></auth>
		 <tabbar v-if='barshow==1'></tabbar>
	</view>
</template>

<script>
	import auth from "@/components/auth/index.vue";
	import tabbar from "@/components/tabbar/index";
	export default{
		components: {
			auth,
			tabbar
		},
		data(){
			return{
				pageTitle: "我的订单",
				showAuth:false,
				mainColor: '',
				statusList:[],
				current:0,
				showModal:false,
				u:{},
				msg:{
					pageIndex:1,
					pageSize:20,
					StartTime:'',
					EndTime:'',
					OrderId:0,
					OrderNo:'',
					OrderType:0,
					OrderStatus:0,
				},
				Cancelmsg:{
					OrderId:0,
					Type:0,
					Remark:'',
				},
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
				page_count: 1,
				status: "loadmore",
				g: [],
				index:0,
				item:{},
				payindex:0,//支付的索引
				barshow:0,
				showbar:true
			}
		},
		onLoad(options){
			this.current = options.status || 0;
			if(options.barshow){
				this.barshow=options.barshow
			}
			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.mainColor = this.$uiConfig.mainColor;
		},
		created() {
			// #ifdef MP-ALIPAY
			this.showbar=false
			// #endif
			this.u = uni.getStorageSync("mall_UserInfo");
			if (!this.u) {
				this.u = {
					nickName: "未登录",
					avatarUrl: ""
				};
				this.showAuth = true;
			} else {
				
				this.getOrderStatusList()
			}
			
		},
		methods:{
			getOrderStatusList(){//获取订单状态枚举列表
				this.request2({
						url: '/api/AppletOrder/GetOrderStatusEnumList',
						data: {}
					},
					res => {
						if (res.resultCode == 1) {
							this.statusList  = res.data
							this.statusList.unshift({Name:'全部',Id:0})
						}
						
						
						this.init()
						
					},
					err => {
					}
				);
			},
			change(e){//tab切换等数据
				this.current = e;
				this.msg.OrderStatus = this.statusList[e].Id;
				this.msg.pageIndex = 1;
				this.g = [];
				this.init();
			},
			init(){
				uni.showLoading({
					title: '加载中...'
				})
				this.request2({
						url: '/api/AppletOrder/GetMyDmcOrderCommonPageList',
						data: this.msg
					},
					res => {
						uni.hideLoading()
						if (res.resultCode == 1) {
							this.g = this.g.concat(res.data.pageData);
							this.page_count = res.data.pageCount;
							if (this.page_count == 1) {
								this.status = "nomore";
							}
						}
					},
					err => {
						uni.hideLoading()
					}
				);
			},
			lower(e) {
				if (this.msg.pageIndex < this.page_count) {
					this.msg.pageIndex++;
					this.status = "loading";
					this.init();
				} else {
					this.status = "nomore";
				}
			},
			getIconLink(url){//https的处理
				let str= ''
				if (url && url != '') {
					if (url.indexOf('https') != -1) {
						str = url
					} else {
						str = url.replace(/^http:\/\//i,'https://');
					}
					return str;
				}
			},
			getCancel(e,index){//取消订单
				this.showModal = true;
				this.Cancelmsg.Remark = '',
				this.index = index;
				this.item = e;
				this.Cancelmsg.OrderId = e.OrderId;
				this.Cancelmsg.Type = e.OrderStatus;
			},
			confirm(){//确认取消
				let that = this
				if (that.Cancelmsg.Type != 1 && that.Cancelmsg.Remark == '') {
					uni.showToast({
						title: '备注不能为空',
						icon: 'none'
					})
					return
				}
				uni.requestSubscribeMessage({
					tmplIds: [],
					complete(res) {
						that.request2({
								url: '/api/AppletOrder/CancelAppletMyOrder',
								data: that.Cancelmsg
							},
							(res) => {
								that.showModal = false;
								
								if(that.msg.OrderStatus==0){//判断在全部列表的时候 改变他的状态
									if(that.Cancelmsg.Type==1){//代付款的取消
										uni.showToast({
											title: res.message,
											icon: 'none'
										})
										that.g[that.index].OrderStatus = 4;
										that.g[that.index].OrderStatusName = '已取消';
										that.g[that.index].IsApplyForCancel = 1;
									}else{
										uni.showToast({
											title: "取消成功，请等待审核",
											position: "bottom",
											icon: "none",
											duration: 2000,
										});
										that.g[that.index].OrderStatus = 5;
										that.g[that.index].OrderStatusName = '待处理';
										that.g[that.index].IsApplyForCancel = 1;
									}
								}else{//在待付款的页面时候的操作处理
									if (that.Cancelmsg.Type == 1) {
										uni.showToast({
											title: res.message,
											icon: 'none'
										})
										that.g.splice(that.index, 1);
									} else {
										uni.showToast({
											title: "取消成功，请等待审核",
											position: "bottom",
											icon: "none",
											duration: 2000,
										});
										// that.msg.pageIndex = 1;
										// that.g = [];
										// that.init();
										that.change(5)
									}
								}
								
							}
						);
					}
				})
			},
			getquxiao(item){//判断是否显示取消
				let show = true
				if(item.OrderType==1){//酒店
					 show = this.getquxiaoshow(item.HotelList)
				}else if(item.OrderType==2){//餐食
					show = this.getquxiaoshow(item.DiningList)
					
				}else if(item.OrderType==3){//景点
					show = this.getquxiaoshow(item.TicketList)
				}else if(item.OrderType==4){//专车
					show = this.getquxiaoshow(item.CarList)
				}
				return show
			},
			getquxiaoshow(list){
				let show = true;
				list.map(x=>{
					if(new Date() >= new Date(x.Date)){
						show = false;
						return
					}
				})
				return show
			},
			godetails(item){//进入详情
				uni.navigateTo({
					url: '/pages/jiuzhai/allorderdetails?OrderId='+item.OrderId
				})
			},
			queren(data,index){
				this.payindex = index
				let url='/api/WeChatPay/GetDmcPayInfo'
				let GoodsName = ''
				if(data.OrderType==1){
					GoodsName = data.HotelList[0].HotelName
				}else if(data.OrderType==2){
					GoodsName = data.DiningList[0].MealName
				}else if(data.OrderType==3){
					GoodsName = data.TicketList[0].TicketName
				}else if(data.OrderType==4){
					GoodsName = data.CarList[0].DepartAddress+'-'+data.CarList[0].ArriveCityName
				}
				
				GoodsName = GoodsName.slice(0, 10)
				this.request2({
						url: url,
						data: {
							OrderId:data.OrderId,
							GoodsName:GoodsName,
							OrderPayType:1,
							OpenId:uni.getStorageSync('mall_UserInfo').OpenId,
						}
					},
					res => {
						let orderInfo = JSON.parse(res.data);
						console.log(orderInfo)
						this.Pay(orderInfo,data.PreferPrice)
					}
				);
			},
			Pay(orderInfo,PreferPrice){
				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: "支付成功"
						})
						// if(that.msg.OrderStatus==0){
						// 	that.g[that.payindex].OrderStatus = 2;
						// 	that.g[that.payindex].OrderStatusName = '待确认';
							
						// }else{
						// 	that.change(2)
						// }
						uni.redirectTo({
						    url: '/pages/jiuzhai/paysuccess?PreferPrice='+PreferPrice
						});
					},
					fail: function(err) {
						console.log('fail:', err);
						uni.showToast({
							title: "支付失败",
							icon:'none'
						})
					}
				});
			},
			onemoreorder(data){//再来一单的处理
				
				if(data.OrderType==1){//酒店
					uni.navigateTo({
						url: '/pages/hotel/list?Name='+data.HotelList[0].HotelName,
					})
				}else if(data.OrderType==2){//餐厅
					uni.navigateTo({
						url: '/pages/restaurant/list?Name='+data.DiningList[0].DiningName,
					})
				}else if(data.OrderType==3){//门票
					uni.navigateTo({
						url: '/pages/ticketCoupons/list?Name='+data.TicketList[0].TitekCounponName,
					})
				}else if(data.OrderType==4){//车
					let obj = {
						StartCityId:data.CarList[0].StartCityId,
						StartCityType:data.CarList[0].StartCityType,
						ArriveCityId:data.CarList[0].ArriveCityId,
						ArriveCityType:data.CarList[0].ArriveCityType,
						StartCityName:data.CarList[0].StartCityName,
						ArriveCityName:data.CarList[0].ArriveCityName,
					}
					console.log(obj)
					uni.navigateTo({
						url: '/pages/guidecar/index?obj='+encodeURIComponent(JSON.stringify(obj)),
					})
				}
			},
			reloadUserinfo() {
				this.u = uni.getStorageSync("mall_UserInfo");
				this.getOrderStatusList();
			},
			goback() {
				uni.navigateBack()
			},
			
		
		}
	}
</script>


