<script setup lang="ts">
import { reactive, computed, watch } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";

import type { FormData } from "@/modules/11_discipline/interface/request/Director";

/**
 * importComponents
 */
import DialogHeader from "@/components/DialogHeader.vue";
import Form from "@/modules/12_evaluatePersonal/components/Director/Form.vue";

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

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

/**
 * props
 */
const modal = defineModel<boolean>("modal", { required: true });
const directorId = defineModel<string>("directorId", { required: true });
const actionType = defineModel<string>("actionType", { required: true });
const props = defineProps({
  fetchDataList: { type: Function, required: true },
});

//  ชื่อ Dialog
const title = computed(() =>
  actionType.value === "VIEW" ? "รายละเอียด" : "แก้ไขรายชื่อกรรมการ"
);

/**
 * get ข้อมูลเก่ากรณีแก้ไขข้อมูล
 */
const dataDettail = reactive<FormData>({
  personalId: "",
  prefix: "",
  firstname: "",
  lastname: "",
  position: "",
  phone: "",
  email: "",
});

/**
 * function fetch ช้อมูลชื่อกรรมการ
 */
function fetchData() {
  showLoader();
  http
    .get(config.API.evaluateDirectorById(directorId.value))
    .then((res) => {
      const data = res.data.result;
      dataDettail.personalId = data.Id;
      dataDettail.prefix = data.prefix;
      dataDettail.firstname = data.firstName;
      dataDettail.lastname = data.lastName;
      dataDettail.position = data.position;
      dataDettail.phone = data.phone;
      dataDettail.email = data.email;
    })
    .catch((e) => {
      messageError($q, e);
      hideLoader();
    });
}

/**
 * function ยืนยันการบันทึกการแก้ไขข้อมุล
 * @param formData ข้อมุลชื่อกรรมการ
 */
function onSubmit(formData: FormData) {
  dialogConfirm($q, async () => {
    showLoader();
    await http
      .put(config.API.evaluateDirectorById(directorId.value), {
        prefix: formData.prefix,
        firstName: formData.firstname,
        lastName: formData.lastname,
        position: formData.position,
        email: formData.email,
        phone: formData.phone,
      })
      .then(async () => {
        await props.fetchDataList?.();
        success($q, "บันทึกข้อมูลสำเร็จ");
        onCloseDialog();
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

/**
 * ปิด dialog
 */
function onCloseDialog() {
  modal.value = false;
}

watch(
  () => modal.value,
  () => {
    modal.value && fetchData();
  }
);
</script>

<template>
  <q-dialog v-model="modal" persistent>
    <q-card style="width: 450px">
      <DialogHeader :tittle="title" :close="onCloseDialog" />
      <Form
        :on-submit="onSubmit"
        :data="dataDettail"
        :action-type="actionType"
      />
    </q-card>
  </q-dialog>
</template>

<style scoped></style>
