
<template>
	<div class="w-screen h-screen overflow-hidden flex">
		<div class="flex-1 bg-black">
			<el-image fit="cover" src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
				style="width: 100%; height: 100%" />
		</div>
		<div class="w-[500px] z-10 bg-white dark:bg-gray-800 p-8">
			<div class="mb-4 grid grid-cols-2 gap-2 justify-center pt-64">
				<button type="button" @click="switchMode('login')" class="w-full px-3 py-1.5 rounded text-sm"
					:class="mode === 'login' ? 'bg-blue-500 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'">
					登录
				</button>
				<button type="button" @click="switchMode('register')" class="w-full px-3 py-1.5 rounded text-sm"
					:class="mode === 'register' ? 'bg-blue-500 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'">
					注册
				</button>
			</div>
			<div class="mb-4">
				<h1 class="text-2xl font-bold" v-if="mode === 'login'">登录</h1>
				<h1 class="text-2xl font-bold" v-else>注册新用户</h1>
				<p class="text-sm text-gray-500" v-if="mode === 'login'">请输入手机号和密码进行登录</p>
				<p class="text-sm text-gray-500" v-else>请填写以下信息进行注册</p>
			</div>
			<el-form :model="form" :rules="rules" ref="formRef" class="space-y-4">
				<el-form-item prop="phone">
					<el-input v-model="form.phone" maxlength="11" placeholder="手机号" />
				</el-form-item>
				<template v-if="mode === 'login'">
					<el-form-item prop="password">
						<el-input v-model="form.password" type="password" maxlength="20" placeholder="密码" />
					</el-form-item>
				</template>
				<template v-else>
					<el-form-item prop="name">
						<el-input v-model="form.name" maxlength="20" placeholder="姓名" />
					</el-form-item>
					<el-form-item prop="password">
						<el-input v-model="form.password" type="password" maxlength="20" placeholder="设置密码" />
					</el-form-item>
					<el-form-item prop="password_repeat">
						<el-input v-model="form.password_repeat" type="password" maxlength="20" placeholder="重复密码" />
					</el-form-item>
					<el-form-item prop="invitationCode">
						<el-input v-model="form.invitationCode" maxlength="6" placeholder="邀请码" />
					</el-form-item>
					<el-form-item prop="code">
						<div class="flex items-center gap-2 w-full">
							<el-input v-model="form.code" maxlength="6" placeholder="验证码" />
							<el-button type="primary" @click="sendCode" :disabled="codeDisabled || !form.phone">
								{{ codeBtnText }}
							</el-button>
						</div>
					</el-form-item>
				</template>
			</el-form>
			<div class="mt-6">
				<el-button :type="mode === 'login' ? 'success' : 'warning'" plain class="w-full" :disabled="loading"
					@click="userLogin">
					<span v-if="!loading && mode === 'login'">立即登录</span>
					<span v-if="loading && mode === 'login'">登录中...</span>
					<span v-if="!loading && mode === 'register'">立即注册</span>
					<span v-if="loading && mode === 'register'">处理中...</span>
				</el-button>
			</div>
		</div>
		<div class="absolute bottom-2 left-6 text-white drop-shadow">
			<h2 class="text-xl">欢迎来到智慧英语</h2>
		</div>
	</div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import router from '@/router'
import { ElMessage } from 'element-plus'
import { login, getVerificationCode } from '@/api/user'
import { setToken } from '@/composables/auth'

const loading = ref(false)
const formRef = ref()
const mode = ref('login')
const codeDisabled = ref(false)
const codeBtnText = ref('发送验证码')
let timer = null
const form = reactive({
	phone: '',
	name: '',
	password: '',
	password_repeat: '',
	code: '',
	invitationCode: '',
})

const rules = {
	phone: [
		{ required: true, message: '请输入手机号', trigger: 'blur' },
		{ pattern: /^1[3-9]\d{9}$/, message: '请输入合法的手机号', trigger: ['blur', 'change'] },
	],
	password: [
		{ required: true, message: '请输入密码', trigger: 'blur' },
		{ min: 6, max: 20, message: '密码长度为6-20位', trigger: ['blur', 'change'] },
	],
	name: [
		{
			validator: (_r, v, cb) => {
				if (mode.value !== 'register') return cb()
				if (!v?.trim()) return cb(new Error('请输入姓名'))
				cb()
			}, trigger: ['blur', 'change']
		},
	],
	password_repeat: [
		{
			validator: (_r, v, cb) => {
				if (mode.value !== 'register') return cb()
				if (!v) return cb(new Error('请再次输入密码'))
				if (v !== form.password) return cb(new Error('两次密码不一致'))
				cb()
			}, trigger: ['blur', 'change']
		},
	],
	code: [
		{
			validator: (_r, v, cb) => {
				if (mode.value !== 'register') return cb()
				if (!v?.trim()) return cb(new Error('请输入验证码'))
				cb()
			}, trigger: ['blur', 'change']
		},
	],
}

async function userLogin() {
	if (loading.value) return
	formRef.value?.validate(async (valid) => {
		if (!valid) return
		loading.value = true
		try {
			const payload = mode.value === 'login'
				? {
					phone: form.phone.trim(),
					password: form.password.trim(),
				}
				: {
					phone: form.phone.trim(),
					name: form.name.trim(),
					password: form.password.trim(),
					code: form.code.trim(),
					invitationCode: form.invitationCode.trim()
				}
			const res = await login(payload)
			const data = res.data
			if (data?.success) {
				if (mode.value === 'login') {
					try { setToken(data.data) } catch { }
					ElMessage.success('登录成功')
					router.push('/')
				} else {
					ElMessage.success('注册成功')
					mode.value = 'login'
				}
			} else {
				ElMessage.error(data?.message || '登录失败')
			}
		} finally {
			loading.value = false
		}
	})
}

function switchMode(m) {
	mode.value = m
	formRef.value?.clearValidate()
}

async function sendCode() {
	if (!form.phone || codeDisabled.value) return
	codeDisabled.value = true
	try {
		await getVerificationCode({ phone: form.phone.trim() })
		ElMessage.success('验证码已发送')
		let count = 60
		codeBtnText.value = `${count}s`
		timer = setInterval(() => {
			count -= 1
			if (count <= 0) {
				clearInterval(timer)
				timer = null
				codeDisabled.value = false
				codeBtnText.value = '发送验证码'
			} else {
				codeBtnText.value = `${count}s`
			}
		}, 1000)
	} catch {
		codeDisabled.value = false
		codeBtnText.value = '发送验证码'
	}
}
</script>

<style scoped></style>
