<template>
	<view class="page">
		<u-navbar title="订单详情" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
			title-size='36' height='50' id="navbar">
		</u-navbar>
         <view class="topnav">
			<view class="name" v-if="orderobj.status == 0">待支付</view>
			<view class="name" v-if="orderobj.status == 1">支付中</view>
			<view class="name" v-if="orderobj.status == 2">待使用</view>
			<view class="name" v-if="orderobj.status == 3">使用中</view>
			<view class="name" v-if="orderobj.status == 4">已完成</view>
			<view class="name" v-if="orderobj.status == 5">超时自动取消</view>
			<view class="name" v-if="orderobj.status == 6">用户取消订单</view>
			<view class="name" v-if="orderobj.status == 7">退款中</view>
			<view class="name" v-if="orderobj.status == 8">已退款</view>
			<view class="name" v-if="orderobj.status == 9">用户结束订单</view>
         </view>
         <view class="storedxx">
         	<view class="name">
         		【{{orderobj.storeName == null ? '--' : orderobj.storeName}}】
         	</view>
			<view class="xx">
				<view class="one">
					房间名称
				</view>
				<view class="two">
					{{orderobj.roomName == null ? '--' : orderobj.roomName}}
				</view>
			</view>
			<view class="xx">
				<view class="one">
					消费套餐
				</view>
				<view class="two">
					{{orderobj.explain == null ? '--'  : orderobj.explain}}
				</view>
			</view>
			<view class="xx">
				<view class="one">
					押金
				</view>
				<view class="two">
					￥{{orderobj.deposit == null ? '--' : orderobj.deposit}}
				</view>
			</view>
			<view class="bot">
				<view class=""></view>
				<view class="price">
					合计：<text>￥{{orderobj.totalFee == null ? '--' : orderobj.totalFee}}</text>
				</view>
			</view>
         </view> 
		 <view class="orderxx">
		 	<view class="bd">
		 		<view class="one">
		 			订单编号
		 		</view>
		 		<view class="two">
		 			{{orderobj.orderNo == null ? '--' : orderobj.orderNo}}
		 		</view>
		 	</view>
			<view class="bd">
				<view class="one">
					支付方式
				</view>
				<view class="two">
					微信支付
				</view>
			</view><view class="bd">
		 		<view class="one">
		 			下单时间
		 		</view>
		 		<view class="two">
		 			{{orderobj.createTime == null ? '--' : orderobj.createTime}}
		 		</view>
		 	</view><view class="bd">
		 		<view class="one">
		 			支付时间
		 		</view>
		 		<view class="two">
		 			{{orderobj.payTime == null ? '--' : orderobj.payTime}}
		 		</view>
		 	</view>
			<view class="bd">
		 		<view class="one">
		 			开始使用时间
		 		</view>
		 		<view class="two">
		 			{{orderobj.reserveStartTime == null ? '--' : orderobj.reserveStartTime}}
		 		</view>
		 	</view><view class="bd">
		 		<view class="one">
		 			结束使用时间
		 		</view>
		 		<view class="two">
		 			{{orderobj.reserveEndTime == null ? '--' : orderobj.reserveEndTime}}
		 		</view>
		 	</view><view class="bd">
		 		<view class="one">
		 			实际消费时长
		 		</view>
		 		<view class="two">
		 			{{timesc}}
		 		</view>
		 	</view><view class="bd">
		 		<view class="one">
		 			押金退款备注
		 		</view>
		 		<view class="two">
		 			{{orderobj.depositRefundDesc == null ? '--' : orderobj.depositRefundDesc}}
		 		</view>
		 	</view><view class="bd">
		 		<view class="one">
		 			押金状态
		 		</view>
		 		<view class="two" v-if="orderobj.is_refund == 0">
		 			未退还
		 		</view>
				<view class="two" v-if="orderobj.is_refund == 1">
					已退还
				</view>
		 	</view>
			<view class="bd">
				<view class="one">
					押金退款金额
				</view>
				<view class="two" style="color: #FF1818;">
					￥{{orderobj.deposit_refund == null ? '--' : orderobj.deposit_refund}}
				</view>
			</view>
			<view class="bd">
				<view class="one">
					下单手机号
				</view>
				<view class="two">
					{{orderobj.phone == null ? '--' : orderobj.phone}}
				</view>
			</view>
		 </view>
		 <!-- 退款列表 -->
		 <view class="orderxx"  v-for="(item,index) in orderobj.refunds" :key="index">
			 <view class="name">
			 	退款{{index + 1}}
			 </view>
			<view class="bd">
				<view class="one">
					退款订单编号
				</view>
				<view class="two">
					{{item.orderNo == null ? '--' : item.orderNo}}
				</view>
			</view>
			<view class="bd">
				<view class="one">
					退款金额
				</view>
				<view class="two">
					{{item.amount == null ? '--' : item.amount}}
				</view>
			</view>
			<view class="bd">
				<view class="one">
					退款备注
				</view>
				<view class="two">
					{{item.reason == null ? '--' : item.reason}}
				</view>
			</view>
			<view class="bd">
				<view class="one">
					退款时间
				</view>
				<view class="two">
					{{item.operTime == null ? '--' : item.operTime}}
				</view>
			</view>
		 </view>
		 <view class="anniu">
		 	<view class=""></view>
			<view class="but" v-if="orderobj.status == 4" @click="btntk">退款</view>
			<view class="but" v-if="orderobj.status == 3" @click="btnjies">结束订单</view>
			<view class="but" v-if="orderobj.status == 2 || orderobj.status == 0 || orderobj.status == 1" @click="btnqx">取消订单</view>
		 </view>
		 
		 <view class="mask" v-if="maskflag"></view>
		 <view class="tuikuan" v-if="maskflag">
		 	<view class="top">
		 		退款
		 	</view>
			<view class="one">
				金额总数 <input type="text" placeholder="50" :disabled="true" /> 元
			</view>
			<view class="one">
				退还金额 <input type="text" placeholder="20" /> 元
			</view>
			<view class="one">
				退还备注 <input type="text" placeholder="如有备注,请在此填写" /> 
			</view>
			<view class="bot">
				<view class="myxiang" @click="maskflag = false">
					我在想想
				</view>
				<view class="tuihuan">
					确定退还
				</view>
			</view>
		 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: "#fff",
                },
				maskflag:false,
				orderNo:'',
				orderobj:{},
				timesc:''
			}
		},
		onLoad(option) {
            this.orderNo = option.orderNo
			this.getxq()
		},
		methods: {
			// 查询订单详情
			getxq(){
				this.$u.get(`/appVerify/orderInfo?orderNo=${this.orderNo}`).then(res =>{
					if(res.code ==  200){
						this.orderobj = res.data
						let dateOne = new Date(res.data.reserveEndTime)
						let dateTwo = new Date(res.data.reserveStartTime)
						let timeDifference = dateOne - dateTwo
						let millisecondsInSecond = 1000
						let millisecondsInMinute = millisecondsInSecond * 60
						let millisecondsInHour = millisecondsInMinute * 60
						let millisecondsInDay = millisecondsInHour * 24
						let days = Math.floor(timeDifference / millisecondsInDay)
						timeDifference %= millisecondsInDay
						let hours = Math.floor(timeDifference / millisecondsInHour)
						timeDifference %= millisecondsInHour
						let minutes = Math.floor(timeDifference / millisecondsInMinute)
						timeDifference %= millisecondsInMinute
						this.timesc = `${days == 0  ? '' : days + 天}${hours}时${minutes}分`
					}
				})
			},
			// 点击退款
			btntk(){
				this.maskflag = true
			},
			// 点击取消订单
			btnqx(){
				let orderNos = this.orderobj.orderNo 
				let that = this
				uni.showModal({
					    title: '温馨提示',  
					    content: '您确定要取消该订单吗?',  
					    success: function (res) {  
					        if (res.confirm) {
								let data = {
									orderNo:orderNos,
									type:1
								}
							     that.$u.post(`/app/order/orderCancel?orderNo=${orderNos}`,data).then(res => {
							   	 if (res.code == 200) {
							   		uni.showToast({
							   		       title: '取消成功',
							   		       icon: 'success',
							   		       duration:2000
							   		})
									setTimeout(()=>{
										uni.navigateBack()
									},1000)
							   	 }else{
									 uni.showToast({
									     title: res.msg,
									     icon: 'success',
									     duration:2000
									 })
								 }
							   })
					        } else if (res.cancel) {
					          
					    }  
					}  
				})
			},
			// 点击结束订单
			btnjies(){
				let orderNos = this.orderobj.orderNo
				let that = this
				uni.showModal({
					    title: '温馨提示',  
					    content: '您确定要结束该订单吗?',  
					    success: function (res) {  
					        if (res.confirm) {
								let data = {
									orderNo:orderNos,
									type:2
								}
							     that.$u.post(`/app/order/orderEnd?orderNo=${orderNos}`,data).then(res => {
							   	 if (res.code == 200) {
							   		uni.showToast({
							   		       title: '结束成功',
							   		       icon: 'success',
							   		       duration:2000
							   		})
									setTimeout(()=>{
										uni.navigateBack()
									},1000)
							   	 }else{
									 uni.showToast({
									     title: res.msg,
									     icon: 'success',
									     duration:2000
									 })
								 }
							   })
					        } else if (res.cancel) {
					          
					    }  
					}  
				})
			},
		}
	}
</script>

<style lang="scss">
	/deep/ .u-iconfont,
	/deep/ .u-title{
		padding-bottom: 20rpx;
	}
	.tuikuan{
		position: fixed;
		top: 560rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 640rpx;
		max-height: 560rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 0 50rpx;
		box-sizing: border-box;
		.bot{
			display: flex;
			justify-content: space-between;
			.myxiang{
				width: 50%;
				height: 102rpx;
				line-height: 102rpx;
				text-align: center;
				border-right: 1px solid #D8D8D8;
				font-size: 40rpx;
				color: #3D3D3D;
			}
			.tuihuan{
				text-align: center;
				width: 50%;
				font-size: 40rpx;
				height: 102rpx;
				line-height: 102rpx;
				color: #48893B;
			}
		}
		.one{
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #D8D8D8;
			padding-bottom: 24rpx;
			box-sizing: border-box;
			margin-top: 24rpx;
		}
		.top{
			margin-top: 30rpx;
			width: 100%;
			text-align: center;
			font-weight: 600;
			font-size: 36rpx;
			color: #3D3D3D;
		}
	}
	.mask{
		width: 100%;
		height: 100vh;
		background-color: #000;
		opacity: .3;
		position: fixed;
		top: 0;
		left: 0;
	}
	.anniu{
		width: 750rpx;
		height: 134rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0,0,0,0.3);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		padding: 0 32rpx;
		padding-top: 34rpx;
		box-sizing: border-box;
		.but{
			width: 234rpx;
			height: 74rpx;
			border: 2rpx solid #48893B;
			text-align: center;
			line-height: 74rpx;
			font-size: 36rpx;
			color: #48893B;
			border-radius: 50rpx;
		}
	}
	.orderxx{
		width: 680rpx;
		max-height: 682rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: auto;
		margin-top: 22rpx;
		padding: 30rpx 48rpx;
		box-sizing: border-box;
		.name{
			margin-bottom: 20rpx;
			font-size: 32rpx;
			font-weight: 600;
		}
		.bd{
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
			.one{
				font-size: 28rpx;
				color: #7C7C7C;
			}
			.two{
				font-size: 28rpx;
				color: #3D3D3D;
			}
		}
	}
	.storedxx{
		width: 680rpx;
		height: 402rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: auto;
		margin-top: 22rpx;
		padding: 30rpx 32rpx;
		box-sizing: border-box;
		.name{
			font-weight: 600;
			font-size: 36rpx;
			color: #3D3D3D;
			padding-bottom: 22rpx;
			box-sizing: border-box;
			border-bottom: 1px solid #D8D8D8;
		}
		.bot{
			border-top: 1px solid #D8D8D8;
			margin-top: 22rpx;
			padding-top: 20rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.price{
				font-size: 28rpx;
				color: #7C7C7C;
				text{
					color: #3D3D3D;
					font-weight: 6000;
					font-size: 40rpx;
				}
			}
		}
		.xx{
			display: flex;
			justify-content: space-between;
			margin-top: 22rpx;
			.one{
				font-size: 28rpx;
				color: #7C7C7C;
			}
			.two{
				font-size: 28rpx;
				color: #3D3D3D;
			}
		}
	}
	.topnav{
		margin: auto;
		width: 680rpx;
		height: 110rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 30rpx 0 48rpx 48rpx;
		box-sizing: border-box;
		margin-top: 22rpx;
		.name{
			font-weight: 600;
			font-size: 36rpx;
			color: #3D3D3D;
		}
	}
	page {
		background: #F6F6F6;
		padding-bottom: 150rpx;
		box-sizing: border-box;
	}


</style>