<style lang="scss" scoped>
	.allorderdetails{
		width: 100%;
		height: 100vh;
		background: #FFFFFF;
		.box-top{
			width: 100%;
			height: 65px;
			background: #FFFFFF;
			box-shadow: 0px 1px 8px 0px rgba(76, 76, 76, 0.13);
			border-radius: 0px 0px 30px 30px;
			padding: 0 20px;
			display: flex;
			align-items: center;
			font-size: 20px;
			font-weight: 800;
			color: #111111;
			image{
				width: 27px;height: 27px;margin-right: 10px;
			}
		}
		.box-top2{
			width: 100%;
			padding:0 20px;
			margin-top: 20px;
			.box-top2-text{
				font-size: 16px;
				font-weight: 800;
				color: #111111;
				line-height: 22px;
				
			}
		}
		.order_xu{
			width: 100%;
			height: 14px;
			border-bottom: 1px dashed  #E6E6E6;
		}
		.box-center{
			width: 100%;
			padding: 0 20px;
			.hotelbox{
				display: flex;
				margin-top: 15px;
				.hotelbox-r{
					width: calc(100vw - 50px - 80px);
					font-size: 12px;
					.text-t{
						width: 100%;
					}
					
				}
				
			}
			.box-top-car{
				width: 100%;
				display: flex;
				align-items: center;
				padding: 0 10px;
				justify-content: space-between;
				font-size: 16px;
				font-weight: 800;
				color: #111111;
				margin-top: 15px;
				.onetext{
					// overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
					width: calc((100vw - 40px - 40px)/2);
					text-align: center;
				}
				.box-top-c{
					width: 113px;
					display: flex;
					flex-direction: column;
					align-items: center;
					.box-top-ct{
						width: 30px;
						height: 21px;
						border-radius: 2px;
						background: rgba(223, 190, 110, 0.1);
						font-size: 12px;
						font-family: PingFang SC;
						font-weight: 500;
						color: #DFBE6E;
						text-align: center;
						line-height: 21px;
						margin-bottom: 4px;
					}
				}
			}
		}
		.box-c-car{
			width: 100%;
			border-radius: 8px;
			box-shadow: 0px 1px 8px 0px rgba(76, 76, 76, 0.13);
			padding: 0 15px;
			margin-top: 15px;
			.box-c-caritem{
				width: 100%;
				min-height:40px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.box-c-caritem-l{
					font-size: 12px;
					color: rgba(8, 9, 14, 0.6);
					width: 130rpx;
				}
				.box-c-caritem-r{
					font-size: 14px;
					color: #08090E;
					font-weight: bold;
					width: 1;
					flex:1;
					text-align: right;
					
				}
				.box-c-caritem-r2{
					font-size: 14px;
					color: #08090E;
					font-weight: bold;
				}
			}
		}
		.xian{
			width: 100%;
			height: 1px;
			background: rgba(0, 0, 0, 0.1);
		}
		.btn-box {
		display: flex;
		flex-direction: row-reverse;
		height: 45px;
		padding: 5px 20px;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 2;
		border-top: 1px solid #f5f5f5;
		background: #fff;
	}
	.kefu{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 5px;
	}
	.contButton {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0;
	}
	}
</style>
<template>
	<view class="allorderdetails">
		<view class="box-top">
			<image v-if="OrderInfo.OrderStatus==1 || OrderInfo.OrderStatus==2" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/orderdfk.png" ></image>
			<image v-if="OrderInfo.OrderStatus==4 || OrderInfo.OrderStatus==5" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/orderquxiao.png" ></image>
			<image v-if="OrderInfo.OrderStatus==3" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/orderwancheng.png" ></image>
			<span>{{OrderInfo.OrderStatusName}}</span>
		</view>
		<view class="box-top2">
			<view style="display: flex;align-items: center;justify-content: space-between;">
				<span class='box-top2-text'>{{OrderInfo.OrderTypeName}}</span>
				<view  style="display: flex;align-items: center;">
					<span class='box-top2-text' style='font-size: 12px;font-weight: normal;'>{{OrderInfo.OrderNo}}</span>
					<view style='margin-left: 5px;'>
						<u-button size="mini" shape="circle" @click="paste(OrderInfo.OrderNo)">复制</u-button>
					</view>
					
				</view>
				
			</view>
			
			<view class="order_xu"></view>
		</view>
		<!-- 酒店 -->
		<view class="box-center" v-if="OrderInfo.OrderType == 1">
			<view v-for="(x,y) in OrderInfo.HotelList" :key ='y'>
				<view class="hotelbox">
					<image :src="getIconLink(x.HotelImage)" style="width: 80px;height: 80px;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="box-c-car">
					<view class="box-c-caritem" >
						<view class="box-c-caritem-l">入店时间</view>
						<view class="box-c-caritem-r">{{x.StartDate}}</view>
					</view>
					<view class="box-c-caritem" >
						<view class="box-c-caritem-l">离店时间</view>
						<view class="box-c-caritem-r">{{x.EndDate}}</view>
					</view>
					<view class="box-c-caritem" >
						<view class="box-c-caritem-l">到店时间</view>
						<view class="box-c-caritem-r">{{x.ArrivalTime}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 餐厅 -->
		<view class="box-center" v-if="OrderInfo.OrderType == 2">
			<view v-for="(x,y) in OrderInfo.DiningList" :key ='y'>
				<view class="hotelbox">
					<image :src="getIconLink(x.DiningImg)" style="width: 80px;height: 80px;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>就餐时间:{{x.Date}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 门票 -->
		<view class="box-center" v-if="OrderInfo.OrderType == 3">
			<view v-for="(x,y) in OrderInfo.TicketList" :key ='y'>
				<view class="hotelbox">
					<image :src="getIconLink(x.TicketImg)" style="width: 80px;height: 80px;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>入园时间:{{x.Date}}</view>
					</view>
				</view>
				<view v-if="x.GuestList.length>0" class="box-c-caritem-r" style="text-align: left;font-weight: bold;">携带以下全部证件 直接进园</view>
				<view class="box-c-car" v-if="x.GuestList.length>0">
					<view class="box-c-caritem" v-for="(n,m) in x.GuestList" :key='m' :style="{'justify-content': 'space-between','border-bottom':x.GuestList.length-1 !=m?  '1px solid #E2E2E2':''}">
						<view class="box-c-caritem-r2" >{{n.Name}}</view>
						<view class="box-c-caritem-r2" >{{n.IdCard.substring(0,5)}}***{{n.IdCard.substring(n.IdCard.length-4,n.IdCard.length)}}</view>
						<view class="box-c-caritem-r2" >{{n.Mobile}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 专车 -->
		<view class="box-center" v-if="OrderInfo.OrderType == 4">
			<view v-for="(x,y) in OrderInfo.CarList" :key ='y'>
				<view class="box-top-car">
					<div class='onetext'>{{x.StartCityName}}</div>
					<view class="box-top-c">
						<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1622098352000_930.png" mode="widthFix" style="width: 30px;height: auto;"></image>
					</view>
					<div class='onetext'>{{x.ArriveCityName}}</div>
				</view>
				<view class="box-c-car">
					<view class="box-c-caritem">
						<view class="box-c-caritem-l">上车地点</view>
						<view class="box-c-caritem-r" @click="goopenlocation(x.DepartLonlat)" style="display: flex;align-items: flex-start;justify-content: flex-end;">
							<u-icon name="location-o" size="34"></u-icon>
							{{x.DepartAddress}}
						</view>
					</view>
					<view class="box-c-caritem">
						<view class="box-c-caritem-l">下车地点</view>
						<view class="box-c-caritem-r" @click="goopenlocation(x.ArriveLonlat)" style="display: flex;align-items: flex-start;justify-content: flex-end;">
							<u-icon name="location-o" size="34"></u-icon>
							{{x.ArriveAddress}}
						</view>
						
					</view>
					<view class="xian"></view>
					<view class="box-c-caritem">
						<view class="box-c-caritem-l">出行时间</view>
						<view class="box-c-caritem-r">{{x.Date}} {{x.DepartureTime}}</view>
					</view>
					<view class="box-c-caritem" v-if="x.PeopleNumber>0">
						<view class="box-c-caritem-l">成人</view>
						<view class="box-c-caritem-r">{{x.PeopleNumber}}人</view>
					</view>
					<view class="box-c-caritem" v-if="x.ChildNumber>0">
						<view class="box-c-caritem-l">儿童</view>
						<view class="box-c-caritem-r">{{x.ChildNumber}}人</view>
					</view>
					<view class="box-c-caritem" >
						<view class="box-c-caritem-l">单价</view>
						<view class="box-c-caritem-r">￥{{x.Unit_Price}}元</view>
					</view>
				</view>
			</view>
			
		</view>
		
		<view class="box-center">
			<view class="box-c-car">
				<view class="box-c-caritem" >
					<view class="box-c-caritem-l">联系人</view>
					<view class="box-c-caritem-r">{{OrderInfo.Consignee}}</view>
				</view>
				<view class="box-c-caritem" >
					<view class="box-c-caritem-l">联系电话</view>
					<view class="box-c-caritem-r">{{OrderInfo.Mobile}}</view>
				</view>
				<view class="box-c-caritem" v-if="OrderInfo.BuyerMessage && OrderInfo.BuyerMessage!=''">
					<view class="box-c-caritem-l">留言</view>
					<view class="box-c-caritem-r">{{OrderInfo.BuyerMessage}}</view>
				</view>
				<view class="box-c-caritem" >
					<view class="box-c-caritem-l">创建时间</view>
					<view class="box-c-caritem-r">{{OrderInfo.CreateDate}}</view>
				</view>
				<view class="box-c-caritem" >
					<view class="box-c-caritem-l">付款方式</view>
					<view class="box-c-caritem-r">{{OrderInfo.PaymentWayName}}</view>
				</view>
				<!-- <view class="box-c-caritem" >
					<view class="box-c-caritem-l">应收</view>
					<view class="box-c-caritem-r">￥{{OrderInfo.PreferPrice}}元</view>
				</view> -->
				<view class="box-c-caritem" >
					<view class="box-c-caritem-l">金额</view>
					<view class="box-c-caritem-r"><span style='color:#F20707'>￥{{OrderInfo.Income}}元</span></view>
				</view>
			</view>
		</view>
		<view style='width: 100%;height: 80px;'></view>
		<view class="btn-box" >
			<view class="kefu" style="position: relative;" >
				
				<u-icon  name="service-o" color="#111" size="24rpx"></u-icon>
				<span style='margin-left: 3px;'>客服</span>
				
				<button open-type="contact" class="contButton" ></button>
			</view>
			<view class="item" v-if="OrderInfo.OrderStatus==1 ">
				<u-button shape="circle" size="medium" @click.stop="queren(OrderInfo)" :custom-style="customStyle2" >待付款</u-button>
			</view>
			<view class="item" v-if="OrderInfo.OrderStatus==3||  OrderInfo.OrderStatus==4||OrderInfo.OrderStatus==5">
				<u-button shape="circle" size="medium" @click.stop="onemoreorder(OrderInfo)" :custom-style="customStyle2" >再来一单</u-button>
			</view>
			<view @click.stop="getCancel(OrderInfo)" class="item" v-if="OrderInfo.IsApplyForCancel!=1 && (OrderInfo.OrderStatus==1||OrderInfo.OrderStatus==2 ||OrderInfo.OrderStatus==3)&& getquxiao(OrderInfo)">
				<u-button shape="circle" size="medium" :custom-style="customStyle" >取消订单</u-button>
			</view>
		
			<view class="item" style="line-height: 34px;font-size: 16px;color: gray;font-weight: 600;" v-if="OrderInfo.OrderStatus == 4">
				已取消
			</view>
			<view class="item" style="line-height: 34px;font-size: 16px;color: gray;font-weight: 600;" v-if="OrderInfo.OrderStatus == 5">
				待处理
			</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='OrderInfo.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>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				pageTitle: "我的订单",
				mainColor: '',
				OrderId:0,
				OrderInfo:{},//详情数据
				customStyle: {
					marginLeft: "20px",
					padding: "0 30rpx",
				},
				customStyle2:{
					marginLeft: "20px",
					padding: "0 30rpx",
					background: '#111111',
					color:'#FFF'
				},
				Cancelmsg:{
					OrderId:0,
					Type:0,
					Remark:'',
				},
				showModal:false,
			}
		},
		onLoad(options) {
			if(options && options.OrderId){
				this.OrderId = options.OrderId;
				this.getMyOrderInfo()
			}
			uni.setNavigationBarTitle({
				title: this.pageTitle,
			});
			this.mainColor = this.$uiConfig.mainColor;
		},
		methods:{
			getMyOrderInfo(){
				this.request2({
						url: '/api/AppletOrder/GetMyDmcOrderInfo',
						data: {OrderId:this.OrderId}
					},
					res => {
						if (res.resultCode == 1) {
							this.OrderInfo  = res.data
							
						}
					},
					err => {
					}
				);
			},
			goopenlocation(x){
				 uni.openLocation({
					latitude: Number(x.split(',')[1]) ,
					longitude: Number(x.split(',')[0]),
					success: function () {
						console.log('success');
					},
					fail:function(err){
						console.log(err)
					}
				});
			},
			getIconLink(url){//https的处理
				let str= ''
				if (url && url != '') {
					if (url.indexOf('https') != -1) {
						str = url
					} else {
						str = url.replace(/^http:\/\//i,'https://');
					}
					return str;
				}
			},
			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
			},
			getCancel(e){//取消订单
				this.showModal = true;
				this.Cancelmsg.Remark = '',
				
				this.Cancelmsg.OrderId = e.OrderId;
				this.Cancelmsg.Type = e.OrderStatus;
			},
			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;
			},
			
			queren(data){
				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)
					}
				);
			},
			Pay(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: "支付成功"
						})
						// that.getMyOrderInfo()
						uni.redirectTo({
						    url: '/pages/jiuzhai/paysuccess?PreferPrice='+that.OrderInfo.PreferPrice
						});
					},
					fail: function(err) {
						console.log('fail:', err);
						uni.showToast({
							title: "支付失败",
							icon:'none'
						})
					}
				});
			},
			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;
								that.getMyOrderInfo()
							}
						);
					}
				})
			},
			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)),
					})
				}
			},
			paste(value) {
				uni.setClipboardData({
					data: value,
				});
			},
		}
	}
</script>


