<!--
  组件功能：  解决原生组件，双向绑定问题。 
  @author terrfly
  @site https://www.jeequan.com
  @date 2022/11/18 14:32
-->
<template>
    <view class="select-box" @click="changeFunc">
        <button class="agree-item" id="agree-btn" open-type="agreePrivacyAuthorization"
            @agreeprivacyauthorization="handAgree">
            <image v-if="props.checked" class="select-img" src="@/static/login/selected.svg"></image>
            <image v-else class="select-img" src="@/static/login/select.svg"></image>
        </button>
    </view>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'

// emit 父组件使用： v-model="val" 进行双向绑定。
const emit = defineEmits(['update:checked'])
onMounted(() => {
    // #ifdef MP-WEIXIN
    getPrivacy()
    // #endif
})
// 定义组件参数 
const props = defineProps({

    checked: { type: Boolean, default: false },

})
const vdata = reactive({})
function changeFunc () {
    emit('update:checked', !props.checked)
}
// 获取微信你用户是否同意过隐私政策
const getPrivacy = () => {
    wx.getPrivacySetting({
        success: (r) => {
            Object.assign(vdata, r)
            if (vdata.needAuthorization) {
                wx.onNeedPrivacyAuthorization(res => {
                    vdata.resolve = res
                })
            }
        }
    })
}
const handAgree = () => {
    // #ifdef MP-WEIXIN
    if (vdata.needAuthorization) {
        vdata.resolve({ buttonId: 'agree-btn', event: 'agree' })
    }
    // #endif
}
</script>
<style scoped lang="scss">
.select-box {
    display: inline;

    .select-img {
        width: 46rpx;
        height: 46rpx;
    }
}

.agree-item {
    padding: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 0;
    width: 46rpx;
    height: 46rpx;
    border-radius: 0;
    background-color: transparent;
}
</style>