<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useQuasar } from "quasar";

import http from "@/plugins/http";
import config from "@/app.config";
import genReport from "@/plugins/genreport";
import { useCounterMixin } from "@/stores/mixin";
import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
import { useRoleWorkflowDataStore } from "@/stores/roleWorkflow";

/** importType */
import type { DataProfilePosition } from "@/interface/response/main";
import type {
  LeaveType,
  FormReject,
  RowsType,
} from "@/modules/09_leave/interface/response/leave";
import type { FormData } from "@/modules/09_leave/interface/request/leave";

/** importForm*/
import DialogReason from "@/components/Dialogs/PopupReason.vue";
import FormMain from "@/modules/09_leave/components/05_Leave/formDetail/formMain.vue"; // from ซ้าย
import FormLeave from "@/modules/09_leave/components/05_Leave/formDetail/formLeave.vue"; // ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว
import FormChildbirth from "@/modules/09_leave/components/05_Leave/formDetail/formChildbirth.vue"; // ลาไปช่วยเหลือภริยาที่คลอดบุตร
import FormHoliday from "@/modules/09_leave/components/05_Leave/formDetail/formHoliday.vue"; //ลาพักผ่อน
import FormUpasom from "@/modules/09_leave/components/05_Leave/formDetail/formUpasom.vue"; // ลาอุปสมบท
import FormHajj from "@/modules/09_leave/components/05_Leave/formDetail/formHajj.vue"; //ลาประกอบพิธีฮัจญ์
import FormCheckSelect from "@/modules/09_leave/components/05_Leave/formDetail/formCheckSelect.vue"; //ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล
import FormStudy from "@/modules/09_leave/components/05_Leave/formDetail/formStudy.vue"; //ลาไปศึกษา
import FormLeaveToTraining from "@/modules/09_leave/components/05_Leave/formDetail/formLeaveToTraining.vue"; // ลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน
import FormLeaveToWorkInternational from "@/modules/09_leave/components/05_Leave/formDetail/formLeaveToWorkInternational.vue"; // ลาไปปฏิบัติงานในองค์การระหว่างประเทศ
import FormSpouse from "@/modules/09_leave/components/05_Leave/formDetail/formSpouse.vue"; // ลาติดตามคู่สมรส
import FormVocationalRehabilitation from "@/modules/09_leave/components/05_Leave/formDetail/formVocationalRehabilitation.vue"; //ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ

/** use */
const $q = useQuasar();
const { fetchDataCheckIsoffice } = useRoleWorkflowDataStore();
const mixin = useCounterMixin();
const {
  dialogConfirm,
  showLoader,
  hideLoader,
  date2Thai,
  messageError,
  success,
} = mixin;
const stores = useLeavelistDataStore();
const router = useRouter();
const route = useRoute();
const paramsId = route.params.id.toString();

const myProfileId = ref<string>("");
const typeDocx = ref<string>("docx");
const typePdf = ref<string>("pdf");
const modalApprove = ref(false);
const dialogTitle = ref<string>("อนุญาต");

const rows = ref<RowsType>();
const statusCheck = ref<string>("");
const isOfficer = ref<boolean>(false);
const isStaff = ref<boolean>(false);

/** Form รายละเอียดข้อมูล*/
const formDataReject = reactive<FormReject>({
  id: "", //*Id การยื่นขอลา
  leaveTypeName: "", //Name ประเภทการลา
  fullName: "", //คำนำหน้า ชื่อ นามสกุล คนขอลา
  status: "", //สถานะการของลา
  leaveDocDelete: "", //เอกสารการยกเลิกการลา
  leaveReasonDelete: "", //เหตุผลการยกเลิกการลา
  leaveWrote: "", //เขียนที่
  leaveAddress: "", //สถานที่ติดต่อขณะลา
  leaveNumber: "", //หมายเลขที่ติดต่อขณะลา
  leaveDetail: "", //รายละเอียดการลา
  leaveTotal: 0, //จำนวนวันที่ลา
  leaveStartDate: new Date(), //วัน เดือน ปีเริ่มต้นลา
  leaveEndDate: new Date(), //วัน เดือน ปีสิ้นสุดลา
  leaveDirectorComment: "", //ความคิดเห็นของผู้บังคับบัญชา
});

const formData = reactive<FormData>({
  id: "", //Id การยื่นขอลา
  reasonCommander: "", //เหตุผลผู้บังคับบัญชา
  reasonOligarch: "", //เหตุผลผู้มีอำนาจ
  positionName: "", //ตำแหน่งผู้ยื่นขอ
  positionLevelName: "", //ระดับผู้ยื่นขอ
  organizationName: "", //สังกัดผู้ยื่นขอ
  leaveTypeName: "", // Name ประเภทการลา
  leaveTypeId: "", //Id ประเภทการลา
  fullName: "", //คำนำหน้า ชื่อ นามสกุล คนขอลา
  dateSendLeave: null, // วันที่ยื่นใบลา
  leaveDateStart: null, //วันเริ่มการลา
  leaveDateEnd: null, //วันสิ้นสุดการลา
  leaveCount: 0, //จำนวนวันลา
  status: "", //สถานะการของลา
  leaveLimit: 0, //โควต้าลา(แต่ละประเภท)หน่วยเป็นวัน
  leaveSummary: 0, //ลาป่วยไปแล้ว(แต่ละประเภท)หน่วยเป็นวัน
  leaveRemain: 0, //คงเหลือโควต้า(แต่ละประเภท)หน่วยเป็นวัน
  leaveWrote: "", //เขียนที่
  leaveAddress: "", //สถานที่ติดต่อขณะลา
  leaveNumber: "", //หมายเลขที่ติดต่อขณะลา
  leaveDetail: "", //รายละเอียดการลา
  leaveDocument: "", //อัปโหลดเอกสารประกอบรายละเอียด
  leaveDraftDocument: "", //อัปโหลดแบบฟอร์มการลา
  leaveLastStart: new Date(), //ลาครั้งสุดท้ายในประเภทนั้นๆ เริ่มเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
  leaveLastEnd: new Date(), //ลาครั้งสุดท้ายในประเภทนั้นๆ สิ้นสุดเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
  leaveTotal: 0, //จำนวนวันที่ลา(Auto)
  leavebirthDate: new Date(), //วันเดือนปีเกิด(Auto)
  leavegovernmentDate: new Date(), //วันที่เข้ารับราชการ(Auto)
  leaveSalary: "", //เงินเดือนปัจจุบัน(Auto)
  leaveSalaryText: "", //เงินเดือนปัจจุบัน(เขียนเป็นคำอ่าน)
  leaveTypeDay: "", //ประเภทการลาในวันนั้นเช่น
  wifeDayName: "", //ชื่อภรรยา(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
  wifeDayDateBorn: new Date(), //วันที่คลอด(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
  restDayOldTotal: 0, //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา(ลาพักผ่อน)(Auto)
  restDayCurrentTotal: 0, //จำนวนวันลาพักผ่อนประจำปีปัจจุบัน(ลาพักผ่อน)(Auto)
  ordainDayStatus: false, //เคย/ไม่เคยบวช (ให้เลือก) (ลาอุปสมบท)
  ordainDayLocationName: "", //สถานที่บวช ชื่อวัด(ลาอุปสมบท)
  ordainDayLocationAddress: "", //สถานที่บวช ที่อยู่(ลาอุปสมบท)
  ordainDayLocationNumber: "", //สถานที่บวช หมายเลขโทรศัพท์(ลาอุปสมบท)
  ordainDayOrdination: new Date(), //สถานที่บวช วันอุปสมบท(ลาอุปสมบท)
  ordainDayBuddhistLentName: "", //สถานที่จำพรรษา ชื่อวัด(ลาอุปสมบท)
  ordainDayBuddhistLentAddress: "", //สถานที่จำพรรษา ที่อยู่(ลาอุปสมบท)
  hajjDayStatus: false, //เคย/ไม่เคยไปประกอบพิธีฮัจญ์ (ให้เลือก) (ลาประกอบพิธีฮัจญ์)
  absentDaySummon: "", //ได้รับหมายเรียกของ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
  absentDayLocation: "", //ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
  absentDayRegistorDate: new Date(), //ลงวันที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
  absentDayGetIn: "", //ให้เข้ารับการ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
  absentDayAt: "", //ณ ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
  studyDaySubject: "", //กรณีลาไปศึกษาต่อ ศึกษาวิชา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
  studyDayDegreeLevel: "", //กรณีลาไปศึกษาต่อ ขั้นปริญญา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
  studyDayUniversityName: "", //กรณีลาไปศึกษาต่อ ชื่อสถานศึกษา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
  studyDayTrainingSubject: "", //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ด้าน/หลักสูตร (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
  studyDayTrainingName: "", //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ณ สถานที่	(ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
  studyDayCountry: "", //ประเทศ (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
  studyDayScholarship: "", //ด้วยทุน (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
  coupleDayName: "", //ชื่อคู่สมรส (ลาติดตามคู่สมรส)
  coupleDayPosition: "", //ตำแหน่งคู่สมรส (ลาติดตามคู่สมรส)
  coupleDayLevel: "", //ระดับคู่สมรส (ลาติดตามคู่สมรส)
  coupleDayLevelCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ (ลาติดตามคู่สมรส)
  coupleDayCountryHistory: "", //ประวัติ ประเทศ (ลาติดตามคู่สมรส)
  coupleDayTotalHistory: "", //ประวัติ เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
  coupleDayStartDateHistory: new Date(), //ประวัติ ตั้งแต่วันที่ (ลาติดตามคู่สมรส)
  coupleDayEndDateHistory: new Date(), //ประวัติ ถึงวันที่ (ลาติดตามคู่สมรส)
  coupleDaySumTotalHistory: "", //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
  approveStep: "",
  dear: "",
  profileType: "",
  leaveSubTypeName: "",
  commanderPosition: "",
  leaveRangeEnd: "",
});

const isLoadData = ref<boolean>(false);
const leaveType = ref<LeaveType[]>([]); //ประเภทการลา
const checkForm = ref<string>(""); //เช็คประเภทการลา

/**
 * ฟังก์เรียกข้อมูลรายละเอียดของการยกเลิกลา
 * @param paramsId รับ ID จาก paramID
 */
async function fetchDetailDeleteLeave(paramsId: string) {
  await http
    .get(config.API.leaveListDeleteByid(paramsId))
    .then((res) => {
      const data = res.data.result;
      formDataReject.id = data.id;
      formDataReject.leaveTypeName = data.leaveTypeName;
      formDataReject.fullName = data.fullName;
      formDataReject.status = data.status;
      formDataReject.leaveDocDelete = data.leaveDocDelete;
      formDataReject.leaveReasonDelete = data.leaveReasonDelete
        ? data.leaveReasonDelete
        : "-";
      formDataReject.leaveWrote = data.leaveWrote;
      formDataReject.leaveAddress = data.leaveAddress;
      formDataReject.leaveNumber = data.leaveNumber;
      formDataReject.leaveDetail = data.leaveDetail;
      formDataReject.leaveTotal = data.leaveTotal;
      formDataReject.leaveStartDate = data.leaveStartDate;
      formDataReject.leaveEndDate = data.leaveEndDate;
      formDataReject.leaveDirectorComment = data.leaveDirectorComment;
    })
    .catch((err) => {
      messageError($q, err);
    });
}

/**
 * ฟังก์เรียกข้อมูลรายละเอียดของการลา
 * @param paramsId รับ ID จาก paramID
 */
async function fetchDetailLeave(paramsId: string) {
  isLoadData.value = false;
  await http
    .get(config.API.leaveListById(paramsId))
    .then(async (res) => {
      const data = await res.data.result;
      formData.id = data.id;
      formData.reasonCommander = data.reasonCommander;
      formData.reasonOligarch = data.reasonOligarch;
      formData.positionName = data.positionName;
      formData.positionLevelName = data.positionLevelName;
      formData.organizationName = data.organizationName;
      formData.leaveTypeName = data.leaveTypeName;
      formData.leaveTypeId = data.leaveTypeId;
      formData.fullName = data.fullName;
      formData.dateSendLeave =
        data.dateSendLeave && date2Thai(data.dateSendLeave);
      formData.leaveDateStart =
        data.leaveStartDate && date2Thai(data.leaveStartDate);
      formData.leaveDateEnd = data.leaveEndDate && date2Thai(data.leaveEndDate);
      formData.leaveCount = data.leaveCount;
      formData.status = data.status && data.status;
      formData.leaveLimit = data.leaveLimit;
      formData.leaveSummary = data.leaveSummary;
      formData.leaveRemain = data.leaveRemain;
      formData.leaveWrote = data.leaveWrote;
      formData.leaveAddress = data.leaveAddress;
      formData.leaveNumber = data.leaveNumber;
      formData.leaveDetail = data.leaveDetail;
      formData.leaveDocument = data.leaveDocument;
      formData.leaveDraftDocument = data.leaveDraftDocument;
      formData.leaveLastStart =
        data.leaveLastStart && date2Thai(data.leaveLastStart);
      formData.leaveLastEnd =
        data.leaveLastStart && date2Thai(data.leaveLastEnd);
      formData.leaveTotal = data.leaveTotal;
      formData.leavebirthDate =
        data.leaveBirthDate && date2Thai(data.leaveBirthDate);
      formData.leavegovernmentDate =
        data.leaveGovernmentDate && date2Thai(data.leaveGovernmentDate);
      formData.leaveSalary = data.leaveSalary;
      formData.leaveSalaryText = data.leaveSalaryText;
      formData.leaveTypeDay =
        data.leaveTypeDay && stores.convertLeaveDaytype(data.leaveTypeDay);
      formData.wifeDayName = data.wifeDayName;
      formData.wifeDayDateBorn =
        data.wifeDayDateBorn && date2Thai(data.wifeDayDateBorn);
      formData.restDayOldTotal = data.restDayOldTotal;
      formData.restDayCurrentTotal = data.restDayCurrentTotal;
      formData.ordainDayStatus = data.ordainDayStatus;
      formData.ordainDayLocationName = data.ordainDayLocationName;
      formData.ordainDayLocationAddress = data.ordainDayLocationAddress;
      formData.ordainDayLocationNumber = data.ordainDayLocationNumber;
      formData.ordainDayOrdination =
        data.ordainDayOrdination && date2Thai(data.ordainDayOrdination);
      formData.ordainDayBuddhistLentName = data.ordainDayBuddhistLentName;
      formData.ordainDayBuddhistLentAddress = data.ordainDayBuddhistLentAddress;
      formData.hajjDayStatus = data.hajjDayStatus;
      formData.absentDaySummon = data.absentDaySummon;
      statusCheck.value = data.status;
      formData.absentDayLocation = data.absentDayLocation;
      formData.absentDayRegistorDate =
        data.absentDayRegistorDate && date2Thai(data.absentDayRegistorDate);
      formData.absentDayGetIn = data.absentDayGetIn;
      formData.absentDayAt = data.absentDayAt;
      formData.studyDaySubject = data.studyDaySubject;
      formData.studyDayDegreeLevel = data.studyDayDegreeLevel;
      formData.studyDayUniversityName = data.studyDayUniversityName;
      formData.studyDayTrainingSubject = data.studyDayTrainingSubject;
      formData.studyDayTrainingName = data.studyDayTrainingName;
      formData.studyDayCountry = data.studyDayCountry;
      formData.studyDayScholarship = data.studyDayScholarship;
      formData.coupleDayName = data.coupleDayName;
      formData.coupleDayPosition = data.coupleDayPosition;
      formData.coupleDayLevel = data.coupleDayLevel;
      formData.coupleDayLevelCountry = data.coupleDayLevelCountry;
      formData.coupleDayCountryHistory = data.coupleDayCountryHistory;
      formData.coupleDayTotalHistory = data.coupleDayTotalHistory;
      formData.coupleDayStartDateHistory =
        data.coupleDayStartDateHistory &&
        date2Thai(data.coupleDayStartDateHistory);
      formData.coupleDayEndDateHistory =
        data.coupleDayEndDateHistory && date2Thai(data.coupleDayEndDateHistory);
      formData.coupleDaySumTotalHistory = data.coupleDaySumTotalHistory;
      formData.approveStep = data.approveStep;
      formData.dear = data.dear ? data.dear : "-";
      formData.profileType = data.profileType;
      formData.commanderPosition = data.commanderPosition;
      formData.leaveSubTypeName = data.leaveSubTypeName;
      formData.leaveRange = data.leaveRange;
      formData.leaveRangeEnd = data.leaveRangeEnd;
      isLoadData.value = true;
      rows.value = {
        commanders: data.commanders,
        approvers: data.approvers,
      };
    })
    .catch((err) => {
      messageError($q, err);
    });
}

/** ฟังก์ชันเรียกประเภทการลา */
async function fetchOptionType() {
  leaveType.value = await stores.leaveTypeList();
}

/**
 * ฟังก์ชันเช็คประเภทการลา
 * @param type รับค่า ID ประเภทการลา
 */
async function checkLeaveType(leaveTypeId: string, leaveTypeName: string) {
  if (leaveType.value) {
    const filtertype: LeaveType | undefined = leaveType.value.find(
      (e: LeaveType) => e.id === leaveTypeId
    );
    const type = filtertype?.code;
    if (type === "LV-001" || type === "LV-002" || type === "LV-003") {
      checkForm.value = "FormLeave";
    } else if (type === "LV-004") {
      checkForm.value = "FormChildbirth";
    } else if (type === "LV-005") {
      checkForm.value = "FormHoliday";
    } else if (type === "LV-006" && formData.leaveSubTypeName === "ลาอุปสมบท") {
      checkForm.value = "FormUpasom";
    } else if (
      type === "LV-006" &&
      formData.leaveSubTypeName === "ลาประกอบพิธีฮัจญ์"
    ) {
      checkForm.value = "FormHajj";
    } else if (type === "LV-007") {
      checkForm.value = "FormCheckSelect";
    } else if (type === "LV-008" && formData.leaveSubTypeName === "ศึกษาต่อ") {
      checkForm.value = "FormStudy";
    } else if (
      (type === "LV-008" && formData.leaveSubTypeName === "ฝึกอบรม") ||
      (type === "LV-008" && formData.leaveSubTypeName === "ปฎิบัติการวิจัย") ||
      (type === "LV-008" && formData.leaveSubTypeName === "ดูงาน")
    ) {
      checkForm.value = "FormLeaveToTraining";
    } else if (type === "LV-009") {
      checkForm.value = "FormLeaveToWorkInternational";
    } else if (type === "LV-010") {
      checkForm.value = "FormSpouse";
    } else if (type === "LV-011") {
      checkForm.value = "FormVocationalRehabilitation";
    }
  }
}

/**
 * ฟังก์ชันเปิด modal อนุมัติการยกเลิกลา
 * @param data ข้อมูลที่ใช้ในการเปิด modal เช่น "approve" หรือ "UnApprove"
 */
function openModal(data: string) {
  if (data === "approve") {
    modalApprove.value = true;
    dialogTitle.value = "อนุญาตให้ยกเลิกการลา";
  }
  if (data === "UnApprove") {
    modalApprove.value = true;
    dialogTitle.value = "ไม่อนุญาตให้ยกเลิกการลา";
  }
}

/**
 * ฟังก์ชันบันทึกข้อมูลการอนุมัติ
 * @param reason เหตุผลในการอนุมัติ
 */
function clickSave(reason: string) {
  const body = {
    reason: reason,
  };
  if (dialogTitle.value === "อนุญาตให้ยกเลิกการลา") {
    dialogConfirm(
      $q,
      async () => {
        showLoader();
        await http
          .put(config.API.leaveDeleteApprove(formDataReject.id), body)
          .then(async () => {
            await fetchDetailDeleteLeave(paramsId);
            modalApprove.value = false;
            success($q, "บันทึกข้อมูลสำเร็จ");
          })
          .catch((err) => {
            messageError($q, err);
          })
          .finally(async () => {
            hideLoader();
          });
      },
      "ยืนยันการพิจารณา",
      "ต้องการยืนยันการพิจารณานี้ใช่หรือไม่?"
    );
  }
  if (dialogTitle.value === "ไม่อนุญาตให้ยกเลิกการลา") {
    dialogConfirm(
      $q,
      async () => {
        showLoader();
        await http
          .put(config.API.leaveDeleteReject(formDataReject.id), body)
          .then(async () => {
            await fetchDetailDeleteLeave(paramsId);
            modalApprove.value = false;
            success($q, "บันทึกข้อมูลสำเร็จ");
          })
          .catch((err) => {
            messageError($q, err);
          })
          .finally(async () => {
            hideLoader();
          });
      },
      "ยืนยันการพิจารณา",
      "ต้องการยืนยันการพิจารณานี้ใช่หรือไม่?"
    );
  }
}

/**
 * ฟังก์ชันดาวน์โหลดไฟล์เอกสารการลา
 * @param id ID ของการลา
 * @param fileName ชื่อไฟล์ที่ต้องการดาวน์โหลด
 * @param type ประเภทไฟล์ เช่น "docx" หรือ "pdf"
 */
async function onClickDownloadFile(id: string, fileName: string, type: string) {
  showLoader();
  await http
    .get(config.API.leaveReportReject(id))
    .then(async (res) => {
      const data = res.data.result;
      await genReport(data, fileName, type);
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/** ฟังก์ชันตรวจสอบสถานะเจ้าหน้าที่ */
async function checkOfficer() {
  try {
    const data = await fetchDataCheckIsoffice(
      `${
        formData.profileType == "OFFICER"
          ? "SYS_LEAVE_LIST"
          : "SYS_LEAVE_LIST_EMP"
      }`
    );
    isOfficer.value = data.isOfficer;
    isStaff.value = data.isStaff;
  } catch (err) {
    messageError($q, err);
  }
}

/** ฟังก์ชันดึงข้อมูลตำแหน่งจาก Keycloak */
async function fetchKeycloakPosition() {
  if (myProfileId.value == "") {
    const data: DataProfilePosition = await stores.fetchKeycloakPosition();
    myProfileId.value = data?.profileId ?? "";
  }
}

onMounted(async () => {
  if (paramsId) showLoader();
  try {
    await Promise.all([
      fetchOptionType(),
      fetchDetailDeleteLeave(paramsId),
      fetchKeycloakPosition(),
      fetchDetailLeave(paramsId),
      checkOfficer(),
    ]);
    await checkLeaveType(formData.leaveTypeId, formData.leaveSubTypeName);
  } finally {
    hideLoader();
  }
});
</script>

<template>
  <div class="toptitle text-dark col-12 row items-center">
    <div class="row col-12 q-col-gutter-sm q-mb-sm">
      <div class="q-mr-lg">
        <q-btn
          icon="mdi-arrow-left"
          unelevated
          round
          dense
          flat
          color="primary"
          class="q-mr-sm"
          @click="router.push(`/leave`)"
        />
        รายละเอียดการขอยกเลิกของ {{ formData.fullName }}
      </div>
      <div>
        <q-btn class="q-mr-sm" icon="mdi-download" round color="primary" flat>
          <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
          <q-menu>
            <q-list style="min-width: 100px">
              <q-item
                clickable
                v-close-popup
                @click="
                  onClickDownloadFile(
                    formData.id,
                    'ยกเลิก' +
                      (formData.leaveSubTypeName
                        ? formData.leaveSubTypeName
                        : formData.leaveTypeName),
                    typeDocx
                  )
                "
              >
                <q-item-section avatar
                  ><q-icon color="blue" name="mdi-file-word"
                /></q-item-section>
                <q-item-section>ไฟล์ .DOCX</q-item-section>
              </q-item>
              <q-item
                clickable
                v-close-popup
                @click="
                  onClickDownloadFile(
                    formData.id,
                    'ยกเลิก' +
                      (formData.leaveSubTypeName
                        ? formData.leaveSubTypeName
                        : formData.leaveTypeName),
                    typePdf
                  )
                "
              >
                <q-item-section avatar
                  ><q-icon color="red" name="mdi-file-pdf"
                /></q-item-section>
                <q-item-section>ไฟล์ .pdf</q-item-section>
              </q-item>
            </q-list>
          </q-menu>
        </q-btn>
      </div>
      <q-space />
    </div>
  </div>

  <div class="q-pa-sm">
    <q-card flat bordered class="col-12">
      <div class="col-12 row q-py-md q-pl-md">
        <div class="col-12 q-col-gutter-md">
          <div class="col-xs-12 col-sm-12 row">
            <q-card bordered class="row col-12 text-dark q-mt-sm">
              <div
                class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
              >
                <div class="q-pl-sm text-weight-bold text-dark">
                  รายละเอียดการขอยกเลิก
                </div>
              </div>
              <q-separator />
              <div class="row col-12 q-pa-md">
                <div class="col-12 row bg-white q-col-gutter-md">
                  <div class="col-xs-3 row items-start">
                    <div class="col-12 text-weight-bold text-top">เขียนที่</div>
                    <div class="col-12 text-detail">
                      {{ formDataReject.leaveWrote }}
                    </div>
                  </div>
                  <div class="col-xs-3 row items-start">
                    <div class="col-12 text-weight-bold text-top">วันที่</div>
                    <div class="col-12 text-detail">
                      {{ date2Thai(formDataReject.leaveStartDate) }}
                    </div>
                  </div>
                  <div class="col-xs-3 row items-start">
                    <div class="col-12 text-weight-bold text-top">เหตุผล</div>
                    <div class="col-12 text-detail">
                      {{ formDataReject.leaveReasonDelete }}
                    </div>
                  </div>
                  <div class="col-xs-3 row items-start">
                    <div class="col-12 text-weight-bold text-top">
                      เอกสารประกอบ
                    </div>
                    <div class="col-12 text-detail">
                      <q-btn
                        v-if="formDataReject.leaveDocDelete"
                        :href="formDataReject.leaveDocDelete"
                        target="_blank"
                        outline
                        color="blue"
                        label="ดาวน์โหลด"
                        size="12px"
                      >
                        <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
                      >
                      <span v-else>-</span>
                    </div>
                  </div>
                </div>
              </div>
            </q-card>
          </div>

          <div class="row col-12">
            <q-card bordered class="bg-grey-1 q-pa-md col-12">
              <div class="row q-col-gutter-md col-12">
                <div class="col-xs-12 col-sm-5 row items-center q-my-xs">
                  <div class="col-12 row">
                    <div class="col-xs-5 col-sm-3 text-grey-8">ประเภทการลา</div>
                    <div class="col text-primary">
                      {{
                        formData.leaveSubTypeName
                          ? formData.leaveSubTypeName
                          : formData.leaveTypeName
                      }}
                    </div>
                  </div>
                  <div class="col-12 row">
                    <div class="col-xs-5 col-sm-3 text-grey-8">
                      ชื่อ-นามสกุล
                    </div>
                    <div class="col text-weight-medium">
                      {{ formData.fullName }}
                    </div>
                  </div>
                </div>
                <div class="col-xs-12 col-sm-7 row">
                  <div class="row col-12 q-gutter-md">
                    <div
                      v-if="formData.leaveTypeName == 'ลาพักผ่อน'"
                      class="col-3"
                    >
                      <q-card bordered class="items-center row col-12 q-pa-md">
                        <div class="text-h6 text-weight-bold text-blue-10">
                          {{ formData.leaveLimit }}
                        </div>
                        <div class="col-12 text-subtitle2 text-weight-regular">
                          <span class="gt-xs">ได้รับ</span>
                        </div>
                      </q-card>
                    </div>
                    <div class="col-3">
                      <q-card bordered class="items-center row col-12 q-pa-md">
                        <div class="text-h6 text-weight-bold text-light-blue-6">
                          {{ formData.leaveSummary }}
                        </div>
                        <div class="col-12 text-subtitle2 text-weight-regular">
                          <span class="gt-xs">ใช้ไป</span>
                        </div>
                      </q-card>
                    </div>
                    <div
                      v-if="formData.leaveTypeName == 'ลาพักผ่อน'"
                      class="col-3"
                    >
                      <q-card bordered class="items-center row col-12 q-pa-md">
                        <div class="text-h6 text-weight-bold text-indigo-7">
                          {{ formData.leaveRemain }}
                        </div>
                        <div class="col-12 text-subtitle2 text-weight-regular">
                          <span class="gt-xs">คงเหลือ</span>
                        </div>
                      </q-card>
                    </div>
                  </div>
                </div>
              </div>
            </q-card>
          </div>

          <div class="row q-col-gutter-md col-12">
            <div class="col-xs-12 col-sm-5 row">
              <!-- card ซ้าย -->
              <q-card flat bordered class="col-12">
                <FormMain :data="formData" />
              </q-card>
            </div>
            <!-- ข้อมูลการลา -->
            <div class="col-xs-12 col-sm-7 row">
              <q-card flat bordered class="col-12">
                <!-- ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว -->
                <FormLeave v-if="checkForm === 'FormLeave'" :data="formData" />

                <!-- ลาไปช่วยเหลือภริยาที่คลอดบุตร -->
                <FormChildbirth
                  v-else-if="checkForm === 'FormChildbirth'"
                  :data="formData"
                />

                <!-- ลาพักผ่อน -->
                <FormHoliday
                  v-else-if="checkForm === 'FormHoliday'"
                  :data="formData"
                />

                <!-- ลาอุปสมบท -->
                <FormUpasom
                  v-else-if="checkForm === 'FormUpasom'"
                  :data="formData"
                />

                <!-- ลาประกอบพิธีฮัจญ์ -->
                <FormHajj
                  v-else-if="checkForm === 'FormHajj'"
                  :data="formData"
                />

                <!-- ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล -->
                <FormCheckSelect
                  v-else-if="checkForm === 'FormCheckSelect'"
                  :data="formData"
                />

                <!-- ลาไปศึกษา -->
                <FormStudy
                  v-else-if="checkForm === 'FormStudy'"
                  :data="formData"
                />

                <!-- ลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน -->
                <FormLeaveToTraining
                  v-else-if="checkForm === 'FormLeaveToTraining'"
                  :data="formData"
                />

                <!-- ลาไปปฏิบัติงานในองค์การระหว่างประเทศ -->
                <FormLeaveToWorkInternational
                  v-else-if="checkForm === 'FormLeaveToWorkInternational'"
                  :data="formData"
                />

                <!-- ลาติดตามคู่สมรส -->
                <FormSpouse
                  v-else-if="checkForm === 'FormSpouse'"
                  :data="formData"
                />

                <!-- ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ -->
                <FormVocationalRehabilitation
                  v-else-if="checkForm === 'FormVocationalRehabilitation'"
                  :data="formData"
                />
              </q-card>
            </div>

            <!-- ความคิดเห็นของผู้มีอำนาจ -->
            <div class="col-xs-12 col-sm-12 row">
              <q-card bordered class="row col-12 text-dark q-mt-sm">
                <div
                  class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
                >
                  <div class="q-pl-sm text-weight-bold text-dark">
                    ความคิดเห็นของผู้มีอำนาจ
                  </div>
                </div>
                <q-separator />
                <div class="row col-12 q-pa-md">
                  <div class="col-12 row bg-white q-col-gutter-md">
                    <div class="col-xs-6 row items-start">
                      <div class="col-12 text-weight-bold text-top">
                        ชื่อ - นามสกุล
                      </div>
                      <div class="col-12 text-detail">
                        {{
                          rows && rows.approvers[0]?.firstName
                            ? `${rows?.approvers[0].prefix}${rows?.approvers[0].firstName} ${rows?.approvers[0].lastName}`
                            : "-"
                        }}
                      </div>
                    </div>
                    <div class="col-xs-6 row items-start">
                      <div class="col-12 text-weight-bold text-top">
                        ตำแหน่ง
                      </div>

                      <div class="col-12 text-detail">
                        {{
                          rows && rows.approvers[0]?.positionName
                            ? rows?.approvers[0].positionName
                            : "-"
                        }}
                      </div>
                    </div>

                    <div class="col-xs-6 row items-start">
                      <div class="col-12 text-weight-bold text-top">
                        ผลการพิจารณา
                      </div>
                      <div class="col-12 text-detail">
                        {{
                          formDataReject.status == "NEW"
                            ? "-"
                            : stores.convertSatatus(formDataReject.status)
                        }}
                      </div>
                    </div>
                    <div class="col-xs-6 row items-start">
                      <div class="col-12 text-weight-bold text-top">
                        ความคิดเห็น
                      </div>
                      <div class="col-12 text-detail">
                        {{
                          formDataReject.status == "NEW"
                            ? "-"
                            : formDataReject.leaveDirectorComment
                        }}
                      </div>
                    </div>
                  </div>
                </div>
              </q-card>
            </div>
          </div>

          <!-- Workflow -->
          <!-- <div class="col-xs-12 col-sm-12" v-if="isLoadData">
            <WorkFlow
              ref="workflowRef"
              :id="paramsId"
              :sys-name="
                formData.profileType === 'OFFICER'
                  ? 'SYS_LEAVE_LIST'
                  : 'SYS_LEAVE_LIST_EMP'
              "
            />
          </div> -->
        </div>
      </div>
      <q-separator
        v-if="
          rows &&
          rows.approvers[0]?.profileId == myProfileId &&
          formDataReject.status == 'NEW'
        "
      />
      <div
        class="row q-pa-md q-gutter-sm justify-end"
        v-if="
          rows &&
          rows.approvers[0]?.profileId == myProfileId &&
          formDataReject.status == 'NEW'
        "
      >
        <q-btn
          unelevated
          color="orange-5"
          label="ไม่อนุญาต"
          @click="openModal('UnApprove')"
          ><q-tooltip>ไม่อนุญาตให้ทำการยกเลิก</q-tooltip>
        </q-btn>
        <q-btn
          unelevated
          color="primary"
          label="อนุญาต"
          @click="openModal('approve')"
          ><q-tooltip>อนุญาตให้ทำการยกเลิก</q-tooltip>
        </q-btn>
      </div>
    </q-card>
  </div>

  <DialogReason
    v-model:modal="modalApprove"
    :title="dialogTitle"
    label="เหตุผล"
    :savaForm="clickSave"
  />
</template>

<style lang="scss" scoped>
.font-size {
  font-size: 1.2rem;
}
</style>
