<template>
	<view class="contentStyle" style="">
		<view class="status-bar"></view>
		<uni-nav-bar :title="'新增'+paymentType+'缴费'" left-icon="left" @clickLeft="goBack" backgroundColor="transparent"
			:border="false">
		</uni-nav-bar>
		<!-- 表单区域 -->
		<scroll-view class="page" scroll-y="true">
			<view class="card-box">
				<!-- 头部物业费A标题+水滴图标 -->
				<view class="card-header">
					<image class="iconStyle"
						:src="paymentType=='水表'?'https://wuye.ckdzkj.com/images/propertyImgs/water.png':'https://wuye.ckdzkj.com/images/propertyImgs/electric.png'">
					</image>
					<text class="card-title">{{paymentType}}</text>
				</view>
				<!-- 分割线 -->
				<view class="line"></view>
				<view class="input-item">
					<view class="input-label">缴费单位</view>
					<text class="company-name">花开物业</text>
				</view>
				<!-- 分割线 -->
				<view class="line"></view>
				<!-- 设备号输入项 -->
				<view class="input-item">
					<view class="input-label">缴费设备号</view>
					<view class="input-wrap">
						<!-- 输入框 -->
						<input class="input" placeholder="请输入设备号" placeholder-class="input-placeholder"
							v-model="deviceNo" />
						<!-- 右边扫码图标 text标签直接用 双端不乱码 -->
						<image class="scanTheCodeIconStyle"
							src="https://wuye.ckdzkj.com/images/propertyImgs/scanTheCodeIcon.png" @click="scanCode">
						</image>
					</view>
				</view>

				<!-- 底部分割线 -->
				<view class="line"></view>
			</view>


			<!-- 底部协议和提交按钮 -->
			<view class="bottom-area">
				<!-- <view class="agreement">
					<checkbox-group @change="handleAgreeChange">
						<checkbox :checked="isAgree" />
					</checkbox-group>
					<text class="agreement-text">我已阅并同意</text>
					<text class="agreement-link" @click="handleProtocol">《协议链接》</text>
				</view> -->


				<button class="submit-btn" @click="goPay">
					提交
				</button>
			</view>








		</scroll-view>


	</view>



</template>

<script setup>
	import {
		ref,
		onMounted,
		computed

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

	import {
		getTopUpBindDevice,
		getopenIdByCode
	} from '/pageSubPack/api/apiSub.js'

	// 响应式数据
	const paymentType = ref(uni.getStorageSync('addPaymentType'))
	const deviceNo = ref('')
	const isAgree = ref(false)
	// 生命周期
	onMounted(() => {})

	// 扫码
	const scanCode = () => {
		// uni.showLoading({
		// 	title: '扫码中...',
		// 	mask: true
		// })

		uni.scanCode({
			onlyFromCamera: false,
			scanType: ['qrCode', 'barCode'],
			success: (res) => {
				// uni.hideLoading()
				console.log('扫码成功', res)
				// 过滤模拟器/调试模式返回的 mock 数据
				if (!res.result || res.result.toUpperCase() === 'TEST') {
					uni.showToast({ title: '扫码识别失败，请手动输入设备号', icon: 'none' })
					return
				}
				deviceNo.value = res.result
				uni.showToast({ title: '扫码成功', icon: 'success' })
			},
			fail: (err) => {
				// uni.hideLoading()
				console.log('扫码失败', err)
				uni.showToast({ title: '扫码取消/失败', icon: 'none' })
			},
			complete: () => {
				// uni.hideLoading()
			}
		})
	}

	// 提交缴费
	const goPay = async () => {
		if (!deviceNo.value) {
			uni.showToast({
				title: '请输入设备号',
				icon: 'none'
			})
			return
		}

		uni.showModal({
			title: '确认提交',
			content: '确认要提交吗?',
			success: async (res) => {
				if (res.confirm) {
					uni.showLoading({
						title: '提交中...',
						mask: true
					})

					try {
						// // 获取 openid
						// const loginRes = await wx.login()
						// if (!loginRes.code) {
						// 	uni.hideLoading()
						// 	uni.showToast({
						// 		title: '登录失败',
						// 		icon: 'none'
						// 	})
						// 	return
						// }
						// // 用 code 换 openid
						// const openIdRes = await getopenIdByCode({
						// 	code: loginRes.code
						// })
						// if (openIdRes.code !== 200 || !openIdRes.data) {
						// 	uni.hideLoading()
						// 	uni.showToast({
						// 		title: '获取openid失败',
						// 		icon: 'none'
						// 	})
						// 	return
						// }
						const openid = uni.getStorageSync('openid')
						// if (!openid) {
						// 	uni.hideLoading()
						// 	uni.showToast({
						// 		title: '获取用户信息失败，请重新登录',
						// 		icon: 'none'
						// 	})
						// 	return
						// }
						await getTopUpBindDevice({
							deviceType: paymentType.value=='水表'?'2':'1',
							deviceCode: deviceNo.value,
							// openid: openid,
							residentUserId: uni.getStorageSync('userId')
						})
						uni.hideLoading()
						uni.showToast({
							title: '提交成功',
							icon: 'success'
						})
						setTimeout(() => {
							goNext()
						}, 1500)
					} catch (err) {
						uni.hideLoading()
						uni.showToast({
							title: err.msg || '网络异常',
							icon: 'none'
						})
						console.error('绑定设备失败：', err)
					}
				}
			}
		})
	}



	// 跳转成功页
	const goNext = () => {
		uni.navigateTo({
			url: '/pageSubPack/payment-list/addPaymentSuccess?type=bind'
		})
	}

	// 返回
	const goBack = () => {
		uni.navigateBack();
		}
</script>
<style lang="scss">
	page {
		background: #f2f1f6;
	}
</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;
	}


	/* 白色卡片容器 */
	.card-box {
		background: #ffffff;
		border-radius: 24rpx;
		padding: 32rpx;
	}

	/* 头部物业费A标题 */
	.card-header {
		display: flex;
		align-items: center;
		gap: 16rpx;
		margin-bottom: 32rpx;
	}

	.iconStyle {
		width: 88rpx;
		height: 88rpx;
	}

	.scanTheCodeIconStyle {
		width: 48rpx;
		height: 48rpx;
		padding-left: 20rpx;
	}

	.water-icon {
		font-size: 32rpx;
	}

	.card-title {
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
	}

	/* 分割线 */
	.line {
		width: 100%;
		height: 1rpx;
		background: #eeeeee;
	}

	/* 输入项整体 */
	.input-item {
		padding: 32rpx 0;
	}

	.input-label {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 24rpx;
	}

	/* 输入框+扫码图标横向布局 */
	.input-wrap {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.input {
		flex: 1;
		font-size: 32rpx;
		color: #333;
	}

	/* 占位符样式 */
	.input-placeholder {
		color: #cccccc;
	}



	/* 底部协议+按钮区域 */
	.bottom-area {
		margin-top: 60rpx;
		padding: 0 10rpx;
	}

	/* 协议勾选 */
	.agree-item {
		display: flex;
		align-items: center;
		gap: 16rpx;
		margin-bottom: 40rpx;
	}

	.radio-box {
		width: 36rpx;
		height: 36rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.radio-icon {
		font-size: 32rpx;
		color: #999;
	}

	.agree-text {
		font-size: 28rpx;
		color: #666;
	}

	.agree-link {
		font-size: 28rpx;
		color: #007aff;
	}

	/* 立即缴费按钮 */
	.pay-btn {
		width: 100%;
		height: 96rpx;
		background: #007aff;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.pay-text {
		font-size: 36rpx;
		color: #ffffff;
	}

	/* 白色卡片容器 */
	.card-box {
		background: #ffffff;
		border-radius: 24rpx;
		padding: 32rpx;
	}

	/* 头部物业费A标题 */
	.card-header {
		display: flex;
		align-items: center;
		gap: 16rpx;
		margin-bottom: 32rpx;
	}

	.water-icon {
		font-size: 48rpx;
	}

	.card-title {
		font-size: 36rpx;
		color: #333;
		font-weight: 500;
	}

	/* 分割线 */
	.line {
		width: 100%;
		height: 1rpx;
		background: #eeeeee;
	}

	/* 输入项整体 */
	.input-item {
		padding: 32rpx 0;
	}

	.input-label {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 24rpx;
	}

	/* 输入框+扫码图标横向布局 */
	.input-wrap {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.input {
		flex: 1;
		font-size: 32rpx;
		color: #333;
	}

	/* 占位符样式 */
	.input-placeholder {
		color: #cccccc;
	}

	/* 右边扫码图标 text标签直接用 双端不乱码 */
	.scan-icon {
		font-size: 40rpx;
		color: #999;
		padding-left: 20rpx;
	}

	/* 底部协议+按钮区域 */
	.bottom-area {
		margin-top: 60rpx;
		padding: 0 10rpx;
	}

	/* 协议勾选 */
	.agree-item {
		display: flex;
		align-items: center;
		gap: 16rpx;
		margin-bottom: 40rpx;
	}

	.radio-box {
		width: 36rpx;
		height: 36rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.radio-icon {
		font-size: 32rpx;
		color: #999;
	}

	.agree-text {
		font-size: 28rpx;
		color: #666;
	}

	.agree-link {
		font-size: 28rpx;
		color: #007aff;
	}

	/* 立即缴费按钮 */
	.pay-btn {
		width: 100%;
		height: 96rpx;
		background: #007aff;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.pay-text {
		font-size: 36rpx;
		color: #ffffff;
	}

	.status-bar {
		width: 100vw;
		height: 46px;
	}

	/* 底部区域 */
	.bottom-area {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.agreement {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.agreement checkbox {
		transform: scale(0.8);
		margin-right: 10rpx;
	}

	.agreement-text {
		font-size: 24rpx;
		color: #333;
	}

	.agreement-link {
		font-size: 28rpx;
		color: #4080ff;
		margin-left: 10rpx;
	}

	.submit-btn {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		background-color: #4080ff;
		color: #fff;
		border-radius: 10rpx;
		font-size: 36rpx;
		font-weight: 500;
		border: none;
		outline: none;
	}

	.submit-btn[disabled] {
		background-color: #a0c4ff;
		color: #fff;
		opacity: 0.7;
	}
</style>