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

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";

/** importType*/
import type { Director } from "@/modules/11_discipline/interface/request/Disciplinary";

/** importComponents*/
import DialogHeader from "@/components/DialogHeader.vue";

const $q = useQuasar();
const { dialogConfirm, showLoader, messageError, hideLoader, success } =
  useCounterMixin();

/** props*/
const modal = defineModel<boolean>("modal", { required: true });
const props = defineProps({
  data: {
    type: Object as PropType<Director>,
  },
  fetchData: {
    type: Function,
    required: true,
  },
});

const duty = ref<string>(""); //หน้าที่ของกรรมการ

/** ฟังก์ชันบันทึกข้อมูลหน้าที่ของกรรมการ*/
function onSubmit() {
  dialogConfirm($q, async () => {
    showLoader();
    await http
      .put(config.API.evaluateDirectorMain() + `/duty/${props?.data?.id}`, {
        duty: duty.value,
      })
      .then(async () => {
        await props.fetchData();
        onCloseDialog();
        success($q, "บันทึกข้อมูลสำเร็จ");
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

/** ฟังก์ชันปิด Doalog แก้ไขหน้าที่ของกรรมการ*/
function onCloseDialog() {
  modal.value = !modal.value;
}

watch(modal, (val) => {
  if (val) {
    duty.value = props.data?.duty ?? "";
  }
});
</script>

<template>
  <q-dialog v-model="modal" persistent>
    <q-card style="min-width: 40%">
      <q-form greedy @submit.prevent @validation-success="onSubmit">
        <DialogHeader tittle="แก้ไขหน้าที่ของกรรมการ" :close="onCloseDialog" />
        <q-separator />

        <q-card-section>
          <q-input
            class="inputgreen"
            outlined
            dense
            v-model="duty"
            label="หน้าที่ของกรรมการ"
          />
        </q-card-section>
        <q-separator />

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