<!--
 * @Date: 2025-06-05 11:06:42
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-06-05 11:08:29
 * @FilePath: /mlaj/src/components/ui/UserAgreement.vue
 * @Description: 文件描述
-->
<!--
 * @Description: 用户协议组件
-->
<template>
  <van-popup v-model:show="show" round position="bottom" :style="{ height: '90%' }" teleport="body">
    <div class="p-4">
      <div class="mb-4 text-center text-xl font-bold">生命力教育联盟宇宙用户协议</div>
      <div class="agreement-content h-[calc(100vh*0.8-120px)] overflow-y-auto px-2">
        <h2 class="mb-3 text-lg font-semibold">1. 协议的范围</h2>
        <p class="mb-4 text-gray-700">
          欢迎您使用生命力教育联盟宇宙平台服务！为使用生命力教育联盟宇宙平台服务，您应当阅读并遵守本《用户协议》。请您务必审慎阅读、充分理解各条款内容。
        </p>

        <h2 class="mb-3 text-lg font-semibold">2. 账号注册</h2>
        <p class="mb-4 text-gray-700">
          您在使用本服务前需要注册一个生命力教育联盟宇宙账号。生命力教育联盟宇宙账号应当使用手机号码绑定注册，请您使用尚未与生命力教育联盟宇宙账号绑定的手机号码，以及未被平台根据本协议封禁的手机号码注册。
        </p>

        <h2 class="mb-3 text-lg font-semibold">3. 用户个人信息保护</h2>
        <p class="mb-4 text-gray-700">
          我们非常重视用户个人信息的保护，保护用户个人信息是我们的基本原则之一。我们将会采取合理的措施保护用户的个人信息。除法律法规规定的情形外，未经用户许可我们不会向第三方公开、透露用户个人信息。
        </p>

        <h2 class="mb-3 text-lg font-semibold">4. 内容规范</h2>
        <p class="mb-4 text-gray-700">
          您在使用本服务时需要遵守法律法规、社会主义制度、国家利益、公民合法权益、公共秩序、社会道德风尚和信息真实性等七条底线。
        </p>

        <h2 class="mb-3 text-lg font-semibold">5. 知识产权</h2>
        <p class="mb-4 text-gray-700">
          生命力教育联盟宇宙平台所包含的全部智力成果，包括但不限于平台内容、平台设计、源代码等，均属于平台所有。未经平台许可，任何人不得擅自使用。
        </p>

        <h2 class="mb-3 text-lg font-semibold">6. 服务的变更、中断和终止</h2>
        <p class="mb-4 text-gray-700">
          我们可能会对服务内容进行变更，也可能会中断、中止或终止服务。对于付费服务，我们会在变更前通知您，并向您提供退款等必要的补偿。
        </p>

        <h2 class="mb-3 text-lg font-semibold">7. 违约处理</h2>
        <p class="mb-4 text-gray-700">
          如果您违反本协议约定，我们有权视情况采取预先警示、限制或禁止使用全部或部分服务功能、封禁账号等措施。
        </p>

        <h2 class="mb-3 text-lg font-semibold">8. 其他条款</h2>
        <p class="mb-4 text-gray-700">
          本协议所有条款的标题仅为阅读方便，本身并无实际涵义，不能作为本协议涵义解释的依据。如果本协议中任何一条被视为废止、无效或不可执行，应视为可分的且并不影响任何其余条款的有效性和可执行性。
        </p>
      </div>
      <div class="mt-4 flex justify-center">
        <van-button round type="primary" color="#4CAF50" block @click="handleClose"
          >我已阅读并同意</van-button
        >
      </div>
    </div>
  </van-popup>
</template>

<script setup>
import { ref, defineExpose } from 'vue'

const show = ref(false)

/**
 * @description 关闭协议弹窗
 */
const handleClose = () => {
  show.value = false
}

/**
 * @description 打开协议弹窗
 */
const openAgreement = () => {
  show.value = true
}

defineExpose({
  openAgreement,
})
</script>

<style lang="less" scoped>
.agreement-content {
  &::-webkit-scrollbar {
    width: 4px;
  }
  &::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 2px;
  }
  &::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 2px;
  }
  &::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
}
</style>