<template>
    <Form v-model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off"
        @finish="onFinish" @finishFailed="onFinishFailed">
        <Form.Item label="Username" name="username"
            :rules="[{ required: true, message: 'Please input your username!' }]">
            <Input v-model:value="formState.username" />
        </Form.Item>

        <Form.Item label="Password" name="password"
            :rules="[{ required: true, message: 'Please input your password!' }]">
            <InputPassword v-model:value="formState.password" />
        </Form.Item>

        <Form.Item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
            <Checkbox v-model:checked="formState.remember">Remember me</Checkbox>
        </Form.Item>

        <Form.Item :wrapper-col="{ offset: 8, span: 16 }">
            <Button type="primary" html-type="submit">Submit</Button>
        </Form.Item>
    </Form>
</template>
<script lang="ts" setup>
import { reactive } from 'vue';
import { Form, Input, Checkbox, Button, InputPassword } from 'ant-design-vue'

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

const formState = reactive<FormState>({
    username: '',
    password: '',
    remember: true,
});
const onFinish = (values: any) => {
    console.log('Success:', values);
};

const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
};
</script>