<script setup lang="ts">
import { ref, watch } from "vue";
import DialogHeader from "@/components/DialogHeader.vue";

const reason = ref<string | undefined>("");
const modal = defineModel<boolean>("modal", { required: true });
const props = defineProps({
  // modal: {
  //   type: Boolean,
  //   default: false,
  // },
  title: {
    type: String,
    default: "",
  },
  label: {
    type: String,
    default: "",
  },
  // clickClose: {
  //   type: Function,
  //   default: () => {},
  // },
  savaForm: {
    type: Function,
    default: () => {},
  },
  textReport: {
    type: String,
  },
});
watch(props, () => {
  if (modal.value === true && props.textReport == "") {
    reason.value = "";
  } else {
    reason.value = props.textReport;
  }
});

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

function closeModal() {
  modal.value = false;
}
</script>

<template>
  <q-dialog v-model="modal" persistent>
    <q-card style="width: 40vw; max-width: 40vw">
      <q-form ref="myForm">
        <DialogHeader :tittle="props.title" :close="closeModal" />
        <q-separator />
        <q-card-section class="q-pa-sm">
          <div class="row col-12 q-col-gutter-sm">
            <div class="col-xs-12">
              <div class="col-12 row q-py-sm items-center q-col-gutter-sm">
                <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>
            </div>
          </div>
        </q-card-section>
        <q-separator />
        <q-card-actions align="right" class="bg-white text-teal">
          <q-btn
            unelevated
            label="บันทึก"
            color="public"
            @click="submit"
            class="q-px-md"
          >
            <!-- icon="mdi-content-save-outline" -->
            <q-tooltip>บันทึก</q-tooltip>
          </q-btn>
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>
