<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";

/** importStore */
import { useCounterMixin } from "@/stores/mixin";
import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
import DialogReason from "@/components/Dialogs/PopupReason.vue";

/** importType */
import type { FremData } from "@/modules/09_leave/interface/request/leave";
import type { LeaveType } from "@/modules/09_leave/interface/response/leave";

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

/** use */
const $q = useQuasar();
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 modalApprove = ref(false);
const typeDocx = ref<string>("docx");
const typePdf = ref<string>("pdf");
const dialogTitleUnapprove = ref<string>("ไม่อนุมัติ");
const dialogTitle = ref<string>("อนุมัติ");
const dialogLabel = ref<string>("เหตุผล");

/** ฟังก์ชั่น อัปโหลด
 * consolelog ไว้ก่อน
 */
const filesUpload = ref<any>(null);
function upLoadFile() {
  // console.log("upload", filesUpload.value);
}

/** Form รายละเอียดข้อมูล*/
const formData = reactive<FremData>({
  id: "", //Id การยื่นขอลา
  reasonCommander: "", //เหตุผลผู้บังคับบัญชา
  reasonOligarch: "", //เหตุผลผู้มีอำนาจ
  positionName: "", //ตำแหน่งผู้ยื่นขอ
  positionLevelName: "", //ระดับผู้ยื่นขอ
  organizationName: "", //สังกัดผู้ยื่นขอ
  leaveTypeName: "", // Name ประเภทการลา
  leaveTypeId: "", //Id ประเภทการลา
  fullName: "", //คำนำหน้า ชื่อ นามสกุล คนขอลา
  dateSendLeave: new Date(), // วันที่ยื่นใบลา
  leaveDateStart: new Date(), //วันเริ่มการลา
  leaveDateEnd: new Date(), //วันสิ้นสุดการลา
  leaveCount: 0, //จำนวนวันลา
  status: "", //สถานะการของลา
  leaveLimit: 0, //โควต้าลา(แต่ละประเภท)หน่วยเป็นวัน
  leaveSummary: 0, //ลาป่วยไปแล้ว(แต่ละประเภท)หน่วยเป็นวัน
  leaveRemain: 0, //คงเหลือโควต้า(แต่ละประเภท)หน่วยเป็นวัน
  // leaveStartDate: new Date(), //*วัน เดือน ปีเริ่มต้นลา
  // leaveEndDate: new Date(), //*วัน เดือน ปีสิ้นสุดลา
  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: "",
  leaveRange: "",
});

onMounted(async () => {
  // showLoader();
  if (paramsId) {
    await fetchDetailLeave(paramsId);
  }
});

/**
 * Function fetch รายละเอียดของข้อมูล
 * @param paramsId รับ ID จาก paramID
 */
async function fetchDetailLeave(paramsId: string) {
  showLoader();
  await http
    .get(config.API.leaveListById(paramsId))
    .then(async (res) => {
      const data = 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);
      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.leaveLastStart && 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
        : "-";
      formData.coupleDayTotalHistory = data.coupleDayTotalHistory
        ? data.coupleDayTotalHistory
        : "-";
      formData.coupleDayStartDateHistory =
        data.coupleDayStartDateHistory &&
        date2Thai(data.coupleDayStartDateHistory);
      formData.coupleDayEndDateHistory =
        data.coupleDayEndDateHistory && date2Thai(data.coupleDayEndDateHistory);
      formData.coupleDaySumTotalHistory = data.coupleDaySumTotalHistory
        ? data.coupleDaySumTotalHistory
        : "-";
      formData.approveStep = data.approveStep;
      formData.dear = data.dear ? data.dear : "-";

      /** ส่งประเภทของการลาไป Function เช็คประเภทการลา*/
      await fectOptionType();
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

const leaveType = ref<LeaveType[]>();
/** function เรียกประเภทการลา */
async function fectOptionType() {
  await http
    .get(config.API.leaveType())
    .then((res) => {
      leaveType.value = res.data.result;
      checkLeaveType(formData.leaveTypeId, formData);
    })
    .catch((err) => {
      messageError($q, err);
    });
}
/**Status Form การลา*/
const checkForm = ref<string>("");
/**
 * Function เช็คประเภทการลา
 * @param type รับค่า
 */
function checkLeaveType(leaveTypeId: string, formData: FremData) {
  if (leaveType.value) {
    const filtertype: LeaveType | undefined = leaveType.value.find(
      (e: any) => 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.ordainDayLocationName !== "-") {
      checkForm.value = "FormUpasom";
    } else if (type === "LV-006") {
      checkForm.value = "FormHajj";
    } else if (type === "LV-007") {
      checkForm.value = "FormCheckSelect";
    } else if (type === "LV-008" && formData.studyDayTrainingSubject === "-") {
      checkForm.value = "FormStudy";
    } else if (type === "LV-008") {
      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";
    }
  }
}

/** Function dialog*/
async function openModal(data: string) {
  if (data === "approve") {
    modalApprove.value = true;
    dialogTitle.value = "อนุมัติ";
  }
  if (data === "UnApprove") {
    modalApprove.value = true;
    dialogTitle.value = "ไม่อนุมัติ";
  }
  if (data === "authority") {
    modalApprove.value = true;
    dialogTitle.value = "ส่งไปยังผู้มีอำนาจ";
    dialogLabel.value = "ความคิดเห็น";
  }
}

/** function ส่งไปผู้บังคับบัญชา*/
function sendToCommand() {
  dialogConfirm(
    $q,
    async () => {
      await http
        .get(config.API.leaveApproveToComander(formData.id))
        .then(() => {
          success($q, "บันทึกข้อมูลสำเร็จ");
        })
        .catch((err) => {
          messageError($q, err);
        })
        .finally(async () => {
          await fetchDetailLeave(paramsId);
        });
    },
    "ยืนยันการส่งไปผู้บังคับบัญชา",
    "ต้องการยืนยันการส่งไปผู้บังคับบัญชานี้ใช่หรือไม่ ?"
  );
}

/** Function Save */
function clickSave(reason: string) {
  const body = {
    reason: reason,
  };

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

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();
    });
}

function formattedNumber(x: number) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
</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
          icon="mdi-download"
          unelevated
          round
          dense
          flat
          color="primary"
          class="q-mr-sm"
          @click="onClickDownloadFile(formData.id, formData.leaveTypeName)"
          ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
        > -->
        <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.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.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 />
      <!-- <q-file
        v-model="filesUpload"
        dense
        label="อัปโหลดไฟล์"
        outlined
        class="col-xs-12 col-sm-3 col-md-2"
        bg-color="white"
        multiple
        accept="application/pdf"
      >
        <template v-slot:prepend>
          <q-icon name="attach_file" color="primary" />
        </template>
      </q-file> -->
      <!-- <q-btn
        v-if="filesUpload"
        flat
        round
        color="primary"
        icon="mdi-arrow-up-bold"
        @click="upLoadFile"
        ><q-tooltip>อัปโหลด</q-tooltip></q-btn
      > -->
    </div>
  </div>
  <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.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"
              v-if="
                formData.approveStep === 'st3' ||
                formData.approveStep === 'st4' ||
                formData.approveStep === 'st5'
              "
            >
              <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-detail">
                      {{ formData.reasonCommander }}
                    </div>
                  </div>
                </div>
              </div>
            </q-card>
          </div>
          <div class="col-xs-12 col-sm-12 row">
            <q-card
              bordered
              class="row col-12 text-dark q-mt-sm"
              v-if="
                formData.approveStep === 'st4' || formData.approveStep === 'st5'
              "
            >
              <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">{{ formData.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">
                      {{ formData.reasonOligarch }}
                    </div>
                  </div>
                </div>
              </div>
            </q-card>
          </div>
        </div>
      </div>
    </div>
    <q-separator />
    <div class="row q-pa-md q-gutter-md justify-end">
      <q-btn
        v-if="formData.approveStep === 'st1' && formData.status !== 'ยกเลิก'"
        unelevated
        color="orange-5"
        label="ส่งไปยังผู้บังคับบัญชา"
        @click="sendToCommand"
        ><q-tooltip>ส่งไปยังผู้บังคับบัญชา</q-tooltip>
      </q-btn>

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

      <q-btn
        v-if="formData.approveStep === 'st3' && formData.status !== 'ยกเลิก'"
        unelevated
        color="orange-5"
        label="ไม่อนุมัติ"
        @click="openModal('UnApprove')"
        ><q-tooltip>ไม่อนุมัติ</q-tooltip>
      </q-btn>
      <q-btn
        v-if="formData.approveStep === 'st3' && formData.status !== 'ยกเลิก'"
        unelevated
        color="primary"
        label="อนุมัติ"
        @click="openModal('approve')"
        ><q-tooltip>อนุมัติ</q-tooltip>
      </q-btn>
    </div>
  </q-card>
  <DialogReason
    v-model:modal="modalApprove"
    :title="dialogTitle"
    :label="dialogLabel"
    :savaForm="clickSave"
  />
</template>

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