<script setup lang="ts">
import { ref, reactive, onMounted, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useQuasar, type QTableProps } 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 { checkPermission } from "@/utils/permissions";
import { useRoleWorkflowDataStore } from "@/stores/roleWorkflow";

/** importType */
import type { DataProfilePosition } from "@/interface/response/main";
import type { FormData } from "@/modules/09_leave/interface/request/leave";
import type {
  LeaveType,
  SeqTypeRow,
  RowsType,
} from "@/modules/09_leave/interface/response/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"; //ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ
import DialogAddCommander from "@/modules/09_leave/components/05_Leave/Dialog/DialogAddCommander.vue";

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

const paramsId = route.params.id.toString(); // ID การยื่นขอลา
const keycloakId = ref<string>(""); // Keycloak ID
const keycloakUserId = ref<string>(""); // Keycloak User ID
const modalApprove = ref(false); // เปิด Modal อนุมัติการลา
const statusCheck = ref<string>(""); // สถานะการลา
const typeDocx = ref<string>("docx"); // ประเภทไฟล์ที่ต้องการดาวน์โหลด
const typePdf = ref<string>("pdf"); // ประเภทไฟล์ที่ต้องการดาวน์โหลด
const dialogTitle = ref<string>("อนุญาต"); // Title ของ Dialog
const dialogLabel = ref<string>("เหตุผล"); // Label ของ Dialog
const modalAdd = ref<boolean>(false); // เปิด Modal เพิ่มผู้บังคับบัญชา
const typeAdd = ref<string>(""); // ประเภทการเพิ่ม เช่น COMMANDER, APPROVER
const isRules = ref<boolean>(true); // เช็คว่ามีการกำหนดกฎของหมายความคิดเห็น
/** Form รายละเอียดข้อมูล*/
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: "",
  leaveSubTypeName: "",
  dear: "",
  leaveRange: "",
  profileType: "",
  commanderPosition: "",
  leaveRangeEnd: "",
});

const checkForm = ref<string>(""); // ประเภทของฟอร์มที่จะแสดง
const leaveType = ref<LeaveType[]>([]); // ประเภทการลา
const isOfficer = ref<boolean>(false); // เช็คว่าเป็นสกจ.
const isStaff = ref<boolean>(false); // เช็คว่าเป็นการเจ้าหน้าที่
const isLoadData = ref<boolean>(false); // เช็คว่าข้อมูลโหลดเสร็จหรือไม่
const rows = ref<RowsType>();

// เช็คสิทธิ์การอนุมัติ
const idCheck = computed(() => {
  if (typeAdd.value == "COMMANDER") {
    return rows.value?.commanders.map((items: SeqTypeRow) => items.profileId);
  } else if (typeAdd.value == "APPROVER") {
    return rows.value?.approvers.map((items: SeqTypeRow) => items.profileId);
  }
});

// เช็คสิทธิ์การเลือกผู้มีอำนาจ
const commanderList = computed(() => {
  if (typeAdd.value == "COMMANDER") {
    return rows.value?.approvers.map((items: SeqTypeRow) => items.profileId);
  } else if (typeAdd.value == "APPROVER") {
    return rows.value?.commanders.map((items: SeqTypeRow) => items.profileId);
  }
});

// เช็คว่าผู้ใช้มีสิทธิ์อนุมัติหรือไม่
const approveCheck = computed(() => {
  const commanders = rows.value?.commanders;
  return (
    commanders?.every((commander) => commander.approveStatus === "APPROVE") ??
    false
  );
});

// เช็คว่าผู้ใช้มีสิทธิ์อนุมัติที่รอดำเนินการหรือไม่
const approvePendingCheck = computed(() => {
  const commanders = rows.value?.commanders || [];
  const index = commanders.findIndex((c) => c.profileId === keycloakId.value);

  if (index === -1) {
    return false;
  }

  const currentCommander = commanders[index];

  if (currentCommander.approveStatus !== "PENDING") {
    return false;
  }

  if (index === 0) {
    return true;
  }

  const previousApproved = commanders
    .slice(0, index)
    .every((c) => c.approveStatus === "APPROVE");
  return previousApproved;
});

const columns = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    sortable: true,
    field: "no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "fullName",
    align: "left",
    label: "ชื่อ-นามสกุล",
    sortable: true,
    field: "fullName",
    format(val, row) {
      return `${row.prefix}${row.firstName} ${row.lastName}`;
    },
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "positionSign",
    align: "left",
    label: "ตำแหน่งใต้ลายเซ็น",
    sortable: true,
    field: "positionSign",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "comment",
    align: "left",
    label: "ความคิดเห็น",
    field: "comment",
    sortable: true,
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);
/**
 * ฟังก์ชั่นเรียกรายละเอียดของข้อมูล
 * @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
        ? data.reasonCommander
        : "-";
      formData.reasonOligarch = data.reasonOligarch ? data.reasonOligarch : "-";
      formData.positionName = data.positionName ? data.positionName : "-";
      formData.positionLevelName = data.positionLevelName
        ? data.positionLevelName
        : "-";
      formData.organizationName = data.organizationName
        ? data.organizationName
        : "-";
      formData.leaveTypeName = data.leaveTypeName ? data.leaveTypeName : "-";
      formData.leaveTypeId = data.leaveTypeId ? data.leaveTypeId : "-";
      formData.fullName = data.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 ? data.leaveCount : "0";
      formData.status = data.status && stores.convertSatatus(data.status);
      statusCheck.value = data.status;
      formData.leaveLimit = data.leaveLimit ? data.leaveLimit : "0";
      formData.leaveSummary = data.leaveSummary ? data.leaveSummary : "0";
      formData.leaveRemain = data.leaveRemain ? data.leaveRemain : "0";
      formData.leaveWrote = data.leaveWrote ? data.leaveWrote : "-";
      formData.leaveAddress = data.leaveAddress ? data.leaveAddress : "-";
      formData.leaveNumber = data.leaveNumber ? data.leaveNumber : "-";
      formData.leaveRange = data.leaveRange;
      formData.leaveDetail = data.leaveDetail ? data.leaveDetail : "-";
      formData.leaveDocument = data.leaveDocument;
      formData.leaveDraftDocument = data.leaveDraftDocument;
      formData.leaveLastStart =
        data.leaveLastStart && date2Thai(data.leaveLastStart);
      formData.leaveLastEnd = data.leaveLastEnd && date2Thai(data.leaveLastEnd);
      formData.leaveTotal = data.leaveTotal ? data.leaveTotal : "0";
      formData.leavebirthDate =
        data.leaveBirthDate && date2Thai(data.leaveBirthDate);
      formData.leavegovernmentDate =
        data.leaveGovernmentDate && date2Thai(data.leaveGovernmentDate);
      formData.leaveSalary = data.leaveSalary
        ? formattedNumber(data.leaveSalary)
        : "-";
      formData.leaveSalaryText = data.leaveSalaryText
        ? data.leaveSalaryText
        : "-";
      formData.leaveTypeDay =
        data.leaveTypeDay && stores.convertLeaveDaytype(data.leaveTypeDay);
      formData.wifeDayName = data.wifeDayName ? data.wifeDayName : "-";
      formData.wifeDayDateBorn =
        data.wifeDayDateBorn && date2Thai(data.wifeDayDateBorn);
      formData.restDayOldTotal = data.restDayOldTotal
        ? data.restDayOldTotal
        : "0";
      formData.restDayCurrentTotal = data.restDayCurrentTotal
        ? data.restDayCurrentTotal
        : "0";
      formData.ordainDayStatus = data.ordainDayStatus;
      formData.ordainDayLocationName = data.ordainDayLocationName
        ? data.ordainDayLocationName
        : "-";
      formData.ordainDayLocationAddress = data.ordainDayLocationAddress
        ? data.ordainDayLocationAddress
        : "-";
      formData.ordainDayLocationNumber = data.ordainDayLocationNumber
        ? data.ordainDayLocationNumber
        : "-";
      formData.ordainDayOrdination =
        data.ordainDayOrdination && date2Thai(data.ordainDayOrdination);
      formData.ordainDayBuddhistLentName = data.ordainDayBuddhistLentName
        ? data.ordainDayBuddhistLentName
        : "-";
      formData.ordainDayBuddhistLentAddress = data.ordainDayBuddhistLentAddress
        ? data.ordainDayBuddhistLentAddress
        : "-";
      formData.hajjDayStatus = data.hajjDayStatus;
      formData.absentDaySummon = data.absentDaySummon
        ? data.absentDaySummon
        : "-";
      formData.absentDayLocation = data.absentDayLocation
        ? data.absentDayLocation
        : "-";
      formData.absentDayRegistorDate =
        data.absentDayRegistorDate && date2Thai(data.absentDayRegistorDate);
      formData.absentDayGetIn = data.absentDayGetIn ? data.absentDayGetIn : "-";
      formData.absentDayAt = data.absentDayAt ? data.absentDayAt : "-";
      formData.studyDaySubject = data.studyDaySubject
        ? data.studyDaySubject
        : "-";
      formData.studyDayDegreeLevel = data.studyDayDegreeLevel
        ? data.studyDayDegreeLevel
        : "-";
      formData.studyDayUniversityName = data.studyDayUniversityName
        ? data.studyDayUniversityName
        : "-";
      formData.studyDayTrainingSubject = data.studyDayTrainingSubject
        ? data.studyDayTrainingSubject
        : "-";
      formData.studyDayTrainingName = data.studyDayTrainingName
        ? data.studyDayTrainingName
        : "-";
      formData.studyDayCountry = data.studyDayCountry
        ? data.studyDayCountry
        : "-";
      formData.studyDayScholarship = data.studyDayScholarship
        ? data.studyDayScholarship
        : "-";
      formData.coupleDayName = data.coupleDayName ? data.coupleDayName : "-";
      formData.coupleDayPosition = data.coupleDayPosition
        ? data.coupleDayPosition
        : "-";
      formData.coupleDayLevel = data.coupleDayLevel ? data.coupleDayLevel : "-";
      formData.coupleDayLevelCountry = data.coupleDayLevelCountry
        ? data.coupleDayLevelCountry
        : "-";
      formData.coupleDayCountryHistory =
        data.coupleDayCountryHistory && data.coupleDayCountryHistory !== "null"
          ? data.coupleDayCountryHistory
          : "-";
      formData.coupleDayTotalHistory =
        data.coupleDayTotalHistory && data.coupleDayTotalHistory !== "null"
          ? data.coupleDayTotalHistory
          : "-";
      formData.coupleDayStartDateHistory =
        data.coupleDayStartDateHistory &&
        date2Thai(data.coupleDayStartDateHistory);
      formData.coupleDayEndDateHistory =
        data.coupleDayEndDateHistory && date2Thai(data.coupleDayEndDateHistory);
      formData.coupleDaySumTotalHistory =
        data.coupleDaySumTotalHistory &&
        data.coupleDaySumTotalHistory !== "null"
          ? data.coupleDaySumTotalHistory
          : "";
      formData.approveStep = data.approveStep ? data.approveStep : "-";
      formData.dear = data.dear ? data.dear : "-";
      formData.profileType = data.profileType;

      formData.leaveSubTypeName = data.leaveSubTypeName;
      formData.leaveRange = data.leaveRange;
      formData.commanderPosition = data.commanderPosition;
      formData.leaveRangeEnd = data.leaveRangeEnd;
      keycloakUserId.value = data.keycloakUserId;
      rows.value = {
        commanders: data.commanders,
        approvers: data.approvers,
      };

      isLoadData.value = true;
    })
    .catch((err) => {
      messageError($q, err);
    });
}

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

/**
 * ฟังก์ชันเช็คประเภทการลา
 * @param type รับค่า ประเภทการลา
 * @param formData รับค่า  FormData
 */
async function checkLeaveType(leaveTypeId: string, formData: FormData) {
  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
 */
async function openModal(data: string) {
  if (data === "approve") {
    modalApprove.value = true;
    isRules.value = false;
    dialogTitle.value = "อนุญาต";
  }
  if (data === "UnApprove") {
    modalApprove.value = true;
    dialogTitle.value = "ไม่อนุญาต";
    isRules.value = true;
  }
  if (data === "authority") {
    modalApprove.value = true;
    isRules.value = true;
    dialogTitle.value = "ความคิดเห็นของผู้บังคับบัญชา";
    dialogLabel.value = "ความคิดเห็น";
  }
}

/**
 * ฟังก์ชันบันทึกข้อมูลการอนุมัติ
 * @param reason เหตุผลในการอนุมัติ
 */
function clickSave(reason: string) {
  const body = {
    reason: reason,
  };

  if (dialogTitle.value === "อนุญาต") {
    dialogConfirm(
      $q,
      async () => {
        showLoader();
        await http
          .put(config.API.leaveApprove(formData.id), body)
          .then(async () => {
            await fetchDetailLeave(paramsId);
            success($q, "บันทึกข้อมูลสำเร็จ");
            modalApprove.value = false;
          })
          .catch((err) => {
            messageError($q, err);
          })
          .finally(() => {
            hideLoader();
          });
      },
      "ยืนยันการพิจารณา",
      "ต้องการยืนยันการพิจารณานี้ใช่หรือไม่?"
    );
  }
  if (dialogTitle.value === "ไม่อนุญาต") {
    //leaveReject
    dialogConfirm(
      $q,
      async () => {
        showLoader();
        await http
          .put(config.API.leaveReject(formData.id), body)
          .then(async () => {
            await fetchDetailLeave(paramsId);
            success($q, "บันทึกข้อมูลสำเร็จ");
            modalApprove.value = false;
          })
          .catch((err) => {
            messageError($q, err);
          })
          .finally(async () => {
            hideLoader();
          });
      },
      "ยืนยันการพิจารณา",
      "ต้องการยืนยันการพิจารณานี้ใช่หรือไม่?"
    );
  }
  if (dialogTitle.value === "ความคิดเห็นของผู้บังคับบัญชา") {
    dialogConfirm(
      $q,
      async () => {
        showLoader();
        await http
          .get(config.API.leaveApproveToComander(formData.id))
          .then(async () => {
            await http
              .put(config.API.leaveComanderApprove(formData.id), body)
              .then(async () => {
                await fetchDetailLeave(paramsId);
                success($q, "บันทึกข้อมูลสำเร็จ");
                modalApprove.value = false;
              })
              .catch((err) => {
                messageError($q, err);
              })
              .finally(async () => {
                hideLoader();
              });
          })
          .catch((err) => {
            messageError($q, err);
          })
          .finally(async () => {
            hideLoader();
          });
      },
      "ยืนยันการพิจารณา",
      "ต้องการยืนยันการพิจารณานี้ใช่หรือไม่?"
    );
  }
}

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

/**
 * ฟังก์ชันจัดรูปแบบหมายเลข
 * @param x หมายเลขที่ต้องการจัดรูปแบบ
 * @returns หมายเลขที่จัดรูปแบบแล้ว
 */
function formattedNumber(x: number) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

/**
 * ฟังก์ชันเปิด Modal เพื่อเพิ่มผู้บังคับบัญชา
 * @param type ประเภทการเพิ่ม เช่น ผู้บังคับบัญชา, ผู้มีอำนาจ
 */
function onAddPerson(type: string) {
  modalAdd.value = true;
  typeAdd.value = type;
}

/** ฟังก์ชันส่งข้อมูลไปพิจารณา */
function onSend() {
  dialogConfirm(
    $q,
    async () => {
      showLoader();
      await http
        .get(config.API.sendApprove(paramsId))
        .then(async () => {
          await http.put(config.API.adminSender(paramsId)).catch((e) => {
            messageError($q, e);
          });
          await fetchDetailLeave(paramsId);
          success($q, "ส่งไปพิจารณา");
        })
        .catch((e) => {
          messageError($q, e);
        })
        .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 fetchKeycloakPositionData() {
  if (keycloakId.value == "") {
    const data: DataProfilePosition = await stores.fetchKeycloakPosition();
    keycloakId.value = data?.profileId ?? "";
  }
}

/** lifecycle hook */
onMounted(async () => {
  if (paramsId) {
    try {
      showLoader();
      await Promise.all([
        fetchOptionType(),
        fetchKeycloakPositionData(),
        fetchDetailLeave(paramsId),
        checkOfficer(),
      ]);

      await checkLeaveType(formData.leaveTypeId, formData);
    } 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 q-mt-sm">
      <div class="col-12 row q-py-md q-pl-md">
        <div class="col-12 q-col-gutter-md">
          <!-- ประเภทการลา -->
          <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" :checkForm="checkForm" />
              </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"
              v-if="statusCheck == 'NEW' || statusCheck == 'PENDING'"
            >
              <q-card bordered class="col-12 text-dark">
                <q-card-section class="q-pa-none">
                  <div class="bg-grey-1 q-pa-sm col-12 row items-center">
                    <div class="q-pl-sm text-weight-bold text-dark">
                      สถิติการลา
                    </div>
                  </div>
                </q-card-section>
                <q-separator />
                <q-card-section class="q-pa-sm">
                  <div class="row q-col-gutter-x-md">
                    <div class="col-4 text-detail">
                      ลามาแล้ว :
                      <span class="text-weight-medium text-light-blue-6">{{
                        formData.leaveSummary
                      }}</span>
                      วัน
                    </div>
                    <div class="col-4 text-detail">
                      ลาครั้งนี้ :
                      <span class="text-weight-medium text-light-blue-6">{{
                        formData.leaveTotal
                      }}</span>
                      วัน
                    </div>
                    <div class="col-4 text-detail">
                      รวม :
                      <span class="text-weight-medium text-light-blue-6">
                        {{
                          Number(formData.leaveSummary) +
                          Number(formData.leaveTotal)
                        }}
                      </span>
                      วัน
                    </div>
                  </div>
                </q-card-section>
              </q-card>
            </div>
            <!-- ความคิดเห็นของผู้บังคับบัญชา -->
            <div class="col-xs-12 col-sm-12 row">
              <q-card bordered class="row col-12 text-dark">
                <div class="bg-grey-1 q-pa-sm col-12 row items-center">
                  <div class="q-pl-sm text-weight-bold text-dark">
                    ความคิดเห็นของผู้บังคับบัญชา
                  </div>
                  <q-btn
                    v-if="statusCheck == 'NEW' && (isOfficer || isStaff)"
                    flat
                    round
                    icon="add"
                    color="primary"
                    dense
                    class="q-ml-xs"
                    @click="onAddPerson('COMMANDER')"
                  >
                    <q-tooltip>เพิ่มรายชื่อผู้บังคับบัญชา</q-tooltip>
                  </q-btn>
                  <q-space />

                  <!-- workflowRef?.permission.isUpdate && -->
                </div>
                <div class="col-12"><q-separator /></div>
                <div class="col-12 q-pa-sm">
                  <d-table
                    ref="table"
                    :columns="columns"
                    :rows="rows?.commanders ?? []"
                    row-key="key"
                    flat
                    bordered
                    :paging="true"
                    dense
                    :rows-per-page-options="[10, 25, 50, 100]"
                  >
                    <template v-slot:header="props">
                      <q-tr :props="props">
                        <q-th
                          v-for="col in props.cols"
                          :key="col.name"
                          :props="props"
                        >
                          <span class="text-weight-medium">{{
                            col.label
                          }}</span>
                        </q-th>
                      </q-tr>
                    </template>
                    <template v-slot:body="props">
                      <q-tr :props="props" class="cursor-pointer">
                        <q-td
                          v-for="col in props.cols"
                          :key="col.name"
                          :props="props"
                        >
                          <div v-if="col.name == 'no'">
                            {{ props.rowIndex + 1 }}
                          </div>
                          <div v-else-if="col.name == 'comment'">
                            <div
                              v-if="
                                props.row.approveStatus == 'PENDING' &&
                                props.row.comment == ''
                              "
                            >
                              <q-btn
                                dense
                                :disable="
                                  statusCheck == 'NEW' ||
                                  !approvePendingCheck ||
                                  (props.row.profileId !== keycloakId &&
                                    checkPermission($route)?.attrIsUpdate &&
                                    formData.reasonCommander === '-')
                                "
                                label="แสดงความคิดเห็น"
                                unelevated
                                :color="
                                  props.row.profileId !== keycloakId ||
                                  statusCheck == 'NEW' ||
                                  !approvePendingCheck
                                    ? 'orange-3'
                                    : 'orange-5'
                                "
                                class="q-px-md"
                                @click="openModal('authority')"
                              >
                                <q-tooltip>แสดงความคิดเห็น</q-tooltip>
                              </q-btn>
                            </div>
                            <div v-else>
                              {{ props.row.comment ? props.row.comment : "-" }}
                            </div>
                          </div>
                          <div v-else>
                            {{ col.value ? col.value : "-" }}
                          </div>
                        </q-td>
                      </q-tr>
                    </template>
                  </d-table>
                </div>
              </q-card>
            </div>

            <!-- ความคิดเห็นของผู้มีอำนาจ -->
            <div class="col-xs-12 col-sm-12 row">
              <q-card bordered class="row col-12 text-dark">
                <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>
                  <q-btn
                    v-if="statusCheck == 'NEW' && (isOfficer || isStaff)"
                    flat
                    round
                    icon="add"
                    color="primary"
                    dense
                    class="q-ml-xs"
                    @click="onAddPerson('APPROVER')"
                  >
                    <q-tooltip>เพิ่มรายชื่อผู้มีอำนาจ</q-tooltip>
                  </q-btn>
                  <q-space />

                  <!-- workflowRef?.permission.isUpdate && -->
                  <div
                    class="row q-gutter-sm"
                    v-if="
                      checkPermission($route)?.attrIsUpdate &&
                      formData.reasonOligarch === '-' &&
                      rows &&
                      rows.approvers[0]?.profileId == keycloakId &&
                      rows.approvers[0]?.approveStatus == 'PENDING' &&
                      approveCheck &&
                      statusCheck === 'PENDING'
                    "
                  >
                    <q-btn
                      unelevated
                      color="orange-5"
                      label="ไม่อนุญาต"
                      @click="openModal('UnApprove')"
                      ><q-tooltip>ไม่อนุญาต</q-tooltip>
                    </q-btn>
                    <!-- v-if="
                    formData.approveStep === 'st3' &&
                    formData.status !== 'ยกเลิก' &&
                    checkPermission($route)?.attrIsUpdate
                  " -->
                    <q-btn
                      unelevated
                      color="primary"
                      label="อนุญาต"
                      @click="openModal('approve')"
                      ><q-tooltip>อนุญาต</q-tooltip>
                    </q-btn>
                  </div>
                </div>
                <div class="col-12"><q-separator /></div>
                <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]?.positionSign
                            ? rows?.approvers[0].positionSign
                            : "-"
                        }}
                      </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]?.approveStatus == "APPROVE"
                            ? "อนุญาต"
                            : rows &&
                              rows.approvers[0]?.approveStatus == "REJECT"
                            ? "ไม่อนุญาต"
                            : "-"
                        }}
                      </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">
                        {{ formData.reasonOligarch ?? "-" }}
                      </div>
                    </div>
                  </div>
                </div>
              </q-card>
            </div>
          </div>

          <!-- Workflow -->
          <!-- <div class="col-xs-12 col-sm-12" >
            <WorkFlow
              ref="workflowRef"
              :id="paramsId"
              v-model:is-check-data="isCheckData"
              :sys-name="
                formData.profileType === 'OFFICER'
                  ? 'SYS_LEAVE_LIST'
                  : 'SYS_LEAVE_LIST_EMP'
              "
            />
          </div> -->
        </div>
      </div>

      <!-- <q-separator v-if="checkPermission($route)?.attrIsUpdate" /> -->
      <!-- <div class="row q-pa-md q-gutter-md justify-end">
        <q-btn
          v-if="
            formData.approveStep === 'st1' &&
            formData.status !== 'ยกเลิก' &&
            checkPermission($route)?.attrIsUpdate
          "
          unelevated
          color="orange-5"
          label="ส่งไปยังผู้บังคับบัญชา"
          @click="sendToCommand"
          ><q-tooltip>ส่งไปยังผู้บังคับบัญชา</q-tooltip>
        </q-btn>

        <q-btn
          v-if="
            formData.approveStep === 'st2' &&
            formData.status !== 'ยกเลิก' &&
            checkPermission($route)?.attrIsUpdate
          "
          unelevated
          color="orange-5"
          label="ส่งไปยังผู้มีอำนาจ"
          @click="openModal('authority')"
          ><q-tooltip>ส่งไปยังผู้มีอำนาจ</q-tooltip>
        </q-btn>

        <q-btn
          v-if="
            formData.approveStep === 'st3' &&
            formData.status !== 'ยกเลิก' &&
            checkPermission($route)?.attrIsUpdate
          "
          unelevated
          color="orange-5"
          label="ไม่อนุมัติ"
          @click="openModal('UnApprove')"
          ><q-tooltip>ไม่อนุมัติ</q-tooltip>
        </q-btn>
        <q-btn
          v-if="
            formData.approveStep === 'st3' &&
            formData.status !== 'ยกเลิก' &&
            checkPermission($route)?.attrIsUpdate
          "
          unelevated
          color="primary"
          label="อนุมัติ"
          @click="openModal('approve')"
          ><q-tooltip>อนุมัติ</q-tooltip>
        </q-btn>
      </div> -->

      <q-separator v-if="statusCheck == 'NEW' && (isOfficer || isStaff)" />
      <q-card-actions
        align="right"
        v-if="statusCheck == 'NEW' && (isOfficer || isStaff)"
      >
        <q-btn
          label="ส่งไปพิจารณา"
          color="secondary"
          @click="onSend"
          :disable="rows?.approvers.length == 0"
          ><q-tooltip>คลิกเพื่อส่งไปพิจารณา</q-tooltip></q-btn
        >
      </q-card-actions>
    </q-card>
  </div>

  <DialogReason
    v-model:modal="modalApprove"
    :title="dialogTitle"
    :label="dialogLabel"
    :sava-form="clickSave"
    :is-rules="isRules"
  />

  <DialogAddCommander
    v-model:modal="modalAdd"
    :type="typeAdd"
    :profileType="formData.profileType"
    :fetchDetailLeave="fetchDetailLeave"
    :id-check="idCheck"
    :keycloak-user-id="keycloakUserId"
    :commanders-list="commanderList"
  />
</template>
