<template>
  <div class="header">
    <h2>欢迎登录</h2>
    <p>账号登录</p>
  </div>

  <a-form :model="loginState" class="form" @finish="login">
    <a-form-item name="phone" :rules="[phoneRule]">
      <a-input
        v-model:value="loginState.phone"
        style="height: 50px"
        placeholder="请输入手机号"
      />
    </a-form-item>
    <a-form-item name="password" :rules="[passwordRule]">
      <a-input-password
        v-model:value="loginState.password"
        placeholder="请输入密码"
        style="height: 50px"
      />
    </a-form-item>
    <a-form-item>
      <a-form-item name="remember" no-style>
        <a-checkbox v-model:checked="loginState.remember">记住密码</a-checkbox>
      </a-form-item>
    </a-form-item>
    <a-form-item>
      <a-button
        type="primary"
        html-type="submit"
        block
        class="login-form-button"
        style="height: 50px"
      >
        登录
      </a-button>
    </a-form-item>
  </a-form>
  <div class="footer">
    <a :href="forgetLink">忘记密码</a>
    <a :href="registerLink">账号注册</a>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store'
import { router, RoutesName } from '@/router'
import { phoneRule, passwordRule, encodePwd, useCacheState } from './shared'
import { registerLink, forgetLink } from '@/env'

defineOptions<{ name: 'login' }>()

const [loginState, saveLoginState] = useCacheState()
const userStore = useUserStore()
const login = async () => {
  saveLoginState()
  await userStore.login({
    phone: loginState.value.phone,
    password: encodePwd(loginState.value.password)
  })
  router.push({ name: RoutesName.personal })
}
</script>

<style scoped lang="scss">
@import './shared/style.scss';
</style>
