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

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

const { loading, user, signIn } = useSign();
const { state } = animateRouter;
const route = useRoute()
const router = useRouter()
const showBackButton = computed(() => state.historyStacks.length > 1);

const userLogin = () => {
  signIn().then(() => {
    notify('登录成功', 'success')
    const redirect = route.query.redirect;
    if (redirect) {
      router.replace(redirect.toString());
    } else {
      router.replace('/');
    }
  }).catch((err) => notify(err, 'danger'))
}
</script>

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