<template>
	<checkbox-group @change="changePolicy">
		<label>
			<view class="policy-box">
				<checkbox value="true" :checked="checked" color="#B60001" style="transform:scale(0.8)" />
				<text class="text">{{$t('index.mark-as-read')}}</text>
				<text class="policy" @click.stop="readAgreement">{{$t('index.agreement-title')}}</text>
				<text class="text">{{$t('index.and')}}</text>
				<text class="policy" @click.stop="readPolicy">{{$t('index.policy-title')}}</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: #B60001;
			vertical-align: middle;
		}

		.policy {
			color: #B60001;
			vertical-align: middle;
		}
	}
</style>