<template>
  <view class="register">
    <!-- 注册页面的主容器 -->
    <view class="con">
      <!-- 显示应用logo -->
      <image src="@/static/logo.png" />

      <!-- 登录表单 -->
      <view class="login-form">
        <!-- 账号输入项 -->
        <view :class="['item', errorTips == 1 ? 'error' : '']">
          <!-- 根据错误提示状态动态添加错误类 -->
          <view class="account">
            <text class="input-item">账号</text> <!-- 输入项标签 -->
            <input type="text"
                   data-type="account"
                   placeholder-class="inp-palcehoder"
                   placeholder="请输入账号名称"
                   @input="getInputVal" <!-- 监听输入事件，获取用户输入的值 -->
            />
          </view>
          <!-- 错误提示信息，仅当 errorTips 为 1 时显示 -->
          <view v-if="errorTips == 1" class="error-text">
            <text class="warning-icon">!</text> <!-- 警告图标 -->
            请输入账号！
          </view>
        </view>

        <!-- 密码输入项 -->
        <view :class="['item', errorTips == 2 ? 'error' : '']">
          <!-- 根据错误提示状态动态添加错误类 -->
          <view class="account">
            <text class="input-item">密码</text> <!-- 输入项标签 -->
            <input type="password"
                   data-type="password"
                   placeholder-class="inp-palcehoder"
                   placeholder="请输入密码"
                   @input="getInputVal" <!-- 监听输入事件，获取用户输入的值 -->
            />
          </view>
          <!-- 错误提示信息，仅当 errorTips 为 2 时显示 -->
          <view v-if="errorTips == 2" class="error-text">
            <text class="warning-icon">!</text> <!-- 警告图标 -->
            请输入密码！
          </view>
        </view>

        <!-- 操作区域 -->
        <view class="operate">
          <!-- 去登录链接 -->
          <view class="to-register" @tap="toLogin">
            已有账号？
            <text>去登录></text>
          </view>
        </view>
      </view>

      <!-- 按钮区域 -->
      <view>
        <!-- 注册按钮 -->
        <button class="authorized-btn" @tap="toRegister">
          注册
        </button>
        <!-- 返回首页按钮 -->
        <button class="to-idx-btn" @tap="toIndex">
          回到首页
        </button>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { encrypt } from '@/utils/crypto.js'; // 导入加密工具函数

  /**
   * 生命周期函数--监听页面显示
   */
  onShow(() => {
    // 设置页面头部导航标题
    uni.setNavigationBarTitle({
      title: '用户注册'
    });
  });

  // 定义响应式变量，用于存储用户输入的账号和密码
  const principal = ref(''); // 账号
  const credentials = ref(''); // 密码

  // 定义响应式变量，用于控制错误提示的状态
  const errorTips = ref(0); // 0: 无错误, 1: 账号输入错误, 2: 密码输入错误

  /**
   * 获取输入框的值
   * @param e - 触发事件对象
   */
  const getInputVal = (e) => {
    const type = e.currentTarget.dataset.type; // 获取输入框类型（账号或密码）
    if (type === 'account') {
      principal.value = e.detail.value; // 更新账号值
    } else if (type === 'password') {
      credentials.value = e.detail.value; // 更新密码值
    }
  };

  /**
   * 注册功能
   */
  const toRegister = () => {
    // 验证账号是否为空
    if (principal.value.length === 0) {
      errorTips.value = 1; // 设置错误提示为账号输入错误
    }
    // 验证密码是否为空
    else if (credentials.value.length === 0) {
      errorTips.value = 2; // 设置错误提示为密码输入错误
    }
    else {
      errorTips.value = 0; // 清除错误提示

      // 显示加载中提示
      uni.showLoading();

      // 发送注册请求
      http.request({
        url: '/user/register',
        method: 'post',
        data: {
          userName: principal.value, // 用户名
          passWord: encrypt(credentials.value) // 加密后的密码
        }
      })
        .then(() => {
          // 关闭加载中提示
          uni.hideLoading();

          // 显示注册成功提示
          uni.showToast({
            title: '注册成功，请登录',
            icon: 'none',
            duration: 1500
          });

          // 1.8秒后跳转到登录页面
          setTimeout(() => {
            uni.navigateTo({
              url: '/pages/accountLogin/accountLogin'
            });
          }, 1800);
        })
        .catch((error) => {
          console.error('注册失败:', error); // 处理注册失败的情况
          uni.hideLoading(); // 关闭加载中提示
          uni.showToast({
            title: '注册失败，请稍后再试',
            icon: 'none',
            duration: 1500
          });
        });
    }
  };

  /**
   * 跳转到登录页面
   */
  const toLogin = () => {
    uni.navigateTo({
      url: '/pages/accountLogin/accountLogin'
    });
  };

  /**
   * 回到首页
   */
  const toIndex = () => {
    uni.switchTab({
      url: '/pages/index/index'
    });
  };
</script>

<style lang="scss" scoped>
  @import "./register.scss"; /* 引入外部样式文件 */
</style>
