<template>
    <div class="auth-form-panel">
        <div class="logo">
            <img alt="RunForge" src="/logo.svg" height="40">
            <span class="title">RunForge | 用户注册</span>
        </div>

        <a-form size="large" ref="formRef" :model="form" :rules="[]" class="form" @submit="handleSubmit">
            <a-form-item field="username" hide-label
                :rules="[{ required: true, message: '用户名不能为空' }, { minLength: 4, maxLength: 12, message: '用户名长度需在4~12位间' }]"
                :validate-trigger="['change']">
                <a-input placeholder="请输入用户名" allow-clear v-model="form.username">
                    <template #prefix>
                        <icon-user />
                    </template>
                </a-input>
            </a-form-item>

            <a-form-item field="password" hide-label
                :rules="[{ required: true, message: '密码不能为空' }, { maxLength: 16, minLength: 8, message: '密码长度需在8~16位之间' }]"
                :validate-trigger="['change']">
                <a-input-password placeholder="请输入密码" allow-clear v-model="form.password">
                    <template #prefix>
                        <icon-lock />
                    </template>
                </a-input-password>
            </a-form-item>

            <a-form-item field="password2" hide-label
                :rules="[{ required: true, message: '请再次输入密码' }, { maxLength: 16, minLength: 8, message: '密码长度需在8~16位之间' }]"
                :validate-trigger="['change']">
                <a-input-password placeholder="请再次输入密码" allow-clear v-model="form.password2">
                    <template #prefix>
                        <icon-lock />
                    </template>
                </a-input-password>
            </a-form-item>

            <a-form-item field="email" hide-label :rules="[{ type: 'email', required: true, message: '请填写正确的邮箱地址' }]"
                :validate-trigger="['change']">
                <EmailAutoComplete placeholder="请输入邮箱" allow-clear v-model="form.email">
                    <template #prefix>
                        <icon-email />
                    </template>
                </EmailAutoComplete>
            </a-form-item>


            <a-form-item field="captcha" hide-label :rules="[{ length: 4, required: true, message: '请正确填写图片验证码' }]">
                <a-input placeholder="请输入图片验证码" allow-clear v-model="form.captcha">
                    <template #prefix>
                        <icon-check-circle />
                    </template>
                    <template #append>
                        <img alt="!点我重试" :src="ImageCaptcha" class="captcha" @click="getCaptcha()">
                    </template>
                </a-input>
            </a-form-item>

            <a-form-item field="code" hide-label :rules="[{ length: 6, required: true, message: '请正确填写邮箱验证码' }]">
                <a-input placeholder="请输入邮箱验证码" allow-clear v-model="form.code">
                    <template #prefix>
                        <icon-code-square />
                    </template>
                    <template #append>
                        <a-button type="text" style="width: 80px" @click="SendEmail" :disabled="state.smsSendBtn">
                            <span v-if="!state.smsSendBtn">获取验证码</span>
                            <span v-else>{{ state.time }} s</span>
                        </a-button>
                    </template>
                </a-input>
            </a-form-item>

            <a-button type="text" class="forgetpass" @click="emit('changeMode', 'login')">已有账号，去登录</a-button>

            <a-button :style="{ marginTop: '15px' }" class="formitem" type="primary" html-type="submit"
                :loading="state.okButton">立即注册</a-button>
        </a-form>
    </div>

</template>

<script setup>
import { getImageCaptcha, sendEmail, register } from '@/api/login'
import { Notification, Message } from '@arco-design/web-vue';
import { ref, reactive, defineEmits } from 'vue'

const emit = defineEmits(['changeMode'])

const formRef = ref(null)
let CaptchaId = ref('')
let ImageCaptcha = ref('')
let form = reactive({
    username: '',
    password: '',
    password2: '',
    email: '',
    code: '',
    captcha: ''
})
let state = reactive({
    smsSendBtn: false,
    time: 60,
    okButton: false
})

const SendEmail = async () => {
    try {
        const v = await formRef.value.validateField(['email', 'captcha'])
        if (v) return

        let email = form.email
        let text = form.captcha

        state.smsSendBtn = true
        const interval = window.setInterval(() => {
            if (state.time-- <= 0) {
                state.time = 60
                state.smsSendBtn = false
                window.clearInterval(interval)
            }
        }, 1000)

        Message.loading('验证码发送中..')

        const res = await sendEmail({ email, text, id: CaptchaId.value, type: 'register' })

        if (!res || res.code != 0) {
            state.time = 60
            state.smsSendBtn = false
            window.clearInterval(interval)
            getImageCaptcha()
            form.captcha = ''

            if (res.code === -10501) {
                return Notification.error({
                    title: '验证码输入错误',
                    content: res?.msg ?? '请求出现错误，请稍后再试'
                })
            }

            return Notification.error({
                title: '获取验证码失败',
                content: res?.msg ?? '请求出现错误，请稍后再试'
            })
        }
    } catch (error) {
        Message.error('验证码发送失败')
    }
}

const getCaptcha = async () => {
    try {
        const res = await getImageCaptcha()
        if (!res || res.code != 0)
            return requestFailed('获取图片验证码失败！' + res?.msg ?? '')
        ImageCaptcha.value = res.data.img
        CaptchaId.value = res.data.id
    } catch (error) {
        requestFailed('获取图片验证码失败！')
    }
}

getCaptcha()

const handleSubmit = async ({ values, errors }) => {
    try {
        state.okButton = true
        const v = await formRef.value.validate()
        if (v) return
        let data = { ...values }
        if (data.password !== data.password2) return Message.error('请确保两次输入的密码一致！')

        data.password = btoa(data.password)
        const res = await register(data)
        if(!res || res.code !== 0)
            return requestFailed(res.msg)
        Message.success('注册成功！请登录')
        emit('changeMode', 'login')
    } catch (error) {
        requestFailed(error.message)
    } finally {
        state.okButton = false
    }
}

const requestFailed = (msg) => {
    Notification.error({
        title: '错误',
        content: msg || '请求出现错误，请稍后再试',
    })
}
</script>

<style scoped lang="less">
@import '@/styles/auth-marketing.less';
</style>