<template>
  <a-form
    :model="formState"
    name="normal_login"
    class="login-form"
    @finish="onFinish"
    @finish-failed="onFinishFailed"
    ref="formRef"
  >
    <a-form-item
      label="账号"
      name="username"
      :rules="[{ required: true, message: '请输入用户名！' }]"
    >
      <a-input v-model:value="formState.username">
        <template #prefix>
          <UserOutlined class="site-form-item-icon" />
        </template>
      </a-input>
    </a-form-item>

    <a-form-item
      label="密码"
      name="password"
      :rules="[{ required: true, message: '请输入密码！' }]"
    >
      <a-input-password v-model:value="formState.password">
        <template #prefix>
          <LockOutlined class="site-form-item-icon" />
        </template>
      </a-input-password>
    </a-form-item>

    <!-- 可选：记住我 -->
    <!--
    <a-form-item name="remember" no-style>
      <a-checkbox v-model:checked="formState.remember">记住我</a-checkbox>
    </a-form-item>
    -->

    <a-form-item>
      <a-button type="primary" html-type="submit" block class="login-form-button">
        登 录
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
import apis from '../../../apis/login.js';
// 如果需要 md5，请确保已安装并导入，例如：import md5 from 'md5';
// import md5 from 'md5'; // 按需使用

const router = useRouter();
const formRef = ref();

interface FormState {
  username: string;
  password: string;
  remember: boolean;
}

const formState = reactive<FormState>({
  username: '',
  password: '',
  remember: true,
});

// 表单验证通过后自动调用
const onFinish = async (values: FormState) => {
  // 可选：对密码进行加密（根据后端要求）
  // const loginData = { ...values, password: md5(values.password) };

  try {
    const { success } = await apis.login(values); // 假设 apis.login 返回 { success: boolean }

    if (success) {
      // 登录成功
      router.push('/platform');
    } else {
      // 后端返回登录失败（如密码错误）
      formRef.value?.setFields([
        { name: 'password', errors: ['用户名或密码错误'] }
      ]);
    }
  } catch (error) {
    console.error('登录请求失败:', error);
    // 网络错误或服务器异常
    formRef.value?.setFields([
      { name: 'password', errors: ['网络错误，请稍后重试'] }
    ]);
  }
};

const onFinishFailed = (errorInfo: any) => {
  console.log('表单验证失败:', errorInfo);
  // Ant Design Vue 会自动显示校验错误，无需额外处理
};
</script>

<style scoped>
.login-form {
  max-width: 300px;
}

.login-form-button {
  width: 100%;
}
</style>