<template>
  <div>
    <Vueform ref="data" validate-on="change|step" method="post" :endpoint="onSubmit">
      <FormLibIdentifier />
      <FormLibHumanName />
      <FormLibHumanName />
      <ButtonElement name="submit" button-label="Simpan" :submits="true" align="center" size="lg" />
    </Vueform>

  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const vueform = ref({})
const data = ref(null)
const onClick = (newValue, oldValue, el$) => {
  console.log(data)
  console.log(vueform)

}

const handleResponse = (response, form$) => {
  console.log(response) // axios response
  console.log(response.status) // HTTP status code
  console.log(response.data) // response data

  console.log(form$) // <Vueform> instance
}
const onSubmit = () => {
  console.log('aa')
  console.log(data.value.form$.data)
  const response = $fetch(`/api/coba2`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data.value.form$.data), mode: 'no-cors'
  })
    .then((response) => {
      console.log(JSON.parse(response))
    })
  const response2 = useFetch(`/api/coba2`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data.value.form$.data), mode: 'no-cors'
  })
    .then((response) => {
      console.log('useFetch', response)
    })
  // const response = useAsyncData(`/api/coba2`, {
  //   method: 'POST',
  //   headers: { 'Content-Type': 'application/json' },
  //   body: JSON.stringify(data.value.form$.data), mode: 'no-cors'
  // })
  //   .then((response) => {
  //     console.log('useAsyncData', response)
  //   })
}
</script>

<style></style>