<script setup lang="ts">
import { reactive } from "vue"
import { login } from "~/service/modules/login"
import { CellGroup, Cell, Field, Button, Form, showLoadingToast, closeToast, showToast, allowMultipleToast  } from "vant"
import { setAuthToken } from "~/utils/auth";
import { useRouter } from "vue-router"

import { useTitle } from "@vueuse/core"

const router = useRouter()

allowMultipleToast()

const formData = reactive({
  username: '',
  password: ''
})



async function onLogin(){
  try{
    showLoadingToast({ message: '登录中...', forbidClick: true })
    const { code, data } = await login(formData)
    closeToast()

    if(code == 0){
      if (!['265', '264', '132', '107', '55', '81', '95', '36'].includes(String(data.id))) {
       showToast({ message: '账号存在,但该账号不能使用本系统', duration: 2000 })
      } else {
        setAuthToken(data.token)
        router.push('/home')
      }
    }
  }catch(err){
    console.log(err)
    closeToast()
  }
}


useTitle('登录')
</script>

<template>
  <div class="w-full h-full relative overflow-hidden">
    <!-- <NavBar title="登录" /> -->
    <Form 
      class="max-w-[95%] w-[400px] fixed top-[300px] left-[50%]" 
      style="transform: translate(-50%, -50%)"
      @submit="onLogin"
      >
      <CellGroup>
        <Cell>
          <Field
            v-model="formData.username"
            label="手机号" 
            placeholder="请输入手机号"
            maxlength="11"
            :rules="[{ required: true, message: '请填写手机号', trigger: 'change' }]"
          />
        </Cell>

        <Cell>
          <Field
            v-model="formData.password"
            label="密码" 
            placeholder="请输入密码"
            type="password"
            :rules="[{ required: true, message: '请填写用户名', trigger: 'change' }]"
          />
        </Cell>

        <Cell class="mt-[16px]">
          <Button 
            block 
            type="primary" 
            native-type="submit"
          >登录</Button>
        </Cell>
      </CellGroup>
    </Form>
  </div>
</template>
