<template>
	<view class="page">
		<u-navbar title="订单详情" :border-bottom="false" :background="bgc" title-color='#000' back-icon-color="#000" title-size='36' height='50'></u-navbar>
        <view class="box">
        	<view class="detaobj">
        		<view class="top">
					订单详情
        		</view>
				<view class="names">
					<view class="wz">收费策略 ：</view> <view class="gl">
					<text v-if="fee.feeMode == 2">{{fee.feePrice}}元/小时</text>
					<text v-if="fee.feeMode == 1">{{fee.feePrice}}元/半小时</text>
					,前{{fee.feeFreeTime}}分钟免费,总封顶{{fee.feeMaxPrice}}元</text>
					</view>
				</view>
				<view class="names">
					<view class="wz">电池编号：</view> <view class="gl">{{listobj.deviceSn}}</view>
				</view>
				<view class="names">
					<view class="wz" style="width: 160rpx;">租借店铺：</view> <view class="gl" style="color: #1DBE7B;">{{listobj.startStoreName}}</view>
				</view>
				<view class="names">
					<view class="wz">租借设备：</view> <view class="gl" style="color: #1DBE7B;">{{listobj.startCabinetSn}}</view>
				</view>
				<view class="names">
					<view class="wz">租借时间：</view> <view class="gl">{{listobj.startRentTime}}</view>
				</view>
				<view class="names">
					<view class="wz" style="width: 160rpx;">租借地址：</view> <view class="gl">{{listobj.startStoreAddress}}</view>
				</view>
				<view class="names">
					<view class="wz" style="width: 160rpx;">归还店铺：</view> <view class="gl" style="color: #1DBE7B;">{{listobj.endStoreName == null ? '-' : listobj.endStoreName}}</view>
				</view>
				<view class="names">
					<view class="wz">归还设备：</view> <view class="gl" style="color: #1DBE7B;">{{listobj.endCabinetSn == null ? '-' : listobj.endCabinetSn}}</view>
				</view>
				<view class="names">
					<view class="wz">归还时间：</view> <view class="gl">{{listobj.endStoreAddress == null ? '-' : listobj.endStoreAddress}}</view>
				</view>
				<view class="names">
					<view class="wz" style="width: 160rpx;">归还地址：</view> <view class="gl">{{listobj.endStoreAddress == null ? '-' : listobj.endStoreAddress}}</view>
				</view>
				<view class="names">
					<view class="wz">支付时间：</view> <view class="gl">{{listobj.payTime == null ? '-' : listobj.payTime}}</view>
				</view>
				<view class="names">
					<view class="wz">订单时长：</view> <view class="gl">
					  <text v-if="listobj.sale.payTime">{{zuzhuan}}</text>
					  <text v-else>{{listobj.remainingTime}}</text>
					</view>
				</view>
				<view class="names">
					<view class="wz">支付类型：</view> <view class="gl">
					 <text v-if="listobj.rentType == 1">普通租赁</text>
					 <text v-if="listobj.rentType == 2">免押金租赁</text>
					</view>
				</view>
				<view class="names" v-if="listobj.sale.money">
					<view class="wz">预估金额：</view> <view class="gl">￥{{ listobj.sale.money / 100}}</view>
				</view>
				<view class="names" v-else>
					<view class="wz">预估金额：</view> <view class="gl">￥{{ listobj.payMoney == null ? (zujiemoney > fee.feeMaxPrice ? fee.feeMaxPrice : zujiemoney) : listobj.payMoney}}</view>
				</view>
				<view class="names">
					<view class="wz">付款金额：</view> <view class="gl">{{listobj.money == null ? '-' : '￥' + listobj.money}}</view>
				</view>
				<view class="names">
					<view class="wz">退款金额：</view> <view class="gl">{{listobj.refundAmount == null ? '-' : '￥' + listobj.refundAmount}}</view>
				</view>
				<view class="names">
					<view class="wz">订单编号：</view> <view class="gl">{{listobj.orderNo}}</view>
				</view>
				<view class="names">
					<view class="wz">订单状态：</view> <view class="gl">
					  <text v-if="listobj.status == '1'">租借中</text>
					  <text v-if="listobj.status == '2'">待扣款</text>
					  <text v-if="listobj.status == '4'">已完成</text>
					  <text v-if="listobj.status == '6'">租转卖</text>
					  <text v-if="listobj.status == '7'">弹出失败</text>
					</view>
				</view>
				<view class="bottom">
					收益明细
				</view>
				<view class="" v-for="(item,index) in listobj.divideList">
					<view class="names">
						<view class="wz">{{item.agentName}}（{{item.agentLevel}}级代理）</view> <view class="gl">
		                   {{item.amount == null ? '-' : item.amount }}
						</view>
					</view>
				</view>
        	</view> 
        </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                bgc: {
                	background: '#25CE88'
                },
				orderId:'',
				listobj:{},
				fee:{},
				zujiemoney:'',
				zuzhuan:''
			}
		},
		onLoad(option) {
			this.orderId = option.orderId
			this.getxq()
		},
		methods: {
             getxq(){
				 this.$u.get(`/agent/order/rent/${this.orderId}`).then(res=>{
				 	if(res.code == 200){
				 		this.listobj = res.data
						this.fee = res.data.priceStandard
						if(this.listobj.endRentTime == null){
							var targetDate = new Date(this.listobj.startRentTime)  
							var currentDate = new Date()  
							var diff = targetDate - currentDate  
							var absDiff = Math.abs(diff)  
							var hours = Math.floor(absDiff / (1000 * 60 * 60))   
							var minutes = Math.floor((absDiff % (1000 * 60 * 60)) / (1000 * 60))  
							let formattedMinutes = minutes < 10 ? '0' + minutes : minutes;  
							this.listobj.remainingTime = hours + '时' + formattedMinutes + '分钟'
							if (this.listobj.priceStandard.feeMode == 2) {
								if (minutes >= this.listobj.priceStandard.feeFreeTime) {
									this.zujiemoney = (hours + 1) * this.listobj.priceStandard.feePrice
								} else {
									this.zujiemoney = hours * this.listobj.priceStandard.feePrice
								}
							}else if(this.listobj.priceStandard.feeMode == 1){
								if (minutes >= this.listobj.priceStandard.feeFreeTime) {
									this.zujiemoney = (hours * 2 + 1) * this.listobj.priceStandard.feePrice
									if(minutes >= 30){
										this.zujiemoney = (hours * 2 + 2)  * this.listobj.priceStandard.feePrice
									}
								} else {
									this.zujiemoney = hours * 2 * this.listobj.priceStandard.feePrice 
								}
							}
						}else{
							var targetDate = new Date(this.listobj.endRentTime)
							var currentDate = new Date()  
							var diff = targetDate - currentDate 
							var absDiff = Math.abs(diff)  
							var hours = Math.floor(absDiff / (1000 * 60 * 60));   
							var minutes = Math.floor((absDiff % (1000 * 60 * 60)) / (1000 * 60))  
							let formattedMinutes = minutes < 10 ? '0' + minutes : minutes;  
							this.listobj.remainingTime = hours + '时' + formattedMinutes + '分钟'
							if (this.listobj.priceStandard.feeMode == 2) {
								if (minutes >= this.listobj.priceStandard.feeFreeTime) {
									this.zujiemoney = (hours + 1) * this.listobj.priceStandard.feePrice
								} else {
									this.zujiemoney = hours * this.listobj.priceStandard.feePrice
								}
							}else if(this.listobj.priceStandard.feeMode == 1){
								if (minutes >= this.listobj.priceStandard.feeFreeTime) {
									this.zujiemoney = (hours * 2 + 1) * this.listobj.priceStandard.feePrice
									if(minutes >= 30){
										this.zujiemoney = (hours * 2 + 2)  * this.listobj.priceStandard.feePrice
									}
								} else {
									this.zujiemoney = hours * 2 * this.listobj.priceStandard.feePrice 
								}
							}
						}
						if(this.listobj.sale){
							var targetDate = new Date(this.listobj.startRentTime)
							var currentDate = new Date(this.listobj.sale.payTime) 
							var diff = targetDate - currentDate
							var absDiff = Math.abs(diff)  
							var hours = Math.floor(absDiff / (1000 * 60 * 60))   
							var minutes = Math.floor((absDiff % (1000 * 60 * 60)) / (1000 * 60))
							let formattedMinutes = minutes < 10 ? '0' + minutes : minutes
							this.zuzhuan = hours + '时' + formattedMinutes + '分钟'
						}
				 	}
				 })
			 }
		}
	}
</script>

<style lang="scss">
	/deep/ .u-title,
	/deep/ .uicon-nav-back {
		padding-bottom: 22rpx;
	}
	page {
       
	}

	.page {
		width: 750rpx;
		// position: fixed;
		// top: 0;
		// left: 0;
		.box{
			width: 750rpx;
			height: 100%;
			background: #F4F5F7;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			padding-top: 30rpx;
			.detaobj{
				width: 680rpx;
				height: 100%;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				margin: auto;
				padding: 28rpx 30rpx;
				box-sizing: border-box;
				.top{
					font-weight: 500;
					font-size: 28rpx;
					color: #3D3D3D;
					width: 100%;
					border-bottom: 1px solid #D8D8D8;
					padding-bottom: 20rpx;
				}
				.names{
					display: flex;
					justify-content: space-between;
					width: 100%;
					margin-top: 24rpx;
					.wz{
						font-size: 24rpx;
						color: #808080;
					}
					.gl{
						font-size: 24rpx;
						color: #3D3D3D;
					}
				}
				.bottom{
					font-weight: 500;
					font-size: 28rpx;
					color: #3D3D3D;
					width: 100%;
					border-top: 1px solid #D8D8D8;
					margin-top: 24rpx;
					padding-top: 24rpx	;
					.wz{
						font-size: 24rpx;
						color: #808080;
					}
					.gl{
						font-size: 24rpx;
						color: #3D3D3D;
					}
				}
			}
		}
	}
</style>