<template>
  <a-form ref="fromRef" :model="userInfo" :rules="rules" class="login-form" layout="vertical">
    <a-form-item field="email" hide-label>
      <a-input v-model="userInfo.email" placeholder="请输入登陆邮箱">
        <template #prefix>
          <icon-user />
        </template>
      </a-input>
    </a-form-item>
    <a-form-item field="password" hide-label>
      <a-input-password v-model="userInfo.password" allow-clear placeholder="请输入登陆密码">
        <template #prefix>
          <icon-lock />
        </template>
      </a-input-password>
    </a-form-item>
  </a-form>
</template>

<script lang="ts" setup>
  import { IconLock, IconUser } from '@arco-design/web-vue/es/icon';
  import { ref } from 'vue';
  import { FormInstance } from '@arco-design/web-vue/es/form';
  import { AttributeData } from '@/types/global';

  const userInfo = ref({
    email: import.meta.env.VITE_SHOW_LOGIN_ACCOUNT ? '1774507011@qq.com' : '',
    password: import.meta.env.VITE_SHOW_LOGIN_ACCOUNT ? '112358ys' : '',
  });

  const rules = {
    email: [{ required: true, message: '登陆邮箱不能为空' }],
    password: [{ required: true, message: '密码不能为空' }],
  };

  const fromRef = ref<FormInstance>();
  const onSubmit = (callback: (value: AttributeData) => void) => {
    fromRef.value?.validate((errors) => !errors && callback(userInfo.value));
  };

  defineExpose({ onSubmit });
</script>

<style lang="less" scoped>
  .login-form {
    &-error-msg {
      height: 32px;
      color: rgb(var(--red-6));
      line-height: 32px;
    }

    &-register-btn {
      color: var(--color-text-3) !important;
    }
  }
</style>