<template>
  <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
    <a-form-item label="公众号配置" v-bind="validateInfos.name">
      <a-input v-model:value="modelRef.name" />
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" @click.prevent="onSubmit">提交</a-button>
    </a-form-item>
  </a-form>
</template>
<script lang="ts" setup>
import { defineExpose, reactive, toRaw } from "vue";
import { Form } from "ant-design-vue";

const useForm = Form.useForm;

const modelRef = reactive({
  name: "",
  sub: {
    name: "",
  },
});
const { resetFields, validate, validateInfos } = useForm(
  modelRef,
  reactive({
    name: [
      {
        required: true,
        message: "Please input name",
      },
    ],
    "sub.name": [
      {
        required: true,
        message: "Please input sub name",
      },
    ],
  })
);
const onSubmit = () => {
  validate()
    .then((res) => {
      console.log(res, toRaw(modelRef));
    })
    .catch((err) => {
      console.log("error", err);
    });
};
defineExpose({
  validateInfos,
  modelRef,
  onSubmit,
});

</script>