<template>
  <view class="privatePolicy">
    <view class="scal-box" @click="handleAgreePrivatePolicy">
      <!-- <u-checkbox-group :modelValue="isAgree" @change="handleAgreePrivatePolicy">
        <u-checkbox shape="circle" :activeColor="getStyleColorValueInfo()" name="isAgree">
        </u-checkbox>
      </u-checkbox-group>
      <view class="t-l" @click="handleAgreePrivatePolicy">我已阅读并同意</view> -->
      <label class="radio">
        <radio
          :checked="checked"
          style="transform: scale(0.7)"
          :color="getStyleColorValueInfo()"
        />我已阅读并同意
      </label>
    </view>
    <view class="text">
      <view class="t-r" @click.stop="onPolicy" :style="getStyleColorInfo()">
        {{ props.policyName }}
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
// 《居有屋隐私政策》
import { defineEmits, defineProps, ref, watch } from 'vue'
import { getStyleColorInfo, getStyleColorValueInfo } from '@/common/libraries/getPageConfig'
const isAgree = ref<string[]>([])
const checked = ref<boolean>(false)
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
  }
  console.log(isAgree.value, 'isAgree.value')
  if (checked.value) {
    // isAgree.value = []
    checked.value = false
  } else {
    // isAgree.value = ['isAgree']
    checked.value = true
  }
  emit('update:isAgree', checked.value)
}
</script>

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

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