<template>
  <div class="wrap">
    <a-form
      :model="formState"
      name="basic"
      :label-col="{ span: 8 }"
      :wrapper-col="{ span: 16 }"
      autocomplete="off"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
    >
      <a-form-item label="密码" name="password" :rules="[{ required: true, message: '请输入密码!' }]">
        <a-input-password v-model:value="formState.password" />
      </a-form-item>

      <a-form-item label="确认密码" name="confirmPassword" :rules="[{ required: true, message: '再次输入密码!' }]">
        <a-input-password v-model:value="formState.confirmPassword" />
      </a-form-item>

      <a-form-item label="手机号" name="phone" :rules="[{ required: true, message: '请输入手机号!' }]">
        <a-input v-model:value="formState.phone" />
      </a-form-item>

      <a-form-item label="验证码" name="phone" :rules="[{ required: true, message: '请输入手机号!' }]">
        <a-input v-model:value="formState.code" />
      </a-form-item>

      <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
        <a-button type="primary" html-type="submit">Submit</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, toRaw } from 'vue';

  interface FormState {
    password: string;
    confirmPassword: string;
    phone: string;
    code: string;
  }

  const formState = reactive<FormState>({
    password: '',
    confirmPassword: '',
    phone: '',
    code: '',
  });
  const onFinish = (values: any) => {
    console.log('Success:', values);
  };

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

<style lang="less" scoped>
  .wrap {
    width: 400px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
</style>
