<template>
	<view class="contentStyle" style="">
		<view class="status-bar"></view>
		<uni-nav-bar :title="arrearsPayment" left-icon="left" @clickLeft="goBack" backgroundColor="transparent"
			:border="false">
		</uni-nav-bar>

		<!-- 表单区域 -->
		<scroll-view class="page" scroll-y="true">
			<view class="container">
				<!-- 1. 物业费详情页 -->
				<view class="pay-page">
					<!-- 未欠费 -->
					 <!-- v-if="arrearsPayment=='暖气费'" -->
					<view class="no-arrears-section">
						<image src="https://wuye.ckdzkj.com/images/propertyImgs/noArrears.png"
							class="background-image-style"></image>
						<text class="noArrearsText">暂未查到欠费</text>
						<view class="recordText">
							<text>{{'最近充值：'+paymentItem.LastRechargeTime || '-'}}</text>
							<text class="lineStyle">{{'|'}}</text>
							<text>{{'充值金额：'+paymentItem.LastRechargeAmount+'元' || '-'}}</text>
						</view>
					</view>
					<!-- <view>
						<view class="amount-section">
							<text class="amount-text">{{'¥'+ Math.abs(paymentItem.balance || 0).toFixed(2)}}</text>
						</view>
						<view style="border-bottom: 2rpx solid #ededed;margin:10rpx 0rpx;"></view>
					</view> -->
					<!-- 缴费信息 -->
					<view class="info-section" style="">
						<view v-if="arrearsPayment=='物业费'">
							<view class="info-item">
								<text class="info-label">户名</text>
								<text
									class="info-value">{{paymentItem.villageName+ paymentItem.fullAddress || '-' }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">户主</text>
								<text class="info-value">{{ paymentItem.name || '-' }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">缴费单位</text>
								<text class="info-value">花开物业</text>
							</view>
							<view class="info-item">
								<text class="info-label">可用余额</text>
								<text class="info-value">{{ Math.abs(paymentItem.balance || 0).toFixed(2) }}元</text>
							</view>
						</view>
						<view v-else>
							<view class="info-item">
								<text class="info-label">房屋</text>
								<text class="info-value">{{ paymentItem.fullAddress || '-' }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">户号</text>
								<text class="info-value">{{ paymentItem.deviceCode || '-' }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">户主</text>
								<text class="info-value">{{ paymentItem.name || '-' }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">缴费单位</text>
								<text class="info-value">花开物业</text>
							</view>
							<view class="info-item">
								<text class="info-label">可用余额</text>
								<text class="info-value">{{ Math.abs(paymentItem.balance || 0).toFixed(2) }}元</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		computed

	} from 'vue'
	import {
		onShow,
		onReady,
		onReachBottom,
		onLoad,
		onUnload,
		onPullDownRefresh
	} from '@dcloudio/uni-app'

	// 响应式数据
	const statusBarHeight = ref(20)
	const paymentItem = reactive(uni.getStorageSync('arrearsPayment') || {})
	const arrearsPayment = computed(() => paymentItem.type || '缴费')

	// 生命周期
	onShow(() => {})
	onMounted(() => {})
	onReady(() => {})

	// 方法
	const goBack = () => {
		uni.navigateBack();
	}

	// 以下为原代码保留的方法（未使用但保持功能完整）
	const handlePay = () => {}
	const closePasswordModal = () => {}
	const selectBank = () => {}
	const inputPassword = () => {}
	const deletePassword = () => {}
	const handleConfirmPay = () => {}
	const handleBackToList = () => {}
</script>

<style lang="scss">
	page {
		background: #f9f9f9;
	}
</style>

<style scoped>
	.contentStyle {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f9f9f9;
	}

	.page {
		flex: 1;
		overflow-y: auto;
		padding: 0px 40rpx;
		box-sizing: border-box;
	}

	.pay-page {
		width: 100%;
	}

	.amount-section {
		padding: 60rpx 0;
		text-align: center;
	}

	.no-arrears-section {
		padding: 30rpx 0;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #999999;
	}

	.amount-text {
		font-size: 56rpx;
		font-weight: 600;
		color: #007aff;
	}

	.background-image-style {
		width: 466rpx;
		height: 250rpx;
		margin-bottom: 140rpx;
	}

	.noArrearsText {
		padding-bottom: 50rpx;
		width: 100%;
		border-bottom: 2rpx solid #ededed;
	}

	.recordText {
		font-size: 24rpx;
		color: #222;
		margin-top: 20rpx;
		font-weight: 600;
	}

	.lineStyle {
		margin: 0rpx 30rpx;
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 80rpx;
	}

	.info-label {
		font-size: 30rpx;
		color: #666;
	}

	.info-value {
		font-size: 30rpx;
		color: #333;
	}

	.info-payAmountItem {
		height: 100rpx;
		line-height: 100rpx;
		margin-bottom: 60rpx;
	}

	.info-payAmount {
		font-size: 50rpx;
		color: #333;
		font-weight: 600;
	}

	.input-section {
		padding: 0 30rpx;
		margin-bottom: 60rpx;
	}

	.amount-input {
		width: 100%;
		height: 100rpx;
		font-size: 48rpx;
		border: none;
		outline: none;
	}

	.btn-section {
		padding: 0 30rpx;
	}

	.pay-btn {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		background-color: #007aff;
		color: #fff;
		border-radius: 16rpx;
		font-size: 32rpx;
		border: none;
		outline: none;
	}

	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
		display: flex;
		align-items: flex-end;
	}

	.password-modal {
		width: 100%;
		background-color: #fff;
		border-radius: 24rpx 24rpx 0 0;
		padding-bottom: 40rpx;
	}

	.modal-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100rpx;
		padding: 0 30rpx;
		border-bottom: 2rpx solid #f0f0f0;
	}

	.close-icon {
		font-size: 44rpx;
		width: 80rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
	}

	.modal-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #000;
	}

	.header-right {
		width: 80rpx;
	}

	.pay-info {
		padding: 40rpx 30rpx;
		text-align: center;
	}

	.merchant-name {
		display: block;
		font-size: 32rpx;
		color: #333;
		margin-bottom: 20rpx;
	}

	.pay-amount {
		font-size: 64rpx;
		font-weight: 500;
		color: #000;
	}

	.pay-way {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		border-bottom: 2rpx solid #f0f0f0;
	}

	.way-label {
		font-size: 30rpx;
		color: #666;
	}

	.way-content {
		display: flex;
		align-items: center;
	}

	.bank-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 6rpx;
	}

	.bank-name {
		font-size: 30rpx;
		color: #333;
		margin-right: 16rpx;
	}

	.arrow-icon {
		font-size: 28rpx;
		color: #999;
	}

	.bank-list {
		padding: 0 30rpx;
		border-bottom: 2rpx solid #f0f0f0;
	}

	.bank-item {
		display: flex;
		align-items: center;
		height: 100rpx;
		border-bottom: 2rpx solid #f5f5f5;
	}

	.bank-item:last-child {
		border-bottom: none;
	}

	.bank-item-icon {
		width: 48rpx;
		height: 48rpx;
		margin-right: 20rpx;
	}

	.bank-item-name {
		flex: 1;
		font-size: 30rpx;
		color: #333;
	}

	.check-icon {
		font-size: 36rpx;
		color: #007aff;
	}

	.password-input {
		display: flex;
		justify-content: space-between;
		padding: 40rpx 30rpx;
	}

	.password-item {
		width: 100rpx;
		height: 100rpx;
		background-color: #efefef;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.password-dot {
		width: 24rpx;
		height: 24rpx;
		background-color: #000;
		border-radius: 50%;
	}

	.keyboard {
		width: 100%;
	}

	.keyboard-row {
		display: flex;
	}

	.keyboard-item {
		flex: 1;
		height: 54px;
		line-height: 54px;
		text-align: center;
		font-size: 48rpx;
		color: #000;
		border: 2rpx solid #f0f0f0;
		background-color: #fff;
	}

	.keyboard-item:active {
		background-color: #e5e5e5;
	}

	.keyboard-item.empty {
		background-color: #f5f5f5;
		border: none;
	}

	.keyboard-item.delete {
		background-color: #f5f5f5;
		border: none;
	}

	.success-page {
		width: 100%;
		min-height: 100vh;
		background-color: #fff;
		text-align: center;
	}

	.icon-box {
		display: flex;
		justify-content: center;
		width: 100vw;
		height: 1100rpx;
		padding: 60rpx 0px;
	}

	.success-icon {
		margin-bottom: 40rpx;
		width: 100px;
		height: 100px;
		font-size: 80px;
		color: #007aff;
		background-color: #007aff;
		color: #fff;
		border-radius: 50%;
	}

	.success-text {
		font-size: 40rpx;
		font-weight: 600;
		color: #000;
		margin-bottom: 20rpx;
	}

	.success-desc {
		font-size: 30rpx;
		color: #999;
		margin-bottom: 100rpx;
	}

	.status-bar {
		width: 100vw;
		height: 46px;
	}
</style>