<script setup lang="ts">
import { ref } from "vue";
const props = defineProps({
  next: {
    type: Function,
    default: () => console.log("not function"),
  },
  previous: {
    type: Function,
    default: () => console.log("not function"),
  },
});
const next = () => props.next();
const previous = () => props.previous();

const name = ref<string>("");
const lastname = ref<string>("");
const age = ref<string>("");

const nameRef = ref<any>(null);
const ageRef = ref<any>(null);
const lastnameRef = ref<any>(null);
const myObject: MyObject = {
  name: nameRef,
  lastname: lastnameRef,
  age: ageRef,
};
interface MyObject {
  name: any;
  lastname: any;
  age: any;
  [key: string]: any;
}

function onSubmit() {
  const hasError = [];
  for (const key in myObject) {
    if (Object.prototype.hasOwnProperty.call(myObject, key)) {
      const property = myObject[key];
      if (property.value && typeof property.value.validate === "function") {
        const isValid = property.value.validate();
        hasError.push(isValid);
      }
    }
  }
  if (hasError.every((result) => result === true)) {
    console.log("ผ่าน  สำเร็จ!");
  } else {
    console.log("ไม่ผ่าน ");
  }
}
</script>

<template>
  <div><h1>step02</h1></div>
  <form @submit.prevent.stop="onSubmit" class="q-gutter-md">
    <q-input
      ref="nameRef"
      filled
      v-model="name"
      label="Your name *"
      hint="Name and surname"
      lazy-rules
      :rules="[(val) => !!val || `${'Name and surname'}`]"
    />
    <q-input
      ref="lastnameRef"
      filled
      v-model="lastname"
      label="lastname *"
      lazy-rules
      :rules="[(val) => !!val || `${'lastname'}`]"
    />
    <q-input
      ref="ageRef"
      filled
      type="number"
      v-model="age"
      label="Your age *"
      lazy-rules
      :rules="[(val) => !!val || `${'Your age'}`]"
    />

    <div>
      <q-btn label="Submit" type="submit" color="primary" />
    </div>
  </form>
  <q-card-actions align="right">
    <q-btn
      dense
      unelevated
      label="back"
      color="public"
      @click="previous()"
      class="q-px-md"
    />
    <q-btn
      dense
      unelevated
      label="next"
      color="public"
      @click="next()"
      class="q-px-md"
    />
  </q-card-actions>
</template>

<style scoped></style>
