<template>
  <view class="privatePolicy">
    <view class="scal-box" @click="handleAgreePrivatePolicy">
      <u-checkbox-group :modelValue="isAgree" @change="handleAgreePrivatePolicy">
        <u-checkbox shape="circle" :activeColor="props?.activeColor" name="isAgree"> </u-checkbox>
      </u-checkbox-group>
      <view class="t-l">我已阅读并同意</view>
    </view>
    <view class="text">
      <view class="t-r" @click.stop="onPolicy"> {{ props.policyName }} </view>
    </view>
  </view>
</template>

<script setup lang="ts">
// 《居有屋隐私政策》
import { defineEmits, defineProps, ref, watch } from 'vue'
const isAgree = ref<string[]>([])
const props = defineProps({
  isAgree: {
    type: Boolean,
    default: false
  },
  isDisabled: {
    type: Boolean,
    default: false
  },
  policyName: {
    type: String,
    default: '隐私政策名称'
  },
  activeColor: {
    type: String,
    default: '#2A7EFB'
  }
})
const emit = defineEmits<{
  (e: 'update:isAgree', data: boolean): void
  (e: 'clickPolicy'): void
  (e: 'clickCheckbox'): void
}>()

if (props.isAgree) {
  isAgree.value = ['isAgree']
} else {
  isAgree.value = []
}

watch(
  () => props?.isAgree,
  () => {
    if (isAgree.value) {
      isAgree.value = ['isAgree']
    } else {
      isAgree.value = []
    }
  }
)

const onPolicy = () => {
  emit('clickPolicy')
}

const handleAgreePrivatePolicy = () => {
  if (props.isDisabled) {
    // 禁用点击
    emit('clickCheckbox')
    isAgree.value = []
    emit('update:isAgree', false)
    return
  }

  let checkbox = false
  if (isAgree.value?.length) {
    isAgree.value = []
    checkbox = false
  } else {
    isAgree.value = ['isAgree']
    checkbox = true
  }
  emit('update:isAgree', checkbox)
}
</script>

<style lang="scss" scoped>
.privatePolicy {
  display: flex;
  align-items: center;
  justify-content: center;

  .scal-box {
    transform: scale(0.9);
    display: flex;
    align-items: center;
  }
  .text {
    display: flex;
    align-items: center;
    font-size: 26rpx;
    .t-r {
      color: #3b65a9;
    }
  }
}
</style>
