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

const reason = ref<string>("");
const props = defineProps({
  modal: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "",
  },
  label: {
    type: String,
    default: "",
  },
  clickClose: {
    type: Function,
    default: () => {},
  },
  savaForm: {
    type: Function,
    default: () => {},
  },
});
watch(props, () => {
  if (props.modal === true) {
    reason.value = "";
  }
});

const myForm = ref<any>();
const submit = () => {
  myForm.value.validate().then((result: boolean) => {
    if (result) {
      props.savaForm(reason.value);
    }
  });
};
</script>

<template>
  <q-dialog v-model="props.modal" persistent>
    <q-card style="width: 500px; max-width: 500px">
      <q-toolbar class="q-py-md">
        <q-toolbar-title class="header-text">{{ props.title }}</q-toolbar-title>
        <q-btn
          icon="close"
          unelevated
          round
          dense
          @click="clickClose"
          style="color: #ff8080; background-color: #ffdede"
        />
      </q-toolbar>

      <q-separator />
      <q-form ref="myForm">
        <q-card-section class="q-p-sm">
          <div class="row col-12">
            <q-input
              type="textarea"
              class="full-width inputgreen cursor-pointer"
              hide-bottom-space
              outlined
              dense
              lazy-rules
              :rules="[(val) => !!val || `กรุณากรอก${label}`]"
              v-model="reason"
              :label="`${label}`"
            />
          </div>
        </q-card-section>

        <q-separator />

        <q-toolbar class="text-primary">
          <q-space />
          <q-btn label="บันทึก" color="secondary" @click="submit" />
        </q-toolbar>
      </q-form>
    </q-card>
  </q-dialog>
</template>
