<template>
  <div class="login" >
    <div class="app-name" >蛟龙云</div>
    <a-row :gutter="[16, 16]" style="margin-top: 40px;">
      <a-col span="24" >
        <a-input v-model:value="state.userAccount" style="height: 40px;" placeholder="请输入账号" ></a-input>
      </a-col>
      <a-col span="24">
        <a-input-password v-model:value="state.password" style="height: 40px;" placeholder="请输入密码" ></a-input-password>
      </a-col>
      <a-col span="24">
        <a-button style="width: 100%;" type="primary" @click="login"> 登陆</a-button>
      </a-col>
    </a-row>
  </div>
</template>
<script lang='ts' setup >
import { useRoute } from 'vue-router'
import { useUserStore } from '@/store/index'
import { reactive } from 'vue'

// const { redirct_url } = useRoute().query

const userStore = useUserStore()

const state = reactive({
  userAccount: '',
  password: ''
})

const login = () => {
  userStore.login(state)
}

</script>
<style lang='less' scoped >
.login {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .app-name {
    font: 80px 'Italiana', sans-serif;
    text-transform: lowercase;
    text-align: center;
  }
}
</style>
