<template>
	<el-form ref="registerFormRef" :model="registerForm" :rules="registerRules" @keyup.enter="onRegister">
		<el-form-item prop="username">
			<el-input v-model="registerForm.username" :prefix-icon="User" :placeholder="$t('app.username')"></el-input>
		</el-form-item>
		<el-form-item prop="password">
			<el-input v-model="registerForm.password" :prefix-icon="Lock" show-password :placeholder="$t('app.password')"></el-input>
		</el-form-item>
		<el-form-item prop="rePassword">
			<el-input v-model="registerForm.rePassword" :prefix-icon="Lock" show-password :placeholder="$t('app.rePassword')"></el-input>
		</el-form-item>
		<el-form-item class="register-button">
			<el-button type="primary" @click="onRegister()">{{ $t('app.signIn') }}</el-button>
		</el-form-item>
	</el-form>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { User, Lock } from '@element-plus/icons-vue'
import { useUserStore } from '@/store/modules/user'
import { useCaptchaApi, useCaptchaEnabledApi, userRegisterApi } from '@/api/auth'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import constant from '@/utils/constant'
import { sm2Encrypt } from '@/utils/smCrypto'
import { ElNotification } from 'element-plus'

const userStore = useUserStore()
const router = useRouter()
const { t } = useI18n()
const registerFormRef = ref()
const captchaBase64 = ref()

const registerForm = reactive({
	username: '',
	password: '',
	rePassword: ''
})

const registerRules = ref({
	username: [{ required: true, message: t('required'), trigger: 'blur' }],
	password: [{ required: true, message: t('required'), trigger: 'blur' }],
	rePassword: [{ required: true, message: t('required'), trigger: 'blur' }]
})

// 是否显示验证码
const captchaVisible = ref(false)

onMounted(() => {
	onCaptchaEnabled()
})

const onCaptchaEnabled = async () => {
	const { data } = await useCaptchaEnabledApi()
	captchaVisible.value = data

	if (data) {
		await onCaptcha()
	}
}

const onCaptcha = async () => {
	const { data } = await useCaptchaApi()
	if (data.enabled) {
		captchaVisible.value = true
	}
	captchaBase64.value = data.image
}

const onRegister = () => {
	registerFormRef.value.validate((valid: boolean) => {
		if (!valid) {
			return false
		}

		if (registerForm.password != registerForm.rePassword) {
			ElNotification({
				title: '两次输入的密码不一样！',
				type: 'error'
			})
			return
		}

		// 重新封装登录数据
		const registerData = {
			username: registerForm.username,
			password: sm2Encrypt(registerForm.password)
		}

		// TODO：用户注册接口的调用

		// 用户注册
		// userRegisterApi(registerData).then(res => {
		// 	ElNotification({
		// 		title: '注册成功！！！',
		// 		type: 'success'
		// 	})
		// })
	})
}
</script>

<style lang="scss" scoped>
.register-captcha {
	:deep(.el-input) {
		width: 200px;
	}
}

.register-captcha img {
	width: 150px;
	height: 40px;
	margin: 5px 0 0 10px;
	cursor: pointer;
}

.register-button {
	:deep(.el-button--primary) {
		margin-top: 10px;
		width: 100%;
		height: 45px;
		font-size: 18px;
		letter-spacing: 8px;
	}
}
</style>
