<template>
  <app-view class="login">
    <template #header>
      <app-navbar title="登录" :show-back-button="hasHistory()" />
    </template>
    <div class="login-logo">用户登录</div>
    <Form @submit="formSubmit">
      <CellGroup inset>
        <Field v-model="formData.userName" name="account" label="用户名" placeholder="请输入用户名"
          :rules="[{ required: true, message: '随便输入' }]" />
        <Field v-model="formData.password" name="password" type="password" label="密码" placeholder="请输入密码"
          :rules="[{ required: true, message: '随便输入' }]" autocomplete="on" />
      </CellGroup>
      <div class="login-button">
        <Button type="primary" native-type="submit" round block>登录</Button>
      </div>
    </Form>
  </app-view>
</template>

<script lang="ts" setup>
import { Button, Field, CellGroup, Form } from 'vant'
import { fullloading } from '@/utils/vant'
import { useNavigation } from '@mobile/router/navigation'
import { useLogin } from '@/business/login'

const { route, router, hasHistory, routerBack } = useNavigation()
const { formData, userLogin } = useLogin()

// 路由跳转
const navigationTo = () => {
  const redirect = route.query.redirect
  if (redirect) {
    router.replace(redirect.toString())
  } else {
    routerBack()
  }
}

const formSubmit = () => {
  fullloading((hideLoading) => {
    userLogin().then(() => {
      hideLoading()
      navigationTo()
    }).catch((err) => {
      hideLoading(err, 'fail')
    })
  }, '登录中...')
}
</script>

<style lang="less" scoped>
@import './index.less';
</style>