<template>
	<checkbox-group @change="changePolicy">
		<label>
			<view class="policy-box">
				<checkbox value="true" :checked="checked" color="#1677FF" style="transform:scale(0.8)" />
				<text class="text">我已阅读并同意</text>
				<text class="policy" @click.stop="readAgreement">《用户服务协议》</text>
				<text class="text">和</text>
				<text class="policy" @click.stop="readPolicy">《隐私政策》</text>
			</view>
		</label>
	</checkbox-group>
</template>

<script>
export default {
    props: {
		checked: {
			type: Boolean,
			default: false
		}
	},
    methods: {
		changePolicy(e) {
			this.$emit('change', e.detail.value.length)
		},
		readPolicy() {
			uni.navigateTo({
				url: '/pages/policy/policy'
			})
		},
		readAgreement() {
			uni.navigateTo({
				url: '/pages/policy/agreement'
			})
		}
    }
}
</script>

<style lang="scss">
.policy-box {
	padding: 0 30rpx;
	font-size: 14px;
	vertical-align: middle;

	.text {
		color: #191A23;
		vertical-align: middle;
	}
	.policy {
		color: #1677FF;
		vertical-align: middle;
	}
}
</style>