<template>
	<view>
		<u-navbar title="账单提醒"
		 class="navbar-box"
		 :isBack="isBack"  title-color="#101010" ></u-navbar>
		<view class="background ">
			<view class="recharge-details">
				<view  class="details flew-items">
					<image class="img"  src="@/assets/img/tenantList/index1.png" mode=""></image>
					
					{{detail.name}}
				</view>
				<view class="details ">
					
					<view class="item">
						<view class="item-title">
							承租方
						</view>
						<view class="item-value">
							{{detail.tenantName}}
						</view>
					</view>
					<view class="item" v-if="false">
						<view class="item-title">
							推送用户
						</view>
						<view class="item-value">
							{{detail.employeeName}}
						</view>
					</view>
					<view class="item">
						<view class="item-title">
							本期账单总金额
						</view>
						<view class="item-value billAmount">
							￥{{detail.billAmount}}元
						</view>
					</view>
					
				 
					<view class="item" v-if="false" >
						<view class="item-title">
							开票方式
						</view>
						<view class="item-value">
							{{detail.invoiced?detail.invoiceTypeName:'不开票'}}
						</view>
					</view>
				
					
				</view>
				<view class="details-title">
					<span class="name">账单明细</span>
					
					
				</view>
				<view class="details-list" v-for="(item,i) in detail.itemList" :key="i">
					<view class="item-list">
						<view class="item-title">
							<view class="item-title-name">{{item.contractItemName}}
							
							<span class="item-title-remark" v-if="item.num&&item.unit=='月'">({{item.num}}个{{item.unit}})</span>
							<span class="item-title-remark" v-if="item.remark">({{item.remark}})</span>
							</view>
							
							
							<view class="item-title-span">收费标准：{{item.price}}<span >{{item.unit}}</span></view>
							
							
						</view>
						<view class="item-value">
							{{item.total}}元
						</view>
					</view>
					<view class="item-remark" v-if="item.timeRanges&&item.timeRanges.length==2&&item.timeRanges[0]&&item.timeRanges[1]">
						起止日期{{item.timeRanges[0]}}至{{item.timeRanges[1]}}
					</view>
					<!-- <view class="item-remark" v-if="item.remark">
						备注：{{item.remark}}
					</view> -->
				</view>
				
				
			</view>
		
			<view class="details " v-if="detail.remark">
				<view class="item">
					<view class="item-title">
						账单备注
					</view>
					<view class="item-value">
						{{detail.remark}}
					</view>
				</view>
			</view>
			<view class="details-title">
				
				<span class="remark">请在收到账单5日内缴纳上述费用。</span>
				
			</view>
			<!--  -->
		
			
			
			<u-divider   nonetext="没有找到相关内容" style="margin-top: 20rpx;"
				border-color="#CFD2D5">已经到底了</u-divider>
		</view>
		<view class="cashier-btn-row">
			<view class="cashier-btn-amount">合计
				<span  class="cashier-btn-span">￥{{detail.billAmount}}元</span>
			</view>
			<view class="cashier-btn-go"  v-if="!detail.payTime" >未支付</view>
			 
			<!-- <view class="cashier-btn-go1"  
			   v-if="!detail.payTime&&detail.payStatus==0"
			   >线下支付</view> -->
			   <view class="cashier-btn-go1"
			     v-if="detail.payTime"
			     >已支付</view>
		</view>
		
		
		
	</view> 
</template>

<script>
	
	
	import * as API from '@/apis/pagejs/tenantList.js'
	

	
	export default {
		data() {
			return {
				id:"",
				detail:{
					accountInfo:{},
					itemList:[]
				},
				transferAccountsInfo:{},
				isBack:false,
				accountInfoShow:false,
				
				amountList:[
					
				],
				show: false,
				showModel: false,
				qrCodeImg: "",
				submitType:"0",
				submitForm:{
					companyId: '',
					amount: '',
				},
				personInfo:{
					balance:0,
				},
				companyInfo:{
					paymentMethod:''
				},
				selectNum:'100',
				otherNum:'',
				
			}
		},
		onLoad(op) {
			if(op.site){
				this.isBack=true
			}
			if(op.id){
				this.id=op.id
				this.getDetail()
			}
		},
		onShow(){
			//this.homePage()
		},
		methods: {
			
			getDetail(){
				uni.showLoading({
					mask:true,title:'加载中...'
				})
				API.billDetails({
					id:this.id
				}).then((response) => {
					uni.hideLoading();
					this.detail=response.data;
					// this.detail.billAmount=800
					// this.detail.payTime=null;
					//this.detail.payStatus=1
					if(this.detail.billAmount>5000){
						this.submitType="2";
						//this.$forceUpdate()
					}else{
						this.amountList.push(this.detail.billAmount)
						this.selectNum=this.detail.billAmount;
						var amountList=[1000,2000,3000,4000,5000]
						for(var i =0 ;i<amountList.length;i++){
							var num=amountList[i]
							if(num>this.detail.billAmount){
								this.amountList.push(num)
								
							}
						}
					}
					
					//this.transferAccountsInfo=this.detail.accountInfo;
				}).catch(error => {
					uni.hideLoading();
					uni.showToast({
						title: error
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep.u-navbar{
		    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
	}
	.background{
		padding-bottom: 160rpx;
	}
	.cashier-btn-row{
		display: flex;
		justify-content: space-between;
		position: fixed;
		bottom: 0px;
		width: 100%;
		background: white;
		z-index: 999;
		    box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.15);
		 font-size: 44rpx;
		 .cashier-btn-amount{
			  padding:32rpx ;
			  
		 }
		 .cashier-btn-span{
			color: red;
			margin-left: 20rpx;
		 }
		 .cashier-btn-go{
			  padding:32rpx ;
			background: #4586f7; 
			color: white;
		 }
		 .cashier-btn-go1{
		 			  padding:32rpx ;
		 			// background: #4586f7; 
		 			// color: white;
		 }
		
	}
	
	
	.flew-items{
		display: flex;
		align-items: center;
		 padding:24rpx;
		font-size: 32rpx;
		 border-bottom:  1px solid #f2f2f2;
		.img{
			width: 60rpx;
			height: 60rpx;
		}
	}
	
	.navbar-box{
		box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.15);
	}
	.details-title{
		display: flex;
		 justify-content: space-between;
		  padding:24rpx;
		   font-size: 32rpx;
		  //  border-bottom:  1px solid #d5d5d5;
		.name{
			color: #8b898c;
		}
		.remark{
			color: #F44336;
		}
	}
	.details,.details-list{
		background-color: white;
		
		.billAmount{
			 font-size: 44rpx;
			 color: red;
		}
		.billAmount1{
			 font-size: 44rpx;
			 color: #2196f3;
		}
		.item{
			display: flex;
			 justify-content: space-between;
			 padding:24rpx;
			 font-size: 32rpx;
			 border-bottom:  1px solid #f2f2f2;
			 .item-title{
				 width: 240rpx;
				 min-width: 240rpx;
			 }
			 .item-value{
				 .item-value-btn1{
					 margin:  0 20px;
					     color: #4586f7;
				 }
				 .item-value-btn2{
					     color: #4586f7;
				 }
			 }
		}
	}
	.details-list{
		
		.item-list,.item-remark{
			display: flex;
			    align-items: center;
			 justify-content: space-between;
			 padding:24rpx;
			 font-size: 36rpx;
			 border-bottom:  1px solid #f2f2f2;
			 // .item-title{
				//  width: 400rpx;
			 // }
		}
		.item-title{
			 font-size: 36rpx;
			 .item-title-name{
				 color: #31b3ff;
			 }
			 .item-title-remark{
				 color: #303133;
				 margin-left: 8px;
			 }
		}
		
		.item-remark,.item-title-span{
			 font-size: 28rpx;
			 color: #8b898c;
		}
		
	}
 
 
 

 
 	.main {
 		margin: 24rpx 0;
		padding: 24rpx;
 		overflow: hidden;
		background: white;
 
 			// 缴费金额
 			.payment-amount {
 				margin-top: 32rpx;
 
 				.title {
 					color: rgb(48, 48, 48);
 					font-size: 36rpx;
 				}
 
 				.amount-options {
 					margin-top: 32rpx;
 					display: flex;
 					flex-wrap: wrap;
 					justify-content: space-between;
 
 					.options-item {
 						width: 200rpx;
 						height: 80rpx;
 						line-height: 80rpx;
 						border-radius: 4px;
 						text-align: center;
 						background-color: rgba(242, 242, 242, 1);
 						color: rgba(16, 16, 16, 1);
 						font-size: 32rpx;
 						margin-bottom: 20rpx;
 					}
 
 					.chosen {
 						background-color: rgba(22, 119, 255, 1);
 						color: rgba(255, 255, 255, 1);
 					}
 				}
 			}
 
 			// 输入金额
 			.input-amount {
 				margin-top: 24rpx;
 				display: flex;
 				font-size: 48rpx;
 				height: 100rpx;
 				line-height: 100rpx;
 border-bottom: 1px solid rgba(242,242,242,1);
 				.symbol {
 					margin-right: 32rpx;
 				}
                
 				.input {
 					height: 100rpx;
 					font-size: 40rpx;
 					 
 					 
 				}
 
 				::v-deep.uni-input-placeholder {
 					color: rgba(204, 204, 204, 1);
 				}
 			}
 
 
 			// 支付方式
 			.payment-way {
 				margin-top: 24rpx;
 
 				.title {
 					color: rgb(48, 48, 48);
 					font-size: 36rpx;
 				}
 
 				.way {
 					margin-top: 24rpx;
 
 					.way-item {
 						display: flex;
 						justify-content: space-between;
 						align-items: center;
 						margin-bottom: 24rpx;
 
 						.way-name {
 							display: flex;
 							align-items: center;
 							color: rgb(51, 51, 51);
                             .text{
								 font-size: 36rpx;
							 }
 							.img {
 								width: 48rpx;
 								height: 48rpx;
 								vertical-align: middle;
 								margin-right: 16rpx;
 								margin-left: -3rpx;
 							}
 							.img2{
 								width: 40rpx;
 								height: 40rpx;
 								vertical-align: middle;
 								margin-right: 20rpx;
 							}
 							.img3{
 								background-color: #1677FF;
 								 width: 40rpx;
 								 height: 40rpx;
 								 vertical-align: middle;
 								 margin-right: 20rpx;
 								 border-radius: 999px;
 							}
 						}
 
 						::v-deep.uni-radio-input {
 							width: 40rpx;
 							height: 40rpx;
 						}
 					}
 				}
 			}
 
 			// 按钮
 			.btn {
 				height: 96rpx;
 				border-radius: 50px;
 				background-color: rgba(51, 133, 255, 1);
 				color: rgba(255, 255, 255, 1);
 				font-size: 36rpx;
 				margin-top: 48rpx;
 			}
 
 		
 	}
 
 
 	// 对公转账弹窗
 	.modal-content {
 
 		padding: 40rpx 0;
 
 		.title-icon {
 			text-align: center;
 		}
 
 		.img {
 			width: 96rpx;
 			height: 96rpx;
 
 		}
 
 		.title {
 			text-align: center;
 			color: rgba(16, 16, 16, 1);
 			font-size: 36rpx;
 			font-weight: 600;
 			margin-top: 8rpx;
 		}
 
 		.infos-group {
 			margin: 40rpx 32rpx 0;
 
 			.item {
 				display: flex;
 				justify-content: space-between;
 				margin-bottom: 16rpx;
 
 				.item-title {
 					color: rgba(119, 119, 119, 1);
 					font-size: 32rpx;
 					 white-space: pre;
 				}
 
 				.item-value {
 					color: rgba(51, 51, 51, 1);
 					font-size: 32rpx;
 					margin-left: 16rpx;
 				}
 			}
 		}
 	}
</style>
