<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';
import { showLoginAccount } from '@/utils/env';

const userInfo = ref({
  email: showLoginAccount ? '234233@qq.com' : '',
  password: showLoginAccount ? '123123' : '',
});

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>