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

		<!-- 表单区域 -->
		<scroll-view class="page" scroll-y="true">
			<view class="container">
				<!-- 成功图标 -->
				<view class="success-icon">
					<text class="icon-check">✓</text>
					<!-- <image src="https://wuyeadmin.bugtc.com/images/home/bingo.png" ></image> -->
				</view>

				<!-- 主标题 -->
				<view class="title">{{ pageTitle }}</view>

				<!-- 提示文案 -->
				<view class="desc" v-html="descText"></view>

				<!-- 操作按钮 -->
				<view class="btn-wrap">
					<button class="btn-back" @click="handlePrimaryClick">{{ btnText }}</button>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		computed

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

	// 响应式数据
	const statusBarHeight = ref(20)
	const paymentType = ref(uni.getStorageSync('addPaymentType'))
	const pageType = ref('bind') // 'bind' | 'pay'

	// 页面配置：根据类型返回对应文案和跳转
	const pageConfig = computed(() => {
		const configs = {
			bind: {
				navTitle: '新增' + paymentType.value + '缴费',
				pageTitle: '绑定成功',
				descText: '恭喜您绑定成功，费用将在24小时内更新，<br>请您按时查看，避免造成费用欠费',
				btnText: '返回生活缴费',
				backUrl: '/pageSubPack/payment-list/paymentIndex'
			},
			pay: {
				navTitle: '缴费支付',
				pageTitle: '支付成功',
				descText: '恭喜您支付成功，感谢您的使用',
				btnText: '返回生活缴费',
				backUrl: '/pageSubPack/payment-list/paymentIndex' // TODO: 如有缴费记录页请修改
			}
		}
		return configs[pageType.value] || configs.bind
	})

	const navTitle = computed(() => pageConfig.value.navTitle)
	const pageTitle = computed(() => pageConfig.value.pageTitle)
	const descText = computed(() => pageConfig.value.descText)
	const btnText = computed(() => pageConfig.value.btnText)

	// 生命周期
	onLoad((options) => {
		if (options?.type) {
			pageType.value = options.type
		}
	})
	onShow(() => {})
	onMounted(() => {})
	onReady(() => {})

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

	const handlePrimaryClick = () => {
		const url = pageConfig.value.backUrl
		uni.navigateTo({ url });
	}
</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;
	}
</style>

<style scoped>
	/* 全局容器 */
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* 成功图标 */
	.success-icon {
		width: 220rpx;
		height: 220rpx;
		border-radius: 50%;
		background-color: #1677ff;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 200rpx;
		margin-bottom: 30rpx;
	}

	.icon-check {
		color: #fff;
		font-size: 130rpx;
		font-weight: bold;
		line-height: 1;
	}

	/* 主标题 */
	.title {
		font-size: 44rpx;
		font-weight: bold;
		color: #000;
		margin-bottom: 40rpx;
	}

	/* 提示文案 */
	.desc {
		font-size: 32rpx;
		color: #666;
		line-height: 1.6;
		text-align: center;
		margin-bottom: 150rpx;
	}

	/* 按钮容器 */
	.btn-wrap {
		width: 100%;
	}

	/* 返回按钮 */
	.btn-back {
		width: 100%;
		height: 96rpx;
		line-height: 96rpx;
		background-color: #1677ff;
		color: #fff;
		font-size: 36rpx;
		border-radius: 8rpx;
		border: none;
		padding: 0;
		margin: 0;
	}

	/* 按钮默认样式重置（解决uni-app button默认样式问题） */
	.btn-back::after {
		border: none;
	}

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