<template>
	<uni-popup ref="privacyPopup" type="center" :is-mask-click="true">
		<view class="privacyPopup">
			<view class="title">
				<view class="title_circle"></view>
				<view>用户隐私保护提示</view>
			</view>
			<view class="content_pri">
				<text>感谢您使用本产品，您使用本产品前应当仔细阅读并同意</text>
				<text style="color: #1793ee;" @click="goToPrivacy">《小程序隐私保护指引》</text>。
				<text>当您点击“同意”并开始使用产品服务时，即表示你已理解并同意该条款内容，该条款将对您产生法律约束力。如您拒绝，将无法更好的体验产品。</text>
			</view>
			<view class="pri_btn">
				<button class="confuse_btn" @click="confusePrivacy">拒绝</button>
				<button class="confirm_btn" id="agree-btn" open-type="agreePrivacyAuthorization" @agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
			</view>
		</view>
	</uni-popup>
</template>


<script setup>
	import { nextTick, onMounted, ref } from "vue";
	
	const privacyPopup = ref();
	const resolvePrivacyAuthorization = ref();
	const init = (resolve)=>{
		privacyPopup.value?.open()
		resolvePrivacyAuthorization.value = resolve
	}
	
	// 打开隐私协议
	const goToPrivacy = ()=>{
		wx.openPrivacyContract({
			success: () => {
				console.log('打开成功');
			},
			fail: () => {
				uni.showToast({
					title:'打开失败，稍后重试',
					icon: 'none'
				})
			}
		})
	}
	
	// 同意
	const handleAgreePrivacyAuthorization = ()=>{
		// 告知平台用户已经同意，参数传同意按钮的id
		resolvePrivacyAuthorization.value({ buttonId: 'agree-btn', event: 'agree' })
		privacyPopup.value?.close()
	}
	
	// 拒绝
	const confusePrivacy = ()=>{
		privacyPopup.value?.close()
		resolvePrivacyAuthorization.value({ event:'disagree' })
	}
	
	const open = ()=>{
		nextTick(()=>{
			privacyPopup.value?.open()
		})
	}
	
	const close = ()=>{
		nextTick(()=>{
			privacyPopup.value?.close()
		})
	}
	
	defineExpose({
		init: init,
		open: open,
		close: close
	});
	
</script>

<style lang="scss" scoped>
	.privacyPopup{
		width: 520rpx;
		background-color: #fff;
		border-radius: 50rpx;
		padding: 20rpx 40rpx;
	}
	.title{
		display: flex;
		align-items: center;
		justify-content: flex-start;
		margin: 20rpx 0;
		font-size: 38rpx;
		font-weight: 600;
		.title_circle{
			width: 60rpx;
			height: 60rpx;
			background-color: #efefef;
			border-radius: 50%;
			margin-right: 20rpx;
		}
	}
	.content_pri{
		width: 480rpx;
		margin: 0 auto;
		font-size: 34rpx;
		line-height: 1.5;
	}
	.pri_btn{
		width: 100%;
		height: 158rpx;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
	}
	.pri_btn .confuse_btn,.pri_btn .confirm_btn{
		width: 200rpx;
		height: 90rpx;
		border-radius: 20rpx;
		font-size: 34rpx;
	}
	.pri_btn .confuse_btn{
		background-color: #eee;
		color: #52bf6b;
	}
	.pri_btn .confirm_btn{
		background-color: #52bf6b;
		color: #fff;
	}
</style>