<template>
	<view class="container">
		<nav-bar bgColor="transparent" :isBack="false">
			<template v-slot:center>
				<view class="flex-cneter title-box flex" style="margin-top: 24rpx;">
					<image class="wx-logo" src="/static/image/other/payment-success/payment-success.png"></image>
					<text class="title">支付成功</text>
				</view>
			</template>
		</nav-bar>
		<view class="content-box flex-column flex-cneter" @click="editPaymentInfo">
			<image v-if="paymetInfo.userImg" class="user-img" :src="paymetInfo.userImg" mode="aspectFill"></image>
			<text class="product-name">{{ paymetInfo.productName }}</text>
			<view class="money flex wx-font-medium" :style="{ 'margin-top': paymetInfo.userImg ? '78rpx' : '46rpx' }">
				<image class="symbol" src="/static/image/other/payment-success/symbol-yuan.png"></image>{{
					Number(paymetInfo.money).toFixed(2) }}
			</view>
			<image v-if="paymetInfo.isAd" class="ad-img" src="/static/image/other/payment-success/ad-img.png"
				mode="widthFix">
			</image>
		</view>
		<view class="finish-butn" @click="util.goBack()">完成</view>

		<!-- 修改支付信息弹窗 -->
		<uni-popup ref="editPaymentInfoPopup" type="center">
			<view class="edit-popup">
				<view class="title">修改支付信息</view>
				<view class="input-item flex-align-center">
					<text class="label">用户头像</text>
					<view class="avatar-uploader flex-1">
						<view class="avatar-preview" v-if="paymetInfo.userImg">
							<image class="preview-img" :src="paymetInfo.userImg" mode="aspectFill"></image>
							<view class="delete-icon" @click="handleDeleteAvatar">×</view>
						</view>
						<view class="upload-btn" v-else @click="handleChooseAvatar">
							<text class="plus">+</text>
						</view>
					</view>
				</view>
				<view class="input-item flex-align-center">
					<text class="label"><text style="color: #FF3B30;">*</text>商品名称</text>
					<input class="flex-1" type="text" v-model="paymetInfo.productName" placeholder="请输入商品名称" />
				</view>
				<view class="input-item flex-align-center">
					<text class="label"><text style="color: #FF3B30;">*</text>支付金额</text>
					<input class="flex-1" type="digit" v-model="paymetInfo.money" placeholder="请输入支付金额" />
				</view>
				<view class="input-item flex-align-center">
					<text class="label">展示广告</text>
					<switch class="flex-1" :checked="paymetInfo.isAd" @change="paymetInfo.isAd = $event.detail.value"
						color="#16B264" style="transform:scale(0.8);transform-origin:left center;" />
				</view>
				<view class="btn-group flex">
					<view class="btn cancel flex-1" @click="editPaymentInfoPopup.close()">取消</view>
					<view style="width: 30rpx;"></view>
					<view class="btn confirm flex-1" @click="confirmEditPaymentInfo">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>

	<!-- 水印 -->
	<view v-if="$isVip()">
		<watermark dark="light" source="uni_alipay_other_wx_pay_success" />
		<liu-drag-button :canDocking="false"
			@clickBtn="$goRechargePage('watermark', 'uni_alipay_other_wx_pay_success')">
			<image src='/static/lottie/watermark.gif' mode="widthFix" style="width:94px;height:74px;" ></image>
		</liu-drag-button>
	</view>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue';
import { onShow, onLoad } from '@dcloudio/uni-app';
import { util } from '@/utils/common';
import { storage } from '@/utils/storage';

const {
	proxy
} = getCurrentInstance();

const editPaymentInfoPopup = ref(null);

const editPaymentInfo = () => {
	editPaymentInfoPopup.value.open('center');
}

const handleChooseAvatar = () => {
	uni.chooseImage({
		count: 1,
		success: (res) => {
			const tempFilePath = res.tempFilePaths[0];
			// #ifndef H5
			uni.saveFile({
				tempFilePath: tempFilePath,
				success: (saveRes) => {
					if (paymetInfo.value.userImg && !paymetInfo.value.userImg.startsWith('/static/')) {
						uni.removeSavedFile({ filePath: paymetInfo.value.userImg });
					}
					paymetInfo.value.userImg = saveRes.savedFilePath;
				}
			});
			// #endif
			// #ifdef H5
			paymetInfo.value.userImg = tempFilePath;
			// #endif
		}
	});
};

const handleDeleteAvatar = () => {
	// #ifndef H5
	if (paymetInfo.value.userImg && !paymetInfo.value.userImg.startsWith('/static/')) {
		uni.removeSavedFile({ filePath: paymetInfo.value.userImg });
	}
	// #endif
	paymetInfo.value.userImg = '';
};

const confirmEditPaymentInfo = () => {
	editPaymentInfoPopup.value.close();
	storage.set('wx_payment_success_info', paymetInfo.value);
}

const buttonGroup = [
	{
		name: "修改支付信息",
		click: () => {
			editPaymentInfo()
		}
	}
]


const paymetInfo = ref({
	userImg: '',
	productName: '王者荣耀',
	money: 298,
	isAd: false,
});

onShow(() => {
	// #ifdef APP-PLUS&&!APP-HARMONY
	util.setAndroidSystemBarColor('#FFFFFF')
	setTimeout(() => {
		plus.navigator.setStatusBarStyle("dark");
	}, 500)
	// #endif
})

onLoad(async () => {
	const cachedInfo = storage.get('wx_payment_success_info');
	if (cachedInfo) {
		paymetInfo.value = cachedInfo;
	} else {
		paymetInfo.value = { productName: '王者荣耀', money: 168 };
	}

	// 微信支付成功页面埋点
	proxy.$apiUserEvent('all', {
		type: 'event',
		key: 'wx_pay_success',
		prefix: '.uni.other.',
		value: "微信支付成功"
	})

})
</script>

<style lang="less" scoped>
.title-box {
	.wx-logo {
		width: 40rpx;
		height: 36rpx;
	}

	.title {
		font-size: 32rpx;
		color: #16B264;
		line-height: 32rpx;
		font-weight: 500;
		margin-left: 10rpx;
	}
}

.content-box {
	margin-top: 162rpx;
	align-items: center;

	.user-img {
		width: 94rpx;
		height: 94rpx;
		border-radius: 50%;
		background-color: #D8D8D8;
		transform: translateY(-50%);
	}

	.product-name {
		font-size: 32rpx;
		color: #1A1A1A;
		line-height: 32rpx;
		text-align: center;
	}

	.money {
		align-items: center;
		justify-content: center;
		margin-top: 46rpx;
		font-weight: 500;
		font-size: 88rpx;
		color: #1A1A1A;
		line-height: 88rpx;

		.symbol {
			width: 32rpx;
			height: 46rpx;
			margin-right: 20rpx;
		}
	}

	.ad-img {
		margin-top: 100rpx;
		width: 654rpx;
	}
}

.finish-butn {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	width: 348rpx;
	height: 92rpx;
	background-color: #F1F1F1;
	color: #1A1A1A;
	line-height: 92rpx;
	font-size: 28rpx;
	font-weight: 500;
	border-radius: 12rpx;
	text-align: center;
	margin: 0 auto;
	bottom: 170rpx;
	bottom: calc(170rpx + env(safe-area-inset-bottom));
	bottom: calc(170rpx + constant(safe-area-inset-bottom));
}

.edit-popup {
	width: 600rpx;
	background-color: #FFFFFF;
	border-radius: 24rpx;
	padding: 40rpx;
	box-sizing: border-box;

	.title {
		font-size: 32rpx;
		color: #1A1A1A;
		font-weight: 500;
		text-align: center;
		margin-bottom: 40rpx;
	}

	.input-item {
		margin-bottom: 30rpx;

		.label {
			font-size: 28rpx;
			color: #1A1A1A;
			width: 140rpx;
		}

		input {
			height: 72rpx;
			background-color: #F8F8F8;
			border-radius: 12rpx;
			padding: 0 20rpx;
			font-size: 28rpx;
			color: #1A1A1A;
		}

		.avatar-uploader {
			display: flex;
			align-items: center;

			.upload-btn {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				background-color: #F8F8F8;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 2rpx dashed #CCCCCC;

				.plus {
					font-size: 60rpx;
					color: #999;
					font-weight: 300;
					margin-top: -6rpx;
				}
			}

			.avatar-preview {
				position: relative;
				width: 100rpx;
				height: 100rpx;

				.preview-img {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}

				.delete-icon {
					position: absolute;
					top: -4rpx;
					right: -4rpx;
					width: 32rpx;
					height: 32rpx;
					background-color: red;
					color: #fff;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 30rpx;
					line-height: 28rpx;
				}
			}
		}
	}

	.btn-group {
		margin-top: 50rpx;
		justify-content: space-between;

		.btn {
			height: 80rpx;
			border-radius: 12rpx;
			text-align: center;
			line-height: 80rpx;
			font-size: 30rpx;

			&.cancel {
				background-color: #F1F1F1;
				color: #333333;
			}

			&.confirm {
				background-color: #3b82f6;
				color: #FFFFFF;
			}
		}
	}
}
</style>
<style>
@import '/common/main.css';

page {
	background-color: #FFFFFF;
}
</style>
