hrms-user/src/modules/09_scholarship/views/detail.vue

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

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

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

const $q = useQuasar();
const router = useRouter();
const route = useRoute();
const mixin = useCounterMixin();
const {
  showLoader,
  hideLoader,
  messageError,
  date2Thai,
  calculateDurationYmd,
} = mixin;

const isLoad = ref<boolean>(false);
const isGuarantor = ref<boolean>(false);
const isGov = ref<boolean>(false);
const isStatus = ref<string>("");
const fileList = ref<any[]>();

const dialogReturn = ref<boolean>(false);

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 useOfficialTimeOp = ref<DataOptions[]>([
  {
    id: "NOUSETIME",
    name: "ไม่ใช้เวลาราชการ",
  },
  {
    id: "USETIME",
    name: "ใช้เวลาราชการ",
  },
  {
    id: "SOMETIME",
    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: "",
  budgetSourceOther: "",
  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: "STUDY",
    name: "ทุนการศึกษา ณ ต่างประเทศ",
  },
  {
    id: "TRAINING",
    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;
  }
}

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

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

async function fetchDataDetail(id: string) {
  isLoad.value = true;
  await http
    .get(config.API.developmentScholarship + `/${id}`)
    .then((res) => {
      const data: DataSholarship = res.data.result;
      isGov.value = data.citizenId ? true : false;

      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.budgetSourceOther = data.budgetSourceOther;
      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;
      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;
      isGuarantor.value = data.guarantorCitizenId ? true : false;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      isLoad.value = false;
    });
}

onMounted(async () => {
  await Promise.all([fetchDataDetail(id.value), 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" v-if="fileList">
          <div class="row q-col-gutter-x-sm full-width">
            <q-space />

            <div 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">
            <div class="col-xs-12 col-md-6">
              <div class="row q-col-gutter-md">
                <div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
                <div v-if="!isLoad" class="col-8 text-weight-medium">
                  {{ dataPerson.citizenId ? dataPerson.citizenId : "-" }}
                </div>
                <div v-else class="col-8">
                  <q-skeleton type="text" />
                </div>
                <div class="col-4 text-grey">ชื่อ-นามสกุล</div>
                <div v-if="!isLoad" class="col-8 text-weight-medium">
                  {{ dataPerson.firstName ? dataPerson.name : "-" }}
                </div>
                <div v-else class="col-8">
                  <q-skeleton type="text" />
                </div>
                <div class="col-4 text-grey">ตำแหน่งในสายงาน</div>
                <div v-if="!isLoad" class="col-8 text-weight-medium">
                  {{ dataPerson.position ? dataPerson.position : "-" }}
                </div>
                <div v-else class="col-8">
                  <q-skeleton type="text" />
                </div>
                <div class="col-4 text-grey">ตำแหน่งประเภท</div>
                <div v-if="!isLoad" class="col-8 text-weight-medium">
                  {{ dataPerson.type ? dataPerson.type : "-" }}
                </div>
                <div v-else class="col-8">
                  <q-skeleton type="text" />
                </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 v-if="!isLoad" class="col-8 text-weight-medium">
                  {{ dataPerson.level ? dataPerson.level : "-" }}
                </div>
                <div v-else class="col-8">
                  <q-skeleton type="text" />
                </div>
                <div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
                <div v-if="!isLoad" class="col-8 text-weight-medium">
                  {{ dataPerson.positionSide ? dataPerson.positionSide : "-" }}
                </div>
                <div v-else class="col-8">
                  <q-skeleton type="text" />
                </div>
                <div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
                <div v-if="!isLoad" class="col-8 text-weight-medium text-html">
                  {{ dataPerson.org ? dataPerson.org : "-" }}
                </div>
                <div v-else class="col-8">
                  <q-skeleton type="text" />
                </div>
              </div>
            </div>
          </div>
        </q-card>

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

          <div v-if="!isLoad" class="col-12">
            <q-radio
              disable
              v-model="formBody.planType"
              checked-icon="task_alt"
              unchecked-icon="panorama_fish_eye"
              val="INPLAN"
              label="ในแผน ฯ"
              dense
            />
            <q-radio
              disable
              v-model="formBody.planType"
              checked-icon="task_alt"
              unchecked-icon="panorama_fish_eye"
              val="OUTPLAN"
              label="นอกแผน ฯ"
              dense
              class="q-pl-sm"
            />
          </div>
          <div v-else class="col-12">
            <div class="row q-gutter-sm">
              <q-skeleton width="90px" />
              <q-skeleton width="90px" />
            </div>
          </div>

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

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

          <div class="col-12" v-if="formBody.scholarshipType !== 'EXECUTIVE'">
            <div class="row col-12 q-col-gutter-md">
              <div class="col-12 col-md-3">
                <q-input
                  v-if="!isLoad"
                  readonly
                  dense
                  outlined
                  lazy-rules
                  hide-bottom-space
                  label="เลขที่สัญญา"
                  class="inputgreen"
                  v-model="formBody.contractNo"
                  :rules="[
                    (val: string) =>
                      !!val || `${'กรุณากรอกเลขที่สัญญา'}`,
                  ]"
                />
                <q-skeleton v-else type="QInput" height="40px" />
              </div>
              <div class="col-12 col-md-3">
                <datepicker
                  v-if="!isLoad"
                  v-model="formBody.contractDate"
                  :locale="'th'"
                  autoApply
                  :enableTimePicker="false"
                  readonly
                >
                  <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="`${'ลงวันที่'}`"
                      hide-bottom-space
                      :rules="[
                        (val: string) =>
                          !!val || `${'กรุณาเลือกวันที่'}`,
                      ]"
                    >
                      <template v-slot:prepend>
                        <q-icon
                          name="event"
                          class="cursor-pointer"
                          style="color: var(--q-primary)"
                        >
                        </q-icon>
                      </template>
                    </q-input>
                  </template>
                </datepicker>
                <q-skeleton v-else type="QInput" height="40px" />
              </div>

              <div class="col-12">
                <div class="row q-col-gutter-md">
                  <div class="col-12 col-md-3">
                    <q-input
                      v-if="!isLoad"
                      dense
                      readonly
                      outlined
                      hide-bottom-space
                      lazy-rules
                      class="inputgreen"
                      v-model="formBody.reportBackNo"
                      label="เลขที่หนังสือรายงานตัวกลับ"
                    />
                    <q-skeleton v-else type="QInput" height="40px" />
                  </div>
                  <div class="col-12 col-md-3">
                    <datepicker
                      v-if="!isLoad"
                      v-model="formBody.reportBackNoDate"
                      :locale="'th'"
                      autoApply
                      :enableTimePicker="false"
                      readonly
                    >
                      <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.reportBackNoDate
                              ? date2Thai(formBody.reportBackNoDate)
                              : null
                          "
                          :label="`${'ลงวันที่'}`"
                          hide-bottom-space
                        >
                          <template v-slot:prepend>
                            <q-icon
                              name="event"
                              class="cursor-pointer"
                              style="color: var(--q-primary)"
                            >
                            </q-icon>
                          </template>
                        </q-input>
                      </template>
                    </datepicker>
                    <q-skeleton v-else type="QInput" height="40px" />
                  </div>
                  <div class="col-12 col-md-3">
                    <datepicker
                      v-if="!isLoad"
                      v-model="formBody.reportBackDate"
                      :locale="'th'"
                      autoApply
                      :enableTimePicker="false"
                      readonly
                    >
                      <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.reportBackDate
                              ? date2Thai(formBody.reportBackDate)
                              : null
                          "
                          :label="`${'รายงานตัวกลับเมื่่อวันที่'}`"
                          hide-bottom-space
                        >
                          <template v-slot:prepend>
                            <q-icon
                              name="event"
                              class="cursor-pointer"
                              style="color: var(--q-primary)"
                            >
                            </q-icon>
                          </template>
                        </q-input>
                      </template>
                    </datepicker>
                    <q-skeleton v-else type="QInput" height="40px" />
                  </div>
                </div>
              </div>

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

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

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

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

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

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

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

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

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

                  <div class="col-12 col-md-3">
                    <datepicker
                      v-if="!isLoad"
                      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="`${
                            formBody.scholarshipType === 'STUDY'
                              ? 'วันเริ่มต้นการศึกษา'
                              : 'วันเริ่มต้นการอบรม'
                          }`"
                          hide-bottom-space
                          :rules="[
                            (val: string) =>
                              !!val || `กรุณาเลือก${formBody.scholarshipType === 'STUDY' ? 'วันเริ่มต้นการศึกษา':'วันเริ่มต้นการอบรม'}`,
                          ]"
                        >
                          <template v-slot:prepend>
                            <q-icon
                              name="event"
                              class="cursor-pointer"
                              style="color: var(--q-primary)"
                            >
                            </q-icon>
                          </template>
                        </q-input>
                      </template>
                    </datepicker>
                    <q-skeleton v-else type="QInput" height="40px" />
                  </div>
                  <div class="col-12 col-md-3">
                    <datepicker
                      v-if="!isLoad"
                      v-model="formBody.endDate"
                      :locale="'th'"
                      autoApply
                      readonly
                      :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="`${
                            formBody.scholarshipType === 'STUDY'
                              ? 'วันสิ้นสุดการศึกษา'
                              : 'วันสิ้นสุดการอบรม'
                          }`"
                          hide-bottom-space
                          :rules="[
                            (val: string) =>
                              !!val || `กรุณาเลือก${formBody.scholarshipType === 'STUDY' ? 'วันสิ้นสุดการศึกษา':'วันสิ้นสุดการอบรม'}`,
                          ]"
                        >
                          <template v-slot:prepend>
                            <q-icon
                              name="event"
                              class="cursor-pointer"
                              style="color: var(--q-primary)"
                            >
                            </q-icon>
                          </template>
                        </q-input>
                      </template>
                    </datepicker>
                    <q-skeleton v-else type="QInput" height="40px" />
                  </div>
                  <div class="col-12 col-md-6">
                    <q-input
                      v-if="!isLoad"
                      dense
                      outlined
                      lazy-rules
                      readonly
                      hide-bottom-space
                      :label="
                        formBody.scholarshipType === 'STUDY'
                          ? 'สถานที่ไปศึกษา (เมือง/ประเทศ)'
                          : 'สถานที่เข้ารับการฝึกอบรม (เมือง/ประเทศ)'
                      "
                      class="inputgreen"
                      v-model="formBody.studyCountry"
                      :rules="[
                        (val: string) =>
                          !!val || `กรุณากรอก${formBody.scholarshipType === 'STUDY' ? 'สถานที่ไปศึกษา (เมือง/ประเทศ)':'สถานที่เข้ารับการฝึกอบรม (เมือง/ประเทศ)'}`,
                      ]"
                    />
                    <q-skeleton v-else type="QInput" height="40px" />
                  </div>

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

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

          <div class="col-12">
            <q-input
              v-if="!isLoad"
              readonly
              outlined
              dense
              class="inputgreen"
              v-model="formBody.changeDetail"
              label="เปลี่ยนแปลงรายละเอียด"
              rows="3"
              hide-bottom-space
              type="textarea"
            />
            <q-skeleton v-else type="QInput" height="40px" />
          </div>

          <!-- ผู้ค้ำประกัน -->
          <div
            class="col-12"
            v-if="formBody.scholarshipType !== 'EXECUTIVE' && isGuarantor"
          >
            <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"
                v-if="isGuarantor"
              >
                <div class="col">
                  <div class="row q-col-gutter-md">
                    <div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
                    <div v-if="!isLoad" class="col-8 text-weight-medium">
                      {{ dataGuarantor.citizenId }}
                    </div>
                    <div v-else class="col-8">
                      <q-skeleton type="text" />
                    </div>
                    <div class="col-4 text-grey">ชื่อ-นามสกุล</div>
                    <div v-if="!isLoad" class="col-8 text-weight-medium">
                      {{ dataGuarantor.name }}
                    </div>
                    <div v-else class="col-8">
                      <q-skeleton type="text" />
                    </div>
                    <div class="col-4 text-grey">ตำแหน่ง</div>
                    <div v-if="!isLoad" class="col-8 text-weight-medium">
                      {{ dataGuarantor.position }}
                    </div>
                    <div v-else class="col-8">
                      <q-skeleton type="text" />
                    </div>
                    <div class="col-4 text-grey">ตำแหน่งประเภท</div>
                    <div v-if="!isLoad" class="col-8 text-weight-medium">
                      {{ dataGuarantor.type }}
                    </div>
                    <div v-else class="col-8">
                      <q-skeleton type="text" />
                    </div>
                  </div>
                </div>
                <div class="col">
                  <div class="row q-col-gutter-md">
                    <div class="col-4 text-grey">ระดับตำแหน่ง</div>
                    <div v-if="!isLoad" class="col-8 text-weight-medium">
                      {{ dataGuarantor.level }}
                    </div>
                    <div v-else class="col-8">
                      <q-skeleton type="text" />
                    </div>
                    <div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
                    <div v-if="!isLoad" class="col-8 text-weight-medium">
                      {{ dataGuarantor.positionSide }}
                    </div>
                    <div v-else class="col-8">
                      <q-skeleton type="text" />
                    </div>
                    <div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
                    <div
                      v-if="!isLoad"
                      class="col-8 text-weight-medium text-html"
                    >
                      {{ dataGuarantor.org }}
                    </div>
                    <div v-else class="col-8">
                      <q-skeleton type="text" />
                    </div>
                  </div>
                </div>
              </div>
            </q-card>
          </div>
          <!-- ผู้ค้ำประกัน -->
        </div>
      </q-card>
    </div>
  </div>

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