<template>
  <v-card class="px-4 mx-auto fluid">
    <Form ref="formRef" as="v-form" v-model="formValid">
      <v-container fluid>
        <v-layout row wrap fill-height class="d-flex flex-wrap">
          <slot name="header"></slot>
          <slot></slot>
        </v-layout>
      </v-container>
    </Form>
  </v-card>
</template>

<script lang="ts" setup>
import { Form } from "vee-validate";
import { useAxios } from "../../composables/useAxios";
import { ref } from "vue";

const { $axios } = useAxios();

const formRef = ref<any>(null);
const formValid = false;

const props = defineProps({
  resourceUrl: {
    type: String,
    default: null
  },
  editId: {
    type: Number,
    default: 0
  }
});

async function validate() {
  return await formRef.value!.validate();
}

async function submit() {
  let { valid } = await validate();

  if (valid) {
    var req = await $axios({
      url: props.resourceUrl,
      method: props.editId > 0 ? "PUT" : "POST",
      data: {}
    });
  }
}

async function resetForm() {
  await formRef.value!.resetForm();
}

defineExpose({ validate, submit, resetForm });
</script>
