<script lang="ts" setup>
import type { FormSubmitEvent } from '#ui/types'
import { object, string, type InferType } from 'yup'

definePageMeta({
  layout: 'authenticate',
})

useSeoMeta({
  title: '注册',
})

const router = useRouter()
const toast = useToast()
const loginState = useLoginState()

const final_loading = ref(false)

const registerState = reactive({
  username: '',
  password: '',
  mobile: '',
  company: '',
})

const registerSchema = object({
  username: string().required('请输入用户名'),
  password: string().required('请输入新密码').min(6, '密码长度至少为6位'),
  mobile: string()
    .required('请输入手机号')
    .matches(/^1[3-9]\d{9}$/, '手机号格式不正确'),
  company: string().required('请输入公司/单位名称'),
})

type RegisterSchema = InferType<typeof registerSchema>

const onSubmit = (form: RegisterSchema) => {
  final_loading.value = true
  useFetchWrapped<Partial<UserSchema>, BaseResponse<{ user_id: number }>>(
    'App.User_User.Register',
    {
      ...registerState,
    }
  ).then(
    (res) => {
      final_loading.value = false
      if (res) {
        toast.add({
          title: '注册成功',
          description: '请联系客服激活账号后登录',
          color: 'success',
          icon: 'i-tabler-check',
        })
        router.push('/user/authenticate')
      }
    },
    (err) => {
      final_loading.value = false
      toast.add({
        title: '注册失败',
        description: err.message || '注册失败，请稍后再试',
        color: 'error',
        icon: 'i-tabler-alert-triangle',
      })
    }
  )
}
</script>

<template>
  <div class="w-full min-h-screen flex flex-col justify-center items-center">
    <div class="flex flex-col items-center py-12 gap-2">
      <h1 class="text-3xl font-bold text-gray-900 dark:text-white">
        AIGC 微课视频研创平台
      </h1>
      <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">账号注册</p>
    </div>
    <div class="flex flex-col items-center">
      <UCard
        @submit.prevent="() => onSubmit(registerState)"
        class="w-full sm:w-100"
      >
        <!-- <template #header>
          <p
            class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
          >
            {{ item.label }}
          </p>
          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
            {{ item.description }}
          </p>
        </template> -->

        <div class="space-y-3">
          <UFormField
            label="姓名"
            name="username"
            help="请使用姓名作为用户名，将用于登录"
            required
          >
            <UInput
              v-model="registerState.username"
              :disabled="final_loading"
              required
            />
          </UFormField>
          <UFormField
            label="密码"
            name="password"
            required
          >
            <UInput
              v-model="registerState.password"
              :disabled="final_loading"
              type="password"
              required
            />
          </UFormField>
          <UFormField
            label="手机号"
            name="mobile"
            required
          >
            <UInput
              v-model="registerState.mobile"
              :disabled="final_loading"
              required
            />
          </UFormField>
          <UFormField
            label="公司/单位"
            name="company"
            required
          >
            <UInput
              v-model="registerState.company"
              :disabled="final_loading"
              required
            />
          </UFormField>
        </div>

        <template #footer>
          <div class="flex items-center justify-between">
            <UButton
              type="submit"
              color="neutral"
              :loading="final_loading"
            >
              注册
            </UButton>
          </div>
        </template>
      </UCard>
    </div>
    <div class="pt-4">
      <UButton
        color="neutral"
        variant="ghost"
        class="text-gray-500!"
        @click="
          () => {
            router.push('/user/authenticate')
          }
        "
      >
        已有账号，前往登录
      </UButton>
    </div>
  </div>
</template>

<style scoped></style>
