<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>
		<Loading mask="true" click="true" ref="loading"></Loading>

		<!-- 表单区域 -->
		<scroll-view class="page" scroll-y="true">

			<view class="container">
				<!-- 1. 缴费详情 -->
				<view v-if="currentStep === 1" class="pay-page">
					<!-- 物业费缴费 -->
					<!-- 金额展示 -->
					<view class="amount-section">
						<text class="amount-text"
							:class="{ 'outstandingPaymentClass':outstandingPayment }">{{outstandingPayment?'-¥'+payAmount:'¥'+payAmount}}</text>
					</view>
					<view style="border-bottom: 1px solid #c7c7c7;padding-bottom: 10px;"></view>
					<!-- 缴费信息 -->
					<view class="info-section" style="">
						<view v-if="arrearsPayment=='物业费'">
							<view class="info-item">
								<text class="info-label">户名</text>
								<text class="info-value">桂花园（别墅）2号楼2层</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">CT物业</text>
							</view>
							<view class="info-item">
								<text class="info-label">可用余额</text>
								<text class="info-value">0.00</text>
							</view>
							<!-- <view class="info-payAmountItem">
								<text class="info-payAmount">{{'￥'+payAmount}}</text>
							</view> -->
						</view>
						<view v-else>
							<view class="info-item" v-if="arrearsPayment=='暖气费'">
								<text class="info-label">房屋</text>
								<text class="info-value">桂花园（别墅）2号楼2层</text>
							</view>
							<view class="info-item">
								<text class="info-label">户号</text>
								<text class="info-value">101123456</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">HN热力有限公司</text>
							</view>
							<!-- <view style="border-bottom: 1px solid #c7c7c7;padding-bottom: 10px;"></view> -->
							<!-- 缴费金额输入 -->
							<view class="input-section" style="display: flex;">
								<text class="amount-input" style="width: auto;">¥</text>
								<input type="number" v-model="payAmount" class="amount-input" placeholder="点击输入缴费金额">
								</input>
							</view>
							<view class="arrears-row">
								<text class="arrears-text">当前欠费金额¥{{ arrearsAmount }}元</text>
								<text class="auto-fill-btn" @click="handleAutoFill">点击自动填入</text>
							</view>
						</view>
					</view>




				</view>

				<!-- 2. 支付密码弹窗 -->
				<view v-if="currentStep === 2" class="modal-overlay" @click="closePasswordModal">
					<view class="password-modal" @click.stop>
						<!-- 弹窗头部 -->
						<view class="modal-header">
							<view class="close-icon" @click="closePasswordModal">
								<text class="close-text">×</text>
							</view>
							<view class="modal-title">请输入支付密码</view>
							<view class="header-right"></view>
						</view>

						<!-- 商户信息 & 金额 -->
						<view class="pay-info">
							<text class="merchant-name">智享日照洗护</text>
							<text class="pay-amount">¥{{ payAmount }}</text>
						</view>

						<!-- 支付方式选择 -->
						<view class="pay-way">
							<text class="way-label">支付方式</text>
							<view class="way-content">
								<image class="bank-icon" src="/static/propertyImgs/bank-logo.png" mode="aspectFit">
								</image>
								<text class="bank-name">建设银行储蓄卡(8888)</text>
								<text class="arrow-icon">></text>
							</view>
						</view>

						<!-- 银行卡选择列表 -->
						<!-- <view v-if="showBankList" class="bank-list">
							<view v-for="(item, index) in bankList" :key="index" class="bank-item"
								@click="selectBank(item)">
								<image class="bank-item-icon" :src="item.icon" mode="aspectFit"></image>
								<text class="bank-item-name">{{ item.name }}</text>
								<text v-if="selectedBank.id === item.id" class="check-icon">&#xe60c;</text>
							</view>
						</view> -->

						<!-- 密码输入框 -->
						<view class="password-input">
							<view v-for="(item, index) in 6" :key="index" class="password-item">
								<text v-if="password.length > index" class="password-dot"></text>
							</view>
						</view>

						<!-- 数字键盘 -->
						<view class="keyboard">
							<view class="keyboard-row">
								<view class="keyboard-item" @click="inputPassword(1)">1</view>
								<view class="keyboard-item" @click="inputPassword(2)">2</view>
								<view class="keyboard-item" @click="inputPassword(3)">3</view>
							</view>
							<view class="keyboard-row">
								<view class="keyboard-item" @click="inputPassword(4)">4</view>
								<view class="keyboard-item" @click="inputPassword(5)">5</view>
								<view class="keyboard-item" @click="inputPassword(6)">6</view>
							</view>
							<view class="keyboard-row">
								<view class="keyboard-item" @click="inputPassword(7)">7</view>
								<view class="keyboard-item" @click="inputPassword(8)">8</view>
								<view class="keyboard-item" @click="inputPassword(9)">9</view>
							</view>
							<view class="keyboard-row">
								<view class="keyboard-item empty"></view>
								<view class="keyboard-item" @click="inputPassword(0)">0</view>
								<view class="keyboard-item delete" @click="deletePassword">
									<text class="icon">←</text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 3. 缴费成功页 -->
				<view v-if="currentStep === 3" class="success-page">
					<view class="icon-box">

						<!-- 成功图标 -->
						<view class="success-icon">
							<text class="icon">✓</text>
						</view>
					</view>
					<!-- 成功文字 -->
					<view class="success-text">缴费成功</view>
					<view class="success-desc">成功缴纳物业费</view>


				</view>
			</view>


		</scroll-view>
		<!-- 立即缴费按钮 -->
		<view class="btn-section" v-if="currentStep === 1">
			<button class="pay-btn" @click="handlePay">立即缴费</button>
		</view>
		<!-- 返回按钮 -->
		<view class="btn-section" v-if="currentStep === 3">
			<button class="pay-btn" @click="handleBackToList">返回生活缴费</button>
		</view>
	</view>



</template>

<script>
	export default {
		onReady: function(e) {},
		components: {

		},

		computed: {




		},
		created() {

		},
		onShow() {

		},

		mounted() {},

		onReady() {
			this.$nextTick(() => {

			})
		},
		data() {
			return {
				/* 设定状态栏默认高度 */
				statusBarHeight: 20,
				outstandingPayment: true, //是否欠费
				arrearsPayment: uni.getStorageSync('arrearsPayment'),
				currentStep: 1, // 1: 详情页 2: 密码弹窗 3: 成功页
				payAmount: "1680.00", // 缴费金额
				password: "", // 输入的密码
				showBankList: false, // 是否显示银行卡列表
				arrearsAmount: "21.21",
				// 银行卡列表
				bankList: [{
						id: 1,
						name: "建设银行储蓄卡(8888)",
						icon: "/static/bank-logo.png"
					},
					{
						id: 2,
						name: "工商银行储蓄卡(6666)",
						icon: "/static/icbc-logo.png"
					},
					{
						id: 3,
						name: "招商银行储蓄卡(9999)",
						icon: "/static/cmb-logo.png"
					}
				],
				// 默认选中的银行卡
				selectedBank: {
					id: 1,
					name: "建设银行储蓄卡(8888)",
					icon: "/static/bank-logo.png"
				}



			}
		},


		methods: {
			handleAutoFill() {
				this.payAmount = this.arrearsAmount;
				uni.vibrateShort({
					type: "light"
				});
			},
			goBack() {
				uni.redirectTo({
					url: '/pages/payment-list/paymentIndex',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			// 点击立即缴费
			handlePay() {
				if (!this.payAmount || Number(this.payAmount) <= 0) {
					uni.showToast({
						title: "请输入正确的缴费金额",
						icon: "none"
					});
					return;
				}
				this.currentStep = 2;
			},

			// 关闭密码弹窗
			closePasswordModal() {
				this.currentStep = 1;
				this.password = "";
				this.showBankList = false;
			},

			// 选择银行卡
			selectBank(item) {
				this.selectedBank = item;
				this.showBankList = false;
			},

			// 输入密码
			inputPassword(num) {
				if (this.password.length >= 6) return;
				this.password += num.toString();

				// 密码满6位，自动提交
				if (this.password.length === 6) {
					this.handleConfirmPay();
				}
			},

			// 删除密码
			deletePassword() {
				this.password = this.password.slice(0, -1);
			},

			// 确认支付
			handleConfirmPay() {
				// 这里模拟支付请求，实际项目中调用后端接口
				uni.showLoading({
					title: "支付中...",
					mask: true
				});

				setTimeout(() => {
					uni.hideLoading();
					// 支付成功，跳转到成功页
					this.currentStep = 3;
					this.password = "";
					this.showBankList = false;
				}, 1500);
			},

			// 返回生活缴费列表
			handleBackToList() {
				uni.redirectTo({
					url: '/pages/payment-list/paymentIndex',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}

		},


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

<style scoped>
	.contentStyle {
		display: flex;
		flex-direction: column;
		height: 100vh;
		/* 关键：占满屏幕高度 */
		background-color: #f9f9f9;
	}

	.page {
		flex: 1;
		overflow-y: auto;
		padding: 0px 20px;
		box-sizing: border-box;
		background-color: #
			/* fff */
		;
	}


	/* 1. 物业费详情页 */
	.pay-page {
		width: 100%;
		/* min-height: 100vh; */
		/* background-color: #fff; */
	}

	.amount-section {
		padding: 30px 0;
		text-align: center;
	}

	.amount-text {
		font-size: 28px;
		font-weight: 600;
	}

	.outstandingPaymentClass {
		color: #E34D59;
	}

	.info-section {
		padding: 0 15px 15px 15px;
		/* margin-bottom: 20px; */

	}

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

	.info-label {
		font-size: 15px;
		color: #666;
	}

	.info-value {
		font-size: 15px;
		color: #333;
		font-weight: 600;
	}

	.info-payAmountItem {
		height: 50px;
		line-height: 50px;
		margin-bottom: 30px;
	}

	.info-payAmount {
		font-size: 25px;
		color: #333;
		font-weight: 600;

	}

	.input-section {
		/* padding: 0 15px; */

	}

	.amount-input {
		width: 100%;
		height: 50px;
		font-size: 24px;
		line-height: 50px;
		border: none;
		outline: none;
		margin-right: 5px;
	}

	.btn-section {
		padding: 10px 15px 20px;
		display: flex;
		gap: 20rpx;
	}

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

	/* 2. 支付密码弹窗 */
	.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: 12px 12px 0 0;
		padding-bottom: 20px;
	}

	.modal-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 50px;
		padding: 0 15px;
		border-bottom: 1px solid #f0f0f0;
	}

	.close-icon {
		font-size: 22px;
		width: 40px;
		height: 50px;
		display: flex;
		align-items: center;
	}

	.modal-title {
		font-size: 17px;
		font-weight: 500;
		color: #000;
	}

	.header-right {
		width: 40px;
	}

	.pay-info {
		padding: 20px 15px;
		text-align: center;
	}

	.merchant-name {
		display: block;
		font-size: 16px;
		color: #333;
		margin-bottom: 10px;
	}

	.pay-amount {
		font-size: 32px;
		font-weight: 500;
		color: #000;
	}

	.pay-way {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15px;
		border-bottom: 1px solid #f0f0f0;
	}

	.way-label {
		font-size: 15px;
		color: #666;
	}

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

	.bank-icon {
		width: 16px;
		height: 16px;
		margin-right: 3px;
	}

	.bank-name {
		font-size: 15px;
		color: #333;
		margin-right: 8px;
	}

	.arrow-icon {
		font-size: 14px;
		color: #999;
	}

	/* 银行卡列表 */
	.bank-list {
		padding: 0 15px;
		border-bottom: 1px solid #f0f0f0;
	}

	.bank-item {
		display: flex;
		align-items: center;
		height: 50px;
		border-bottom: 1px solid #f5f5f5;
	}

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

	.bank-item-icon {
		width: 24px;
		height: 24px;
		margin-right: 10px;
	}

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

	.check-icon {
		font-size: 18px;
		color: #007aff;
	}

	/* 密码输入框 */
	.password-input {
		display: flex;
		justify-content: space-between;
		padding: 20px 15px;
	}

	.password-item {
		width: 50px;
		height: 50px;
		/* border: 1px solid #dcdcdc; */
		background-color: #efefef;
		border-radius: 4px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.password-dot {
		width: 12px;
		height: 12px;
		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: 24px;
		color: #000;
		border: 1px 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;
	}

	/* 3. 缴费成功页 */
	.success-page {
		width: 100%;
		min-height: 100vh;
		background-color: #fff;
		text-align: center;
	}

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

	.success-icon {
		/* margin-top: 60px; */
		margin-bottom: 20px;
		width: 100px;
		height: 100px;
		font-size: 80px;
		color: #007aff;
		background-color: #007aff;
		color: #fff;
		border-radius: 50%;


	}

	.success-icon .iconfont {}

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

	.success-desc {
		font-size: 15px;
		color: #999;
		margin-bottom: 50px;
	}

	/*  核心：欠费金额行样式 */
	.arrears-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		/* padding: 15px; */
		margin-bottom: 30px;
	}

	.arrears-text {
		font-size: 14px;
		color: #333;
		font-weight: 600;
	}

	.auto-fill-btn {
		font-size: 14px;
		color: #007aff;
		/* 蓝色，匹配设计图 */
		font-weight: 500;
		padding: 5px 0;
	}

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