<!-- 注册页面 -->
<!-- 姓名 密码 重复密码 南大官邮 验证码 南大学号 角色（选择卡） -->
<!-- TODO:验证码 美化 后端提交  -->
<template>
  <div class="login-style">
    <div class="box-vessel">

      <!-- <div style="background-color: #8e8e8e; padding: 20px; width: 600px; border-radius: 5px; margin: 20px auto"> -->

      <div class="vessel-title">
        欢迎注册 SEEAI 平台账号
      </div>
      <!--角色-->
      <el-form label-position="right" label-width="65px" :rules="userRules" :model="userRegisterDTO" ref="formRef" :size="formSize">

        <el-form-item label="角色" prop="role">
          <el-select v-model="userRegisterDTO.role" placeholder="请选择注册账号的角色">
            <el-option v-for="item in roleOptions" :key="item.value" :label="item.label" :value="item.value"
              :disabled="item.disabled" />
          </el-select>
        </el-form-item>

        <!--姓名-->
        <el-form-item label="姓名" prop="name">
          <el-input v-model="userRegisterDTO.name" placeholder="请输入真实姓名"></el-input>
        </el-form-item>

        <!--学号-->
        <el-form-item label="学号" prop="officialNumber">
          <el-input v-model="userRegisterDTO.officialNumber" placeholder="请输入南大学号或工号"></el-input>
        </el-form-item>

        <!--邮箱-->
        <el-form-item label="邮箱" prop="officialEmail">
          <el-input v-model="userRegisterDTO.officialEmail" placeholder="例：xxx@smail.nju.edu.cn"></el-input>
        </el-form-item>
        <!-- 手机号 -->
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="userRegisterDTO.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>

        <!--密码-->
        <el-form-item label="密码" prop="password">
          <el-input v-model="userRegisterDTO.password" placeholder="请输入密码" show-password></el-input>
        </el-form-item>

        <!--输入验证码-->
          <el-form-item label="验证码" prop="verifyCode">
            <el-input v-model="userRegisterDTO.verifyCode" placeholder="输入验证码">
              <template #suffix>
                <el-button type="text" @click="sendRegisterVerifyCode" :disabled="isStart">
                  {{ isStart ? countdown : '获取验证码' }}
                </el-button>
              </template>
            </el-input>
          </el-form-item>

        <div style="display: flex; justify-content: center; align-items: center;">
          <el-button @click="register(formRef)" class="login-button">注册</el-button>
        </div>

        <!-- 返回登录页面，下划线灰色小字 -->
        <div style="display: flex; justify-content: center; align-items: center; margin-top: 10px;">
          <router-link to="/login" style="color: #8e8e8e; text-decoration: underline;">已有帐号，去登录？</router-link>
        </div>

      </el-form>

    </div>

  </div>



</template>

<script lang="ts" setup>
import "./index.scss";
import type { UserRegisterDTO } from "@/types/dto";
import { reactive, ref } from "vue";
import useApis from "@/apis";
import { Role } from "@/types/enums";
import { type ComponentSize, ElMessage, type FormInstance, type FormRules } from "element-plus";
import router from "@/router";
import { useCountdown } from '@/hooks/useCountdown';

const { start, isStart, countdown } = useCountdown();
const apis = useApis()
let userRegisterDTO = reactive<UserRegisterDTO>({} as UserRegisterDTO)

const roleOptions = [
  {
    label: "学生",
    value: Role.STUDENT,
    disabled: false
  },
  {
    label: "教师",
    value: Role.TEACHER,
    disabled: false
  },

]

const formSize = ref<ComponentSize>('default')
const formRef = ref<FormInstance>()
const userRules = reactive<FormRules<UserRegisterDTO>>({
  role: [
    {
      required: true,
      message: "角色不能为空",
      trigger: 'change'
    }
  ],
  name: [
    {
      required: true,
      message: "姓名不能为空",
      trigger: 'blur'
    }
  ],
  officialNumber: [
    {
      required: true,
      message: "学号不能为空",
      trigger: 'blur'
    }
  ],
  officialEmail: [
    {
      required: true,
      message: "邮箱不能为空",
      trigger: 'blur'
    }
  ],
  phone: [
    {
      required: true,
      message: "手机号不能为空",
      trigger: 'blur'
    }
  ],
  password: [
    {
      required: true,
      message: "密码不能为空",
      trigger: 'blur'
    }
  ],
  verifyCode: [
    {
      required: true,
      message: "验证码不能为空",
      trigger: 'blur'
    }
  ]
})

const register = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      apis.register(userRegisterDTO)
        .then((res: any) => {
          if (res.data.code === 200) {
            ElMessage({message: '注册成功', type: 'success'})
            router.push(`/login`)
          } else {
            ElMessage({message: '注册失败: ' + res.data.msg, type: 'error'})
          }
        })
        .catch((err: any) => {
          console.error(err);
          ElMessage({message: '注册失败',type: 'error'})
        })
        .finally(() => {});
    } else {
      ElMessage({message: '请将信息填写完整', type: 'warning'})
    }
  })

}

const sendRegisterVerifyCode = () => {
  start()
  apis.sendRegisterVerifyCode(userRegisterDTO.officialEmail)
    .then((res: any) => {
      if (res.data.code === 200) {
        ElMessage({message: '验证码发送成功，请前往您的邮箱查看', type: 'success'})
      } else {
        ElMessage({message: '验证码发送失败' + res.data.msg, type: 'error'})
      }
    })
    .catch((err: any) => {
      ElMessage({message: '验证码发送失败', type: 'error'})
      console.log(err)
    })
    .finally(() => {});
}
</script>

<script lang="ts">
export default {
  name: "Register"
}
</script>