<script setup>
  import { navigateTo } from '@/utils/router'

  const isShow = defineModel({
    type: Boolean,
    default: false
  })
</script>

<template>
  <view class="agreement-checkbox">
    <view
      v-show="!isShow"
      class="checkbox-box"
      @click="isShow = true"
    ></view>
    <image
      v-show="isShow"
      src="/static/images/public/check-to-confirm.png"
      mode="aspectFit"
      class="left-icon"
      @click="isShow = false"
    ></image>
    <text class="text">我已阅读并同意</text>
    <text class="on" @click="navigateTo('/pages/login/protocol')">
      《用户权益》
    </text>
    <text class="text">与</text>
    <text class="on" @click="navigateTo('/pages/login/regime')">
      《隐私政策》
    </text>
  </view>
</template>

<style lang="scss" scoped>
  .agreement-checkbox {
    margin-top: 48px;
    display: flex;

    .checkbox-box,
    .left-icon {
      margin-right: 10rpx;
    }

    .checkbox-box {
      width: 32rpx;
      height: 32rpx;
      border-radius: 48rpx;
      border: 2rpx solid #999999;
    }
    .left-icon {
      width: 36.25rpx;
      height: 36.25rpx;
    }
    .text,
    .on {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 24rpx;
      color: #999999;
      font-style: normal;
      text-transform: none;
    }
    .on {
      color: #00d9c5;
    }
  }
</style>
