<template>
	<view class="wrapper">
		<view class="title">恭喜您，开户成功！</view>
		<view class="result" style="margin-top: 36rpx;" @click="copyUrlClick">请复制网址 <span
				style="color: #409EFE; font-size: 22rpx;">{{copyUrl}}</span> 前往电脑端投保</view>
		<view class="result">联系电话：{{contect}}</view>
		
		<view class="image_wrapper">
			<image class="image" show-menu-by-longpress :src="imageUrl" mode="aspectFill"></image>
		</view>
		<view class="image_title">关注公众号，及时获取最新通知</view>
		
		<view class="bottom_wrapper fixed-bottom">
			<view class="bottom_title">如有问题请联系销售或拨打全国客服热线</view>
			<view class="bottom_title">{{contect}}</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { getCurrentInstance, nextTick, ref, computed } from 'vue'
	import { onLoad, onUnload } from '@dcloudio/uni-app'
	import registerApi from '@/api/register'

	const userInfo = ref({})
	const imageUrl = ref('')
	const copyUrl = ref('https://www.zhihangtech.com')
	const contect = ref('')
	onLoad(() => {
		getUserInfo()
	})

	function getUserInfo() {
		registerApi.getUserInfo().then((res) => {
			userInfo.value = res.user
			requestCode()
		}).catch((error) => {
		})
		registerApi.getNotice({ type: 'linkPhone' }).then((res) => {
			
			if (res.data.noticeContent) {
				contect.value = res.data.noticeContent.replace(/<[^>]*>/g, '');
			}
		}).catch(() => {
			
		})
	}
	function requestCode() {
		let userId = `u=${userInfo.value.userId}`
		console.log('sceneStr: ', userId)
		registerApi.getFollowCode({ sceneStr: userId }).then((res) => {
			console.log('getFollowCode', res)
			imageUrl.value = res.data
		}).catch((error) => {

		})
	}
	function copyUrlClick() {
		uni.setClipboardData({
			data: copyUrl.value,
			success: () => {
				uni.showToast({
					title: '复制成功',
					icon: 'none'
				});
			},
			fail: (err) => {
				uni.showToast({
					title: '复制失败',
					icon: 'none'
				});
			}
		});
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		display: flex;
		position: relative;
		width: 100vw;
		height: 100vh;
		flex-direction: column;
		align-items: center;

		.title {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 160rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 52rpx;
			color: #409EFE;
			line-height: 73rpx;
			text-align: right;
			font-style: normal;
		}

		.result {
			display: flex;
			justify-content: center;
			align-items: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #000000;
			line-height: 37rpx;
			text-align: right;
			font-style: normal;
		}

		.image_wrapper {
			display: flex;
			width: 480rpx;
			height: 549rpx;
			margin-top: 80rpx;

			.image {
				width: 480rpx;
				height: 549rpx;
			}
		}

		.image_title {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #808080;
			line-height: 37rpx;
			text-align: right;
			font-style: normal;
		}

		.bottom_wrapper {
			display: flex;
			flex-direction: column;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 40rpx;
			z-index: 10;

			.bottom_title {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				margin-bottom: 20rpx;
				color: #6b6d73;
			}
		}
	}
</style>