<template>
	<view>
		<view class="Protocol" @click="select">
			<u-checkbox-group v-model="checked">
				<u-checkbox shape="circle" label=" " :name="1"></u-checkbox>
			</u-checkbox-group>
			<view>
				我已阅读并同意<text style="color: #2d81ff;" @tap.stop ="openYonghu">《用户协议》</text>和<text style="color: #2d81ff;" @tap.stop="openYinSi">《隐私政策》</text>
			</view>
		</view>
		<UserAgreementPop ref="userAgreementPopRef" />
		<PrivacyPolicyPop ref="privacyPolicyPopRef" />
	</view>
</template>

<script>
	import UserAgreementPop from "@/components/UserAgreementPop/index.vue"
	import PrivacyPolicyPop from "@/components/PrivacyPolicyPop/index.vue"
	export default {
		name: 'Protocol',
		components: {
			UserAgreementPop,
			PrivacyPolicyPop
		},
		computed: {
			checked: {
				get() {
					if(!this.value) {
						return []
					} else {
						return [1]
					}
				},
				set(val) {
					console.log(val)
					if(val.length) {
						this.$emit('input', true)
					} else {
						this.$emit('input', false)
					}
				}
			}
		},
		model: {
			event: 'input',
			prop: 'value'
		},
		props: {
			value: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
			}
		},
		methods: {
			openYinSi() {
				this.$refs.privacyPolicyPopRef.open()
			},
			openYonghu() {
				this.$refs.userAgreementPopRef.open()
			},
			select() {
				if(this.checked.length) {
					this.checked = []
				} else {
					this.checked = [1]
				}
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.Protocol{
		display: flex;
		align-items: center;
		font-size: 26rpx;
	}
</style>