<script setup lang="ts">
import DialogHeader from "@/components/DialogHeader.vue";

const openDialog = defineModel<boolean>("openDialog", {
  required: true,
  default: false,
});

defineProps<{
  title: string;
  submit?: (...args: unknown[]) => void;
  close?: (...args: unknown[]) => void;
}>();
</script>

<template>
  <q-dialog v-model="openDialog" persistent>
    <q-card style="width: 80%">
      <q-form
        greedy
        @submit.prevent
        @validation-success="submit"
        class="full-height"
      >
        <!-- header -->
        <DialogHeader :tittle="title" :close="close" />
        <q-separator />

        <q-card-section> <slot /> </q-card-section>

        <q-separator />
        <q-card-actions align="right">
          <q-btn label="บันทึก" color="secondary" type="submit"
            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
          >
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<style lang="scss">
.form-header {
  border-bottom: 1px solid $grey-2;
}
</style>
