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

import type {
  DataOption,
  DataPerson,
} from "@/modules/15_development/interface/index/Main";

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, date2Thai } = useCounterMixin();

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

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

const isGov = ref<boolean>(false);
const isGuarantor = ref<boolean>(false);
const isSelectGov = ref<boolean>(false);
const dataPerson = reactive({
  id: "",
  citizenId: "",
  name: "",
  position: "",
  type: "",
  level: "",
  positionSide: "",
  org: "-",
});
const dataGuarantor = reactive({
  id: "",
  citizenId: "",
  name: "",
  position: "",
  type: "",
  level: "",
  positionSide: "",
  org: "-",
});
const formData = reactive({
  personId: "",
  year: null,
  budgetSource: "",
  approveBudget: "",
  approveNumber: "",
  date: null,
  approveDate: null,
  isTime: false,
  detail: "",
  scholarshipType: "",
  scholarshipTypeShort: "",
  contractNumber: "",
  contractDate: null,
  reportNumber: "",
  reportDate: null,
  reportLetterDate: null,
  guarantorId: "",
  trainingCourse: "",
  institution: "",
  trainingDateStart: null,
  trainingDateEnd: null,
  studyTopic: "",
  studyPlace: "",
});

function onSubmit() {
  dialogConfirm($q, () => {
    console.log(formData);
  });
}

function changeTrainingDateStart() {
  if (
    formData?.trainingDateStart !== null &&
    formData?.trainingDateEnd !== null
  ) {
    const startDate = new Date(formData.trainingDateStart);
    const endDate = new Date(formData?.trainingDateEnd);
    if (startDate > endDate) {
      formData.trainingDateEnd = null;
    }
  }
}

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

function upDate(data: DataPerson) {
  if (isSelectGov.value) {
    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.
    isGov.value = true;
  } else {
    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.
    isGuarantor.value = true;
  }
}

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

        <div class="col-12" v-else-if="formData.scholarshipType === '4'">
          <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="formData.trainingCourse"
                :rules="[
        (val:string) =>
          !!val || `${'กรุณากรอกหลักสูตรการฝึกอบรม'}`,
      ]"
              />
            </div>
            <div class="col-6">
              <q-input
                dense
                outlined
                lazy-rules
                hide-bottom-space
                class="inputgreen"
                label="สถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม"
                v-model="formData.institution"
                :rules="[
        (val:string) =>
          !!val || `${'กรุณากรอกสถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม'}`,
                ]"
              />
            </div>

            <div class="col-3">
              <datepicker
                menu-class-name="modalfix"
                v-model="formData.trainingDateStart"
                :locale="'th'"
                autoApply
                :enableTimePicker="false"
                week-start="0"
                @update:model-value="changeTrainingDateStart()"
              >
                <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="
                      formData.trainingDateStart
                        ? date2Thai(formData.trainingDateStart)
                        : 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="formData.trainingDateEnd"
                :locale="'th'"
                autoApply
                :enableTimePicker="false"
                week-start="0"
                :min-date="formData.trainingDateStart"
              >
                <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="
                      formData.trainingDateEnd
                        ? date2Thai(formData.trainingDateEnd)
                        : 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
                class="inputgreen"
                label="สถานที่ไปศึกษาดูงาน"
                v-model="formData.studyPlace"
                :rules="[
        (val:string) =>
          !!val || `${'กรุณากรอกสถานที่ไปศึกษาดูงาน'}`,
      ]"
              />
            </div>
            <div class="col-6">
              <q-input
                dense
                outlined
                lazy-rules
                hide-bottom-space
                label="หัวข้อไปศึกษาดูงาน"
                class="inputgreen"
                v-model="formData.studyTopic"
                :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>
