<template>
	<!-- 水印 -->
	<view v-if="$isVip()">
		<watermark dark="light" source="uni_alipay_pay-successful" />
		<liu-drag-button :canDocking="false" @clickBtn="$goRechargePage('watermark', 'uni_alipay_pay-successful')">
			<image src='/static/lottie/watermark.gif' mode="widthFix" style="width:94px;height:74px;" ></image>
		</liu-drag-button>
	</view>
	<view class="container">
		<!-- 蓝色背景区域 -->
		<view class="header-section">
			<nav-bar ref="navBarRef" bgColor="transparent" :isBack="false" :buttonGroup="buttonGroup"
				tipLayerType="pay-successful-tip" isTipLayer tipLayerText="修改支付数据" @button-click="handleButtonClick">
				<template v-slot:right>
					<view class="nav-link w100"
						style="display: flex; align-items: center; justify-content: flex-end; white-space: nowrap; padding: 0;">
						<text @click="util.goBack()" style="margin-right: 20rpx;">回首页</text>
					</view>
				</template>
				<template v-slot:center>
					<view class="status-box">
						<image class="image" src="/static/image/balance/transfer/success.png"></image>
						<text class="status-text">支付成功</text>
					</view>
				</template>
			</nav-bar>

			<!-- 转账状态信息 -->
			<view class="success-info">
				<view class="amount-box" @click="goEdit">
					<text class="symbol">¥</text>
					<text class="amount alipay-font">{{ Number(payData.money).toFixed(2) }}</text>
				</view>

				<!-- 收款方/付款方式 -->
				<view class="details-box">
					<view class="detail-item">
						<text class="label">{{ payData.user }}</text>
						<text class="value">{{ Number(payData.money).toFixed(2) }}</text>
					</view>
					<view class="detail-item">
						<text class="label">付款方式</text>
						<text class="value">{{ payData.payMethod }}</text>
					</view>
				</view>
			</view>
		</view>


		<view class="main-content" :style="{ top: `${190 + statusBarHeight}px` }">
			<!-- 样式1 -->
			<template v-if="payData.styleType == 'style1'">
				<view class="pay-success-card">
					<image class="title-img" style="width: 106rpx;height: 28rpx;"
						src="/static/image/balance/pay-successful/zhifuyouli.png" mode="widthFix"></image>
					<view class="banner-footer" style="padding: 0 16rpx;">
						<view class="logo-box">
							<image class="logo" src="/static/image/balance/pay-successful/zhifufuli.png"
								mode="aspectFit">
							</image>
						</view>
						<view class="banner-info" style="border-top: none;">
							<view class="text-content">
								<text class="b-title">领取<text style="color: #EA4833;">今日</text>支付福利</text>
								<text class="b-desc">领优惠，支付更省钱</text>
							</view>
							<view class="b-btn">去看看</view>
						</view>
					</view>
					<view class="banner-footer" style="padding: 0 16rpx;">
						<view class="logo-box">
							<image class="logo" :src="payData.style1.couponlist[0].imgUrl" mode="aspectFit">
							</image>
						</view>
						<view class="banner-info">
							<view class="text-content">
								<text class="b-title">
									<text
										v-if="payData.style1.couponlist[0].price && payData.style1.couponlist[0].price > 0"
										style="color: #EA4833;">{{ payData.style1.couponlist[0].price }}元</text>
									{{ payData.style1.couponlist[0].title }}
								</text>
								<text class="b-desc">
									<text class="b-desc-tag">{{ payData.style1.couponlist[0].tag }}</text>
									{{ payData.style1.couponlist[0].desc }}
								</text>
							</view>
							<view class="b-btn">{{ payData.style1.couponlist[0].butText }}</view>
						</view>

					</view>
				</view>
				<view class="content-section">
					<!-- 飞猪广告 -->
					<view class="card fliggy-card">
						<image class="banner-img" :src="payData.style1.bannerUrl" mode="widthFix" @click="toggleBanner">
						</image>
						<view class="guanggao-tag">
							<image style="width: 70rpx;height: 32rpx;"
								src="/static/image/balance/transfer/guanggao.png">
							</image>
						</view>
						<view class="yaoyiyao-container">
							<view class="yaoyiyao-box">
								<image class="img" src="/static/image/balance/transfer/yaoyiyao.png" mode="widthFix">
								</image>
								<text class="text">摇动或点击查看详情</text>
							</view>
						</view>
						<view class="banner-footer"
							v-if="payData.style1.bannerUrl == '/static/image/balance/transfer/bottom-banner-1.png'">
							<view class="logo-box">
								<image class="logo" src="/static/image/balance/transfer/feizhu.png" mode="aspectFit">
								</image>
							</view>
							<view class="banner-info" style="padding: 0;">
								<view class="text-content">
									<text class="b-title">飞猪旅行</text>
									<text class="b-desc">飞猪出行 超多折扣</text>
								</view>
								<view class="b-btn">领优惠</view>
							</view>

						</view>
						<view class="banner-footer"
							v-if="payData.style1.bannerUrl == '/static/image/balance/transfer/bottom-banner-2.png'">
							<view class="logo-box">
								<image class="logo" src="/static/image/balance/transfer/taobaoshangou.png"
									mode="aspectFit">
								</image>
							</view>
							<view class="banner-info" style="padding: 0;">
								<view class="text-content">
									<text class="b-title">淘宝闪购</text>
									<text class="b-desc">每天领大额外面红包</text>
								</view>
								<view class="b-btn">去领取</view>
							</view>
						</view>
					</view>
				</view>
			</template>
			<!-- 样式2 -->
			<template v-if="payData.styleType == 'style2'">
				<view class="pay-success-card">
					<image class="title-img" style="width: 106rpx;height: 28rpx;"
						src="/static/image/balance/pay-successful/zhifuyouli.png" mode="widthFix"></image>
					<view class="banner-footer" style="padding: 0 16rpx;">
						<view class="logo-box">
							<image class="logo" src="/static/image/balance/pay-successful/zhifufuli.png"
								mode="aspectFit">
							</image>
						</view>
						<view class="banner-info" style="border-top: none;">
							<view class="text-content">
								<text class="b-title">领取<text style="color: #EA4833;">今日</text>支付福利</text>
								<text class="b-desc">领优惠，支付更省钱</text>
							</view>
							<view class="b-btn">去看看</view>
						</view>
					</view>
					<view class="banner-footer" style="padding: 0 16rpx;"
						v-for="item, index in payData.style2.couponlist" :key="index">
						<view class="logo-box">
							<image class="logo" :src="item.imgUrl" mode="aspectFit">
							</image>
						</view>
						<view class="banner-info">
							<view class="text-content">
								<text class="b-title">
									<text v-if="item.price" style="color: #EA4833;">{{ item.price }}元</text>{{
										item.title
									}}</text>
								<text class="b-desc">
									<text class="b-desc-tag">{{ item.tag }}</text>
									{{ item.desc }}</text>
							</view>
							<view class="b-btn">{{ payData.style1.couponlist[0].butText }}</view>
						</view>

					</view>
				</view>
			</template>
			<template v-if="payData.styleType == 'style3'">
				<view style="padding: 24rpx 20rpx;margin-bottom: 24rpx;" class="pay-success-card">
					<text class="title">支付有礼</text>
					<view class="banner-box">
						<text class="banner-time">{{ payData.style3.bannerTime }}后过期</text>
						<image src="/static/image/balance/pay-successful/pengyipengbanner.png" style="width: 100%;"
							mode="widthFix"></image>
					</view>
				</view>

				<view class="promo-card" v-for="item, index in payData.style3.couponlist" :key="index">
					<view class="promo-left-box">
						<image class="img" :src="item.imgUrl" mode="aspectFill"></image>
					</view>
					<view class="promo-right">
						<view class="promo-content">
							<text class="promo-title">{{ item.title }}</text>
							<view class="promo-tags">
								<text class="tag">{{ item.tag }}</text>
								<text class="tag-desc">{{ item.desc }}</text>
							</view>
						</view>
						<view class="promo-right-box">

							<view class="price-box">
								<text class="p-num alipay-font">{{ item.price }}</text>
								<text class="p-unit">元</text>
							</view>
							<view class="free-btn">{{ item.butText }}</view>
						</view>
					</view>
				</view>
			</template>
		</view>


		<!-- 底部操作区 -->
		<view class="footer-section" :style="{'padding-bottom':($store.state.safeBottomAz+24)+'px'}">
			<view class="finish-btn" @click="goBack">完成</view>
		</view>
		<ZdySafeBottom bgColor="#f5f5f5"/>
	</view>

</template>

<script setup>
import {
	ref,
	onMounted,
	reactive,
	getCurrentInstance
} from 'vue';
import {
	onShow,
	onLoad
} from '@dcloudio/uni-app';
import {
	util
} from '@/utils/common.js';
import {
	defaultData
} from './data.json';

import ZdySafeBottom from '@/components/safeBottom/safeBottom.vue'
const {
	appContext,
	proxy
} = getCurrentInstance();

const statusBarHeight = ref(0);
const PAY_STORAGE_KEY = 'alipay_pay_successful_data';
const payData = ref(defaultData);

const bannerImages = [
	'/static/image/balance/transfer/bottom-banner-1.png',
	'/static/image/balance/transfer/bottom-banner-2.png'
];

// 从缓存加载数据
const loadStorageData = () => {
	const savedData = uni.getStorageSync(PAY_STORAGE_KEY);
	if (savedData) {
		payData.value = savedData;
	}
};
loadStorageData();

const navBarRef = ref(null);
const buttonGroup = ref([{
	name: '编辑支付数据',
	action: 'edit'
}]);
const handleButtonClick = (button) => {
	if (button.action === 'edit') {
		goEdit()
	}
};

const goEdit = () => {
	uni.navigateTo({
		url: '/pages/balance/pay-successful/edit'
	});
}

const toggleBanner = () => {
	const currentIndex = bannerImages.indexOf(payData.value.style1.bannerUrl);
	const nextIndex = (currentIndex + 1) % bannerImages.length;
	payData.value.style1.bannerUrl = bannerImages[nextIndex];
	uni.setStorageSync(PAY_STORAGE_KEY, payData.value);
};

onLoad(() => {
	// 进入支付成功页面埋点
	proxy.$apiUserEvent('all', {
		type: 'click',
		key: 'pay-successful',
		value: "支付成功"
	})
})

onMounted(() => {
	const systemInfo = uni.getSystemInfoSync();
	if (systemInfo.statusBarHeight) {
		statusBarHeight.value = systemInfo.statusBarHeight;
	}
});

onShow(() => {
	loadStorageData();
	// #ifdef APP-PLUS&&!APP-HARMONY
	util.setAndroidSystemBarColor('#F5F5F5')
	uni.setNavigationBarColor({
		animation: { // 动画效果
			duration: 100,
			timingFunc: 'easeIn'
		}
	})
	setTimeout(() => {
		plus.navigator.setStatusBarStyle("light");
	}, 500);
	// #endif
})

const goBack = () => {
	uni.navigateBack();
};
</script>

<style lang="less" scoped>
@import "@/common/main.css";

.container {
	min-height: 100vh;
	background-color: #F5F5F5;
}

.header-section {
	height: 860rpx;
	background: linear-gradient(181deg, #3884FD 60%, rgba(30, 128, 253, 0.5) 81.75%, rgba(30, 128, 253, 0) 100%);

	::v-deep .nav-bar-container {
		position: relative !important;
	}

	::v-deep .placeholder-box {
		display: none !important;
		background: transparent;
	}

	::v-deep .tipLayer {
		position: absolute;
	}

	::v-deep .uni-navbar__header-btns {
		width: 100px !important;
	}
}

.status-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 40rpx;
}


.nav-link {
	padding: 0 30rpx;
	text-align: right;
	font-size: 28rpx;
	line-height: 28rpx;
	color: #fff;
}

.success-info {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.pay-success-card {
	margin: 24rpx;
	margin-top: 16rpx;
	background-color: #FFFFFF;
	border-radius: 16rpx;
	margin-bottom: 0;

	.title-img {
		width: 106rpx;
		height: 28rpx;
		margin-top: 22rpx;
		margin-left: 16rpx;
	}

	.title {
		font-weight: 700;
		font-size: 24rpx;
		color: #252525;
		line-height: 24rpx;
	}

	.banner-box {
		position: relative;
		width: 660rpx;
		height: 166rpx;
		margin-top: 18rpx;

		.banner-time {
			position: absolute;
			z-index: 10;
			left: 156rpx;
			top: 68rpx;
			font-weight: 400;
			font-size: 20rpx;
			color: #C70B0C;
			line-height: 20rpx;
		}
	}
}

.status-box {
	display: flex;
	align-items: center;
	margin-top: 10rpx;
	height: 34rpx;

	.image {
		width: 34rpx;
		height: 34rpx;
		margin-right: 12rpx;
	}

	.status-text {
		font-size: 34rpx;
		color: #FFFFFF;
		font-weight: 500;
		line-height: 34rpx;
	}
}

.amount-box {
	display: flex;
	align-items: baseline;
	color: #fff;
	margin-top: 20rpx;
	margin-bottom: 60rpx;

	.symbol {
		font-size: 68rpx;
		margin-right: 4rpx;
	}

	.amount {
		font-size: 92rpx;
		line-height: 92rpx;
		font-weight: 500;
	}
}

.details-box {
	width: 100%;
	padding: 0 46rpx;

	.detail-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
		height: 26rpx;
		font-size: 26rpx;
		color: rgba(255, 255, 255, 0.9);

		text {
			font-size: 26rpx;
			color: rgba(255, 255, 255, 0.9);
			line-height: 26rpx;
		}

	}
}

.content-section {
	padding: 24rpx;
	padding-bottom: 16rpx;
	// background-color: #F5F5F5;
	border-radius: 30rpx 30rpx 0 0;
}

.card {
	background-color: #fff;
	border-radius: 20rpx;
	margin-bottom: 24rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
}

.fliggy-card {
	overflow: hidden;
	position: relative;

	.banner-img {
		width: 100%;
	}

	.guanggao-tag {
		position: absolute;
		top: 16rpx;
		right: 16rpx;
	}

	.yaoyiyao-container {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: -80rpx;
		padding-bottom: 16rpx;

		.yaoyiyao-box {
			padding: 12rpx 18rpx;
			display: flex;
			align-items: center;
			background-color: #000000;
			border-radius: 28rpx;
			opacity: 0.5;

			.img {
				width: 32rpx;
				height: 32rpx;
				margin-right: 14rpx;
			}

			.text {
				color: #FFFFFF;
				font-size: 24rpx;
				line-height: 24rpx;
			}

		}
	}

}

.banner-footer {
	padding: 24rpx;
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.logo-box {
		width: 76rpx;
		height: 76rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;

		.logo {
			width: 76rpx;
			height: 76rpx;
		}
	}


	.banner-info {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: 1rpx solid #F6F6F6;
		padding: 30rpx 0;


		.text-content {
			display: flex;
			flex-direction: column;
		}

		.b-title {
			font-size: 28rpx;
			line-height: 28rpx;
			color: #1A1A1A;
			font-weight: 500;
		}

		.b-desc {
			margin-top: 12rpx;
			font-size: 24rpx;
			line-height: 24rpx;
			color: #969696;

			.b-desc-tag {
				font-size: 24rpx;
				color: #E4711F;
				background-color: #FDF6F3;
				line-height: 24rpx;
				padding: 2px 4px;

			}
		}
	}

	.b-btn {
		padding: 0 20rpx;
		background-color: #FF3A31;
		color: #fff;
		font-size: 26rpx;
		height: 52rpx;
		line-height: 52rpx;
		border-radius: 8rpx;
	}

	&::after {
		content: '';
		position: absolute;
		background: url('/static/image/balance/pay-successful/more.png');
		top: 16rpx;
		right: 20rpx;
		width: 24rpx;
		height: 12rpx;
		background-size: contain;
		background-repeat: no-repeat;
	}
}

.footer-section {
	padding: 0px 40rpx 0;
	margin-top: 50rpx;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	display: flex;
	justify-content: center;
	padding-bottom: 24rpx;
	padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
	padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));

	.finish-btn {
		height: 84rpx;
		width: 390rpx;
		line-height: 84rpx;
		text-align: center;
		border: 1px solid #2172CA;
		border-radius: 42rpx;
		color: #2172CA;
		font-size: 32rpx;
		background-color: transparent;
	}
}

.main-content {
	position: absolute;
	left: 0;
	top: 190px;
	width: 100%;
}

.promo-card {
	// padding: 30rpx;
	margin: 16rpx;
	margin-bottom: 10rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;



	.promo-left-box {
		display: flex;
		align-items: center;
		padding: 34rpx;
		background-image: url("/static/image/balance/transfer/card-bg-2-left.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: center;
		height: 144rpx;
		margin-right: -1px;


		.img {
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
		}

	}



	.promo-right {
		height: 144rpx;
		background-image: url("/static/image/balance/transfer/card-bg-2-right.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: center;
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 32rpx 32rpx 24rpx;

		.promo-title {
			font-size: 28rpx;
			line-height: 28rpx;
			font-weight: 500;
			color: #1A1A1A;
		}

		.promo-tags {
			display: flex;
			align-items: center;
			margin-top: 8rpx;

			.tag {
				font-size: 24rpx;
				line-height: 34rpx;
				height: 34rpx;
				color: #EF673C;
				background-color: #FFF2F1;
				border-radius: 4rpx;
				margin-right: 12rpx;
				padding: 0 12rpx;
			}

			.tag-desc {
				font-size: 24rpx;
				line-height: 24rpx;
				color: #969696;
			}
		}


	}

	.promo-right-box {
		display: flex;
		flex-direction: column;
		align-items: center;

		.price-box {
			color: #F93950;

			.p-num {
				font-size: 34rpx;
				line-height: 24rpx;
				font-weight: 500;
			}

			.p-unit {
				font-size: 24rpx;
				line-height: 24rpx;
				margin-left: 2rpx;
			}
		}

		.free-btn {
			height: 52rpx;
			line-height: 52rpx;
			padding: 0 24rpx;
			background-color: #FA3A49;
			color: #fff;
			font-size: 24rpx;
			border-radius: 26rpx;
		}
	}
}
</style>