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

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

import type {
  DataOption,
  DataPerson,
  PersonData,
} from "@/modules/15_development/interface/index/Main";
import type { FormsSholarship } from "@/modules/15_development/interface/request/Scholarship";
import type { DataSholarship } from "@/modules/15_development/interface/response/Scholarship";

import DialogGov from "@/modules/15_development/components/history/DialogGov.vue";
import Header from "@/components/DialogHeader.vue";
import DialogReturn from "@/modules/15_development/components/scholarship/DialogReturn.vue";

const fileBackReceived = ref<string>("");
const $q = useQuasar();
const router = useRouter();
const route = useRoute();
const {
  dialogConfirm,
  showLoader,
  hideLoader,
  messageError,
  success,
  date2Thai,
  calculateDurationYmd,
  convertDateToAPI,
} = useCounterMixin();

const checkRouteDetail = ref<boolean>(
  route.name == "developmentScholarshipidDetail"
); // check ชือ route

const modalUpload = ref<boolean>(false);
const documentFile = ref<any>(null);
const fileList = ref<any[]>();

const dialogReturn = ref<boolean>(false);
const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม"); //หัวข้อหน้า
const scholarshipId = ref<string | null>(
  route.params.id ? route.params.id.toLocaleString() : null
); // เก็บ id route.

const isStatus = ref<string>(""); // สถานะ
const modalDialogGov = ref<boolean>(false); // popup เลือกข้าราชการ ฯ

const budgetSourceOp = ref<DataOption[]>([
  { id: "BKK", name: "งบประมาณ กทม." },
  { id: "HOSPITAL", name: "เงินนอกงบประมาณ" },
  { id: "FUND", name: "เงินกองทุน" },
  { id: "SUBSIDY", name: "เงินอุดหนุน" },
  { id: "OTHER", name: "เงินอื่น ๆ" },
]);

const useOfficialTimeOp = ref<DataOption[]>([
  {
    id: "NOUSETIME",
    name: "ไม่ใช้เวลาราชการ",
  },
  {
    id: "USETIME",
    name: "ใช้เวลาราชการ",
  },
  {
    id: "SOMETIME",
    name: "ใช้เวลาราชการบางส่วน",
  },
]);

const scholarshipTypeOp = ref<DataOption[]>([
  { id: "DOMESTICE", name: "การศึกษาในประเทศ" },
  {
    id: "NOABROAD",
    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยงานภายนอก (หลักสูตรที่ไม่มีการไปต่างประเทศ)",
  },
  {
    id: "ABROAD",
    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยงานภายนอก (หลักสูตรที่มีการไปต่างประเทศ)",
  },
  {
    id: "EXECUTIVE",
    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยงานภายนอก (หลักสูตรประเภทนักบริหาร)",
  },
  {
    id: "STUDY",
    name: "ทุนการศึกษา ณ ต่างประเทศ",
  },
  {
    id: "TRAINING",
    name: "ทุนฝึกอบรม ณ ต่างประเทศ",
  },
]);
const fundTypeOp = ref<DataOption[]>([
  { id: "FUND1", name: "ทุน 1 (ก)" },
  { id: "FUND2", name: "ทุน 1 (ข)" },
  { id: "FUND3", name: "ทุน 1 (ค)" },
  { id: "FUND4", name: "ทุน 2 (ทุนส่วนตัว)" },
  // { id: "FUND5", name: "ทุนส่วนตัว" },
]);

const isGov = ref<boolean>(false); // เก็บเช็คข้าราชการ ถ้ามี เลข ปชช. true/false
const isGuarantor = ref<boolean>(false); // ข้อมูลผู้ค้ำประกัน มี/ไม่มี
const isSelectGov = ref<boolean>(false); // เลือกข้าราชการ

const dataPerson = reactive<PersonData>({
  id: "",
  citizenId: "",
  name: "",
  position: "",
  type: "",
  level: "",
  positionSide: "",
  org: "-",
});

const dataGuarantor = reactive<PersonData>({
  id: "",
  citizenId: "",
  name: "",
  position: "",
  type: "",
  level: "",
  positionSide: "",
  org: "-",
});

const formBody = reactive<FormsSholarship>({
  profileId: "",
  rank: "", //ยศ
  prefix: "", //คำนำหน้าชื่อ
  firstName: "", //ชื่อ
  lastName: "", //นามสกุล
  citizenId: "", //เลขประจำตัวประชาชน
  position: "", //ตำแหน่ง
  posExecutive: "", //ชื่อตำแหน่งทางการบริหาร
  posLevelId: null, //ไอดีระดับตำแหน่ง
  posTypeId: null, //ไอดีประเภทตำแหน่ง
  org: "",
  rootId: null,
  rootDnaId: null,
  root: "",
  orgRootShortName: "",
  orgRevisionId: null,
  guarantorRank: "", //ยศ(ผู้ค้ำ)
  guarantorPrefix: "", //คำนำหน้าชื่อ(ผู้ค้ำ)
  guarantorFirstName: "", //ชื่อ(ผู้ค้ำ)
  guarantorLastName: "", //นามสกุล(ผู้ค้ำ)
  guarantorCitizenId: "", //เลขประจำตัวประชาชน(ผู้ค้ำ)
  guarantorPosition: "", //ตำแหน่ง(ผู้ค้ำ)
  guarantorPosExecutive: "", //ชื่อตำแหน่งทางการบริหาร(ผู้ค้ำ)
  guarantorOrg: "",
  guarantorRootId: null,
  guarantorRootDnaId: null,
  guarantorRoot: "",
  guarantorOrgRootShortName: "",
  guarantorOrgRevisionId: null,
  posLevelguarantorId: null, //ไอดีระดับตำแหน่ง(ผู้ค้ำ)
  posTypeguarantorId: null, //ไอดีประเภทตำแหน่ง(ผู้ค้ำ)
  scholarshipYear: null, //ปีงบประมาณที่ได้รับทุน
  budgetSource: "", //แหล่งงบประมาณ
  budgetApprove: null, //งบประมาณที่ได้รับอนุมัติตลอดหลักสูตร
  bookNo: "", //เลขที่หนังสืออนุมัติ
  bookNoDate: null, //ลงวันที่(หนังสือ)
  bookApproveDate: null, //หนังสืออนุมัติเมื่อวันที่
  useOfficialTime: "NOUSETIME", //ใช้เวลาราชการ
  changeDetail: "", //เปลี่ยนแปลงรายละเอียด
  scholarshipType: "", //เลือกประเภททุน
  fundType: "", //ประเภททุน
  contractNo: "", //เลขที่สัญญา
  contractDate: null, //ลงวันที่(เลขที่สัญญา)
  reportBackNo: "", //เลขที่หนังสือรายงานตัวกลับ
  reportBackNoDate: null, //ลงวันที่(เลขที่หนังสือรายงานตัวกลับ)
  reportBackDate: null, //รายงานตัวกลับวันที่
  degreeLevel: "", //ระดับปริญญา
  course: "", //หลักสูตรการศึกษา/หลักสูตรการฝึกอบรม
  field: "", //สาขาวิชา/สาขา
  faculty: "", //คณะ
  educationalInstitution: "", //สถาบันการศึกษา/สถาบันการศึกษา_หน่วยงานผู้จัดการฝึกอบรม/สถานที่ไปศึกษาดูงานในประเทศ
  startDate: null, //วันเริ่มต้นการศึกษา/วันเริ่มต้นการฝึกอบรม/วันเริ่มต้นการศึกษาดูงานในประเทศ
  endDate: null, //วันสิ้นสุดการศึกษา/วันสิ้นสุดการฝึกอบรม/วันสิ้นสุดการศึกษาดูงานในประเทศ
  studyPlace: "", //สถานที่ไปศึกษาดูงาน
  studyTopic: "", //หัวข้อการไปศึกษาดูงาน/หัวข้อการไปศึกษาดูงานในประเทศ
  studyStartDate: null, //วันเริ่มต้นการศึกษาดูงาน
  studyEndDate: null, //วันสิ้นสุดการศึกษาดูงาน
  studyCountry: "", //ประเทศที่ไปศึกษาดูงาน
  studyAbroadTopic: "", //หัวข้อการไปศึกษาดูงานต่างประเทศ
  studyAbroadStartDate: null, //วันเริ่มต้นการศึกษาดูงานต่างประเทศ
  studyAbroadEndDate: null, //วันสิ้นสุดการศึกษาดูงานต่างประเทศ
  totalPeriod: "", //รวมระยะเวลาในการศึกษา/รวมระยะเวลาในการฝึกอบรม
  planType: "",
  isNoUseBudget: false,
  budgetSourceOther: "", //เงินอื่นๆ
});

/**
 * ดึงข้อมูลรายละเอียด
 * @param id จาก id
 */
async function fetchDataDetail(id: string) {
  showLoader();
  await http
    .get(config.API.devScholarshipByid(id))
    .then(async (res) => {
      const data: DataSholarship = await res.data.result;

      formBody.profileId = data.profileId;
      formBody.rootDnaId = data.rootDnaId;
      formBody.rank = data.rank;
      formBody.prefix = data.prefix;
      formBody.firstName = data.firstName;
      formBody.lastName = data.lastName;
      formBody.citizenId = data.citizenId;
      formBody.position = data.position;
      formBody.posExecutive = data.posExecutive;
      formBody.posLevelId = data.posLevelId;
      formBody.posTypeId = data.posTypeId;
      formBody.guarantorRank = data.guarantorRank;
      formBody.guarantorPrefix = data.guarantorPrefix;
      formBody.guarantorFirstName = data.guarantorFirstName;
      formBody.guarantorLastName = data.guarantorLastName;
      formBody.guarantorCitizenId = data.guarantorCitizenId;
      formBody.guarantorPosition = data.guarantorPosition;
      formBody.guarantorPosExecutive = data.guarantorPosExecutive;
      formBody.guarantorOrg = data.guarantorOrg;
      formBody.guarantorRootId = data.guarantorRootId;
      formBody.guarantorRootDnaId = data.guarantorRootDnaId;
      formBody.guarantorRoot = data.guarantorRoot;
      formBody.guarantorOrgRootShortName = data.guarantorOrgRootShortName;
      formBody.guarantorOrgRevisionId = data.guarantorOrgRevisionId;
      formBody.posLevelguarantorId = data.posLevelguarantorId;
      formBody.posTypeguarantorId = data.posTypeguarantorId;
      formBody.scholarshipYear = data.scholarshipYear;
      formBody.budgetSource = data.budgetSource;
      formBody.budgetApprove = data.budgetApprove;
      formBody.bookNo = data.bookNo;
      formBody.bookNoDate = data.bookNoDate;
      formBody.bookApproveDate = data.bookApproveDate;
      formBody.useOfficialTime = data.useOfficialTime
        ? data.useOfficialTime
        : "NOUSETIME";
      formBody.changeDetail = data.changeDetail;
      formBody.scholarshipType = data.scholarshipType;
      formBody.fundType = data.fundType;
      formBody.contractNo = data.contractNo;
      formBody.contractDate = data.contractDate;
      formBody.reportBackNo = data.reportBackNo;
      formBody.reportBackNoDate = data.reportBackNoDate;
      formBody.reportBackDate = data.reportBackDate;

      formBody.degreeLevel = data.degreeLevel;
      formBody.course = data.course;
      formBody.field = data.field;
      formBody.faculty = data.faculty;
      formBody.educationalInstitution = data.educationalInstitution;
      formBody.startDate = data.startDate;
      formBody.endDate = data.endDate;
      formBody.studyPlace = data.studyPlace;
      formBody.studyTopic = data.studyTopic;
      formBody.studyStartDate = data.studyStartDate;
      formBody.studyEndDate = data.studyEndDate;
      formBody.studyCountry = data.studyCountry;
      formBody.studyAbroadTopic = data.studyAbroadTopic;
      formBody.studyAbroadStartDate = data.studyAbroadStartDate;
      formBody.studyAbroadEndDate = data.studyAbroadEndDate;
      formBody.totalPeriod = data.totalPeriod;
      formBody.budgetSourceOther = data.budgetSourceOther;
      formBody.planType = data.planType ? data.planType : "";
      formBody.isNoUseBudget = data.isNoUseBudget ? data.isNoUseBudget : false;

      dataPerson.citizenId = data.citizenId ? data.citizenId : "-";
      dataPerson.name = `${data.prefix}${data.firstName}  ${data.lastName}`;
      dataPerson.position = data.position ? data.position : "-";
      dataPerson.type = data.posTypeName ? data.posTypeName : "-";
      dataPerson.level = data.posLevelName ? data.posLevelName : "-";
      dataPerson.positionSide = data.posExecutive ? data.posExecutive : "-";
      dataPerson.org = data.org ? data.org : "-";

      dataGuarantor.citizenId = data.guarantorCitizenId
        ? data.guarantorCitizenId
        : "-";
      dataGuarantor.name = `${data.guarantorPrefix}${data.guarantorFirstName} ${data.guarantorLastName}`;
      dataGuarantor.position = data.position ? data.position : "-";
      dataGuarantor.type = data.posTypeguarantorName
        ? data.posTypeguarantorName
        : "-";
      dataGuarantor.level = data.posLevelguarantorName
        ? data.posLevelguarantorName
        : "-";
      dataGuarantor.positionSide = data.guarantorPosExecutive
        ? data.guarantorPosExecutive
        : "-";
      dataGuarantor.org = data.guarantorOrg ? data.guarantorOrg : "-";
      isStatus.value = data.status;
      isGov.value = data.citizenId ? true : false;
      isGuarantor.value = data.guarantorCitizenId ? true : false;
      if (isStatus.value !== "PENDING") {
        router.push(`/development/scholarship-detail/${id}`);
      }
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/** บันทึกข้อมูล */
function onSubmit() {
  dialogConfirm($q, async () => {
    showLoader();
    formBody.budgetApprove =
      typeof formBody.budgetApprove === "string"
        ? Number(formBody.budgetApprove.replace(/,/g, ""))
        : formBody.budgetApprove;

    if (
      formBody.scholarshipType === "STUDY" ||
      formBody.scholarshipType === "TRAINING"
    ) {
      formBody.useOfficialTime = "NOUSETIME";
    }

    try {
      const url = scholarshipId.value
        ? config.API.devScholarshipByid(scholarshipId.value)
        : config.API.devScholarship;
      const method = scholarshipId.value ? "put" : "post";
      await http[method](url, {
        ...formBody,
        bookApproveDate: convertDateToAPI(formBody.bookApproveDate),
        bookNoDate: convertDateToAPI(formBody.bookNoDate),
        contractDate: convertDateToAPI(formBody.contractDate),
        endDate: convertDateToAPI(formBody.endDate),
        reportBackDate: convertDateToAPI(formBody.reportBackDate),
        reportBackNoDate: convertDateToAPI(formBody.reportBackNoDate),
        startDate: convertDateToAPI(formBody.startDate),
        studyAbroadEndDate: convertDateToAPI(formBody.studyAbroadEndDate),
        studyAbroadStartDate: convertDateToAPI(formBody.studyAbroadStartDate),
        studyEndDate: convertDateToAPI(formBody.studyEndDate),
        studyStartDate: convertDateToAPI(formBody.studyStartDate),
      });

      scholarshipId.value
        ? await fetchDataDetail(scholarshipId.value)
        : router.push("/development/scholarship");
      success($q, "บันทึกข้อมูลสำเร็จ");
    } catch (e) {
      messageError($q, e);
    } finally {
      hideLoader();
    }
  });
}

/** เช็ควันที่เริ่ม/สิ้นสุด */
function changeStartDate(type: string) {
  switch (type) {
    case "startDate":
      if (formBody?.startDate !== null && formBody?.endDate !== null) {
        const startDate = new Date(formBody.startDate);
        const endDate = new Date(formBody?.endDate);
        if (startDate > endDate) {
          formBody.endDate = null;
        }
      }
      break;

    case "studyStartDate":
      if (
        formBody?.studyStartDate !== null &&
        formBody?.studyEndDate !== null
      ) {
        const startDate = new Date(formBody.studyStartDate);
        const endDate = new Date(formBody?.studyEndDate);
        if (startDate > endDate) {
          formBody.studyEndDate = null;
          if (formBody.scholarshipType === "NOABROAD") {
            formBody.totalPeriod = "";
          }
        } else {
          if (formBody.scholarshipType === "NOABROAD") {
            formBody.totalPeriod = calculateDurationYmd(startDate, endDate);
          }
        }
      }
      break;

    case "studyAbroadStartDate":
      if (
        formBody?.studyAbroadStartDate !== null &&
        formBody?.studyAbroadEndDate !== null
      ) {
        const startDate = new Date(formBody.studyAbroadStartDate);
        const endDate = new Date(formBody?.studyAbroadEndDate);
        if (startDate > endDate) {
          formBody.studyAbroadEndDate = null;
        } else {
          formBody.totalPeriod = calculateDurationYmd(startDate, endDate);
        }
      }
      break;

    default:
      break;
  }
}

/** เช็คข้อมูล เรียนจบ/ไม่จบ */
function onClickUpdateStatus(type: string) {
  dialogConfirm($q, () => {
    if (scholarshipId.value) {
      showLoader();
      http
        .get(config.API.devScholarshipStatus(scholarshipId.value, type))
        .then(async () => {
          if (scholarshipId.value) {
            await fetchDataDetail(scholarshipId.value);
          }
        })
        .catch((err) => {
          messageError($q, err);
        })
        .finally(() => {
          hideLoader();
        });
    }
  });
}

/**
 * update date
 * @param startDate วันที่เริ่ม
 * @param endDate วันที่สิ้นสุด
 * @param toDo true/false
 */
function updateTotalPeriod(
  startDate: any,
  endDate: any,
  toDo: boolean = false
) {
  if (!toDo && startDate && endDate) {
    const start = new Date(startDate);
    const end = new Date(endDate);
    formBody.totalPeriod = calculateDurationYmd(start, end);
  }
}

function onSelectGov(isGov: boolean) {
  isSelectGov.value = isGov;
  modalDialogGov.value = true;
}

/** update ข้อมูลโ้วยจากเกก็บไว้ในตัวแปร */
function upDate(data: DataPerson) {
  if (isSelectGov.value) {
    formBody.profileId = data.id;
    formBody.rank = data.rank;
    formBody.prefix = data.prefix;
    formBody.firstName = data.firstName;
    formBody.lastName = data.lastName;
    formBody.citizenId = data.citizenId;
    formBody.position = data.position;
    formBody.posTypeId = data.posTypeId;
    formBody.posLevelId = data.posLevelId;
    formBody.posExecutive = data.positionSide;
    formBody.org = data.org;
    formBody.rootId = data.rootId;
    formBody.rootDnaId = data.rootDnaId;
    formBody.root = data.root;
    formBody.orgRootShortName = data.orgRootShortName;
    formBody.orgRevisionId = data.orgRevisionId;

    dataPerson.id = data.id ? data.id : "-";
    dataPerson.citizenId = data.citizenId ? data.citizenId : "-";
    dataPerson.name = data.name ? data.name : "-";
    dataPerson.position = data.position ? data.position : "-";
    dataPerson.type = data.type ? data.type : "-";
    dataPerson.level = data.level ? data.level : "-";
    dataPerson.positionSide = data.positionSide ? data.positionSide : "-";
    dataPerson.org = data.org ? data.org : "-";
    isGov.value = true;
  } else {
    formBody.guarantorRank = data.rank;
    formBody.guarantorPrefix = data.prefix;
    formBody.guarantorFirstName = data.firstName;
    formBody.guarantorLastName = data.lastName;
    formBody.guarantorCitizenId = data.citizenId;
    formBody.guarantorPosition = data.position;
    formBody.posTypeguarantorId = data.posTypeId;
    formBody.posLevelguarantorId = data.posLevelId;
    formBody.guarantorPosExecutive = data.positionSide;
    formBody.guarantorOrg = data.org;
    formBody.guarantorRootId = data.rootId;
    formBody.guarantorRootDnaId = data.rootDnaId;
    formBody.guarantorRoot = data.root;
    formBody.guarantorOrgRootShortName = data.orgRootShortName;
    formBody.guarantorOrgRevisionId = data.orgRevisionId;

    dataGuarantor.id = data.id ? data.id : "-";
    dataGuarantor.citizenId = data.citizenId ? data.citizenId : "-";
    dataGuarantor.name = data.name ? data.name : "-";
    dataGuarantor.position = data.position ? data.position : "-";
    dataGuarantor.type = data.type ? data.type : "-";
    dataGuarantor.level = data.level ? data.level : "-";
    dataGuarantor.positionSide = data.positionSide ? data.positionSide : "-";
    dataGuarantor.org = data.org ? data.org : "-";

    isGuarantor.value = true;
  }
}

/**
 * ดึงข้อมูล ไฟล์
 * @param id id ของรายการ
 */
async function checkFileBackReceived(id: string) {
  if (fileBackReceived.value.length == 0) {
    await http
      .get(
        config.API.file("ระบบพัฒนาบุคคล", "ฟอร์มรายงานตัวกลับเข้ารับราชการ", id)
      )
      .then(async (res) => {
        fileBackReceived.value =
          res.data.length > 0 ? res.data[0].fileName : "";
      });
  }
}

/** download file */
function downloadFileBackReceived() {
  showLoader();
  if (scholarshipId.value !== null && fileBackReceived.value !== null) {
    http
      .get(
        config.API.fileByFile(
          "ระบบพัฒนาบุคคล",
          "ฟอร์มรายงานตัวกลับเข้ารับราชการ",
          scholarshipId.value,
          fileBackReceived.value
        )
      )
      .then((res) => {
        const data = res.data.downloadUrl;
        window.open(data, "_blank");
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(async () => {
        hideLoader();
      });
  }
}

/**
 * class inputgreen
 * @param val
 */
const classInput = (val: boolean) => {
  return {
    "full-width inputgreen cursor-pointer": val,
    "full-width cursor-pointer": !val,
  };
};

function onOpenReturn() {
  dialogReturn.value = true;
}

async function onDownload(type: string) {
  showLoader();
  await http
    .get(config.API.developmentScholarshipReport + `/${scholarshipId.value}`)
    .then(async (res) => {
      const dataList = res.data.result;
      await genReport(
        dataList,
        "ฟอร์มรายงานตัวกลับเข้ารับราชการ(ต้นแบบ)",
        type
      );
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

function closeDialog() {
  modalUpload.value = false;
  documentFile.value = null;
}

async function clickUpload(file: any) {
  const fileName = { fileName: file.name };

  dialogConfirm(
    $q,
    async () => {
      const selectedFile = file;
      const formdata = new FormData();
      formdata.append("file", selectedFile);
      showLoader();

      await http
        .post(
          config.API.file(
            "ระบบพัฒนาบุคคล",
            "ฟอร์มรายงานตัวกลับเข้ารับราชการ",
            scholarshipId.value as string
          ),
          {
            replace: false,
            fileList: fileName,
          }
        )
        .then(async (res) => {
          const foundKey: string | undefined = Object.keys(res.data).find(
            (key) =>
              res.data[key]?.fileName !== undefined &&
              res.data[key]?.fileName !== ""
          );
          foundKey &&
            uploadFileDoc(res.data[foundKey]?.uploadUrl, documentFile.value);
        })
        .catch((err) => {
          messageError($q, err);
          hideLoader();
        });
    },
    "ยืนยันการอัปโหลดไฟล์",
    "ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
  );
}

/**
 * ฟังก์ชั่นสำหรับอัปโหลดไฟล์เอกสารหลักฐาน
 */
async function uploadFileDoc(uploadUrl: string, file: any) {
  const Data = new FormData();
  Data.append("file", documentFile.value);
  await axios
    .put(uploadUrl, file, {
      headers: {
        "Content-Type": file.type,
      },
    })
    .then((res) => {
      closeDialog();
      success($q, "อัปโหลดไฟล์สำเร็จ");
      fetchDataDetail(scholarshipId.value as string);
      checkFileBackReceived(scholarshipId.value as string);
    })
    .catch((e) => {
      messageError($q, e);
      hideLoader();
    })
    .finally(() => {
      hideLoader();
      documentFile.value = null;
    });
}

/** ดึงข้อมูลเมื่อคอมโพเนนต์โหลดเสร็จสมบูรณ์  */
onMounted(async () => {
  if (scholarshipId.value) {
    await fetchDataDetail(scholarshipId.value);
    await checkFileBackReceived(scholarshipId.value);
  }
});
</script>

<template>
  <div class="row items-center">
    <div class="toptitle text-dark items-center">
      <q-btn
        flat
        round
        dense
        class="q-mr-sm"
        icon="mdi-arrow-left"
        color="primary"
        @click="router.push('/development/scholarship')"
      />
      {{
        checkRouteDetail
          ? "รายละเอียดข้าราชการฯ ที่ได้รับทุนการศึกษา/ฝึกอบรม"
          : `${title}ข้าราชการฯ ที่ได้รับทุนการศึกษา/ฝึกอบรม`
      }}
    </div>
    <q-space />
    <q-btn
      v-if="scholarshipId != null && fileBackReceived != ''"
      flat
      round
      dense
      icon="download"
      color="blue"
      @click="downloadFileBackReceived()"
    >
      <q-tooltip>ดาวน์โหลด</q-tooltip>
    </q-btn>
    <div class="row q-ml-xs q-gutter-x-sm items-center" v-if="scholarshipId">
      <div>
        <q-btn
          v-if="formBody.scholarshipType !== 'EXECUTIVE'"
          flat
          icon="mdi-dots-vertical"
          color="grey-8"
          for="#cancel"
          dense
          round
          unelevated
        >
          <q-menu>
            <q-list>
              <q-item clickable v-close-popup @click="onOpenReturn">
                <q-item-section>
                  <q-item-label>
                    <q-icon name="edit" color="edit" size="18px" />
                    แก้ไขข้อมูลรายงานตัวกลับเข้ารับราชการ
                  </q-item-label>
                </q-item-section>
              </q-item>
              <q-item
                clickable
                v-close-popup
                @click="modalUpload = true"
                v-if="fileBackReceived.length == 0"
              >
                <q-item-section>
                  <q-item-label>
                    <q-icon name="mdi-upload" color="primary" size="18px" />
                    อัปโหลดไฟล์เอกสารหลักฐาน
                  </q-item-label>
                </q-item-section>
              </q-item>
              <q-item clickable v-close-popup @click="onDownload('docx')">
                <q-item-section>
                  <q-item-label>
                    <q-icon name="mdi-file-word" color="blue" size="18px" />
                    ดาวน์โหลดฟอร์มต้นแบบ .docx
                  </q-item-label>
                </q-item-section>
              </q-item>
              <q-item clickable v-close-popup @click="onDownload('pdf')">
                <q-item-section>
                  <q-item-label>
                    <q-icon name="mdi-file-pdf-box" color="red" size="18px" />
                    ดาวน์โหลดฟอร์มต้นแบบ .pdf
                  </q-item-label>
                </q-item-section>
              </q-item>
            </q-list>
          </q-menu>
        </q-btn>
      </div>
      <div class="q-gutter-sm" v-if="isStatus === 'PENDING'">
        <q-btn
          v-if="!checkRouteDetail"
          unelevated
          color="green"
          label="เรียนจบ"
          @click="onClickUpdateStatus('GRADUATE')"
        />
        <q-btn
          v-if="!checkRouteDetail"
          unelevated
          color="red"
          label="เรียนไม่จบ"
          @click="onClickUpdateStatus('NOTGRADUATE')"
        />
      </div>
      <div :class="isStatus === 'GRADUATE' ? 'text-green' : 'text-red'" v-else>
        {{ isStatus === "GRADUATE" ? "เรียนจบ" : "เรียนไม่จบ" }}
      </div>
    </div>
  </div>

  <div class="q-pa-sm">
    <q-card flat bordered class="col-12">
      <q-form greedy @submit.prevent @validation-success="onSubmit">
        <div class="q-pa-md">
          <q-card bordered tyle="border: 1px solid #d6dee1">
            <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
              ข้อมูลราชการ
              <q-btn
                v-if="!checkRouteDetail"
                flat
                dense
                icon="add"
                color="primary"
                label="เลือกข้าราชการ"
                @click="onSelectGov(true)"
              >
                <q-tooltip>เพิ่ม</q-tooltip>
              </q-btn>
            </div>
            <div class="col-12"><q-separator /></div>
            <div class="row col-12 q-col-gutter-md q-pa-md" v-if="isGov">
              <div class="col">
                <div class="row q-col-gutter-md">
                  <div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
                  <div class="col-8 text-weight-medium">
                    {{ dataPerson.citizenId }}
                  </div>
                  <div class="col-4 text-grey">ชื่อ-นามสกุล</div>
                  <div class="col-8 text-weight-medium">
                    {{ dataPerson.name }}
                  </div>
                  <div class="col-4 text-grey">ตำแหน่ง</div>
                  <div class="col-8 text-weight-medium">
                    {{ dataPerson.position }}
                  </div>
                  <div class="col-4 text-grey">ตำแหน่งประเภท</div>
                  <div class="col-8 text-weight-medium">
                    {{ dataPerson.type }}
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="row q-col-gutter-md">
                  <div class="col-4 text-grey">ระดับตำแหน่ง</div>
                  <div class="col-8 text-weight-medium">
                    {{ dataPerson.level }}
                  </div>
                  <div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
                  <div class="col-8 text-weight-medium">
                    {{ dataPerson.positionSide }}
                  </div>
                  <div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
                  <div class="col-8 text-weight-medium text-html">
                    {{ dataPerson.org }}
                  </div>
                </div>
              </div>
            </div>
            <div class="row col-12 q-pa-md" v-else>
              <q-banner class="bg-grey-3 text-black col-12 text-center">
                เลือกข้าราชการ
              </q-banner>
            </div>
          </q-card>
        </div>

        <div class="row q-col-gutter-md q-pa-md" v-if="isGov">
          <div class="col-9">
            <q-select
              :class="classInput(!checkRouteDetail)"
              :readonly="checkRouteDetail"
              dense
              outlined
              hide-bottom-space
              lazy-rules
              v-model="formBody.scholarshipType"
              :options="scholarshipTypeOp"
              option-label="name"
              option-value="id"
              emit-value
              map-options
              label="เลือกประเภททุน"
              :rules="[
                (val: string) =>
                  !!val || `${'กรุณาเลือกประเภททุน'}`,
              ]"
            />
          </div>
          <div
            class="col-3"
            v-if="
              formBody.scholarshipType !== '' &&
              formBody.scholarshipType !== 'EXECUTIVE'
            "
          >
            <q-select
              :readonly="checkRouteDetail"
              dense
              outlined
              hide-bottom-space
              lazy-rules
              :class="classInput(!checkRouteDetail)"
              v-model="formBody.fundType"
              :options="fundTypeOp"
              option-label="name"
              option-value="id"
              emit-value
              map-options
              label="ประเภททุน"
              :rules="[
                (val: string) =>
                  !!val || `${'กรุณาเลือกประเภททุน'}`,
              ]"
            />
          </div>

          <div class="col-12">
            <q-radio
              :disable="checkRouteDetail"
              v-model="formBody.planType"
              checked-icon="task_alt"
              unchecked-icon="panorama_fish_eye"
              val="INPLAN"
              label="ในแผน ฯ"
              dense
            />
            <q-radio
              :disable="checkRouteDetail"
              v-model="formBody.planType"
              checked-icon="task_alt"
              unchecked-icon="panorama_fish_eye"
              val="OUTPLAN"
              label="นอกแผน ฯ"
              dense
              class="q-pl-sm"
            />
          </div>

          <div class="col-12">
            <div class="row q-col-gutter-md">
              <div class="col-3">
                <datepicker
                  
                  v-model="formBody.scholarshipYear"
                  :locale="'th'"
                  autoApply
                  year-picker
                  :enableTimePicker="false"
                  :readonly="checkRouteDetail"
                >
                  <template #year="{ year }">{{ year + 543 }}</template>
                  <template #year-overlay-value="{ value }">{{
                    parseInt(value + 543)
                  }}</template>
                  <template #trigger>
                    <q-input
                      :readonly="checkRouteDetail"
                      dense
                      outlined
                      :class="classInput(!checkRouteDetail)"
                      :model-value="
                        formBody.scholarshipYear
                          ? Number(formBody.scholarshipYear) + 543
                          : null
                      "
                      :label="`${
                        formBody.scholarshipType === 'STUDY' ||
                        formBody.scholarshipType === 'TRAINING'
                          ? 'ปีงบประมาณที่ได้รับอนุมัติ '
                          : 'ปีงบประมาณที่ได้รับทุน'
                      }`"
                      hide-bottom-space
                      :rules="[
                      (val: string) => !!val || `${'กรุณาเลือกปีงบประมาณที่ได้รับทุน'}`,
                    ]"
                    >
                      <template v-slot:prepend>
                        <q-icon
                          name="event"
                          class="cursor-pointer"
                          style="color: var(--q-primary)"
                        >
                        </q-icon>
                      </template>
                    </q-input>
                  </template>
                </datepicker>
              </div>
              <div class="col-3">
                <q-select
                  :readonly="checkRouteDetail"
                  dense
                  outlined
                  :class="classInput(!checkRouteDetail)"
                  label="แหล่งงบประมาณ"
                  hide-bottom-space
                  v-model="formBody.budgetSource"
                  :options="budgetSourceOp"
                  option-label="name"
                  option-value="id"
                  emit-value
                  map-options
                  :clearable="formBody.fundType == 'FUND4' ? true : false"
                  :rules="[
                    (val: any) => {
                      if (!val && !formBody.isNoUseBudget && formBody.fundType != 'FUND4') {
                        return 'กรุณาเลือกแหล่งงบประมาณ';
                      }
                      return true;
                    },
                  ]"
                />
              </div>
              <div class="col-3" v-if="formBody.budgetSource == 'OTHER'">
                <q-input
                  :readonly="checkRouteDetail"
                  dense
                  outlined
                  hide-bottom-space
                  :class="classInput(!checkRouteDetail)"
                  v-model="formBody.budgetSourceOther"
                  label="เงินอื่นๆ โปรดระบุ"
                  hide-botom-space
                  :rules="[
                  (val: string) =>
                    !!val || `${'กรุณากรอกเงินอื่นๆ โปรดระบุ'}`,
                ]"
                />
              </div>
              <div class="col-3">
                <q-input
                  :readonly="checkRouteDetail"
                  dense
                  outlined
                  hide-bottom-space
                  :class="classInput(!checkRouteDetail)"
                  v-model="formBody.budgetApprove"
                  label="งบประมาณที่ได้รับอนุมัติตลอดหลักสูตร"
                  mask="###,###,###,###,###,###"
                  reverse-fill-mask
                  :rules="[
                    (val: any) => {
                      if (!val && !formBody.isNoUseBudget && formBody.fundType != 'FUND4') {
                        return 'กรุณากรอกงบประมาณที่ได้รับอนุมัติตลอดหลักสูตร';
                      }
                      return true;
                    },
                  ]"
                />
              </div>
            </div>
          </div>

          <div class="col-12">
            <div class="row q-col-gutter-md">
              <div class="col-3">
                <q-input
                  :readonly="checkRouteDetail"
                  dense
                  outlined
                  :class="classInput(!checkRouteDetail)"
                  v-model="formBody.bookNo"
                  label="เลขที่หนังสืออนุมัติ"
                  hide-bottom-space
                  :rules="[
                  (val: string) =>
                    !!val || `${'กรุณากรอกเลขที่หนังสืออนุมัติ'}`,
                ]"
                />
              </div>
              <div class="col-3">
                <datepicker
                  
                  v-model="formBody.bookNoDate"
                  :locale="'th'"
                  autoApply
                  :enableTimePicker="false"
                  :readonly="checkRouteDetail"
                >
                  <template #year="{ year }">{{ year + 543 }}</template>
                  <template #year-overlay-value="{ value }">{{
                    parseInt(value + 543)
                  }}</template>
                  <template #trigger>
                    <q-input
                      :readonly="checkRouteDetail"
                      dense
                      outlined
                      :class="classInput(!checkRouteDetail)"
                      :model-value="
                        formBody.bookNoDate
                          ? date2Thai(formBody.bookNoDate)
                          : null
                      "
                      :label="`${'ลงวันที่'}`"
                      hide-bottom-space
                      :rules="[
                      (val: string) =>
                        !!val || `${'กรุณาเลือกวันที่'}`,
                    ]"
                    >
                      <template v-slot:prepend>
                        <q-icon
                          name="event"
                          class="cursor-pointer"
                          style="color: var(--q-primary)"
                        >
                        </q-icon>
                      </template>
                    </q-input>
                  </template>
                </datepicker>
              </div>
              <div class="col-2">
                <datepicker
                  
                  v-model="formBody.bookApproveDate"
                  :locale="'th'"
                  autoApply
                  :readonly="checkRouteDetail"
                  :enableTimePicker="false"
                >
                  <template #year="{ year }">{{ year + 543 }}</template>
                  <template #year-overlay-value="{ value }">{{
                    parseInt(value + 543)
                  }}</template>
                  <template #trigger>
                    <q-input
                      dense
                      :readonly="checkRouteDetail"
                      outlined
                      :class="classInput(!checkRouteDetail)"
                      :model-value="
                        formBody.bookApproveDate
                          ? date2Thai(formBody.bookApproveDate)
                          : null
                      "
                      :label="`${'หนังสืออนุมัติเมื่อวันที่'}`"
                      hide-bottom-space
                      :rules="[
                      (val: string) =>
                        !!val || `${'กรุณาเลือกวันที่หนังสืออนุมัติเมื่อวันที่'}`,
                    ]"
                    >
                      <template v-slot:prepend>
                        <q-icon
                          name="event"
                          class="cursor-pointer"
                          style="color: var(--q-primary)"
                        >
                        </q-icon>
                      </template>
                    </q-input>
                  </template>
                </datepicker>
              </div>
              <div
                v-if="
                  formBody.scholarshipType !== 'STUDY' &&
                  formBody.scholarshipType !== 'TRAINING'
                "
                class="col-2"
              >
                <q-select
                  outlined
                  dense
                  label="เวลาราชการ"
                  :readonly="checkRouteDetail"
                  v-model="formBody.useOfficialTime"
                  :options="useOfficialTimeOp"
                  option-value="id"
                  option-label="name"
                  :class="classInput(!checkRouteDetail)"
                  emit-value
                  map-options
                >
                </q-select>
              </div>
              <div class="col-2">
                <q-checkbox
                  :disable="checkRouteDetail"
                  keep-color
                  color="primary"
                  v-model="formBody.isNoUseBudget"
                  label="ไม่ใช้งบประมาณ"
                />
              </div>
            </div>
          </div>

          <div class="col-12" v-if="formBody.scholarshipType !== 'EXECUTIVE'">
            <div class="row col-12 q-col-gutter-md">
              <div class="col-3">
                <q-input
                  :readonly="checkRouteDetail"
                  dense
                  outlined
                  lazy-rules
                  hide-bottom-space
                  label="เลขที่สัญญา"
                  :class="classInput(!checkRouteDetail)"
                  v-model="formBody.contractNo"
                  :rules="[
                    (val: string) =>
                      !!val || `${'กรุณากรอกเลขที่สัญญา'}`,
                  ]"
                />
              </div>
              <div class="col-3">
                <datepicker
                  
                  v-model="formBody.contractDate"
                  :locale="'th'"
                  autoApply
                  :enableTimePicker="false"
                  :readonly="checkRouteDetail"
                >
                  <template #year="{ year }">{{ year + 543 }}</template>
                  <template #year-overlay-value="{ value }">{{
                    parseInt(value + 543)
                  }}</template>
                  <template #trigger>
                    <q-input
                      dense
                      :readonly="checkRouteDetail"
                      outlined
                      :class="classInput(!checkRouteDetail)"
                      :model-value="
                        formBody.contractDate
                          ? date2Thai(formBody.contractDate)
                          : null
                      "
                      :label="`${'ลงวันที่'}`"
                      hide-bottom-space
                      :rules="[
                        (val: string) =>
                          !!val || `${'กรุณาเลือกวันที่'}`,
                      ]"
                    >
                      <template v-slot:prepend>
                        <q-icon
                          name="event"
                          class="cursor-pointer"
                          style="color: var(--q-primary)"
                        >
                        </q-icon>
                      </template>
                    </q-input>
                  </template>
                </datepicker>
              </div>

              <div class="col-12">
                <div class="row q-col-gutter-md">
                  <div class="col-3">
                    <q-input
                      dense
                      :readonly="checkRouteDetail"
                      outlined
                      hide-bottom-space
                      lazy-rules
                      :class="classInput(!checkRouteDetail)"
                      v-model="formBody.reportBackNo"
                      label="เลขที่หนังสือรายงานตัวกลับ"
                    />
                  </div>
                  <div class="col-3">
                    <datepicker
                      
                      v-model="formBody.reportBackNoDate"
                      :locale="'th'"
                      autoApply
                      :enableTimePicker="false"
                      :readonly="checkRouteDetail"
                    >
                      <template #year="{ year }">{{ year + 543 }}</template>
                      <template #year-overlay-value="{ value }">{{
                        parseInt(value + 543)
                      }}</template>
                      <template #trigger>
                        <q-input
                          :readonly="checkRouteDetail"
                          dense
                          outlined
                          :class="classInput(!checkRouteDetail)"
                          :model-value="
                            formBody.reportBackNoDate
                              ? date2Thai(formBody.reportBackNoDate)
                              : null
                          "
                          :label="`${'ลงวันที่'}`"
                          hide-bottom-space
                        >
                          <template v-slot:prepend>
                            <q-icon
                              name="event"
                              class="cursor-pointer"
                              style="color: var(--q-primary)"
                            >
                            </q-icon>
                          </template>
                        </q-input>
                      </template>
                    </datepicker>
                  </div>
                  <div class="col-3">
                    <datepicker
                      
                      v-model="formBody.reportBackDate"
                      :locale="'th'"
                      autoApply
                      :enableTimePicker="false"
                      :readonly="checkRouteDetail"
                    >
                      <template #year="{ year }">{{ year + 543 }}</template>
                      <template #year-overlay-value="{ value }">{{
                        parseInt(value + 543)
                      }}</template>
                      <template #trigger>
                        <q-input
                          :readonly="checkRouteDetail"
                          dense
                          outlined
                          :class="classInput(!checkRouteDetail)"
                          :model-value="
                            formBody.reportBackDate
                              ? date2Thai(formBody.reportBackDate)
                              : null
                          "
                          :label="`${'รายงานตัวกลับเมื่่อวันที่'}`"
                          hide-bottom-space
                        >
                          <template v-slot:prepend>
                            <q-icon
                              name="event"
                              class="cursor-pointer"
                              style="color: var(--q-primary)"
                            >
                            </q-icon>
                          </template>
                        </q-input>
                      </template>
                    </datepicker>
                  </div>
                </div>
              </div>

              <!-- เลือกทุน 1 -->
              <div
                class="col-12"
                v-if="formBody.scholarshipType === 'DOMESTICE'"
              >
                <div class="row q-col-gutter-md">
                  <div class="col-3">
                    <!-- <q-input
                      :readonly="checkRouteDetail"
                      dense
                      outlined
                      lazy-rules
                      hide-bottom-space
                      label="ระดับปริญญา"
                      :class="classInput(!checkRouteDetail)"
                      v-model="formBody.degreeLevel"
                      :rules="[
                        (val: string) =>
                          !!val || `${'กรุณากรอกระดับปริญญา'}`,
                      ]"
                    /> -->
                    <q-select
                      dense
                      outlined
                      :readonly="checkRouteDetail"
                      lazy-rules
                      hide-bottom-space
                      :class="classInput(!checkRouteDetail)"
                      label="ระดับปริญญา"
                      v-model="formBody.degreeLevel"
                      :options="[
                        'ปริญญาตรี',
                        'สูงกว่าปริญญาตรี',
                        'ปริญญาโท',
                        'ปริญญาเอก',
                      ]"
                      :rules="[
                    (val: string) =>
                      !!val || `${'กรุณากรอกระดับปริญญา'}`,
                  ]"
                    />
                  </div>
                  <div class="col-3">
                    <q-input
                      :readonly="checkRouteDetail"
                      dense
                      outlined
                      lazy-rules
                      hide-bottom-space
                      label="หลักสูตรการศึกษา"
                      :class="classInput(!checkRouteDetail)"
                      v-model="formBody.course"
                      :rules="[
                        (val: string) =>
                          !!val || `${'กรุณากรอกหลักสูตรการศึกษา'}`,
                      ]"
                    />
                  </div>
                  <div class="col-3">
                    <q-input
                      :readonly="checkRouteDetail"
                      dense
                      outlined
                      lazy-rules
                      hide-bottom-space
                      label="สาขาวิชา"
                      :class="classInput(!checkRouteDetail)"
                      v-model="formBody.field"
                      :rules="[
                        (val: string) =>
                          !!val || `${'กรุณากรอกสาขาวิชา'}`,
                      ]"
                    />
                  </div>
                  <div class="col-3">
                    <q-input
                      dense
                      :readonly="checkRouteDetail"
                      outlined
                      lazy-rules
                      hide-bottom-space
                      label="คณะ"
                      :class="classInput(!checkRouteDetail)"
                      v-model="formBody.faculty"
                      :rules="[
                        (val: string) =>
                          !!val || `${'กรุณากรอกคณะ'}`,
                      ]"
                    />
                  </div>
                  <div class="col-3">
                    <q-input
                      dense
                      :readonly="checkRouteDetail"
                      outlined
                      lazy-rules
                      hide-bottom-space
                      label="สถาบันการศึกษา"
                      :class="classInput(!checkRouteDetail)"
                      v-model="formBody.educationalInstitution"
                      :rules="[
                        (val: string) =>
                          !!val || `${'กรุณากรอกสถาบันการศึกษา'}`,
                      ]"
                    />
                  </div>
                  <div class="col-3">
                    <datepicker
                      
                      v-model="formBody.startDate"
                      :locale="'th'"
                      autoApply
                      :enableTimePicker="false"
                      week-start="0"
                      :readonly="checkRouteDetail"
                      @update:model-value="changeStartDate('startDate')"
                    >
                      <template #year="{ year }">{{ year + 543 }}</template>
                      <template #year-overlay-value="{ value }">{{
                        parseInt(value + 543)
                      }}</template>
                      <template #trigger>
                        <q-input
                          dense
                          :readonly="checkRouteDetail"
                          outlined
                          :class="classInput(!checkRouteDetail)"
                          :model-value="
                            formBody.startDate
                              ? date2Thai(formBody.startDate)
                              : null
                          "
                          :label="`${'วันเริ่มต้นการศึกษา'}`"
                          hide-bottom-space
                          :rules="[
                            (val: string) =>
                              !!val || `${'กรุณาเลือกวันเริ่มต้นการศึกษา'}`,
                          ]"
                        >
                          <template v-slot:prepend>
                            <q-icon
                              name="event"
                              class="cursor-pointer"
                              style="color: var(--q-primary)"
                            >
                            </q-icon>
                          </template>
                        </q-input>
                      </template>
                    </datepicker>
                  </div>
                  <div class="col-3">
                    <datepicker
                      
                      v-model="formBody.endDate"
                      :locale="'th'"
                      autoApply
                      :enableTimePicker="false"
                      week-start="0"
                      :min-date="formBody.startDate"
                      :readonly="checkRouteDetail"
                      @update:model-value="
                        updateTotalPeriod(formBody.startDate, formBody.endDate)
                      "
                    >
                      <template #year="{ year }">{{ year + 543 }}</template>
                      <template #year-overlay-value="{ value }">{{
                        parseInt(value + 543)
                      }}</template>
                      <template #trigger>
                        <q-input
                          dense
                          :readonly="checkRouteDetail"
                          outlined
                          :class="classInput(!checkRouteDetail)"
                          :model-value="
                            formBody.endDate
                              ? date2Thai(formBody.endDate)
                              : null
                          "
                          :label="`${'วันสิ้นสุดการศึกษา'}`"
                          hide-bottom-space
                          :rules="[
                            (val: string) =>
                              !!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการศึกษา'}`,
                          ]"
                        >
                          <template v-slot:prepend>
                            <q-icon
                              name="event"
                              class="cursor-pointer"
                              style="color: var(--q-primary)"
                            >
                            </q-icon>
                          </template>
                        </q-input>
                      </template>
                    </datepicker>
                  </div>
                  <div class="col-3">
                    <q-input
                      dense
                      outlined
                      :readonly="checkRouteDetail"
                      lazy-rules
                      hide-bottom-space
                      label="รวมระยะเวลาในการศึกษา"
                      :class="classInput(!checkRouteDetail)"
                      v-model="formBody.totalPeriod"
                    />
                  </div>
                  <div class="col-6">
                    <q-input
                      dense
                      outlined
                      :readonly="checkRouteDetail"
                      lazy-rules
                      hide-bottom-space
                      label="สถานที่ไปดูงาน"
                      :class="classInput(!checkRouteDetail)"
                      v-model="formBody.studyPlace"
                    />
                  </div>
                  <div class="col-6">
                    <q-input
                      dense
                      outlined
                      :readonly="checkRouteDetail"
                      lazy-rules
                      hide-bottom-space
                      label="หัวข้อการไปดูงาน"
                      :class="classInput(!checkRouteDetail)"
                      v-model="formBody.studyTopic"
                    />
                  </div>
                  <div class="col-3">
                    <datepicker
                      
                      v-model="formBody.studyStartDate"
                      :locale="'th'"
                      autoApply
                      :enableTimePicker="false"
                      :readonly="checkRouteDetail"
                      week-start="0"
                      @update:model-value="changeStartDate('studyStartDate')"
                    >
                      <template #year="{ year }">{{ year + 543 }}</template>
                      <template #year-overlay-value="{ value }">{{
                        parseInt(value + 543)
                      }}</template>
                      <template #trigger>
                        <q-input
                          dense
                          outlined
                          :readonly="checkRouteDetail"
                          :class="classInput(!checkRouteDetail)"
                          :model-value="
                            formBody.studyStartDate
                              ? date2Thai(formBody.studyStartDate)
                              : null
                          "
                          :label="`${'วันเริ่มต้นการดูงาน'}`"
                          hide-bottom-space
                        >
                          <template v-slot:prepend>
                            <q-icon
                              name="event"
                              class="cursor-pointer"
                              style="color: var(--q-primary)"
                            >
                            </q-icon>
                          </template>
                        </q-input>
                      </template>
                    </datepicker>
                  </div>
                  <div class="col-3">
                    <datepicker
                      
                      v-model="formBody.studyEndDate"
                      :locale="'th'"
                      :readonly="checkRouteDetail"
                      autoApply
                      :enableTimePicker="false"
                      week-start="0"
                      :min-date="formBody.studyStartDate"
                    >
                      <template #year="{ year }">{{ year + 543 }}</template>
                      <template #year-overlay-value="{ value }">{{
                        parseInt(value + 543)
                      }}</template>
                      <template #trigger>
                        <q-input
                          dense
                          outlined
                          :readonly="checkRouteDetail"
                          :class="classInput(!checkRouteDetail)"
                          :model-value="
                            formBody.studyEndDate
                              ? date2Thai(formBody.studyEndDate)
                              : null
                          "
                          :label="`${'วันสิ้นสุดการดูงาน'}`"
                          hide-bottom-space
                        >
                          <template v-slot:prepend>
                            <q-icon
                              name="event"
                              class="cursor-pointer"
                              style="color: var(--q-primary)"
                            >
                            </q-icon>
                          </template>
                        </q-input>
                      </template>
                    </datepicker>
                  </div>
                  <div class="col-6"></div>
                  <div class="col-6">
                    <q-input
                      dense
                      :readonly="checkRouteDetail"
                      outlined
                      lazy-rules
                      hide-bottom-space
                      label="ประเทศที่ไปดูงาน"
                      :class="classInput(!checkRouteDetail)"
                      v-model="formBody.studyCountry"
                    />
                  </div>
                  <div class="col-6">
                    <q-input
                      dense
                      :readonly="checkRouteDetail"
                      outlined
                      lazy-rules
                      hide-bottom-space
                      label="หัวข้อการไปดูงานต่างประเทศ"
                      :class="classInput(!checkRouteDetail)"
                      v-model="formBody.studyAbroadTopic"
                    />
                  </div>
                  <div class="col-3">
                    <datepicker
                      
                      v-model="formBody.studyAbroadStartDate"
                      :locale="'th'"
                      autoApply
                      :enableTimePicker="false"
                      week-start="0"
                      :readonly="checkRouteDetail"
                      @update:model-value="
                        changeStartDate('studyAbroadStartDate')
                      "
                    >
                      <template #year="{ year }">{{ year + 543 }}</template>
                      <template #year-overlay-value="{ value }">{{
                        parseInt(value + 543)
                      }}</template>
                      <template #trigger>
                        <q-input
                          dense
                          outlined
                          :class="classInput(!checkRouteDetail)"
                          :readonly="checkRouteDetail"
                          :model-value="
                            formBody.studyAbroadStartDate
                              ? date2Thai(formBody.studyAbroadStartDate)
                              : null
                          "
                          :label="`${'วันเริ่มต้นการดูงานต่างประเทศ'}`"
                          hide-bottom-space
                        >
                          <template v-slot:prepend>
                            <q-icon
                              name="event"
                              class="cursor-pointer"
                              style="color: var(--q-primary)"
                            >
                            </q-icon>
                          </template>
                        </q-input>
                      </template>
                    </datepicker>
                  </div>
                  <div class="col-3">
                    <datepicker
                      
                      v-model="formBody.studyAbroadEndDate"
                      :locale="'th'"
                      autoApply
                      :enableTimePicker="false"
                      :readonly="checkRouteDetail"
                      week-start="0"
                      :min-date="formBody.studyAbroadStartDate"
                      @update:model-value="
                        updateTotalPeriod(
                          formBody.studyAbroadStartDate,
                          formBody.studyAbroadEndDate
                        )
                      "
                    >
                      <template #year="{ year }">{{ year + 543 }}</template>
                      <template #year-overlay-value="{ value }">{{
                        parseInt(value + 543)
                      }}</template>
                      <template #trigger>
                        <q-input
                          dense
                          outlined
                          :readonly="checkRouteDetail"
                          :class="classInput(!checkRouteDetail)"
                          :model-value="
                            formBody.studyAbroadEndDate
                              ? date2Thai(formBody.studyAbroadEndDate)
                              : null
                          "
                          :label="`${'วันสิ้นสุดการดูงานต่างประเทศ'}`"
                          hide-bottom-space
                        >
                          <template v-slot:prepend>
                            <q-icon
                              name="event"
                              class="cursor-pointer"
                              style="color: var(--q-primary)"
                            >
                            </q-icon>
                          </template>
                        </q-input>
                      </template>
                    </datepicker>
                  </div>
                </div>
              </div>

              <!-- เลือกทุน 2 -->
              <div
                class="col-12"
                v-else-if="formBody.scholarshipType === 'NOABROAD'"
              >
                <div class="row q-col-gutter-md">
                  <div class="col-6">
                    <q-input
                      dense
                      outlined
                      :readonly="checkRouteDetail"
                      lazy-rules
                      hide-bottom-space
                      label="หลักสูตรการฝึกอบรม"
                      :class="classInput(!checkRouteDetail)"
                      v-model="formBody.course"
                      :rules="[
                        (val: string) =>
                          !!val || `กรุณากรอกหลักสูตรการฝึกอบรม`,
                      ]"
                    />
                  </div>
                  <div class="col-6">
                    <q-input
                      dense
                      outlined
                      lazy-rules
                      :readonly="checkRouteDetail"
                      hide-bottom-space
                      label="สาขา"
                      :class="classInput(!checkRouteDetail)"
                      v-model="formBody.field"
                      :rules="[
                        (val: string) =>
                          !!val || `${'กรุณากรอกสาขา'}`,
                      ]"
                    />
                  </div>
                  <div class="col-3">
                    <q-input
                      dense
                      outlined
                      :readonly="checkRouteDetail"
                      lazy-rules
                      hide-bottom-space
                      label="สถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม"
                      :class="classInput(!checkRouteDetail)"
                      v-model="formBody.educationalInstitution"
                      :rules="[
                        (val: string) =>
                          !!val || `${'กรุณากรอกสถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม'}`,
                      ]"
                    />
                  </div>
                  <div class="col-3">
                    <datepicker
                      
                      v-model="formBody.startDate"
                      :locale="'th'"
                      autoApply
                      :enableTimePicker="false"
                      week-start="0"
                      :readonly="checkRouteDetail"
                      @update:model-value="changeStartDate('startDate')"
                    >
                      <template #year="{ year }">{{ year + 543 }}</template>
                      <template #year-overlay-value="{ value }">{{
                        parseInt(value + 543)
                      }}</template>
                      <template #trigger>
                        <q-input
                          dense
                          outlined
                          :readonly="checkRouteDetail"
                          :class="classInput(!checkRouteDetail)"
                          :model-value="
                            formBody.startDate
                              ? date2Thai(formBody.startDate)
                              : null
                          "
                          :label="`${'วันเริ่มต้นการฝึกอบรม'}`"
                          hide-bottom-space
                          :rules="[
                            (val: string) =>
                              !!val || `${'กรุณาเลือกวันเริ่มต้นการฝึกอบรม'}`,
                          ]"
                        >
                          <template v-slot:prepend>
                            <q-icon
                              name="event"
                              class="cursor-pointer"
                              style="color: var(--q-primary)"
                            >
                            </q-icon>
                          </template>
                        </q-input>
                      </template>
                    </datepicker>
                  </div>
                  <div class="col-3">
                    <datepicker
                      
                      v-model="formBody.endDate"
                      :locale="'th'"
                      :readonly="checkRouteDetail"
                      autoApply
                      :enableTimePicker="false"
                      week-start="0"
                      :min-date="formBody.startDate"
                      @update:model-value="
                        updateTotalPeriod(formBody.startDate, formBody.endDate)
                      "
                    >
                      <template #year="{ year }">{{ year + 543 }}</template>
                      <template #year-overlay-value="{ value }">{{
                        parseInt(value + 543)
                      }}</template>
                      <template #trigger>
                        <q-input
                          dense
                          outlined
                          :readonly="checkRouteDetail"
                          :class="classInput(!checkRouteDetail)"
                          :model-value="
                            formBody.endDate
                              ? date2Thai(formBody.endDate)
                              : null
                          "
                          :label="`${'วันสิ้นสุดการฝึกอบรม'}`"
                          hide-bottom-space
                          :rules="[
                            (val: string) =>
                              !!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการฝึกอบรม'}`,
                          ]"
                        >
                          <template v-slot:prepend>
                            <q-icon
                              name="event"
                              class="cursor-pointer"
                              style="color: var(--q-primary)"
                            >
                            </q-icon>
                          </template>
                        </q-input>
                      </template>
                    </datepicker>
                  </div>
                  <div class="col-3">
                    <q-input
                      dense
                      outlined
                      lazy-rules
                      :readonly="checkRouteDetail"
                      hide-bottom-space
                      label="รวมระยะเวลาในการฝึกอบรม"
                      :class="classInput(!checkRouteDetail)"
                      v-model="formBody.totalPeriod"
                    />
                  </div>
                  <div class="col-6">
                    <q-input
                      dense
                      outlined
                      lazy-rules
                      :readonly="checkRouteDetail"
                      hide-bottom-space
                      label="สถานที่ไปดูงาน"
                      :class="classInput(!checkRouteDetail)"
                      v-model="formBody.studyPlace"
                    />
                  </div>
                  <div class="col-6">
                    <q-input
                      dense
                      outlined
                      :readonly="checkRouteDetail"
                      lazy-rules
                      hide-bottom-space
                      label="หัวข้อการไปดูงาน"
                      :class="classInput(!checkRouteDetail)"
                      v-model="formBody.studyTopic"
                    />
                  </div>
                  <div class="col-3">
                    <datepicker
                      
                      v-model="formBody.studyStartDate"
                      :locale="'th'"
                      :readonly="checkRouteDetail"
                      autoApply
                      :enableTimePicker="false"
                      week-start="0"
                      @update:model-value="changeStartDate('studyStartDate')"
                    >
                      <template #year="{ year }">{{ year + 543 }}</template>
                      <template #year-overlay-value="{ value }">{{
                        parseInt(value + 543)
                      }}</template>
                      <template #trigger>
                        <q-input
                          dense
                          :readonly="checkRouteDetail"
                          outlined
                          :class="classInput(!checkRouteDetail)"
                          :model-value="
                            formBody.studyStartDate
                              ? date2Thai(formBody.studyStartDate)
                              : null
                          "
                          :label="`${'วันเริ่มต้นการดูงาน'}`"
                          hide-bottom-space
                        >
                          <template v-slot:prepend>
                            <q-icon
                              name="event"
                              class="cursor-pointer"
                              style="color: var(--q-primary)"
                            >
                            </q-icon>
                          </template>
                        </q-input>
                      </template>
                    </datepicker>
                  </div>
                  <div class="col-3">
                    <datepicker
                      
                      v-model="formBody.studyEndDate"
                      :locale="'th'"
                      autoApply
                      :readonly="checkRouteDetail"
                      :enableTimePicker="false"
                      week-start="0"
                      :min-date="formBody.studyStartDate"
                    >
                      <template #year="{ year }">{{ year + 543 }}</template>
                      <template #year-overlay-value="{ value }">{{
                        parseInt(value + 543)
                      }}</template>
                      <template #trigger>
                        <q-input
                          dense
                          :readonly="checkRouteDetail"
                          outlined
                          :class="classInput(!checkRouteDetail)"
                          :model-value="
                            formBody.studyEndDate
                              ? date2Thai(formBody.studyEndDate)
                              : null
                          "
                          :label="`${'วันสิ้นสุดการดูงาน'}`"
                          hide-bottom-space
                        >
                          <template v-slot:prepend>
                            <q-icon
                              name="event"
                              class="cursor-pointer"
                              style="color: var(--q-primary)"
                            >
                            </q-icon>
                          </template>
                        </q-input>
                      </template>
                    </datepicker>
                  </div>
                </div>
              </div>

              <!-- เลือกทุน 3 -->
              <div
                class="col-12"
                v-else-if="formBody.scholarshipType === 'ABROAD'"
              >
                <div class="row q-col-gutter-md">
                  <div class="col-6">
                    <q-input
                      dense
                      outlined
                      :readonly="checkRouteDetail"
                      lazy-rules
                      hide-bottom-space
                      label="หลักสูตรการฝึกอบรม"
                      :class="classInput(!checkRouteDetail)"
                      v-model="formBody.course"
                      :rules="[
                        (val: string) =>
                          !!val || `${'กรุณากรอกหลักสูตรการฝึกอบรม'}`,
                      ]"
                    />
                  </div>
                  <div class="col-6">
                    <q-input
                      dense
                      outlined
                      lazy-rules
                      :readonly="checkRouteDetail"
                      hide-bottom-space
                      label="สาขา"
                      :class="classInput(!checkRouteDetail)"
                      v-model="formBody.field"
                      :rules="[
                        (val: string) =>
                          !!val || `${'กรุณากรอกสาขา'}`,
                      ]"
                    />
                  </div>
                  <div class="col-3">
                    <q-input
                      dense
                      outlined
                      lazy-rules
                      :readonly="checkRouteDetail"
                      hide-bottom-space
                      label="สถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม"
                      :class="classInput(!checkRouteDetail)"
                      v-model="formBody.educationalInstitution"
                      :rules="[
                        (val: string) =>
                          !!val || `${'กรุณากรอกสถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม'}`,
                      ]"
                    />
                  </div>
                  <div class="col-3">
                    <datepicker
                      
                      v-model="formBody.startDate"
                      :locale="'th'"
                      :readonly="checkRouteDetail"
                      autoApply
                      :enableTimePicker="false"
                      week-start="0"
                      @update:model-value="changeStartDate('startDate')"
                    >
                      <template #year="{ year }">{{ year + 543 }}</template>
                      <template #year-overlay-value="{ value }">{{
                        parseInt(value + 543)
                      }}</template>
                      <template #trigger>
                        <q-input
                          dense
                          outlined
                          :readonly="checkRouteDetail"
                          :class="classInput(!checkRouteDetail)"
                          :model-value="
                            formBody.startDate
                              ? date2Thai(formBody.startDate)
                              : null
                          "
                          :label="`${'วันเริ่มต้นการฝึกอบรม'}`"
                          hide-bottom-space
                          :rules="[
                            (val: string) =>
                              !!val || `${'กรุณาเลือกวันเริ่มต้นการฝึกอบรม'}`,
                          ]"
                        >
                          <template v-slot:prepend>
                            <q-icon
                              name="event"
                              class="cursor-pointer"
                              style="color: var(--q-primary)"
                            >
                            </q-icon>
                          </template>
                        </q-input>
                      </template>
                    </datepicker>
                  </div>
                  <div class="col-3">
                    <datepicker
                      
                      v-model="formBody.endDate"
                      :locale="'th'"
                      autoApply
                      :readonly="checkRouteDetail"
                      :enableTimePicker="false"
                      week-start="0"
                      :min-date="formBody.startDate"
                      @update:model-value="
                        updateTotalPeriod(formBody.startDate, formBody.endDate)
                      "
                    >
                      <template #year="{ year }">{{ year + 543 }}</template>
                      <template #year-overlay-value="{ value }">{{
                        parseInt(value + 543)
                      }}</template>
                      <template #trigger>
                        <q-input
                          dense
                          :readonly="checkRouteDetail"
                          outlined
                          :class="classInput(!checkRouteDetail)"
                          :model-value="
                            formBody.endDate
                              ? date2Thai(formBody.endDate)
                              : null
                          "
                          :label="`${'วันสิ้นสุดการฝึกอบรม'}`"
                          hide-bottom-space
                          :rules="[
                            (val: string) =>
                              !!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการฝึกอบรม'}`,
                          ]"
                        >
                          <template v-slot:prepend>
                            <q-icon
                              name="event"
                              class="cursor-pointer"
                              style="color: var(--q-primary)"
                            >
                            </q-icon>
                          </template>
                        </q-input>
                      </template>
                    </datepicker>
                  </div>
                  <div class="col-3">
                    <q-input
                      dense
                      outlined
                      :readonly="checkRouteDetail"
                      lazy-rules
                      hide-bottom-space
                      label="รวมระยะเวลาในการฝึกอบรม"
                      :class="classInput(!checkRouteDetail)"
                      v-model="formBody.totalPeriod"
                    />
                  </div>
                  <div class="col-6">
                    <q-input
                      dense
                      outlined
                      :readonly="checkRouteDetail"
                      lazy-rules
                      hide-bottom-space
                      label="สถานที่ไปดูงานในประเทศ"
                      :class="classInput(!checkRouteDetail)"
                      v-model="formBody.studyPlace"
                    />
                  </div>
                  <div class="col-6">
                    <q-input
                      dense
                      outlined
                      lazy-rules
                      :readonly="checkRouteDetail"
                      hide-bottom-space
                      label="หัวข้อการไปดูงานในประเทศ"
                      :class="classInput(!checkRouteDetail)"
                      v-model="formBody.studyTopic"
                    />
                  </div>
                  <div class="col-3">
                    <datepicker
                      
                      v-model="formBody.studyStartDate"
                      :locale="'th'"
                      :readonly="checkRouteDetail"
                      autoApply
                      :enableTimePicker="false"
                      week-start="0"
                      @update:model-value="changeStartDate('studyStartDate')"
                    >
                      <template #year="{ year }">{{ year + 543 }}</template>
                      <template #year-overlay-value="{ value }">{{
                        parseInt(value + 543)
                      }}</template>
                      <template #trigger>
                        <q-input
                          dense
                          outlined
                          :class="classInput(!checkRouteDetail)"
                          :readonly="checkRouteDetail"
                          :model-value="
                            formBody.studyStartDate
                              ? date2Thai(formBody.studyStartDate)
                              : null
                          "
                          :label="`${'วันเริ่มต้นการดูงานในประเทศ'}`"
                          hide-bottom-space
                        >
                          <template v-slot:prepend>
                            <q-icon
                              name="event"
                              class="cursor-pointer"
                              style="color: var(--q-primary)"
                            >
                            </q-icon>
                          </template>
                        </q-input>
                      </template>
                    </datepicker>
                  </div>
                  <div class="col-3">
                    <datepicker
                      
                      v-model="formBody.studyEndDate"
                      :readonly="checkRouteDetail"
                      :locale="'th'"
                      autoApply
                      :enableTimePicker="false"
                      week-start="0"
                      :min-date="formBody.studyStartDate"
                      @update:model-value="
                        updateTotalPeriod(
                          formBody.studyStartDate,
                          formBody.studyEndDate,
                          true
                        )
                      "
                    >
                      <template #year="{ year }">{{ year + 543 }}</template>
                      <template #year-overlay-value="{ value }">{{
                        parseInt(value + 543)
                      }}</template>
                      <template #trigger>
                        <q-input
                          dense
                          outlined
                          :readonly="checkRouteDetail"
                          :class="classInput(!checkRouteDetail)"
                          :model-value="
                            formBody.studyEndDate
                              ? date2Thai(formBody.studyEndDate)
                              : null
                          "
                          :label="`${'วันสิ้นสุดการดูงานในประเทศ'}`"
                          hide-bottom-space
                        >
                          <template v-slot:prepend>
                            <q-icon
                              name="event"
                              class="cursor-pointer"
                              style="color: var(--q-primary)"
                            >
                            </q-icon>
                          </template>
                        </q-input>
                      </template>
                    </datepicker>
                  </div>
                  <div class="col-6"></div>
                  <div class="col-6">
                    <q-input
                      dense
                      outlined
                      :readonly="checkRouteDetail"
                      lazy-rules
                      hide-bottom-space
                      label="ประเทศที่เดินทางไปดูงาน"
                      :class="classInput(!checkRouteDetail)"
                      v-model="formBody.studyCountry"
                    />
                  </div>
                  <div class="col-6">
                    <q-input
                      dense
                      outlined
                      :readonly="checkRouteDetail"
                      lazy-rules
                      hide-bottom-space
                      label="หัวข้อการไปดูงานต่างประเทศ"
                      :class="classInput(!checkRouteDetail)"
                      v-model="formBody.studyAbroadTopic"
                    />
                  </div>
                  <div class="col-3">
                    <datepicker
                      
                      v-model="formBody.studyAbroadStartDate"
                      :locale="'th'"
                      autoApply
                      :enableTimePicker="false"
                      :readonly="checkRouteDetail"
                      week-start="0"
                      @update:model-value="
                        changeStartDate('studyAbroadStartDate')
                      "
                    >
                      <template #year="{ year }">{{ year + 543 }}</template>
                      <template #year-overlay-value="{ value }">{{
                        parseInt(value + 543)
                      }}</template>
                      <template #trigger>
                        <q-input
                          dense
                          outlined
                          :readonly="checkRouteDetail"
                          :class="classInput(!checkRouteDetail)"
                          :model-value="
                            formBody.studyAbroadStartDate
                              ? date2Thai(formBody.studyAbroadStartDate)
                              : null
                          "
                          :label="`${'วันเริ่มต้นการดูงานต่างประเทศ'}`"
                          hide-bottom-space
                        >
                          <template v-slot:prepend>
                            <q-icon
                              name="event"
                              class="cursor-pointer"
                              style="color: var(--q-primary)"
                            >
                            </q-icon>
                          </template>
                        </q-input>
                      </template>
                    </datepicker>
                  </div>
                  <div class="col-3">
                    <datepicker
                      
                      v-model="formBody.studyAbroadEndDate"
                      :locale="'th'"
                      autoApply
                      :enableTimePicker="false"
                      :readonly="checkRouteDetail"
                      week-start="0"
                      :min-date="formBody.studyAbroadStartDate"
                    >
                      <template #year="{ year }">{{ year + 543 }}</template>
                      <template #year-overlay-value="{ value }">{{
                        parseInt(value + 543)
                      }}</template>
                      <template #trigger>
                        <q-input
                          dense
                          outlined
                          :class="classInput(!checkRouteDetail)"
                          :readonly="checkRouteDetail"
                          :model-value="
                            formBody.studyAbroadEndDate
                              ? date2Thai(formBody.studyAbroadEndDate)
                              : null
                          "
                          :label="`${'วันสิ้นสุดการดูงานต่างประเทศ'}`"
                          hide-bottom-space
                        >
                          <template v-slot:prepend>
                            <q-icon
                              name="event"
                              class="cursor-pointer"
                              style="color: var(--q-primary)"
                            >
                            </q-icon>
                          </template>
                        </q-input>
                      </template>
                    </datepicker>
                  </div>
                </div>
              </div>

              <!-- เลือกทุน 5 || 6 -->
              <div
                class="col-12"
                v-else-if="
                  formBody.scholarshipType === 'STUDY' ||
                  formBody.scholarshipType === 'TRAINING'
                "
              >
                <div class="row q-col-gutter-md">
                  <!-- <div class="col-3">
                    <q-select
                      dense
                      outlined
                      :readonly="checkRouteDetail"
                      lazy-rules
                      hide-bottom-space
                      :class="classInput(!checkRouteDetail)"
                      label="ประเภทการพัฒนา"
                      v-model="formBody.studyTopic"
                      :options="[
                        'ศึกษา',
                        'ฝึกอบรม',
                        'ประชุม',
                        'ดูงาน',
                        'ปฏิบัติการวิจัย',
                      ]"
                      :rules="[
                    (val: string) =>
                      !!val || `${'กรุณากรอกประเภทการพัฒนา'}`,
                  ]"
                    />
                  </div> -->

                  <div
                    class="col-3"
                    v-if="formBody.scholarshipType !== 'TRAINING'"
                  >
                    <!-- <q-input
                      dense
                      outlined
                      lazy-rules
                      :readonly="checkRouteDetail"
                      hide-bottom-space
                      label="ระดับปริญญา"
                      :class="classInput(!checkRouteDetail)"
                      v-model="formBody.degreeLevel"
                      :rules="[
                        (val: string) =>
                          !!val || `${'กรุณากรอกระดับปริญญา'}`,
                      ]"
                    /> -->
                    <q-select
                      dense
                      outlined
                      :readonly="checkRouteDetail"
                      lazy-rules
                      hide-bottom-space
                      :class="classInput(!checkRouteDetail)"
                      label="ระดับปริญญา"
                      v-model="formBody.degreeLevel"
                      :options="[
                        'ปริญญาตรี',
                        'สูงกว่าปริญญาตรี',
                        'ปริญญาโท',
                        'ปริญญาเอก',
                      ]"
                      :rules="[
                    (val: string) =>
                      !!val || `${'กรุณากรอกระดับปริญญา'}`,
                  ]"
                    />
                  </div>

                  <div class="col-3">
                    <q-input
                      dense
                      outlined
                      lazy-rules
                      :readonly="checkRouteDetail"
                      hide-bottom-space
                      :class="classInput(!checkRouteDetail)"
                      :label="
                        formBody.scholarshipType === 'STUDY'
                          ? 'หลักสูตรการศึกษา'
                          : 'หลักสูตรการฝึกอบรม'
                      "
                      v-model="formBody.course"
                      :rules="[
                    (val: string) =>
                      !!val || `กรุณากรอก${formBody.scholarshipType === 'STUDY'
                          ? 'หลักสูตรการศึกษา'
                          : 'หลักสูตรการฝึกอบรม'}`,
                  ]"
                    />
                  </div>

                  <div
                    class="col-3"
                    v-if="formBody.scholarshipType !== 'TRAINING'"
                  >
                    <q-input
                      dense
                      outlined
                      lazy-rules
                      :readonly="checkRouteDetail"
                      hide-bottom-space
                      label="สาขาวิชา"
                      :class="classInput(!checkRouteDetail)"
                      v-model="formBody.field"
                      :rules="[
                        (val: string) =>
                          !!val || `${'กรุณากรอกสาขาวิชา'}`,
                      ]"
                    />
                  </div>

                  <div
                    class="col-3"
                    v-if="formBody.scholarshipType !== 'TRAINING'"
                  >
                    <q-input
                      dense
                      outlined
                      lazy-rules
                      :readonly="checkRouteDetail"
                      hide-bottom-space
                      label="คณะ"
                      :class="classInput(!checkRouteDetail)"
                      v-model="formBody.faculty"
                      :rules="[
                        (val: string) =>
                          !!val || `${'กรุณากรอกคณะ'}`,
                      ]"
                    />
                  </div>

                  <div class="col-6">
                    <q-input
                      dense
                      outlined
                      :readonly="checkRouteDetail"
                      lazy-rules
                      hide-bottom-space
                      :label="
                        formBody.scholarshipType === 'STUDY'
                          ? 'สถาบันการศึกษา'
                          : 'หน่วยงานผู้จัด'
                      "
                      :class="classInput(!checkRouteDetail)"
                      v-model="formBody.studyPlace"
                      :rules="[
                        (val: string) =>
                          !!val || `กรุณากรอก${formBody.scholarshipType === 'STUDY' ? 'สถาบันการศึกษา':'หน่วยงานผู้จัด'}`,
                      ]"
                    />
                  </div>

                  <div class="col-3">
                    <datepicker
                      
                      v-model="formBody.startDate"
                      :locale="'th'"
                      autoApply
                      :readonly="checkRouteDetail"
                      :enableTimePicker="false"
                      week-start="0"
                      @update:model-value="changeStartDate('startDate')"
                    >
                      <template #year="{ year }">{{ year + 543 }}</template>
                      <template #year-overlay-value="{ value }">{{
                        parseInt(value + 543)
                      }}</template>
                      <template #trigger>
                        <q-input
                          dense
                          outlined
                          :readonly="checkRouteDetail"
                          :class="classInput(!checkRouteDetail)"
                          :model-value="
                            formBody.startDate
                              ? date2Thai(formBody.startDate)
                              : null
                          "
                          :label="`${
                            formBody.scholarshipType === 'STUDY'
                              ? 'วันเริ่มต้นการศึกษา'
                              : 'วันเริ่มต้นการอบรม'
                          }`"
                          hide-bottom-space
                          :rules="[
                            (val: string) =>
                              !!val || `กรุณาเลือก${formBody.scholarshipType === 'STUDY' ? 'วันเริ่มต้นการศึกษา':'วันเริ่มต้นการอบรม'}`,
                          ]"
                        >
                          <template v-slot:prepend>
                            <q-icon
                              name="event"
                              class="cursor-pointer"
                              style="color: var(--q-primary)"
                            >
                            </q-icon>
                          </template>
                        </q-input>
                      </template>
                    </datepicker>
                  </div>
                  <div class="col-3">
                    <datepicker
                      
                      v-model="formBody.endDate"
                      :locale="'th'"
                      autoApply
                      :readonly="checkRouteDetail"
                      :enableTimePicker="false"
                      week-start="0"
                      :min-date="formBody.startDate"
                    >
                      <template #year="{ year }">{{ year + 543 }}</template>
                      <template #year-overlay-value="{ value }">{{
                        parseInt(value + 543)
                      }}</template>
                      <template #trigger>
                        <q-input
                          dense
                          outlined
                          :readonly="checkRouteDetail"
                          :class="classInput(!checkRouteDetail)"
                          :model-value="
                            formBody.endDate
                              ? date2Thai(formBody.endDate)
                              : null
                          "
                          :label="`${
                            formBody.scholarshipType === 'STUDY'
                              ? 'วันสิ้นสุดการศึกษา'
                              : 'วันสิ้นสุดการอบรม'
                          }`"
                          hide-bottom-space
                          :rules="[
                            (val: string) =>
                              !!val || `กรุณาเลือก${formBody.scholarshipType === 'STUDY' ? 'วันสิ้นสุดการศึกษา':'วันสิ้นสุดการอบรม'}`,
                          ]"
                        >
                          <template v-slot:prepend>
                            <q-icon
                              name="event"
                              class="cursor-pointer"
                              style="color: var(--q-primary)"
                            >
                            </q-icon>
                          </template>
                        </q-input>
                      </template>
                    </datepicker>
                  </div>
                  <div class="col-6">
                    <q-input
                      dense
                      outlined
                      lazy-rules
                      :readonly="checkRouteDetail"
                      hide-bottom-space
                      :label="
                        formBody.scholarshipType === 'STUDY'
                          ? 'สถานที่ไปศึกษา (เมือง/ประเทศ)'
                          : 'สถานที่เข้ารับการฝึกอบรม (เมือง/ประเทศ)'
                      "
                      :class="classInput(!checkRouteDetail)"
                      v-model="formBody.studyCountry"
                      :rules="[
                        (val: string) =>
                          !!val || `กรุณากรอก${formBody.scholarshipType === 'STUDY' ? 'สถานที่ไปศึกษา (เมือง/ประเทศ)':'สถานที่เข้ารับการฝึกอบรม (เมือง/ประเทศ)'}`,
                      ]"
                    />
                  </div>

                  <div v-if="formBody.studyTopic == 'ดูงาน'" class="col-3">
                    <q-input
                      dense
                      :readonly="checkRouteDetail"
                      outlined
                      lazy-rules
                      hide-bottom-space
                      label="ประเทศที่ไปดูงาน"
                      :class="classInput(!checkRouteDetail)"
                      v-model="formBody.studyCountry"
                      :rules="[
                        (val: string) =>
                          !!val || `${'กรุณากรอประเทศที่ไปดูงาน'}`,
                      ]"
                    />
                  </div>

                  <div class="col-3">
                    <datepicker
                      
                      v-model="formBody.studyAbroadStartDate"
                      :locale="'th'"
                      autoApply
                      :readonly="checkRouteDetail"
                      :enableTimePicker="false"
                      week-start="0"
                      @update:model-value="
                        changeStartDate('studyAbroadStartDate')
                      "
                    >
                      <template #year="{ year }">{{ year + 543 }}</template>
                      <template #year-overlay-value="{ value }">{{
                        parseInt(value + 543)
                      }}</template>
                      <template #trigger>
                        <q-input
                          dense
                          outlined
                          :readonly="checkRouteDetail"
                          :class="classInput(!checkRouteDetail)"
                          :model-value="
                            formBody.studyAbroadStartDate
                              ? date2Thai(formBody.studyAbroadStartDate)
                              : null
                          "
                          :label="`${'วันขออนุมัติเดินทางออกจากประเทศไทย'}`"
                          hide-bottom-space
                          :rules="[
                        (val: string) =>
                          !!val || `${'วันขออนุมัติเดินทางออกจากประเทศไทย'}`,
                      ]"
                        >
                          <template v-slot:prepend>
                            <q-icon
                              name="event"
                              class="cursor-pointer"
                              style="color: var(--q-primary)"
                            >
                            </q-icon>
                          </template>
                        </q-input>
                      </template>
                    </datepicker>
                  </div>
                  <div class="col-3">
                    <datepicker
                      
                      v-model="formBody.studyAbroadEndDate"
                      :locale="'th'"
                      autoApply
                      :enableTimePicker="false"
                      :readonly="checkRouteDetail"
                      week-start="0"
                      :min-date="formBody.studyAbroadStartDate"
                      @update:model-value="
                        updateTotalPeriod(
                          formBody.studyAbroadStartDate,
                          formBody.studyAbroadEndDate
                        )
                      "
                    >
                      <template #year="{ year }">{{ year + 543 }}</template>
                      <template #year-overlay-value="{ value }">{{
                        parseInt(value + 543)
                      }}</template>
                      <template #trigger>
                        <q-input
                          dense
                          outlined
                          :readonly="checkRouteDetail"
                          :class="classInput(!checkRouteDetail)"
                          :model-value="
                            formBody.studyAbroadEndDate
                              ? date2Thai(formBody.studyAbroadEndDate)
                              : null
                          "
                          :label="`${'วันเดินทางกลับถึงประเทศไทย'}`"
                          hide-bottom-space
                          :rules="[
                        (val: string) =>
                          !!val || `${'วันเดินทางกลับถึงประเทศไทย'}`,
                      ]"
                        >
                          <template v-slot:prepend>
                            <q-icon
                              name="event"
                              class="cursor-pointer"
                              style="color: var(--q-primary)"
                            >
                            </q-icon>
                          </template>
                        </q-input>
                      </template>
                    </datepicker>
                  </div>
                  <div class="col-3">
                    <q-input
                      dense
                      outlined
                      lazy-rules
                      :readonly="checkRouteDetail"
                      hide-bottom-space
                      label="รวมระยะเวลาทั้งสิ้น"
                      :class="classInput(!checkRouteDetail)"
                      v-model="formBody.totalPeriod"
                      :rules="[
                        (val: string) =>
                          !!val || `${'กรุณากรอกรวมระยะเวลาทั้งสิ้น'}`,
                      ]"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- เลือกทุน 4 -->
          <div
            class="col-12"
            v-else-if="formBody.scholarshipType === 'EXECUTIVE'"
          >
            <div class="row q-col-gutter-md">
              <div class="col-6">
                <q-input
                  dense
                  outlined
                  lazy-rules
                  :readonly="checkRouteDetail"
                  hide-bottom-space
                  :class="classInput(!checkRouteDetail)"
                  label="หลักสูตรการฝึกอบรม"
                  v-model="formBody.course"
                  :rules="[
                    (val: string) =>
                      !!val || `${'กรุณากรอกหลักสูตรการฝึกอบรม'}`,
                  ]"
                />
              </div>
              <div class="col-6">
                <q-input
                  dense
                  outlined
                  lazy-rules
                  :readonly="checkRouteDetail"
                  hide-bottom-space
                  :class="classInput(!checkRouteDetail)"
                  label="สถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม"
                  v-model="formBody.educationalInstitution"
                  :rules="[
                    (val: string) =>
                      !!val || `${'กรุณากรอกสถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม'}`,
                  ]"
                />
              </div>
              <div class="col-3">
                <datepicker
                  
                  v-model="formBody.startDate"
                  :locale="'th'"
                  autoApply
                  :readonly="checkRouteDetail"
                  :enableTimePicker="false"
                  week-start="0"
                  @update:model-value="changeStartDate('startDate')"
                >
                  >
                  <template #year="{ year }">{{ year + 543 }}</template>
                  <template #year-overlay-value="{ value }">{{
                    parseInt(value + 543)
                  }}</template>
                  <template #trigger>
                    <q-input
                      dense
                      outlined
                      :class="classInput(!checkRouteDetail)"
                      :readonly="checkRouteDetail"
                      :model-value="
                        formBody.startDate
                          ? date2Thai(formBody.startDate)
                          : null
                      "
                      :label="`${'วันเริ่มต้นการฝึกอบรม'}`"
                      hide-bottom-space
                      :rules="[
                        (val: string) =>
                          !!val || `${'กรุณาเลือกวันที่เริ่มต้นการฝึกอบรม'}`,
                      ]"
                    >
                      <template v-slot:prepend>
                        <q-icon
                          name="event"
                          class="cursor-pointer"
                          style="color: var(--q-primary)"
                        >
                        </q-icon>
                      </template>
                    </q-input>
                  </template>
                </datepicker>
              </div>
              <div class="col-3">
                <datepicker
                  
                  v-model="formBody.endDate"
                  :locale="'th'"
                  :readonly="checkRouteDetail"
                  autoApply
                  :enableTimePicker="false"
                  week-start="0"
                  :min-date="formBody.startDate"
                >
                  <template #year="{ year }">{{ year + 543 }}</template>
                  <template #year-overlay-value="{ value }">{{
                    parseInt(value + 543)
                  }}</template>
                  <template #trigger>
                    <q-input
                      dense
                      outlined
                      :readonly="checkRouteDetail"
                      :class="classInput(!checkRouteDetail)"
                      :model-value="
                        formBody.endDate ? date2Thai(formBody.endDate) : null
                      "
                      :label="`${'วันสิ้นสุดการฝึกอบรม'}`"
                      hide-bottom-space
                      :rules="[
                        (val: string) =>
                          !!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการฝึกอบรม'}`,
                      ]"
                    >
                      <template v-slot:prepend>
                        <q-icon
                          name="event"
                          class="cursor-pointer"
                          style="color: var(--q-primary)"
                        >
                        </q-icon>
                      </template>
                    </q-input>
                  </template>
                </datepicker>
              </div>
              <div class="col-6"></div>
              <div class="col-6">
                <q-input
                  dense
                  outlined
                  lazy-rules
                  :readonly="checkRouteDetail"
                  hide-bottom-space
                  label="สถานที่ไปดูงานในประเทศ"
                  :class="classInput(!checkRouteDetail)"
                  v-model="formBody.studyPlace"
                />
              </div>
              <div class="col-6">
                <q-input
                  dense
                  outlined
                  :readonly="checkRouteDetail"
                  lazy-rules
                  hide-bottom-space
                  label="หัวข้อการไปดูงานในประเทศ"
                  :class="classInput(!checkRouteDetail)"
                  v-model="formBody.studyTopic"
                />
              </div>
              <div class="col-3">
                <datepicker
                  
                  v-model="formBody.studyStartDate"
                  :locale="'th'"
                  :readonly="checkRouteDetail"
                  autoApply
                  :enableTimePicker="false"
                  week-start="0"
                  @update:model-value="
                    updateTotalPeriod(
                      formBody.studyStartDate,
                      formBody.studyEndDate
                    )
                  "
                >
                  <template #year="{ year }">{{ year + 543 }}</template>
                  <template #year-overlay-value="{ value }">{{
                    parseInt(value + 543)
                  }}</template>
                  <template #trigger>
                    <q-input
                      dense
                      outlined
                      :readonly="checkRouteDetail"
                      :class="classInput(!checkRouteDetail)"
                      :model-value="
                        formBody.studyStartDate
                          ? date2Thai(formBody.studyStartDate)
                          : null
                      "
                      :label="`${'วันเริ่มต้นการดูงานในประเทศ'}`"
                      hide-bottom-space
                    >
                      <template v-slot:prepend>
                        <q-icon
                          name="event"
                          class="cursor-pointer"
                          style="color: var(--q-primary)"
                        >
                        </q-icon>
                      </template>
                    </q-input>
                  </template>
                </datepicker>
              </div>
              <div class="col-3">
                <datepicker
                  
                  v-model="formBody.studyEndDate"
                  :locale="'th'"
                  autoApply
                  :enableTimePicker="false"
                  :readonly="checkRouteDetail"
                  week-start="0"
                  :min-date="formBody.studyStartDate"
                  @update:model-value="
                    updateTotalPeriod(
                      formBody.studyStartDate,
                      formBody.studyEndDate
                    )
                  "
                >
                  <template #year="{ year }">{{ year + 543 }}</template>
                  <template #year-overlay-value="{ value }">{{
                    parseInt(value + 543)
                  }}</template>
                  <template #trigger>
                    <q-input
                      dense
                      outlined
                      :readonly="checkRouteDetail"
                      :class="classInput(!checkRouteDetail)"
                      :model-value="
                        formBody.studyEndDate
                          ? date2Thai(formBody.studyEndDate)
                          : null
                      "
                      :label="`${'วันสิ้นสุดการดูงานในประเทศ'}`"
                      hide-bottom-space
                    >
                      <template v-slot:prepend>
                        <q-icon
                          name="event"
                          class="cursor-pointer"
                          style="color: var(--q-primary)"
                        >
                        </q-icon>
                      </template>
                    </q-input>
                  </template>
                </datepicker>
              </div>
              <div class="col-3">
                <q-input
                  dense
                  outlined
                  lazy-rules
                  :readonly="checkRouteDetail"
                  hide-bottom-space
                  label="รวมระยะเวลาในการฝึกอบรม"
                  :class="classInput(!checkRouteDetail)"
                  v-model="formBody.totalPeriod"
                />
              </div>
              <div class="col-3"></div>
              <div class="col-6">
                <q-input
                  dense
                  outlined
                  lazy-rules
                  :readonly="checkRouteDetail"
                  hide-bottom-space
                  label="ประเทศที่ไปดูงาน"
                  :class="classInput(!checkRouteDetail)"
                  v-model="formBody.studyCountry"
                />
              </div>
              <div class="col-6">
                <q-input
                  dense
                  outlined
                  lazy-rules
                  :readonly="checkRouteDetail"
                  hide-bottom-space
                  label="หัวข้อการไปดูงานต่างประเทศ"
                  :class="classInput(!checkRouteDetail)"
                  v-model="formBody.studyAbroadTopic"
                />
              </div>
              <div class="col-3">
                <datepicker
                  
                  v-model="formBody.studyAbroadStartDate"
                  :locale="'th'"
                  autoApply
                  :readonly="checkRouteDetail"
                  :enableTimePicker="false"
                  week-start="0"
                  @update:model-value="changeStartDate('studyAbroadStartDate')"
                >
                  <template #year="{ year }">{{ year + 543 }}</template>
                  <template #year-overlay-value="{ value }">{{
                    parseInt(value + 543)
                  }}</template>
                  <template #trigger>
                    <q-input
                      dense
                      outlined
                      :readonly="checkRouteDetail"
                      :class="classInput(!checkRouteDetail)"
                      :model-value="
                        formBody.studyAbroadStartDate
                          ? date2Thai(formBody.studyAbroadStartDate)
                          : null
                      "
                      :label="`${'วันเริ่มต้นการดูงานต่างประเทศ'}`"
                      hide-bottom-space
                    >
                      <template v-slot:prepend>
                        <q-icon
                          name="event"
                          class="cursor-pointer"
                          style="color: var(--q-primary)"
                        >
                        </q-icon>
                      </template>
                    </q-input>
                  </template>
                </datepicker>
              </div>
              <div class="col-3">
                <datepicker
                  
                  v-model="formBody.studyAbroadEndDate"
                  :locale="'th'"
                  autoApply
                  :enableTimePicker="false"
                  :readonly="checkRouteDetail"
                  week-start="0"
                  :min-date="formBody.studyAbroadStartDate"
                >
                  <template #year="{ year }">{{ year + 543 }}</template>
                  <template #year-overlay-value="{ value }">{{
                    parseInt(value + 543)
                  }}</template>
                  <template #trigger>
                    <q-input
                      dense
                      outlined
                      :readonly="checkRouteDetail"
                      :class="classInput(!checkRouteDetail)"
                      :model-value="
                        formBody.studyAbroadEndDate
                          ? date2Thai(formBody.studyAbroadEndDate)
                          : null
                      "
                      :label="`${'วันสิ้นสุดการดูงานต่างประเทศ'}`"
                      hide-bottom-space
                    >
                      <template v-slot:prepend>
                        <q-icon
                          name="event"
                          class="cursor-pointer"
                          style="color: var(--q-primary)"
                        >
                        </q-icon>
                      </template>
                    </q-input>
                  </template>
                </datepicker>
              </div>
            </div>
          </div>

          <div class="col-12">
            <q-input
              :readonly="checkRouteDetail"
              outlined
              dense
              :class="classInput(!checkRouteDetail)"
              v-model="formBody.changeDetail"
              label="เปลี่ยนแปลงรายละเอียด"
              rows="3"
              hide-bottom-space
              type="textarea"
            />
          </div>

          <!-- ผู้ค้ำประกัน -->
          <div class="col-12" v-if="formBody.scholarshipType !== 'EXECUTIVE'">
            <q-card bordered tyle="border: 1px solid #d6dee1">
              <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
                ข้อมูลผู้ค้ำประกัน
                <q-btn
                  v-if="!checkRouteDetail"
                  flat
                  dense
                  icon="add"
                  color="primary"
                  label="เลือกผู้ค้ำประกัน"
                  @click="onSelectGov(false)"
                >
                  <q-tooltip>เพิ่ม</q-tooltip>
                </q-btn>
              </div>
              <div class="col-12"><q-separator /></div>
              <div
                class="row col-12 q-col-gutter-md q-pa-md"
                v-if="isGuarantor"
              >
                <div class="col">
                  <div class="row q-col-gutter-md">
                    <div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
                    <div class="col-8 text-weight-medium">
                      {{ dataGuarantor.citizenId }}
                    </div>
                    <div class="col-4 text-grey">ชื่อ-นามสกุล</div>
                    <div class="col-8 text-weight-medium">
                      {{ dataGuarantor.name }}
                    </div>
                    <div class="col-4 text-grey">ตำแหน่ง</div>
                    <div class="col-8 text-weight-medium">
                      {{ dataGuarantor.position }}
                    </div>
                    <div class="col-4 text-grey">ตำแหน่งประเภท</div>
                    <div class="col-8 text-weight-medium">
                      {{ dataGuarantor.type }}
                    </div>
                  </div>
                </div>
                <div class="col">
                  <div class="row q-col-gutter-md">
                    <div class="col-4 text-grey">ระดับตำแหน่ง</div>
                    <div class="col-8 text-weight-medium">
                      {{ dataGuarantor.level }}
                    </div>
                    <div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
                    <div class="col-8 text-weight-medium">
                      {{ dataGuarantor.positionSide }}
                    </div>
                    <div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
                    <div class="col-8 text-weight-medium text-html">
                      {{ dataGuarantor.org }}
                    </div>
                  </div>
                </div>
              </div>
            </q-card>
          </div>
          <!-- ผู้ค้ำประกัน -->
        </div>
        <q-separator v-if="isGov && !checkRouteDetail" />
        <q-card-actions align="right" v-if="isGov && !checkRouteDetail">
          <q-btn label="บันทึก" color="secondary" type="submit"
            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
          >
        </q-card-actions>
      </q-form>
    </q-card>
  </div>

  <q-dialog v-model="modalUpload" persistent>
    <q-card class="col-12" style="width: 30vw">
      <q-form
        greedy
        @submit.prevent
        @validation-success="clickUpload(documentFile)"
      >
        <Header :tittle="'อัปโหลดไฟล์เอกสารหลักฐาน'" :close="closeDialog" />
        <q-separator />

        <q-card-section>
          <q-file
            for="inputFiles"
            class="col-12"
            outlined
            dense
            v-model="documentFile"
            label="ไฟล์เอกสารหลักฐาน"
            accept=".pdf"
            clearable
          >
            <template v-slot:prepend>
              <q-icon name="attach_file" color="primary" />
            </template>
          </q-file>
        </q-card-section>
        <q-separator />

        <q-card-actions align="right">
          <q-btn label="อัปโหลดไฟล์" color="secondary" type="submit"
            ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
          >
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>

  <DialogGov v-model:modal="modalDialogGov" :up-date="upDate" />
  <DialogReturn
    v-model:modal="dialogReturn"
    :fetchDataDetail="fetchDataDetail"
    :checkFileBackReceived="checkFileBackReceived"
    :scholarshipId="scholarshipId as string"
  />
</template>

<style scoped></style>
