<template>
    <view>
        <van-popup :show="showPrivacyPolicy" custom-class="privacy-policy-wrapper">
            <view class="privacy-policy">
                <view class="pp-title">服务协议和隐私条款</view>
                <!-- <text>《隐私政策》</text>和 -->
                <view class="pp-content">
                    欢迎您使用普瑞眼科BRIGHTEYEHOSPITAL小程序。请您仔细阅读并充分理解
                    <text @tap="onUserAgreement">《用户协议》</text>
                    和
                    <text @tap="openPrivacyContract">{{ privacyContractName }}</text>
                    ，如您同意全部内容，请点击“同意”开始使用我们的服务。
                </view>
                <view class="pp-btn-box">
                    <button class="btn btn-agree" open-type="agreePrivacyAuthorization" @agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意并继续</button>
                    <button class="btn btn-cancel" @tap="onDisAgree">不同意并退出</button>
                </view>
            </view>
        </van-popup>
    </view>
</template>

<script>
export default {
    data() {
        return {
            showPrivacyPolicy: false,
            privacyContractName: '《隐私政策》'
        };
    },
    props: {},
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },
    methods: {
        attached() {
            uni.getPrivacySetting({
                success: (res) => {
                    console.log(res); // 返回结果为: res = { needAuthorization: true/false,
                    if (res.needAuthorization) {
                        // 需要弹出隐私协议
                        this.onShowClose(true);
                    }
                }
            });
            uni.onNeedPrivacyAuthorization((resolve) => {
                // 需要用户同意隐私授权时
                this.resolvePrivacyAuthorization = resolve;
            });
            uni.requirePrivacyAuthorize({
                // 用户同意授权
                success: () => {
                    console.log('用户已同意授权');
                },

                // 用户拒绝授权
                fail: () => {
                    console.log('用户已拒绝授权');
                }
            });
        },

        onShowClose(bol) {
            this.setData({
                showPrivacyPolicy: bol
            });
        },

        handleAgreePrivacyAuthorization() {
            this.onShowClose(false);
            this.resolvePrivacyAuthorization({
                buttonId: 'agree-btn',
                event: 'agree'
            });
            // this.triggerEvent('agree', { buttonId: 'agree-btn', event: 'agree' })
        },

        onDisAgree() {
            this.resolvePrivacyAuthorization({
                buttonId: 'disagree-btn',
                event: 'disagree'
            });
            // this.triggerEvent('agree', { buttonId: 'disagree-btn', event: 'disagree' })
            uni.exitMiniProgram(); // 退出小程序
        },

        openPrivacyContract() {
            uni.openPrivacyContract({
                success: (res) => {
                    console.log('openPrivacyContract success', res); // 打开成功
                },

                fail: (err) => {
                    console.error('openPrivacyContract fail', err); // 打开失败
                    uni.showToast({
                        title: '协议打开失败',
                        icon: 'error'
                    });
                }
            });
        },

        onUserAgreement() {
            console.log('onUserAgreement hit');
            uni.navigateTo({
                url: '/pages/mine/userAgreement/userAgreement'
            });
        }
    },
    created: function () {}
};
</script>
<style>
.privacy-policy-wrapper {
    position: relative;
    z-index: 10000;
    border-radius: 10rpx;
}

.privacy-policy {
    width: 582rpx;
    padding: 30rpx;
}

.pp-title {
    font-size: 40rpx;
    font-weight: bold;
    text-align: center;
    padding-bottom: 30rpx;
}

.pp-content {
    text-align: justify;
}

.pp-content text {
    color: #2a82e4;
}

.pp-btn-box .btn {
    margin-top: 30rpx;
    background-color: transparent;
}
.pp-btn-box .btn-agree {
    background-color: #2a82e4;
    color: #fff;
}
.pp-btn-box .btn-agree:active {
    background-color: #075fc4;
}
.pp-btn-box .btn-cancel:active {
    background-color: rgba(0, 0, 0, 0.15);
}
</style>
