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

<script lang="ts" setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Button, Field, CellGroup, Form, Dialog } from 'vant'
import { useLogin } from '@/business/login'
import animateRouter from '@mobile/router/animateRouter'

const { logining, formData, userLogin } = useLogin();
const { state } = animateRouter;
const route = useRoute()
const router = useRouter()
const showBackButton = computed(() => state.history.length > 1);

const formSubmit = () => {
  userLogin().then(() => {
    const redirect = route.query.redirect;
    if (redirect) {
      router.replace(redirect.toString());
    } else {
      router.replace('/');
    }
  }).catch((err) => Dialog({ message: err }))
}
</script>

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