<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="phoneNumber">
        <n-input v-model:value="loginModel.phoneNumber" placeholder="手机号码" :maxlength="20" />
      </n-form-item>
      <n-form-item path="code">
        <div class="flex flex-1 gap-4">
          <n-input-otp
            block
            v-model:value="loginModel.code"
            :allow-input="onlyAllowNumber"
            style="gap: 0; flex: 2"
          />
          <n-button style="flex: 1" @click="getPhoneCodeFun">获取验证码</n-button>
        </div>
      </n-form-item>
      <n-form-item>
        <n-button :loading="loading" style="width: 100%" type="primary" @click="phoneLoginFun"
          >登录
        </n-button>
      </n-form-item>
      <n-form-item>
        <div class="flex-center flex-1 gap-4">
          <n-button class="flex-1" @click="router.push('/auth/login')"> 返回 </n-button>
        </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'
import { useRouter } from 'vue-router'

const router = useRouter()
const accountStore = useAccountStore()
const formRef = useTemplateRef<FormInst>('formRef')
const loginModel = reactive({
  phoneNumber: '',
  code: []
})
const loading = ref(false)

const onlyAllowNumber = (value: string) => !value || /^\d+$/.test(value)
const rules: FormRules = {
  phoneNumber: [
    {
      key: 'phoneNumber',
      required: true,
      trigger: ['blur'],
      validator: (rule: FormItemRule, value: string) => {
        if (!/^1[3-9]\d{9}$/.test(value)) {
          return new Error('请输入手机号码')
        }
        return true
      }
    }
  ],
  code: [
    {
      key: 'code',
      required: true,
      trigger: ['blur'],
      validator: (_, value: string[] | null) => {
        if (value === null) {
          return new Error('请输入验证码')
        }
        if (value.filter(Boolean).length !== 6) {
          return new Error('请输入验证码')
        }
        return true
      }
    }
  ]
}

const getPhoneCodeFun = () => {
  formRef.value?.validate(
    (errors) => {
      if (!errors) {
        console.log('获取验证码成功')
        // TODO 获取验证码方法
      }
    },
    (rule) => {
      if (rule.key === 'phoneNumber') {
        return true
      }
      return false
    }
  )
}
const phoneLoginFun = () => {
  formRef.value?.validate((errors) => {
    if (!errors) {
      loading.value = true
      console.log('登录成功')
      // TODO 登录方法
      accountStore.token = '123456'
      setTimeout(() => {
        loading.value = false
      }, 1000)
    }
  })
}
</script>

<style scoped></style>
