divdiv
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useQuasar } from "quasar";
import { useRouter, useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";

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

import DialogGov from "@/modules/15_development/components/history/DialogGov.vue";

import { useCounterMixin } from "@/stores/mixin";

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

const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม");
const scholarshipId = ref<string | null>(
  route.params.id ? route.params.id.toLocaleString() : null
);
const modalDialogGov = ref<boolean>(false);

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

const isGov = ref<boolean>(false);
const isGuarantor = ref<boolean>(false);
const isSelectGov = ref<boolean>(false);
const dataPerson = reactive({
  id: "",
  citizenId: "",
  name: "",
  position: "",
  type: "",
  level: "",
  positionSide: "",
  org: "-",
});
const dataGuarantor = reactive({
  id: "",
  citizenId: "",
  name: "",
  position: "",
  type: "",
  level: "",
  positionSide: "",
  org: "-",
});

const formBody = reactive<FormsSholarship>({
  rank: "", //ยศ
  prefix: "", //คำนำหน้าชื่อ
  firstName: "", //ชื่อ
  lastName: "", //นามสกุล
  citizenId: "", //เลขประจำตัวประชาชน
  position: "", //ตำแหน่ง
  posExecutive: "", //ชื่อตำแหน่งทางการบริหาร
  posLevelId: null, //ไอดีระดับตำแหน่ง
  posTypeId: null, //ไอดีประเภทตำแหน่ง
  guarantorRank: "", //ยศ(ผู้ค้ำ)
  guarantorPrefix: "", //คำนำหน้าชื่อ(ผู้ค้ำ)
  guarantorFirstName: "", //ชื่อ(ผู้ค้ำ)
  guarantorLastName: "", //นามสกุล(ผู้ค้ำ)
  guarantorCitizenId: "", //เลขประจำตัวประชาชน(ผู้ค้ำ)
  guarantorPosition: "", //ตำแหน่ง(ผู้ค้ำ)
  guarantorPosExecutive: "", //ชื่อตำแหน่งทางการบริหาร(ผู้ค้ำ)
  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: "", //รวมระยะเวลาในการศึกษา/รวมระยะเวลาในการฝึกอบรม
});

function fetchDataDetail(id: string) {
  showLoader();
  http
    .get(config.API.devScholarshipByid(id))
    .then((res) => {
      const data: DataSholarship = res.data.result;
      console.log(data);
      formBody.rank = data.rank;
      formBody.prefix = data.prefix;
      formBody.firstName = data.firstName;
      formBody.lastName = data.lastName;
      formBody.citizenId = data.citizenId;
      formBody.position = data.position;
      formBody.posExecutive = data.posExecutive;
      formBody.posLevelId = data.posLevelId;
      formBody.posTypeId = data.posTypeId;
      formBody.guarantorRank = data.guarantorRank;
      formBody.guarantorPrefix = data.guarantorPrefix;
      formBody.guarantorFirstName = data.guarantorFirstName;
      formBody.guarantorLastName = data.guarantorLastName;
      formBody.guarantorCitizenId = data.guarantorCitizenId;
      formBody.guarantorPosition = data.guarantorPosition;
      formBody.guarantorPosExecutive = data.guarantorPosExecutive;
      formBody.posLevelguarantorId = data.posLevelguarantorId;
      formBody.posTypeguarantorId = data.posTypeguarantorId;
      formBody.scholarshipYear = data.scholarshipYear;
      formBody.budgetSource = data.budgetSource;
      formBody.budgetApprove = data.budgetApprove;
      formBody.bookNo = data.bookNo;
      formBody.bookNoDate = data.bookNoDate;
      formBody.bookApproveDate = data.bookApproveDate;
      formBody.useOfficialTime = data.useOfficialTime;
      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;

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

      dataGuarantor.citizenId = data.guarantorCitizenId
        ? data.guarantorCitizenId
        : "-";
      dataGuarantor.name = `${data.guarantorPrefix} ${data.guarantorFirstName} ${data.guarantorLastName}`;
      dataGuarantor.position = data.position ? data.position : "-";
      dataGuarantor.type = data.posTypeguarantorName
        ? data.posTypeguarantorName
        : "-";
      dataGuarantor.level = data.posLevelguarantorName
        ? data.posLevelguarantorName
        : "-";
      dataGuarantor.positionSide = data.guarantorPosExecutive
        ? data.guarantorPosExecutive
        : "-";

      isGov.value = data.citizenId ? true : false;
      isGuarantor.value = data.guarantorCitizenId ? true : false;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

function onSubmit() {
 
  dialogConfirm($q, async () => {
    showLoader();
    formBody.budgetApprove =
      typeof formBody.budgetApprove === "string"
        ? Number(formBody.budgetApprove.replace(/,/g, ""))
        : formBody.budgetApprove;
    try {
      const url = scholarshipId.value
        ? config.API.devScholarshipByid(scholarshipId.value)
        : config.API.devScholarship;
      const method = scholarshipId.value ? "put" : "post";
      await http[method](url, formBody);
      success($q, "บันทึกข้อมูลสำเร็จ");

      scholarshipId.value
        ? fetchDataDetail(scholarshipId.value)
        : router.push("/development/scholarship");
    } catch (e) {
      messageError($q, e);
    } finally {
      hideLoader();
    }
  });
}

function changeStartDate(type: string) {
  switch (type) {
    case "startDate":
      if (formBody?.startDate !== null && formBody?.endDate !== null) {
        const startDate = new Date(formBody.startDate);
        const endDate = new Date(formBody?.endDate);
        if (startDate > endDate) {
          formBody.endDate = null;
        }
      }
      break;

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

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

    default:
      break;
  }
}

function updateTotalPeriod(
  startDate: any,
  endDate: any,
  toDo: boolean = false
) {
  console.log(startDate);
  console.log(endDate);

  if (!toDo && startDate && endDate) {
    const start = new Date(startDate);
    const end = new Date(endDate);
    formBody.totalPeriod = calculateDurationYmd(start, end);
  }
}

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

function upDate(data: DataPerson) {
  if (isSelectGov.value) {
    formBody.prefix = data.prefix;
    formBody.firstName = data.firstName;
    formBody.lastName = data.lastName;
    formBody.citizenId = data.citizenId;
    formBody.position = data.position;
    formBody.posTypeId = data.posTypeId;
    formBody.posLevelId = data.posLevelId;
    formBody.posExecutive = data.positionSide;

    dataPerson.id = data.id ? data.id : "-";
    dataPerson.citizenId = data.citizenId ? data.citizenId : "-";
    dataPerson.name = data.name ? data.name : "-";
    dataPerson.position = data.position ? data.position : "-";
    dataPerson.type = data.type ? data.type : "-";
    dataPerson.level = data.level ? data.level : "-";
    dataPerson.positionSide = data.positionSide ? data.positionSide : "-";
    isGov.value = true;
  } else {
    formBody.guarantorPrefix = data.prefix;
    formBody.guarantorFirstName = data.firstName;
    formBody.guarantorLastName = data.lastName;
    formBody.guarantorCitizenId = data.citizenId;
    formBody.guarantorPosition = data.position;
    formBody.posTypeguarantorId = data.posTypeId;
    formBody.posLevelguarantorId = data.posLevelId;
    formBody.guarantorPosExecutive = data.positionSide;

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

    isGuarantor.value = true;
  }
}

onMounted(() => {
  scholarshipId.value && fetchDataDetail(scholarshipId.value);
});
</script>
<template>
  <div class="toptitle text-dark col-12 row items-center">
    <q-btn
      flat
      round
      dense
      class="q-mr-sm"
      icon="mdi-arrow-left"
      color="primary"
      @click="router.go(-1)"
    />
    {{ `${title}ข้าราชการฯที่ได้รับทุนการศึกษา/ฝึกอบรม` }}
  </div>
  <q-form greedy @submit.prevent @validation-success="onSubmit">
    <q-card flat bordered class="col-12">
      <div class="q-pa-md">
        <q-card bordered tyle="border: 1px solid #d6dee1">
          <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
            ข้อมูลราชการ
            <q-btn
              flat
              dense
              icon="add"
              color="primary"
              label="เลือกข้าราชการ"
              @click="onSelectGov(true)"
            >
              <q-tooltip>เพิ่ม</q-tooltip>
            </q-btn>
          </div>
          <div class="col-12"><q-separator /></div>
          <div class="row col-12 q-col-gutter-md q-pa-md" v-if="isGov">
            <div class="col">
              <div class="row q-col-gutter-md">
                <div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
                <div class="col-8 text-weight-medium">
                  {{ dataPerson.citizenId }}
                </div>
                <div class="col-4 text-grey">ชื่อ-นามสกุล</div>
                <div class="col-8 text-weight-medium">
                  {{ dataPerson.name }}
                </div>
                <div class="col-4 text-grey">ตำแหน่ง</div>
                <div class="col-8 text-weight-medium">
                  {{ dataPerson.position }}
                </div>
                <div class="col-4 text-grey">ประเภท</div>
                <div class="col-8 text-weight-medium">
                  {{ dataPerson.type }}
                </div>
              </div>
            </div>
            <div class="col">
              <div class="row q-col-gutter-md">
                <div class="col-4 text-grey">ระดับตำแหน่ง</div>
                <div class="col-8 text-weight-medium">
                  {{ dataPerson.level }}
                </div>
                <div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
                <div class="col-8 text-weight-medium">
                  {{ dataPerson.positionSide }}
                </div>
                <div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
                <div class="col-8 text-weight-medium">{{ dataPerson.org }}</div>
              </div>
            </div>
          </div>
          <div class="row col-12 q-pa-md" v-else>
            <q-banner class="bg-grey-3 text-black col-12 text-center">
              เลือกข้าราชการ
            </q-banner>
          </div>
        </q-card>
      </div>
      <div class="row q-col-gutter-md q-pa-md" v-if="isGov">
        <div class="col-3">
          <datepicker
            menu-class-name="modalfix"
            v-model="formBody.scholarshipYear"
            :locale="'th'"
            autoApply
            year-picker
            :enableTimePicker="false"
          >
            <template #year="{ year }">{{ year + 543 }}</template>
            <template #year-overlay-value="{ value }">{{
              parseInt(value + 543)
            }}</template>
            <template #trigger>
              <q-input
                dense
                outlined
                class="inputgreen"
                :model-value="
                  formBody.scholarshipYear
                    ? Number(formBody.scholarshipYear) + 543
                    : null
                "
                :label="`${'ปีงบประมาณที่ได้รับทุน'}`"
                hide-bottom-space
                :rules="[
                  (val) => !!val || `${'กรุณาเลือกปีงบประมาณที่ได้รับทุน'}`,
                ]"
              >
                <template v-slot:prepend>
                  <q-icon
                    name="event"
                    class="cursor-pointer"
                    style="color: var(--q-primary)"
                  >
                  </q-icon>
                </template>
              </q-input>
            </template>
          </datepicker>
        </div>
        <div class="col-3">
          <q-select
            dense
            outlined
            class="inputgreen"
            label="แหล่งงบประมาณ"
            hide-bottom-space
            v-model="formBody.budgetSource"
            :options="budgetSourceOp"
            option-label="name"
            option-value="id"
            emit-value
            map-options
            :rules="[
            (val:string) =>
              !!val || `${'กรุณาเลือกแหล่งงบประมาณ'}`,
          ]"
          />
        </div>
        <div class="col-6">
          <q-input
            dense
            outlined
            hide-bottom-space
            class="inputgreen"
            v-model="formBody.budgetApprove"
            label="งบประมาณที่ได้รับอนุมัติตลอดหลักสูตร"
            mask="###,###,###,###,###,###"
            reverse-fill-mask
            :rules="[
                (val:string) =>
                  !!val || `${'กรุณากรอกงบประมาณที่ได้รับอนุมัติตลอดหลักสูตร'}`,
              ]"
          />
        </div>
        <div class="col-3">
          <q-input
            dense
            outlined
            class="inputgreen"
            v-model="formBody.bookNo"
            label="เลขที่หนังสิออนุมัติ"
            hide-bottom-space
            :rules="[
                (val:string) =>
                  !!val || `${'กรุณากรอกเลขที่หนังสิออนุมัติ'}`,
              ]"
          />
        </div>
        <div class="col-3">
          <datepicker
            menu-class-name="modalfix"
            v-model="formBody.bookNoDate"
            :locale="'th'"
            autoApply
            :enableTimePicker="false"
          >
            <template #year="{ year }">{{ year + 543 }}</template>
            <template #year-overlay-value="{ value }">{{
              parseInt(value + 543)
            }}</template>
            <template #trigger>
              <q-input
                dense
                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>
        </div>
        <div class="col-3">
          <datepicker
            menu-class-name="modalfix"
            v-model="formBody.bookApproveDate"
            :locale="'th'"
            autoApply
            :enableTimePicker="false"
          >
            <template #year="{ year }">{{ year + 543 }}</template>
            <template #year-overlay-value="{ value }">{{
              parseInt(value + 543)
            }}</template>
            <template #trigger>
              <q-input
                dense
                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>
        </div>
        <div class="col-3">
          <q-checkbox
            keep-color
            color="primary"
            v-model="formBody.useOfficialTime"
            label="ใช้เวลาราชการ"
          />
        </div>
        <div class="col-12">
          <q-input
            outlined
            dense
            class="inputgreen"
            v-model="formBody.changeDetail"
            label="เปลี่ยนแปลงรายละเอียด"
            rows="3"
            hide-bottom-space
            type="textarea"
            :rules="[
            (val:string) =>
              !!val || `${'กรุณากรอกเปลี่ยนแปลงรายละเอียด'}`,
          ]"
          />
        </div>
        <div class="col-9">
          <q-select
            dense
            outlined
            hide-bottom-space
            lazy-rules
            v-model="formBody.scholarshipType"
            :options="scholarshipTypeOp"
            option-label="name"
            option-value="id"
            emit-value
            map-options
            class="inputgreen"
            label="เลือกประเภททุน"
            :rules="[
          (val:string) =>
            !!val || `${'กรุณาเลือกประเภททุน'}`,
        ]"
          />
        </div>
        <div
          class="col-3"
          v-if="
            formBody.scholarshipType !== '' &&
            formBody.scholarshipType !== 'EXECUTIVE'
          "
        >
          <q-select
            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 || `${'กรุณาเลือกประเภททุน'}`,
        ]"
          />
        </div>
        <div
          class="col-12"
          v-if="
            formBody.scholarshipType !== '' &&
            formBody.scholarshipType !== 'EXECUTIVE'
          "
        >
          <div class="row col-12 q-col-gutter-md">
            <div class="col-3">
              <q-input
                dense
                outlined
                lazy-rules
                hide-bottom-space
                label="เลขที่สัญญา"
                class="inputgreen"
                v-model="formBody.contractNo"
                :rules="[
        (val:string) =>
          !!val || `${'กรุณากรอกเลขที่สัญญา'}`,
      ]"
              />
            </div>
            <div class="col-2">
              <datepicker
                menu-class-name="modalfix"
                v-model="formBody.contractDate"
                :locale="'th'"
                autoApply
              >
                <template #year="{ year }">{{ year + 543 }}</template>
                <template #year-overlay-value="{ value }">{{
                  parseInt(value + 543)
                }}</template>
                <template #trigger>
                  <q-input
                    dense
                    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>
            </div>
            <div class="col-3">
              <q-input
                dense
                outlined
                hide-bottom-space
                lazy-rules
                class="inputgreen"
                v-model="formBody.reportBackNo"
                label="เลขที่หนังสือรายงานตัวกลับ"
                :rules="[
                  (val) => !!val || `${'กรุณากรอกเลขที่หนังสือรายงานตัวกลับ'}`,
                ]"
              />
            </div>
            <div class="col-2">
              <datepicker
                menu-class-name="modalfix"
                v-model="formBody.reportBackNoDate"
                :locale="'th'"
                autoApply
                :enableTimePicker="false"
              >
                <template #year="{ year }">{{ year + 543 }}</template>
                <template #year-overlay-value="{ value }">{{
                  parseInt(value + 543)
                }}</template>
                <template #trigger>
                  <q-input
                    dense
                    outlined
                    class="inputgreen"
                    :model-value="
                      formBody.reportBackNoDate
                        ? date2Thai(formBody.reportBackNoDate)
                        : null
                    "
                    :label="`${'ลงวันที่'}`"
                    hide-bottom-space
                    :rules="[
      (val:string) =>
        !!val || `${'กรุณาเลือกวันที่'}`,
    ]"
                  >
                    <template v-slot:prepend>
                      <q-icon
                        name="event"
                        class="cursor-pointer"
                        style="color: var(--q-primary)"
                      >
                      </q-icon>
                    </template>
                  </q-input>
                </template>
              </datepicker>
            </div>
            <div class="col-2">
              <datepicker
                menu-class-name="modalfix"
                v-model="formBody.reportBackDate"
                :locale="'th'"
                autoApply
                :enableTimePicker="false"
              >
                <template #year="{ year }">{{ year + 543 }}</template>
                <template #year-overlay-value="{ value }">{{
                  parseInt(value + 543)
                }}</template>
                <template #trigger>
                  <q-input
                    dense
                    outlined
                    class="inputgreen"
                    :model-value="
                      formBody.reportBackDate
                        ? date2Thai(formBody.reportBackDate)
                        : null
                    "
                    :label="`${'รายงานตัวกลับเมื่่อวันที่'}`"
                    hide-bottom-space
                    :rules="[
      (val:string) =>
        !!val || `${'กรุณาเลือกวันที่'}`,
    ]"
                  >
                    <template v-slot:prepend>
                      <q-icon
                        name="event"
                        class="cursor-pointer"
                        style="color: var(--q-primary)"
                      >
                      </q-icon>
                    </template>
                  </q-input>
                </template>
              </datepicker>
            </div>
            <div class="col-12">
              <q-card bordered tyle="border: 1px solid #d6dee1">
                <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
                  ข้อมูลผู้ค้ำประกัน
                  <q-btn
                    flat
                    dense
                    icon="add"
                    color="primary"
                    label="เลือกผู้ค้ำประกัน"
                    @click="onSelectGov(false)"
                  >
                    <q-tooltip>เพิ่ม</q-tooltip>
                  </q-btn>
                </div>
                <div class="col-12"><q-separator /></div>
                <div
                  class="row col-12 q-col-gutter-md q-pa-md"
                  v-if="isGuarantor"
                >
                  <div class="col">
                    <div class="row q-col-gutter-md">
                      <div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
                      <div class="col-8 text-weight-medium">
                        {{ dataGuarantor.citizenId }}
                      </div>
                      <div class="col-4 text-grey">ชื่อ-นามสกุล</div>
                      <div class="col-8 text-weight-medium">
                        {{ dataGuarantor.name }}
                      </div>
                      <div class="col-4 text-grey">ตำแหน่ง</div>
                      <div class="col-8 text-weight-medium">
                        {{ dataGuarantor.position }}
                      </div>
                      <div class="col-4 text-grey">ประเภท</div>
                      <div class="col-8 text-weight-medium">
                        {{ dataGuarantor.type }}
                      </div>
                    </div>
                  </div>
                  <div class="col">
                    <div class="row q-col-gutter-md">
                      <div class="col-4 text-grey">ระดับตำแหน่ง</div>
                      <div class="col-8 text-weight-medium">
                        {{ dataGuarantor.level }}
                      </div>
                      <div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
                      <div class="col-8 text-weight-medium">
                        {{ dataGuarantor.positionSide }}
                      </div>
                      <div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
                      <div class="col-8 text-weight-medium">
                        {{ dataGuarantor.org }}
                      </div>
                    </div>
                  </div>
                </div>
              </q-card>
            </div>

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

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

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

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

      <q-separator />
      <div class="text-right q-pa-sm" v-if="isGov">
        <q-btn
          dense
          unelevated
          label="บันทึก"
          id="onSubmit"
          type="submit"
          color="public"
          class="q-px-md"
        >
          <q-tooltip>บันทึกข้อมูล</q-tooltip>
        </q-btn>
      </div>
    </q-card>
  </q-form>

  <DialogGov v-model:modal="modalDialogGov" :up-date="upDate" />
</template>

<style scoped></style>