<!--
 * @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="text-xl font-bold text-center mb-4">美乐爱觉宇宙用户协议</div>
      <div class="agreement-content overflow-y-auto h-[calc(100vh*0.8-120px)] px-2">
        <h2 class="text-lg font-semibold mb-3">1. 协议的范围</h2>
        <p class="mb-4 text-gray-700">欢迎您使用美乐爱觉宇宙平台服务！为使用美乐爱觉宇宙平台服务，您应当阅读并遵守本《用户协议》。请您务必审慎阅读、充分理解各条款内容。</p>

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

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

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

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

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

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

        <h2 class="text-lg font-semibold mb-3">8. 其他条款</h2>
        <p class="mb-4 text-gray-700">本协议所有条款的标题仅为阅读方便，本身并无实际涵义，不能作为本协议涵义解释的依据。如果本协议中任何一条被视为废止、无效或不可执行，应视为可分的且并不影响任何其余条款的有效性和可执行性。</p>
      </div>
      <div class="flex justify-center mt-4">
        <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);

const handleClose = () => {
  show.value = false;
};

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>