<template>
	<view>
		<u-navbar title="充值详情" title-color="#101010"></u-navbar>
		<view class="background">
			<view class="recharge-details">
				<view class="headline">
					{{tenantBalanceRecord.remark}}
				</view>
				<view class="sum">
					{{tenantBalanceRecord.amount}}
					<span>元</span>
				</view>
				<view class="state">
					充值成功
				</view>
				<view class="details" v-if="tenantBalanceRecord.outOrderNo">
					<view class="item">
						<view class="item-title">
							充值订单号
						</view>
						<view class="item-value">
							{{tenantBalanceRecord.outOrderNo}}
						</view>
					</view>
					<view class="item" v-if="false">
						<view class="item-title">
							户号
						</view>
						<view class="item-value">
							00880088
						</view>
					</view>
					
					
					
				
					 
				</view>


				<view class="details">
					<view class="item">
						<view class="item-title">
							付款方式
						</view>
						<view class="item-value">
							{{tenantBalanceRecord.methodN}}
						</view>
					</view>
					<!-- 	<view class="item">
						<view class="item-title">
							订单号
						</view>
						<view class="item-value">
					30816112557708460925
						</view>
					</view> -->
					<view class="item">
						<view class="item-title">
							扣费时间
						</view>
						<view class="item-value">
							{{tenantBalanceRecord.createTime}}
						</view>
					</view>
					<!-- <view class="item">
						<view class="item-title">
							支付时间
						</view>
						<view class="item-value">
							2023-08-20 10:29:00
						</view>
					</view> -->
				</view>
			</view>
		</view>
		<!-- 返回 -->
		<!-- <button class="back">返回</button> -->
	</view>
</template>

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

	export default {
		data() {
			return {
				id: '',
				tenantBalanceRecord: {},
				contractItem: {},
				tenantContract: {},

			}
		},
		onLoad(op) {
			if (op.id) {
				this.id = op.id
			}
			this.getRechargeDetails()
		},
		methods: {
			
			getRechargeDetails() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})

				API.recordDetails2({
					id: this.id
				}).then((response) => {
					uni.hideLoading();

				
					this.tenantBalanceRecord = response.data.tenantBalanceRecord;
				}).catch(error => {
					uni.hideLoading();
					uni.showToast({
						icon: "none",
						title: error
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.table1{
		margin: 8rpx 0;
		width: 100%;
		   border-collapse: collapse;
		td{
			border: 1px solid #e7e7e7;
			text-align: end;
			
			padding: 16rpx 16rpx;
		}
		.td1{
			text-align: start;
			min-width: 20%;
			max-width: 30%;
		}
		.td3{
			
			white-space: pre;
		}
		tr{
			 background-color:#f5f5f6 
		}
		.tr1{
			text-align: end;
				font-weight: bold;
		}
		 tr:nth-child(even) {  
		    background-color: #fff;  
		  }  
	}
	.background {

		background: linear-gradient(180deg, rgba(203, 234, 255, 1) 0%, rgba(203, 234, 255, 0) 100%);
		padding: 40rpx 32rpx;

		.recharge-details {

			background-color: #fff;
			border-radius: 8px;
			padding: 40rpx 32rpx;
			text-align: center;

			.headline {
				color: rgb(16, 16, 16);
				font-size: 36rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.img {
					width: 48rpx;
					height: 48rpx;
					vertical-align: middle;
				}

			}

			.sum {
				color: rgb(16, 16, 16);
				font-size: 48rpx;
				margin-top: 32rpx;
				span{
					font-size: 28rpx;
				}
				

			}

			.state {
				color: rgb(56, 158, 13);
				margin-top: 8rpx;
			}

			.details {
				margin-top: 40rpx;
				padding-top: 40rpx;
				border-top: 1px solid rgba(241, 241, 241, 1);

				.item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 16rpx;

					.item-title {
						color: rgb(119, 119, 119);
					}

					.item-value {
						color: rgb(48, 48, 48);
					}
				}
			}
		}
	}

	// 返回
	.back {
		border: 1px solid rgba(205, 205, 205, 1);
		border-radius: 8px;
		line-height: 88rpx;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(119, 119, 119, 1);
		font-size: 32rpx;

	}
</style>