<template>
	<view class="mt-18rpx flex items-center">
		<u-checkbox-group
			v-model="checked"
			placement="row"
			shape="circle"
			iconPlacement="left"
			labelColor="#666"
			labelSize="24rpx"
			@change="handleChange"
			:disabled="disabled"
		>
			<u-checkbox activeColor="#FF8CA6" name="1"></u-checkbox>
			<!-- label="我已阅读并同意" -->
		</u-checkbox-group>
		<view
			class="text-24rpx opacity-70 ml-0 text-#666"
			@click="handleAgreeCheck"
		>
			我已阅读并同意
			<text
				class="text-#FF8CA6 active:text-primary-700"
				@click.stop="handleAgree"
			>
				《服务条款》
			</text>
			同意书
		</view>
	</view>
</template>

<script setup>
const prop = defineProps({
	agreed: {
		type: Boolean,
		default: () => false
	},
	disabled: {
		type: Boolean,
		default: () => false
	}
})
const checked = ref([false])
const emit = defineEmits(['update:agreed'])
const instance = getCurrentInstance()
const { $Router } = instance.proxy
watchEffect(() => {
	checked.value[0] = prop.agreed ? '1' : ''
})

const handleAgree = () => {
	$Router.push({ path: '/pages/statement/index' })
}
const handleAgreeCheck = () => {
	checked.value[0] = checked.value[0] === '1' ? '' : '1'
	emit('update:agreed', !!checked.value[0])
}
const handleChange = () => {
	emit('update:agreed', !!checked.value[0])
}
</script>

<style lang="scss" scoped>
:v-deep {
	.u-checkbox {
		uni-text,
		span {
			font-size: 24rpx !important;
			color: #666 !important;
		}
	}
}
</style>
