<template>
  <div class="flex-col-center">
    <div class="w-full">
      <h2 class="text-3xl/9 mb-3 font-bold lg:text-4xl">欢迎回来 👋🏻</h2>
      <p>
        <span style="color: #71717a">登录账号以进入对战</span>
      </p>
    </div>
    <n-form
      ref="formRef"
      :model="loginModel"
      :rules="rules"
      :show-label="false"
      class="w-full mt-10"
    >
      <n-form-item path="username">
        <n-input v-model:value="loginModel.username" placeholder="请输入账号" :maxlength="20" />
      </n-form-item>
      <n-form-item path="password">
        <n-input
          v-model:value="loginModel.password"
          type="password"
          show-password-on="mousedown"
          placeholder="密码"
          :maxlength="20"
        />
      </n-form-item>
      <n-form-item>
        <div class="flex flex-1 items-center justify-between">
          <n-checkbox>记住账号</n-checkbox>
          <a href="javascript:void(0)" style="color: #2080f0">忘记密码？</a>
        </div>
      </n-form-item>
      <n-form-item>
        <n-button :loading="loginLoading" style="width: 100%" type="primary" @click="userLoginFun"
          >登录</n-button
        >
      </n-form-item>
      <n-form-item>
        <div class="flex-center flex-1">
          <span>没有账号？</span>
          <router-link to="/auth/register" style="color: #2080f0">注册</router-link>
        </div>
      </n-form-item>
    </n-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, useTemplateRef } from 'vue'
import type { FormItemRule, FormRules, FormInst } from 'naive-ui'
import { useAccountStore } from '@/stores'

const accountStore = useAccountStore()
const formRef = useTemplateRef<FormInst>('formRef')
const loginModel = reactive({
  username: '',
  password: ''
})
const loginLoading = ref(false)

const rules: FormRules = {
  username: [
    {
      required: true,
      message: '请输入登陆账号',
      trigger: ['blur'],
      validator: (rule: FormItemRule, value: string) => {
        if (value.length < 2) {
          return new Error('账号长度不能小于2位')
        } else if (value.length > 20) {
          return new Error('账号长度不能大于20位')
        } else if (!/^[A-Za-z][A-Za-z0-9]*$/.test(value)) {
          return new Error('账号以字母开头，只能包含字母和数字')
        }
        return true
      }
    }
  ],
  password: [
    {
      required: true,
      message: '请输入登陆密码',
      trigger: ['blur'],
      validator: (rule: FormItemRule, value: string) => {
        if (value.length < 6) {
          return new Error('密码长度不能小于6位')
        } else if (value.length > 20) {
          return new Error('密码长度不能大于20位')
        } else if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).+$/.test(value)) {
          return new Error('密码必须包含大小写字母和数字')
        }
        return true
      }
    }
  ]
}

const userLoginFun = () => {
  formRef.value?.validate((errors) => {
    if (!errors) {
      loginLoading.value = true
      console.log('登录成功')
      // TODO 登录方法
      accountStore.token = '123456'
      setTimeout(() => {
        loginLoading.value = false
      }, 1000)
    }
  })
}
</script>

<style scoped></style>
