<script setup lang="ts">
import { ref, defineModel } from "vue";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";

/** importCompouents*/
import Header from "@/components/DialogHeader.vue";

/** importStore*/
import { useCounterMixin } from "@/stores/mixin";

/** use*/
const $q = useQuasar();
const route = useRoute();

const modal = defineModel<boolean>("modal", { required: true });
const props = defineProps({
  fectData: { type: Function, require: true },
});

const id = ref<string>(route.params.id ? route.params.id.toString() : "");

const mixin = useCounterMixin();
const { dialogConfirm, messageError, showLoader, hideLoader, success } = mixin;
const reason = ref<string>("");

/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
function validateForm() {
  onSubmit();
}

function close() {
  modal.value = false;
  reason.value = "";
}

function onSubmit() {
  dialogConfirm(
    $q,
    () => {
      showLoader();
      http
        .put(config.API.cancelResign(id.value), {
          reason: reason.value,
        })
        .then(() => {
          props.fectData?.(id.value);
          success($q, "ยกเลิกการลาออกสำเร็จ");
        })
        .catch((err) => {
          messageError($q, err);
        })
        .finally(() => {
          hideLoader();
        });
      modal.value = false;
      reason.value = "";
    },
    "ยืนยันการยกเลิก",
    "ต้องการยืนยันการยกเลิกกนี้ใช่หรือไม่?"
  );
}
</script>

<template>
  <q-dialog v-model="modal" persistent>
    <q-card class="col-12" style="width: 30%">
      <q-form @submit.prevent @validation-success="validateForm">
        <Header :tittle="`ยื่นขอยกเลิกการลาออก`" :close="close" />
        <q-separator />

        <q-card-section class="scroll" style="max-height: 70vh">
          <div class="q-gutter-y-sm">
            <q-input
              label="เหตุผลที่ขอยกเลิกการลาออก"
              v-model="reason"
              outlined
              dense
              hide-bottom-space
              type="textarea"
              :rules="[
                (val) => !!val || `${'กรุณากรอกเหตุผลที่ขอยกเลิกการลาออก'}`,
              ]"
            />
          </div>
        </q-card-section>
        <q-separator />

        <q-card-actions align="right" class="bg-white text-teal">
          <!-- <q-btn flat label="OK" v-close-popup /> -->
          <q-btn
            type="submit"
            for="#submitForm"
            unelevated
            dense
            class="q-px-md items-center"
            color="light-blue-10"
            label="ยืนยัน"
          />
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<style lang="scss" scoped></style>
