<template>
  <div class="form-title">音频标注检索平台</div>
  <a-form
    ref="refForm"
    :model="form"
    layout="validate"
    :style="{ width: 'calc(100% - 100px)' }"
    @submit-success="handleSubmit"
  >
    <a-form-item field="username">
      <a-input v-model="form.username" placeholder="用户名">
        <template #prefix> <icon-user /> </template>
      </a-input>
    </a-form-item>
    <a-form-item field="password">
      <a-input-password v-model="form.password" placeholder="密码" :defaultVisibility="true" allow-clear>
        <template #prefix>
          <icon-user />
        </template>
      </a-input-password>
    </a-form-item>
    <a-form-item>
      <a-button :loading="loading" class="submit-btn" style="background-color: #7169df; color: #fff" html-type="submit"
        >登录
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { Message } from '@arco-design/web-vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const refForm = ref();
const form = reactive({
  username: 'admin',
  password: '123456'
});
const loading = ref(false);

const handleSubmit = (data) => {
  loading.value = true;
  setTimeout(() => {
    Message.success('登录成功');
    router.push({ path: '/home' });
    loading.value = false;
  }, 1000);
};
</script>
<style scoped>
.form-title {
  font-size: 22px;
  line-height: 42px;
  font-weight: 500;
  color: #7169df;
}
.submit-btn {
  width: 100%;
  height: 32px;
  background-color: #7169df;
  border-radius: 3px;
  color: var(--color-neutral-1);
  font-size: 14px;
}
.submit-btn:hover {
  opacity: 0.8;
  background-color: #7169df;
  color: var(--color-neutral-1);
}
.tips-register {
  position: absolute;
  right: 20px;
  bottom: 100px;
  font-size: 20px;
  color: var(--color-neutral-4);
}
.reg-link {
  color: rgb(var(--arcoblue-6));
}
.arco-form-item-label-col {
  padding: 0px;
}
.arco-input-wrapper {
  height: 54px;
  background-color: var(--color-bg-1);
  border-color: var(--color-neutral-3);
}
.arco-form-item-label {
  display: none;
}
</style>
