<template>
	<uni-popup id="privacy" type="center" ref="privacyPopup" :maskClick="false">
		<view class="ws-privacy-popup">
			<view class="ws-privacy-popup__header">
				<!--标题-->
				<view class="ws-picker__title">{{ title }}</view>
			</view>
			<view class="ws-privacy-popup__container">
				<text>{{ desc }}</text>
				<text class="ws-privacy-popup__container-protocol" @click="openPrivacyContract">{{ protocol }}</text>
				<text>{{ subDesc }}</text>
			</view>
			<view class="ws-privacy-popup__footer">
				<button class="is-disagree" id="disagree-btn" @click="handleDisagree">
					拒绝
				</button>
				<button class="is-agree" id="agree-btn" open-type="agreePrivacyAuthorization"
					@agreeprivacyauthorization="handleAgree">
					同意
				</button>
				
			</view>
		</view>
	</uni-popup>
</template>
<script>
	import {
		getContext,
		getComponent
	} from './util'
	const privacyResolves = new Set() // onNeedPrivacyAuthorization的reslove

	let privacyHandler = null
	// 注册监听
	if (uni.onNeedPrivacyAuthorization) {
		uni.onNeedPrivacyAuthorization((resolve) => {
			if (typeof privacyHandler === 'function') {
				privacyHandler(resolve)
			}
		})
	}

	export default {
		name: 'wsWxPrivacy',
		emits: ['disagree', 'agree'],
		props: {
			// 标题
			title: {
				type: String,
				default: '隐私保护指引'
			},
			// 描述
			desc: {
				type: String,
				default: '在使用当前小程序服务之前，请仔细阅读'
			},
			// 隐私保护指引名称
			protocol: {
				type: String,
				default: '《储蓄保一壶茶商户小程序隐私保护指引》'
			},
			// 子描述
			subDesc: {
				type: String,
				default: '。如果你同意《储蓄保一壶茶商户小程序隐私保护指引》，请点击“同意开始使用。”'
			}
		},
		mounted() {
			privacyHandler = (resolve) => {
				const context = getContext()
				const privacyPopup = getComponent(context, '#privacy-popup')
				if (privacyPopup) {
					const privacy = getComponent(privacyPopup, '#privacy')
					if (privacy && privacy.open) {
						privacy.open()
					}
				}
				privacyResolves.add(resolve)
			}
		},
		methods: {
			/**
			 * 打开隐私协议
			 */
			openPrivacyContract() {
				wx.openPrivacyContract({
					success: (res) => {
						console.log('openPrivacyContract success')
					},
					fail: (res) => {
						console.error('openPrivacyContract fail', res)
					}
				})
			},

			/**
			 * 拒绝隐私协议
			 */
			handleDisagree() {
				// uni.showToast({
				// 	title:'需要同意后，才能继续使用小程序',
				// 	icon:'none'
				// })
				this.$refs.privacyPopup.close()
				privacyResolves.forEach((resolve) => {
					resolve({
						event: 'disagree'
					})
				})
				privacyResolves.clear()
				this.$emit('disagree')
			},

			/**
			 * 同意隐私协议
			 */
			handleAgree() {
				this.$refs.privacyPopup.close()
				privacyResolves.forEach((resolve) => {
					resolve({
						event: 'agree',
						buttonId: 'agree-btn'
					})
				})
				privacyResolves.clear()
				this.$emit('agree')
			}
		}
	}
</script>
<style lang="scss" scoped>
	.ws-privacy-popup {
		width: 600rpx;
		padding: 48rpx;
		box-sizing: border-box;
		overflow: hidden;
		width: 560rpx;
		background: linear-gradient(180deg, #e5edff 0%, #ffffff 100%);
		border-radius: 24rpx;

		&__header {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 52rpx;
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 550;
			color: #1a1a1a;
			line-height: 52rpx;
			margin-bottom: 48rpx;
		}

		&__container {
			width: 100%;
			box-sizing: border-box;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 48rpx;
			margin-bottom: 48rpx;

			&-protocol {
				font-weight: 550;
				color: #1c64fd;
				text-decoration: underline;
			}
		}

		&__footer {
			justify-content: space-between;
			
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			border: none;
			

			width: 100%;
			height: 88rpx;
			
			.is-disagree {
				background: #fff;
				border-color: #909399;
				border-style: solid;
				border-width: 1rpx;
				
				width: 200rpx;
				height: 88rpx;
				border-radius: 16rpx;
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 200;
			}
			
			.is-agree {
				background: #1c64fd;
				color: #ffffff;
				
				width: 200rpx;
				height: 88rpx;
				border-radius: 16rpx;
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 200;
			}

			// button {
			// 	border: none;
			// 	outline: none;

			// 	&::after {
			// 		border: none;
			// 	}
			// }
		}
	}
</style>