<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 isStatus = ref<string>("");
const modalDialogGov = ref<boolean>(false);

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

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

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

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.guarantorOrg = data.guarantorOrg;
      formBody.guarantorRootId = data.guarantorRootId;
      formBody.guarantorRoot = data.guarantorRoot;
      formBody.guarantorOrgRootShortName = data.guarantorOrgRootShortName;
      formBody.guarantorOrgRevisionId = data.guarantorOrgRevisionId;
      formBody.posLevelguarantorId = data.posLevelguarantorId;
      formBody.posTypeguarantorId = data.posTypeguarantorId;
      formBody.scholarshipYear = data.scholarshipYear;
      formBody.budgetSource = data.budgetSource;
      formBody.budgetApprove = data.budgetApprove;
      formBody.bookNo = data.bookNo;
      formBody.bookNoDate = data.bookNoDate;
      formBody.bookApproveDate = data.bookApproveDate;
      formBody.useOfficialTime = data.useOfficialTime
        ? data.useOfficialTime
        : false;
      formBody.changeDetail = data.changeDetail;
      formBody.scholarshipType = data.scholarshipType;
      formBody.fundType = data.fundType;
      formBody.contractNo = data.contractNo;
      formBody.contractDate = data.contractDate;
      formBody.reportBackNo = data.reportBackNo;
      formBody.reportBackNoDate = data.reportBackNoDate;
      formBody.reportBackDate = data.reportBackDate;

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

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

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

function onSubmit() {
  dialogConfirm($q, async () => {
    showLoader();
    formBody.budgetApprove =
      typeof formBody.budgetApprove === "string"
        ? Number(formBody.budgetApprove.replace(/,/g, ""))
        : formBody.budgetApprove;

    if (formBody.scholarshipType === "RESEARCH") {
      formBody.planType = "";
      formBody.fundType = "";
      formBody.budgetSource = "";
      formBody.useOfficialTime = false;
      formBody.reportBackNo = "";
      formBody.reportBackNoDate = null;
      formBody.reportBackDate = null;
      formBody.changeDetail = "";
    }
    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 onClickUpdateStatus(type: string) {
  dialogConfirm($q, () => {
    if (scholarshipId.value) {
      showLoader();
      http
        .get(config.API.devScholarshipStatus(scholarshipId.value, type))
        .then(() => {
          if (scholarshipId.value) {
            fetchDataDetail(scholarshipId.value);
          }
        })
        .catch((err) => {
          messageError($q, err);
        })
        .finally(() => {
          hideLoader();
        });
    }
  });
}

function updateTotalPeriod(
  startDate: any,
  endDate: any,
  toDo: boolean = false
) {
  if (!toDo && startDate && endDate) {
    const start = new Date(startDate);
    const end = new Date(endDate);
    formBody.totalPeriod = calculateDurationYmd(start, end);
  }
}

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

function upDate(data: DataPerson) {
  if (isSelectGov.value) {
    formBody.profileId = data.id;
    formBody.rank = data.rank;
    formBody.prefix = data.prefix;
    formBody.firstName = data.firstName;
    formBody.lastName = data.lastName;
    formBody.citizenId = data.citizenId;
    formBody.position = data.position;
    formBody.posTypeId = data.posTypeId;
    formBody.posLevelId = data.posLevelId;
    formBody.posExecutive = data.positionSide;
    formBody.org = data.org;
    formBody.rootId = data.rootId;
    formBody.root = data.root;
    formBody.orgRootShortName = data.orgRootShortName;
    formBody.orgRevisionId = data.orgRevisionId;

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

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

    isGuarantor.value = true;
  }
}

const fileBackReceived = ref<string>("");
async function checkFileBackReceived(id: string) {
  showLoader();
  await http
    .get(
      config.API.file("ระบบพัฒนาบุคคล", "ฟอร์มรายงานตัวกลับเข้ารับราชการ", id)
    )
    .then(async (res) => {
      fileBackReceived.value = res.data.length > 0 ? res.data[0].fileName : "";
    })
    .catch(() => {})
    .finally(() => {
      hideLoader();
    });
}

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

onMounted(() => {
  if (scholarshipId.value) {
    fetchDataDetail(scholarshipId.value);
    checkFileBackReceived(scholarshipId.value);
  }
});
</script>

<template>
  <div class="row items-center">
    <div class="toptitle text-dark items-center">
      <q-btn
        flat
        round
        dense
        class="q-mr-sm"
        icon="mdi-arrow-left"
        color="primary"
        @click="router.go(-1)"
      />
      {{ `${title}ข้าราชการฯที่ได้รับทุนการศึกษา/ฝึกอบรม` }}
    </div>
    <q-space />
    <q-btn
      v-if="scholarshipId != null && fileBackReceived != ''"
      flat
      round
      dense
      icon="download"
      color="blue"
      @click="downloadFileBackReceived(scholarshipId)"
    >
      <q-tooltip>ดาวน์โหลด</q-tooltip>
    </q-btn>
    <div class="row q-ml-md" v-if="scholarshipId">
      <div class="q-gutter-sm" v-if="isStatus === 'PENDING'">
        <q-btn
          unelevated
          color="green"
          label="เรียนจบ"
          @click="onClickUpdateStatus('GRADUATE')"
        />
        <q-btn
          unelevated
          color="red"
          label="เรียนไม่จบ"
          @click="onClickUpdateStatus('NOTGRADUATE')"
        />
      </div>
      <div :class="isStatus === 'GRADUATE' ? 'text-green' : 'text-red'" v-else>
        {{ isStatus === "GRADUATE" ? "เรียนจบ" : "เรียนไม่จบ" }}
      </div>
    </div>
  </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-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' &&
            formBody.scholarshipType !== 'RESEARCH'
          "
        >
          <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 v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-12">
          <q-radio
            v-model="formBody.planType"
            checked-icon="task_alt"
            unchecked-icon="panorama_fish_eye"
            val="INPLAN"
            label="ในแผนฯ"
            dense
          />
          <q-radio
            v-model="formBody.planType"
            checked-icon="task_alt"
            unchecked-icon="panorama_fish_eye"
            val="OUTPLAN"
            label="นอกแผนฯ"
            dense
            class="q-pl-sm"
          />
        </div>

        <div class="row col-12 q-col-gutter-md">
          <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="`${
                    formBody.scholarshipType === 'RESEARCH'
                      ? 'ปีงบประมาณที่ได้รับอนุมัติ '
                      : 'ปีงบประมาณที่ได้รับทุน'
                  }`"
                  hide-bottom-space
                  :rules="[
                  (val: string) => !!val || `${'กรุณาเลือกปีงบประมาณที่ได้รับทุน'}`,
                ]"
                >
                  <template v-slot:prepend>
                    <q-icon
                      name="event"
                      class="cursor-pointer"
                      style="color: var(--q-primary)"
                    >
                    </q-icon>
                  </template>
                </q-input>
              </template>
            </datepicker>
          </div>
          <div v-if="formBody.scholarshipType !== 'RESEARCH'" 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-3">
            <q-input
              dense
              outlined
              hide-bottom-space
              class="inputgreen"
              v-model="formBody.budgetApprove"
              label="งบประมาณที่ได้รับอนุมัติตลอดหลักสูตร"
              mask="###,###,###,###,###,###"
              reverse-fill-mask
              :rules="[
                (val: any) => {
                  if (!val && !formBody.isNoUseBudget) {
                    return 'กรุณากรอกงบประมาณที่ได้รับอนุมัติตลอดหลักสูตร';
                  }
                  return true;
                },
              ]"
            />
          </div>
          <div class="col-3">
            <q-checkbox
              keep-color
              color="primary"
              v-model="formBody.isNoUseBudget"
              label="ไม่ใช้งบประมาณ"
            />
          </div>
        </div>

        <div class="row col-12 q-col-gutter-md">
          <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 v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-3">
            <q-checkbox
              keep-color
              color="primary"
              v-model="formBody.useOfficialTime"
              label="ใช้เวลาราชการ"
            />
          </div>
        </div>

        <div v-if="formBody.scholarshipType !== 'RESEARCH'" 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-12" v-if="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 v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-3">
              <q-input
                dense
                outlined
                hide-bottom-space
                lazy-rules
                class="inputgreen"
                v-model="formBody.reportBackNo"
                label="เลขที่หนังสือรายงานตัวกลับ"
                :rules="[
                  (val: string) => !!val || `${'กรุณากรอกเลขที่หนังสือรายงานตัวกลับ'}`,
                ]"
              />
            </div>
            <div v-if="formBody.scholarshipType !== 'RESEARCH'" 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 v-if="formBody.scholarshipType !== 'RESEARCH'" 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>

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

                <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-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-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.studyPlace"
                    :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.studyCountry"
                    :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>
