<template>
  <v-card class="mx-auto">
    <template v-if="!showForm"> </template>
    <template v-else>
      <v-toolbar flat v-show="showForm" class="elevation-2">
        <v-toolbar-title class="grey--text"> TITULO </v-toolbar-title>
        <v-spacer></v-spacer>
        <v-btn tile dark rounded small :color="showForm ? 'info' : 'success'">
          <v-icon left> mdi-plus </v-icon>
          teste
        </v-btn>
        <v-spacer></v-spacer>
        <v-btn color="success" class="mr-4" small @click="formSubmit">
          Submit
        </v-btn>
        <v-btn color="error" class="mr-4" small @click="formReset">
          <!-- {{ onlyVisualize ? "Voltar" : "Cancelar" }} -->
          Ir a listagem
        </v-btn>
      </v-toolbar>
      <v-divider></v-divider>
      <v-card-text class="pa-0" v-show="showForm">
        {{ type?.getHeaders() }}
        <ZCFormLayout ref="formLayout" :resourceUrl="props.resourceUrl">
          <slot></slot>
        </ZCFormLayout>
      </v-card-text>
    </template>
  </v-card>
</template>

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

import { ZCDataTableHeader } from '../types'
import ZCFormLayout from "../../components/forms/ZCFormLayout.vue";

const formLayout = ref<any>(null);
const showForm = ref(true);

const props = defineProps({
  resourceUrl: {
    type: String,
    default: null,
  },
  editId: {
    type: Number,
    default: 0,
  },
  type: {
    type: Object,
  },
  headers: {
    type: Array<ZCDataTableHeader>
  }
});

async function formSubmit() {
  await formLayout.value!.submit();
}

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

async function formValidate() {
  await formLayout.value!.validate();
}
</script>
