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

import http from "@/plugins/http";
import config from "@/app.config";

import type { DataOptions } from "@/modules/09_scholarship/interface/index/Main";
import type {
  FormsSholarship,
  DataSholarship,
} from "@/modules/09_scholarship/interface/request/index";

import DialogReturn from "@/modules/09_scholarship/components/Dialog/DialogReturn.vue";
import genReport from "@/plugins/genreport";

const isGuarantor = ref<boolean>(false);
const isGov = ref<boolean>(false);
const isStatus = ref<string>("");
const fileList = ref<any[]>();
const route = useRoute();
const $q = useQuasar();
const mixin = useCounterMixin();
const {
  showLoader,
  hideLoader,
  messageError,
  date2Thai,
  calculateDurationYmd,
  dialogConfirm,
  success,
} = mixin;
const router = useRouter();

const dialogReturn = ref<boolean>(false);

const documentFile = ref<any>(null);
const id = ref<string>(route.params.id.toLocaleString());
const budgetSourceOp = ref<DataOptions[]>([
  { id: "BKK", name: "งบประมาณ กทม." },
  { id: "HOSPITAL", name: "เงินบำรุงโรงพยาบาล" },
  { id: "FUND", name: "เงินกองทุน" },
  { id: "SUBSIDY", name: "เงินอุดหนุน" },
  { id: "OTHER", name: "เงินอื่น ๆ" },
]);

const formBody = reactive<FormsSholarship>({
  profileId: "",
  rank: "", //ยศ
  prefix: "", //คำนำหน้าชื่อ
  firstName: "", //ชื่อ
  lastName: "", //นามสกุล
  citizenId: "", //เลขประจำตัวประชาชน
  position: "", //ตำแหน่ง
  posExecutive: "", //ชื่อตำแหน่งทางการบริหาร
  posLevelId: null, //ไอดีระดับตำแหน่ง
  posTypeId: null, //ไอดีประเภทตำแหน่ง
  org: "",
  rootId: null,
  root: "",
  orgRootShortName: "",
  orgRevisionId: null,
  guarantorRank: "", //ยศ(ผู้ค้ำ)
  guarantorPrefix: "", //คำนำหน้าชื่อ(ผู้ค้ำ)
  guarantorFirstName: "", //ชื่อ(ผู้ค้ำ)
  guarantorLastName: "", //นามสกุล(ผู้ค้ำ)
  guarantorCitizenId: "", //เลขประจำตัวประชาชน(ผู้ค้ำ)
  guarantorPosition: "", //ตำแหน่ง(ผู้ค้ำ)
  guarantorPosExecutive: "", //ชื่อตำแหน่งทางการบริหาร(ผู้ค้ำ)
  guarantorOrg: "",
  guarantorRootId: null,
  guarantorRoot: "",
  guarantorOrgRootShortName: "",
  guarantorOrgRevisionId: null,
  posLevelguarantorId: null, //ไอดีระดับตำแหน่ง(ผู้ค้ำ)
  posTypeguarantorId: null, //ไอดีประเภทตำแหน่ง(ผู้ค้ำ)
  scholarshipYear: null, //ปีงบประมาณที่ได้รับทุน
  budgetSource: "", //แหล่งงบประมาณ
  budgetApprove: null, //งบประมาณที่ได้รับอนุมัติตลอดหลักสูตร
  bookNo: "", //เลขที่หนังสืออนุมัติ
  bookNoDate: null, //ลงวันที่(หนังสือ)
  bookApproveDate: null, //หนังสืออนุมัติเมื่อวันที่
  useOfficialTime: false, //ใช้เวลาราชการ
  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,
});

const dataPerson = reactive({
  id: "",
  citizenId: "",
  name: "",
  prefix: "",
  firstName: "",
  lastName: "",
  position: "",
  type: "",
  level: "",
  positionSide: "",
  org: "-",
});

const dataGuarantor = reactive({
  id: "",
  prefix: "",
  firstName: "",
  lastName: "",
  citizenId: "",
  name: "",
  position: "",
  type: "",
  level: "",
  positionSide: "",
  org: "-",
});

const scholarshipTypeOp = ref<DataOptions[]>([
  { id: "DOMESTICE", name: "การศึกษาในประเทศ" },
  {
    id: "NOABROAD",
    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยงานภายนอก (หลักสูตรที่ไม่มีการไปต่างประเทศ)",
  },
  {
    id: "ABROAD",
    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยงานภายนอก (หลักสูตรที่มีการไปต่างประเทศ)",
  },
  {
    id: "EXECUTIVE",
    name: " ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยงานภายนอก (หลักสูตรประเภทนักบริหาร)",
  },
  {
    id: "RESEARCH",
    name: "ศึกษา ฝึกอบรม ประชุม ดูงาน และปฏิบัติการวิจัย ณ ต่างประเทศ",
  },
]);

const fundTypeOp = ref<DataOptions[]>([
  { id: "FUND1", name: "ทุน 1 (ก)" },
  { id: "FUND2", name: "ทุน 1 (ข)" },
  { id: "FUND3", name: "ทุน 1 (ค)" },
  { id: "FUND4", name: "ทุน 2" },
  { id: "FUND5", name: "ทุนส่วนตัว" },
]);

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 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 onOpenReturn() {
  dialogReturn.value = true;
}

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

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

  dialogConfirm(
    $q,
    async () => {
      const selectedFile = file;
      const formdata = new FormData();
      formdata.append("file", selectedFile);
      await http
        .post(
          config.API.developmentSalaryFile(
            "ระบบพัฒนาบุคคล",
            "ฟอร์มรายงานตัวกลับเข้ารับราชการ",
            id.value
          ),
          {
            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);
        });
    },
    "ยืนยันการอัปโหลดไฟล์",
    "ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
  );
}

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

function getFile() {
  http
    .get(
      config.API.developmentSalaryFile(
        "ระบบพัฒนาบุคคล",
        "ฟอร์มรายงานตัวกลับเข้ารับราชการ",
        id.value
      )
    )
    .then((res) => {
      if (res) {
        const dataFile = res.data;
        fileList.value = dataFile[0];
      }
    })
    .finally(() => {});
}

function downloadFile(file: any) {
  showLoader();
  http
    .get(
      config.API.developmentSalaryFile(
        "ระบบพัฒนาบุคคล",
        "ฟอร์มรายงานตัวกลับเข้ารับราชการ",
        id.value
      ) + `/${file.fileName}`
    )
    .then((res) => {
      const data = res.data.downloadUrl;
      window.open(data, "_blank");
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

function fetchDataDetail(id: string) {
  showLoader();
  http
    .get(config.API.developmentScholarship + `/${id}`)
    .then((res) => {
      const data: DataSholarship = res.data.result;
      console.log(data);
      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.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
        : false;
      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.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.prefix = data.prefix),
        (dataPerson.firstName = data.firstName),
        (dataPerson.lastName = 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;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

onMounted(async () => {
  await fetchDataDetail(id.value);
  await getFile();
});
</script>
<template>
  <div class="col-12 row justify-center">
    <div class="col-xs-12 col-sm-12 col-md-11">
      <div class="toptitle text-white col-12 row items-center">
        <q-btn
          icon="mdi-arrow-left"
          unelevated
          round
          dense
          flat
          color="primary"
          class="q-mr-sm"
          @click="router.push(`/scholarship`)"
        />
        รายละเอียดทุนการศึกษา/ฝึกอบรม
      </div>

      <q-card flat bordered class="col-12 q-pa-md">
        <q-toolbar class="q-px-none q-pb-sm">
          <div class="row q-col-gutter-x-sm full-width">
            <div class="col-2 q-pa-none">
              <q-btn
                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="onDownload">
                      <q-item-section>
                        <q-item-label>
                          <q-icon name="download" color="primary" size="18px" />
                          ดาวน์โหลดฟอร์มต้นแบบ
                        </q-item-label>
                      </q-item-section>
                    </q-item>
                  </q-list>
                </q-menu>
              </q-btn>
            </div>

            <q-space />
            <div v-if="fileList == null" class="col-xs-5 col-3">
              <q-file
                for="inputFiles"
                class="col-12"
                outlined
                dense
                v-model="documentFile"
                label="ไฟล์เอกสารหลักฐาน"
                accept=".pdf,.xlsx,.docx,.png,.jpg"
                clearable
              >
                <template v-slot:prepend>
                  <q-icon name="attach_file" color="primary" />
                </template>
                <template v-slot:after>
                  <q-btn
                    size="14px"
                    v-if="documentFile"
                    flat
                    round
                    dense
                    color="add"
                    icon="mdi-upload"
                    @click="clickUpload(documentFile)"
                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                  >
                </template>
              </q-file>
            </div>
            <div v-else class="col-2 text-right">
              <q-btn
                size="12px"
                flat
                round
                dense
                color="blue"
                icon="mdi-download"
                @click="downloadFile(fileList)"
              >
                <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
              >
            </div>
          </div>
        </q-toolbar>

        <q-card flat style="border-radius: 5px; border: 1px solid #d6dee1">
          <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
            ข้อมูลราชการ
          </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-xs-12 col-md-6">
              <div class="row q-col-gutter-md">
                <div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
                <div class="col-8 text-weight-medium">
                  {{ dataPerson.citizenId ? dataPerson.citizenId : "-" }}
                </div>
                <div class="col-4 text-grey">ชื่อ-นามสกุล</div>
                <div class="col-8 text-weight-medium">
                  {{ dataPerson.firstName ? dataPerson.name : "-" }}
                </div>
                <div class="col-4 text-grey">ตำแหน่ง</div>
                <div class="col-8 text-weight-medium">
                  {{ dataPerson.position ? dataPerson.position : "-" }}
                </div>
                <div class="col-4 text-grey">ประเภทตำแหน่ง</div>
                <div class="col-8 text-weight-medium">
                  {{ dataPerson.type ? dataPerson.type : "-" }}
                </div>
              </div>
            </div>
            <div class="col-xs-12 col-md-6">
              <div class="row q-col-gutter-md">
                <div class="col-4 text-grey">ระดับตำแหน่ง</div>
                <div class="col-8 text-weight-medium">
                  {{ dataPerson.level ? dataPerson.level : "-" }}
                </div>
                <div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
                <div class="col-8 text-weight-medium">
                  {{ dataPerson.positionSide ? dataPerson.positionSide : "-" }}
                </div>
                <div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
                <div class="col-8 text-weight-medium">
                  {{ dataPerson.org ? 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 class="row q-col-gutter-md q-mt-sm">
          <div class="col-md-9 col-xs-12">
            <q-select
              dense
              readonly
              outlined
              v-model="formBody.scholarshipType"
              :options="scholarshipTypeOp"
              option-label="name"
              option-value="id"
              emit-value
              map-options
              class="inputgreen"
              label="เลือกประเภททุน"
            />
          </div>
          <div
            class="col-md-3 col-xs-12"
            v-if="
              formBody.scholarshipType !== '' &&
              formBody.scholarshipType !== 'EXECUTIVE' &&
              formBody.scholarshipType !== 'RESEARCH'
            "
          >
            <q-select
              dense
              outlined
              class="inputgreen"
              v-model="formBody.fundType"
              :options="fundTypeOp"
              option-label="name"
              option-value="id"
              emit-value
              readonly
              map-options
              label="ประเภททุน"
            />
          </div>

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

          <div class="row col-12 q-col-gutter-md">
            <div class="col-xs-12 col-md-3">
              <datepicker
                menu-class-name="modalfix"
                v-model="formBody.scholarshipYear"
                :locale="'th'"
                autoApply
                readonly
                year-picker
                :enableTimePicker="false"
              >
                <template #year="{ year }">{{ year + 543 }}</template>
                <template #year-overlay-value="{ value }">{{
                  parseInt(value + 543)
                }}</template>
                <template #trigger>
                  <q-input
                    dense
                    outlined
                    readonly
                    class="inputgreen"
                    :model-value="
                      formBody.scholarshipYear
                        ? Number(formBody.scholarshipYear) + 543
                        : null
                    "
                    :label="`${
                      formBody.scholarshipType === 'RESEARCH'
                        ? 'ปีงบประมาณที่ได้รับอนุมัติ '
                        : 'ปีงบประมาณที่ได้รับทุน'
                    }`"
                  >
                    <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 !== 'RESEARCH'"
              class="col-xs-12 col-md-3"
            >
              <q-select
                dense
                outlined
                class="inputgreen"
                label="แหล่งงบประมาณ"
                v-model="formBody.budgetSource"
                :options="budgetSourceOp"
                option-label="name"
                option-value="id"
                emit-value
                map-options
                readonly
              />
            </div>
            <div class="col-xs-12 col-md-3">
              <q-input
                dense
                outlined
                readonly
                class="inputgreen"
                v-model="formBody.budgetApprove"
                label="งบประมาณที่ได้รับอนุมัติตลอดหลักสูตร"
                mask="###,###,###,###,###,###"
                reverse-fill-mask
              />
            </div>
            <div class="col-xs-12 col-md-3">
              <q-checkbox
                keep-color
                disable
                color="primary"
                v-model="formBody.isNoUseBudget"
                label="ไม่ใช้งบประมาณ"
              />
            </div>
          </div>

          <div class="row col-12 q-col-gutter-md">
            <div class="col-xs-12 col-md-3">
              <q-input
                dense
                readonly
                outlined
                class="inputgreen"
                v-model="formBody.bookNo"
                label="เลขที่หนังสืออนุมัติ"
              />
            </div>
            <div class="col-xs-12 col-md-3">
              <datepicker
                menu-class-name="modalfix"
                v-model="formBody.bookNoDate"
                :locale="'th'"
                readonly
                autoApply
                :enableTimePicker="false"
              >
                <template #year="{ year }">{{ year + 543 }}</template>
                <template #year-overlay-value="{ value }">{{
                  parseInt(value + 543)
                }}</template>
                <template #trigger>
                  <q-input
                    dense
                    outlined
                    readonly
                    class="inputgreen"
                    :model-value="
                      formBody.bookNoDate
                        ? date2Thai(formBody.bookNoDate)
                        : null
                    "
                    :label="`${'ลงวันที่'}`"
                  >
                    <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-xs-12 col-md-3">
              <datepicker
                menu-class-name="modalfix"
                v-model="formBody.bookApproveDate"
                :locale="'th'"
                autoApply
                readonly
                :enableTimePicker="false"
              >
                <template #year="{ year }">{{ year + 543 }}</template>
                <template #year-overlay-value="{ value }">{{
                  parseInt(value + 543)
                }}</template>
                <template #trigger>
                  <q-input
                    dense
                    readonly
                    outlined
                    class="inputgreen"
                    :model-value="
                      formBody.bookApproveDate
                        ? date2Thai(formBody.bookApproveDate)
                        : null
                    "
                    :label="`${'หนังสืออนุมัติเมื่อวันที่'}`"
                  >
                    <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 !== 'RESEARCH'"
              class="col-xs-12 col-md-3"
            >
              <q-checkbox
                keep-color
                disable
                color="primary"
                v-model="formBody.useOfficialTime"
                label="ใช้เวลาราชการ"
              />
            </div>
          </div>

          <div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-12">
            <q-input
              outlined
              dense
              readonly
              class="inputgreen"
              v-model="formBody.changeDetail"
              label="เปลี่ยนแปลงรายละเอียด"
              rows="3"
              type="textarea"
            />
          </div>

          <div class="col-12" v-if="formBody.scholarshipType !== 'EXECUTIVE'">
            <div class="row col-12 q-col-gutter-md">
              <div class="col-xs-12 col-md-3">
                <q-input
                  dense
                  readonly
                  outlined
                  label="เลขที่สัญญา"
                  class="inputgreen"
                  v-model="formBody.contractNo"
                />
              </div>
              <div class="col-xs-12 col-md-2">
                <datepicker
                  readonly
                  menu-class-name="modalfix"
                  v-model="formBody.contractDate"
                  :locale="'th'"
                  autoApply
                >
                  <template #year="{ year }">{{ year + 543 }}</template>
                  <template #year-overlay-value="{ value }">{{
                    parseInt(value + 543)
                  }}</template>
                  <template #trigger>
                    <q-input
                      dense
                      readonly
                      outlined
                      class="inputgreen"
                      :model-value="
                        formBody.contractDate
                          ? date2Thai(formBody.contractDate)
                          : null
                      "
                      :label="`${'ลงวันที่'}`"
                    >
                      <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 !== 'RESEARCH'"
                class="col-xs-12 col-md-3"
              >
                <q-input
                  dense
                  readonly
                  outlined
                  class="inputgreen"
                  v-model="formBody.reportBackNo"
                  label="เลขที่หนังสือรายงานตัวกลับ"
                />
              </div>
              <div
                v-if="formBody.scholarshipType !== 'RESEARCH'"
                class="col-xs-12 col-md-2"
              >
                <datepicker
                  readonly
                  menu-class-name="modalfix"
                  v-model="formBody.reportBackNoDate"
                  :locale="'th'"
                  autoApply
                  :enableTimePicker="false"
                >
                  <template #year="{ year }">{{ year + 543 }}</template>
                  <template #year-overlay-value="{ value }">{{
                    parseInt(value + 543)
                  }}</template>
                  <template #trigger>
                    <q-input
                      dense
                      readonly
                      outlined
                      class="inputgreen"
                      :model-value="
                        formBody.reportBackNoDate
                          ? date2Thai(formBody.reportBackNoDate)
                          : null
                      "
                      :label="`${'ลงวันที่'}`"
                    >
                      <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 !== 'RESEARCH'"
                class="col-xs-12 col-md-2"
              >
                <datepicker
                  menu-class-name="modalfix"
                  v-model="formBody.reportBackDate"
                  :locale="'th'"
                  autoApply
                  readonly
                  :enableTimePicker="false"
                >
                  <template #year="{ year }">{{ year + 543 }}</template>
                  <template #year-overlay-value="{ value }">{{
                    parseInt(value + 543)
                  }}</template>
                  <template #trigger>
                    <q-input
                      dense
                      outlined
                      readonly
                      class="inputgreen"
                      :model-value="
                        formBody.reportBackDate
                          ? date2Thai(formBody.reportBackDate)
                          : null
                      "
                      :label="`${'รายงานตัวกลับเมื่่อวันที่'}`"
                    >
                      <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">
                <q-card bordered tyle="border: 1px solid #d6dee1">
                  <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
                    ข้อมูลผู้ค้ำประกัน
                  </div>
                  <div class="col-12"><q-separator /></div>
                  <div class="row col-12 q-col-gutter-md q-pa-md">
                    <div class="col-xs-12 col-md-6">
                      <div class="row q-col-gutter-md">
                        <div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
                        <div class="col-8 text-weight-medium">
                          {{
                            dataGuarantor.citizenId
                              ? dataGuarantor.citizenId
                              : "-"
                          }}
                        </div>
                        <div class="col-4 text-grey">ชื่อ-นามสกุล</div>
                        <div class="col-8 text-weight-medium">
                          {{
                            dataGuarantor.firstName ? dataGuarantor.name : "-"
                          }}
                        </div>
                        <div class="col-4 text-grey">ตำแหน่ง</div>
                        <div class="col-8 text-weight-medium">
                          {{
                            dataGuarantor.position
                              ? dataGuarantor.position
                              : "-"
                          }}
                        </div>
                        <div class="col-4 text-grey">ประเภท</div>
                        <div class="col-8 text-weight-medium">
                          {{ dataGuarantor.type ? dataGuarantor.type : "-" }}
                        </div>
                      </div>
                    </div>
                    <div class="col-xs-12 col-md-6">
                      <div class="row q-col-gutter-md">
                        <div class="col-4 text-grey">ระดับตำแหน่ง</div>
                        <div class="col-8 text-weight-medium">
                          {{ dataGuarantor.level ? dataGuarantor.level : "-" }}
                        </div>
                        <div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
                        <div class="col-8 text-weight-medium">
                          {{
                            dataGuarantor.positionSide
                              ? dataGuarantor.positionSide
                              : "-"
                          }}
                        </div>
                        <div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
                        <div class="col-8 text-weight-medium">
                          {{ dataGuarantor.org ? dataGuarantor.org : "-" }}
                        </div>
                      </div>
                    </div>
                  </div>
                </q-card>
              </div>

              <!-- เลือกทุน 1 -->
              <div
                class="col-12"
                v-if="formBody.scholarshipType === 'DOMESTICE'"
              >
                <div class="row q-col-gutter-md">
                  <div class="col-xs-12 col-md-3">
                    <q-input
                      dense
                      readonly
                      outlined
                      label="ระดับปริญญา"
                      class="inputgreen"
                      v-model="formBody.degreeLevel"
                    />
                  </div>
                  <div class="col-xs-12 col-md-3">
                    <q-input
                      dense
                      readonly
                      outlined
                      label="หลักสูตรการศึกษา"
                      class="inputgreen"
                      v-model="formBody.course"
                    />
                  </div>
                  <div class="col-xs-12 col-md-3">
                    <q-input
                      dense
                      outlined
                      readonly
                      label="สาขาวิชา"
                      class="inputgreen"
                      v-model="formBody.field"
                    />
                  </div>
                  <div class="col-xs-12 col-md-3">
                    <q-input
                      dense
                      outlined
                      readonly
                      label="คณะ"
                      class="inputgreen"
                      v-model="formBody.faculty"
                    />
                  </div>
                  <div class="col-xs-12 col-md-6">
                    <q-input
                      dense
                      outlined
                      readonly
                      label="สถาบันการศึกษา"
                      class="inputgreen"
                      v-model="formBody.educationalInstitution"
                    />
                  </div>
                  <div class="col-xs-12 col-md-3">
                    <datepicker
                      menu-class-name="modalfix"
                      v-model="formBody.startDate"
                      :locale="'th'"
                      autoApply
                      readonly
                      :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
                          class="inputgreen"
                          :model-value="
                            formBody.startDate
                              ? date2Thai(formBody.startDate)
                              : null
                          "
                          :label="`${'วันเริ่มต้นการศึกษา'}`"
                        >
                          <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-xs-12 col-md-3">
                    <datepicker
                      menu-class-name="modalfix"
                      v-model="formBody.endDate"
                      :locale="'th'"
                      readonly
                      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
                          class="inputgreen"
                          :model-value="
                            formBody.endDate
                              ? date2Thai(formBody.endDate)
                              : null
                          "
                          :label="`${'วันสิ้นสุดการศึกษา'}`"
                        >
                          <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-xs-12 col-md-6">
                    <q-input
                      dense
                      readonly
                      outlined
                      label="สถานที่ไปศึกษาดูงาน"
                      class="inputgreen"
                      v-model="formBody.studyPlace"
                    />
                  </div>
                  <div class="col-xs-12 col-md-6">
                    <q-input
                      dense
                      readonly
                      outlined
                      label="หัวข้อการไปศึกษาดูงาน"
                      class="inputgreen"
                      v-model="formBody.studyTopic"
                    />
                  </div>
                  <div class="col-xs-12 col-md-3">
                    <datepicker
                      readonly
                      menu-class-name="modalfix"
                      v-model="formBody.studyStartDate"
                      :locale="'th'"
                      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
                          readonly
                          class="inputgreen"
                          :model-value="
                            formBody.studyStartDate
                              ? date2Thai(formBody.studyStartDate)
                              : null
                          "
                          :label="`${'วันเริ่มต้นการศึกษาดูงาน'}`"
                        >
                          <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-xs-12 col-md-3">
                    <datepicker
                      menu-class-name="modalfix"
                      readonly
                      v-model="formBody.studyEndDate"
                      :locale="'th'"
                      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
                          class="inputgreen"
                          :model-value="
                            formBody.studyEndDate
                              ? date2Thai(formBody.studyEndDate)
                              : null
                          "
                          :label="`${'วันสิ้นสุดการศึกษาดูงาน'}`"
                        >
                          <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" v-if="!$q.screen.gt.xs"></div>
                  <div class="col-xs-12 col-md-6">
                    <q-input
                      dense
                      readonly
                      outlined
                      label="ประเทศที่ไปศึกษาดูงาน"
                      class="inputgreen"
                      v-model="formBody.studyCountry"
                    />
                  </div>
                  <div class="col-xs-12 col-md-6">
                    <q-input
                      dense
                      readonly
                      outlined
                      label="หัวข้อการไปศึกษาดูงานต่างประเทศ"
                      class="inputgreen"
                      v-model="formBody.studyAbroadTopic"
                    />
                  </div>
                  <div class="col-xs-12 col-md-3">
                    <datepicker
                      readonly
                      menu-class-name="modalfix"
                      v-model="formBody.studyAbroadStartDate"
                      :locale="'th'"
                      autoApply
                      :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
                          readonly
                          outlined
                          class="inputgreen"
                          :model-value="
                            formBody.studyAbroadStartDate
                              ? date2Thai(formBody.studyAbroadStartDate)
                              : null
                          "
                          :label="`${'วันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`"
                        >
                          <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-xs-12 col-md-3">
                    <datepicker
                      readonly
                      menu-class-name="modalfix"
                      v-model="formBody.studyAbroadEndDate"
                      :locale="'th'"
                      autoApply
                      :enableTimePicker="false"
                      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
                          readonly
                          outlined
                          class="inputgreen"
                          :model-value="
                            formBody.studyAbroadEndDate
                              ? date2Thai(formBody.studyAbroadEndDate)
                              : null
                          "
                          :label="`${'วันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`"
                        >
                          <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-xs-12 col-md-3">
                    <q-input
                      dense
                      readonly
                      outlined
                      label="รวมระยะเวลาในการศึกษา"
                      class="inputgreen"
                      v-model="formBody.totalPeriod"
                    />
                  </div>
                </div>
              </div>

              <!-- เลือกทุน 2 -->
              <div
                class="col-12"
                v-else-if="formBody.scholarshipType === 'NOABROAD'"
              >
                <div class="row q-col-gutter-md">
                  <div class="col-xs-12 col-md-6">
                    <q-input
                      dense
                      outlined
                      readonly
                      label="หลักสูตรการฝึกอบรม"
                      class="inputgreen"
                      v-model="formBody.course"
                    />
                  </div>
                  <div class="col-xs-12 col-md-6">
                    <q-input
                      dense
                      readonly
                      outlined
                      label="สาขา"
                      class="inputgreen"
                      v-model="formBody.field"
                    />
                  </div>
                  <div class="col-xs-12 col-md-6">
                    <q-input
                      readonly
                      dense
                      outlined
                      label="สถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม"
                      class="inputgreen"
                      v-model="formBody.educationalInstitution"
                    />
                  </div>
                  <div class="col-xs-12 col-md-3">
                    <datepicker
                      readonly
                      menu-class-name="modalfix"
                      v-model="formBody.startDate"
                      :locale="'th'"
                      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
                          readonly
                          outlined
                          class="inputgreen"
                          :model-value="
                            formBody.startDate
                              ? date2Thai(formBody.startDate)
                              : null
                          "
                          :label="`${'วันเริ่มต้นการฝึกอบรม'}`"
                        >
                          <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-xs-12 col-md-3">
                    <datepicker
                      readonly
                      menu-class-name="modalfix"
                      v-model="formBody.endDate"
                      :locale="'th'"
                      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
                          class="inputgreen"
                          :model-value="
                            formBody.endDate
                              ? date2Thai(formBody.endDate)
                              : null
                          "
                          :label="`${'วันสิ้นสุดการฝึกอบรม'}`"
                        >
                          <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-xs-12 col-md-6">
                    <q-input
                      dense
                      readonly
                      outlined
                      label="สถานที่ไปศึกษาดูงาน"
                      class="inputgreen"
                      v-model="formBody.studyPlace"
                    />
                  </div>
                  <div class="col-xs-12 col-md-6">
                    <q-input
                      dense
                      readonly
                      outlined
                      label="หัวข้อการไปศึกษาดูงาน"
                      class="inputgreen"
                      v-model="formBody.studyTopic"
                    />
                  </div>
                  <div class="col-xs-12 col-md-3">
                    <datepicker
                      menu-class-name="modalfix"
                      v-model="formBody.studyStartDate"
                      :locale="'th'"
                      autoApply
                      readonly
                      :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
                          readonly
                          class="inputgreen"
                          :model-value="
                            formBody.studyStartDate
                              ? date2Thai(formBody.studyStartDate)
                              : null
                          "
                          :label="`${'วันเริ่มต้นการศึกษาดูงาน'}`"
                        >
                          <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-xs-12 col-md-3">
                    <datepicker
                      readonly
                      menu-class-name="modalfix"
                      v-model="formBody.studyEndDate"
                      :locale="'th'"
                      autoApply
                      :enableTimePicker="false"
                      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
                          class="inputgreen"
                          :model-value="
                            formBody.studyEndDate
                              ? date2Thai(formBody.studyEndDate)
                              : null
                          "
                          :label="`${'วันสิ้นสุดการศึกษาดูงาน'}`"
                        >
                          <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-xs-12 col-md-3">
                    <q-input
                      dense
                      readonly
                      outlined
                      label="รวมระยะเวลาในการฝึกอบรม"
                      class="inputgreen"
                      v-model="formBody.totalPeriod"
                    />
                  </div>
                </div>
              </div>

              <!-- เลือกทุน 3 -->
              <div
                class="col-12"
                v-else-if="formBody.scholarshipType === 'ABROAD'"
              >
                <div class="row q-col-gutter-md">
                  <div class="col-xs-12 col-md-6">
                    <q-input
                      dense
                      readonly
                      outlined
                      label="หลักสูตรการฝึกอบรม"
                      class="inputgreen"
                      v-model="formBody.course"
                    />
                  </div>
                  <div class="col-xs-12 col-md-6">
                    <q-input
                      dense
                      outlined
                      readonly
                      label="สาขา"
                      class="inputgreen"
                      v-model="formBody.field"
                    />
                  </div>
                  <div class="col-xs-12 col-md-6">
                    <q-input
                      dense
                      readonly
                      outlined
                      label="สถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม"
                      class="inputgreen"
                      v-model="formBody.educationalInstitution"
                    />
                  </div>
                  <div class="col-xs-12 col-md-3">
                    <datepicker
                      readonly
                      menu-class-name="modalfix"
                      v-model="formBody.startDate"
                      :locale="'th'"
                      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
                          readonly
                          dense
                          outlined
                          class="inputgreen"
                          :model-value="
                            formBody.startDate
                              ? date2Thai(formBody.startDate)
                              : null
                          "
                          :label="`${'วันเริ่มต้นการฝึกอบรม'}`"
                        >
                          <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-xs-12 col-md-3">
                    <datepicker
                      readonly
                      menu-class-name="modalfix"
                      v-model="formBody.endDate"
                      :locale="'th'"
                      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
                          readonly
                          outlined
                          class="inputgreen"
                          :model-value="
                            formBody.endDate
                              ? date2Thai(formBody.endDate)
                              : null
                          "
                          :label="`${'วันสิ้นสุดการฝึกอบรม'}`"
                        >
                          <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-xs-12 col-md-6">
                    <q-input
                      dense
                      readonly
                      outlined
                      label="สถานที่ไปศึกษาดูงานในประเทศ"
                      class="inputgreen"
                      v-model="formBody.studyPlace"
                    />
                  </div>
                  <div class="col-xs-12 col-md-6">
                    <q-input
                      dense
                      readonly
                      outlined
                      label="หัวข้อการไปศึกษาดูงานในประเทศ"
                      class="inputgreen"
                      v-model="formBody.studyTopic"
                    />
                  </div>
                  <div class="col-xs-12 col-md-3">
                    <datepicker
                      readonly
                      menu-class-name="modalfix"
                      v-model="formBody.studyStartDate"
                      :locale="'th'"
                      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
                          outlined
                          class="inputgreen"
                          :model-value="
                            formBody.studyStartDate
                              ? date2Thai(formBody.studyStartDate)
                              : null
                          "
                          :label="`${'วันเริ่มต้นการศึกษาดูงานในประเทศ'}`"
                        >
                          <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-xs-12 col-md-3">
                    <datepicker
                      readonly
                      menu-class-name="modalfix"
                      v-model="formBody.studyEndDate"
                      :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
                          readonly
                          outlined
                          class="inputgreen"
                          :model-value="
                            formBody.studyEndDate
                              ? date2Thai(formBody.studyEndDate)
                              : null
                          "
                          :label="`${'วันสิ้นสุดการศึกษาดูงานในประเทศ'}`"
                        >
                          <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" v-if="!$q.screen.gt.xs"></div>
                  <div class="col-xs-12 col-md-6">
                    <q-input
                      dense
                      readonly
                      outlined
                      label="ประเทศที่เดินทางไปศึกษาดูงาน"
                      class="inputgreen"
                      v-model="formBody.studyCountry"
                    />
                  </div>
                  <div class="col-xs-12 col-md-6">
                    <q-input
                      dense
                      readonly
                      outlined
                      label="หัวข้อการไปศึกษาดูงานต่างประเทศ"
                      class="inputgreen"
                      v-model="formBody.studyAbroadTopic"
                    />
                  </div>
                  <div class="col-xs-12 col-md-3">
                    <datepicker
                      readonly
                      menu-class-name="modalfix"
                      v-model="formBody.studyAbroadStartDate"
                      :locale="'th'"
                      autoApply
                      :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
                          readonly
                          outlined
                          class="inputgreen"
                          :model-value="
                            formBody.studyAbroadStartDate
                              ? date2Thai(formBody.studyAbroadStartDate)
                              : null
                          "
                          :label="`${'วันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`"
                        >
                          <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-xs-12 col-md-3">
                    <datepicker
                      readonly
                      menu-class-name="modalfix"
                      v-model="formBody.studyAbroadEndDate"
                      :locale="'th'"
                      autoApply
                      :enableTimePicker="false"
                      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
                          readonly
                          outlined
                          class="inputgreen"
                          :model-value="
                            formBody.studyAbroadEndDate
                              ? date2Thai(formBody.studyAbroadEndDate)
                              : null
                          "
                          :label="`${'วันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`"
                        >
                          <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-xs-12 col-md-3">
                    <q-input
                      readonly
                      dense
                      outlined
                      label="รวมระยะเวลาในการศึกษา"
                      class="inputgreen"
                      v-model="formBody.totalPeriod"
                    />
                  </div>
                </div>
              </div>

              <!-- เลือกทุน 5 -->
              <div
                class="col-12"
                v-else-if="formBody.scholarshipType === 'RESEARCH'"
              >
                <div class="row q-col-gutter-md">
                  <div class="col-xs-12 col-md-3">
                    <q-select
                      dense
                      readonly
                      outlined
                      class="inputgreen"
                      label="ประเภทการพัฒนา"
                      v-model="formBody.studyTopic"
                      :options="[
                        'ศึกษา',
                        'ฝึกอบรม',
                        'ประชุม',
                        'ดูงาน',
                        'ปฏิบัติการวิจัย',
                      ]"
                    />
                  </div>

                  <div class="col-xs-12 col-md-3">
                    <q-input
                      dense
                      readonly
                      outlined
                      label="ระดับปริญญา"
                      class="inputgreen"
                      v-model="formBody.degreeLevel"
                    />
                  </div>

                  <div class="col-xs-12 col-md-6">
                    <q-input
                      dense
                      readonly
                      outlined
                      class="inputgreen"
                      label="หลักสูตรการฝึกอบรม"
                      v-model="formBody.course"
                    />
                  </div>

                  <div class="col-xs-12 col-md-3">
                    <q-input
                      dense
                      readonly
                      outlined
                      label="สาขาวิชา"
                      class="inputgreen"
                      v-model="formBody.field"
                    />
                  </div>

                  <div class="col-xs-12 col-md-3">
                    <q-input
                      dense
                      readonly
                      outlined
                      label="คณะ"
                      class="inputgreen"
                      v-model="formBody.faculty"
                    />
                  </div>

                  <div class="col-xs-12 col-md-6">
                    <q-input
                      readonly
                      dense
                      outlined
                      label="สถาบันการศึกษา/หน่วยงานผู้จัด"
                      class="inputgreen"
                      v-model="formBody.studyPlace"
                    />
                  </div>

                  <div class="col-xs-12 col-md-3">
                    <datepicker
                      readonly
                      menu-class-name="modalfix"
                      v-model="formBody.startDate"
                      :locale="'th'"
                      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
                          class="inputgreen"
                          :model-value="
                            formBody.startDate
                              ? date2Thai(formBody.startDate)
                              : null
                          "
                          :label="`${'วันเริ่มต้นการฝึกอบรม'}`"
                        >
                          <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-xs-12 col-md-3">
                    <datepicker
                      readonly
                      menu-class-name="modalfix"
                      v-model="formBody.endDate"
                      :locale="'th'"
                      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
                          class="inputgreen"
                          :model-value="
                            formBody.endDate
                              ? date2Thai(formBody.endDate)
                              : null
                          "
                          :label="`${'วันสิ้นสุดการฝึกอบรม'}`"
                        >
                          <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-xs-12 col-md-6">
                    <q-input
                      dense
                      readonly
                      outlined
                      label="ประเทศที่ไปศึกษา ฝึกอบรม ประชุม ดูงาน และปฏิบัติการวิจัย"
                      class="inputgreen"
                      v-model="formBody.studyCountry"
                    />
                  </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-xs-12 col-md-md-6">
                <q-input
                  readonly
                  dense
                  outlined
                  class="inputgreen"
                  label="หลักสูตรการฝึกอบรม"
                  v-model="formBody.course"
                />
              </div>
              <div class="col-xs-12 col-md-md-6">
                <q-input
                  dense
                  readonly
                  outlined
                  class="inputgreen"
                  label="สถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม"
                  v-model="formBody.educationalInstitution"
                />
              </div>
              <div class="col-xs-12 col-md-md-3">
                <datepicker
                  readonly
                  menu-class-name="modalfix"
                  v-model="formBody.startDate"
                  :locale="'th'"
                  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
                      readonly
                      outlined
                      class="inputgreen"
                      :model-value="
                        formBody.startDate
                          ? date2Thai(formBody.startDate)
                          : null
                      "
                      :label="`${'วันเริ่มต้นการฝึกอบรม'}`"
                    >
                      <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-xs-12 col-md-md-3">
                <datepicker
                  readonly
                  menu-class-name="modalfix"
                  v-model="formBody.endDate"
                  :locale="'th'"
                  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
                      class="inputgreen"
                      :model-value="
                        formBody.endDate ? date2Thai(formBody.endDate) : null
                      "
                      :label="`${'วันสิ้นสุดการฝึกอบรม'}`"
                    >
                      <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" v-if="!$q.screen.gt.xs"></div>
              <div class="col-xs-12 col-md-6">
                <q-input
                  dense
                  readonly
                  outlined
                  label="สถานที่ไปศึกษาดูงานในประเทศ"
                  class="inputgreen"
                  v-model="formBody.studyPlace"
                />
              </div>
              <div class="col-xs-12 col-md-6">
                <q-input
                  dense
                  readonly
                  outlined
                  label="หัวข้อการไปศึกษาดูงานในประเทศ"
                  class="inputgreen"
                  v-model="formBody.studyTopic"
                />
              </div>
              <div class="col-xs-12 col-md-3">
                <datepicker
                  readonly
                  menu-class-name="modalfix"
                  v-model="formBody.studyStartDate"
                  :locale="'th'"
                  autoApply
                  :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
                      readonly
                      outlined
                      class="inputgreen"
                      :model-value="
                        formBody.studyStartDate
                          ? date2Thai(formBody.studyStartDate)
                          : null
                      "
                      :label="`${'วันเริ่มต้นการศึกษาดูงานในประเทศ'}`"
                    >
                      <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-xs-12 col-md-3">
                <datepicker
                  readonly
                  menu-class-name="modalfix"
                  v-model="formBody.studyEndDate"
                  :locale="'th'"
                  autoApply
                  :enableTimePicker="false"
                  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
                      readonly
                      outlined
                      class="inputgreen"
                      :model-value="
                        formBody.studyEndDate
                          ? date2Thai(formBody.studyEndDate)
                          : null
                      "
                      :label="`${'วันสิ้นสุดการศึกษาดูงานในประเทศ'}`"
                    >
                      <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" v-if="!$q.screen.gt.xs"></div>
              <div class="col-xs-12 col-md-6">
                <q-input
                  dense
                  readonly
                  outlined
                  label="ประเทศที่ไปศึกษาดูงาน"
                  class="inputgreen"
                  v-model="formBody.studyCountry"
                />
              </div>
              <div class="col-xs-12 col-md-6">
                <q-input
                  dense
                  outlined
                  readonly
                  label="หัวข้อการไปศึกษาดูงานต่างประเทศ"
                  class="inputgreen"
                  v-model="formBody.studyAbroadTopic"
                />
              </div>
              <div class="col-xs-12 col-md-3">
                <datepicker
                  readonly
                  menu-class-name="modalfix"
                  v-model="formBody.studyAbroadStartDate"
                  :locale="'th'"
                  autoApply
                  :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
                      readonly
                      outlined
                      class="inputgreen"
                      :model-value="
                        formBody.studyAbroadStartDate
                          ? date2Thai(formBody.studyAbroadStartDate)
                          : null
                      "
                      :label="`${'วันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`"
                    >
                      <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="ccol-xs-12 ol-md-3">
                <datepicker
                  readonly
                  menu-class-name="modalfix"
                  v-model="formBody.studyAbroadEndDate"
                  :locale="'th'"
                  autoApply
                  :enableTimePicker="false"
                  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
                      readonly
                      outlined
                      class="inputgreen"
                      :model-value="
                        formBody.studyAbroadEndDate
                          ? date2Thai(formBody.studyAbroadEndDate)
                          : null
                      "
                      :label="`${'วันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`"
                    >
                      <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-xs-12 col-md-3">
                <q-input
                  readonly
                  dense
                  outlined
                  label="รวมระยะเวลาในการฝึกอบรม "
                  class="inputgreen"
                  v-model="formBody.totalPeriod"
                />
              </div>
            </div>
          </div>
        </div>
      </q-card>
    </div>
  </div>

  <DialogReturn v-model:modal="dialogReturn" />
</template>
