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

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

import DialogHeader from "@/components/DialogHeader.vue";

const $q = useQuasar();
const route = useRoute();
const id = ref<string>(route.params.id as string);
const mixin = useCounterMixin();
const {
  date2Thai,
  dialogMessageNotify,
  showLoader,
  hideLoader,
  messageError,
  dialogConfirm,
  success,
  convertDateToAPI,
} = mixin;
const modal = defineModel<boolean>("modal", { required: true });

const props = defineProps({
  fetchDataDetail: Function,
  checkFileBackReceived: Function,
  scholarshipId: String,
});
const governmentDate = ref<Date | null>(null);
const graduatedDate = ref<Date | null>(null);
const isGraduated = ref<string | null>(null);
const graduatedReason = ref<string>("");

const bookNumber = ref<string>("");
const bookDate = ref<Date | null>(null);
const governmentEndDate = ref<Date | null>(null);

function close() {
  modal.value = false;

  bookNumber.value = "";
  bookDate.value = null;
  governmentDate.value = null;
  governmentEndDate.value = null;

  isGraduated.value = null;
  graduatedDate.value = null;
  graduatedReason.value = "";
}

function onSubmit() {
  if (isGraduated.value == null) {
    dialogMessageNotify($q, "กรุณาเลือกสำเร็จการศึกษาตามที่หลักสูตรกำหนด");
  } else {
    dialogConfirm($q, () => {
      showLoader();
      http
        .put(config.API.devScholarship + `/admin/detail/${id.value}`, {
          bookNumber: bookNumber.value,
          bookDate: bookDate.value,
          governmentDate: convertDateToAPI(governmentDate.value),
          governmentEndDate: convertDateToAPI(governmentEndDate.value),
          isGraduated: isGraduated.value,
          graduatedDate:
            isGraduated.value == "true" ? graduatedDate.value : null,
          graduatedReason:
            isGraduated.value == "false" ? graduatedReason.value : null,
        })
        .then((res) => {
          success($q, "บันทึกสำเร็จ");
          props.fetchDataDetail?.(props.scholarshipId);
          props.checkFileBackReceived?.(props.scholarshipId);
          close();
        })
        .catch((e) => {
          messageError($q, e);
        })
        .finally(() => {
          hideLoader();
        });
    });
  }
}

watch(
  () => modal.value,
  () => {
    if (modal.value == true) {
      showLoader();
      http
        .get(config.API.devScholarship + `/admin/detail/${id.value}`)
        .then((res) => {
          const data = res.data.result;
          bookNumber.value = data.bookNumber;
          bookDate.value = data.bookDate;
          governmentDate.value = data.governmentDate;
          governmentEndDate.value = data.governmentEndDate;
          isGraduated.value = data.isGraduated.toLocaleString();
          graduatedDate.value = data.graduatedDate;
          graduatedReason.value = data.graduatedReason;
        })
        .catch((e) => {
          messageError($q, e);
        })
        .finally(() => {
          hideLoader();
        });
    }
  }
);
</script>
<template>
  <q-dialog v-model="modal" persistent>
    <q-card flat style="min-width: 30vw">
      <q-form greedy @submit.prevent @validation-success="onSubmit">
        <DialogHeader tittle="รายงานตัวกลับเข้ารับราชการ" :close="close" />
        <q-separator />
        <q-card-section>
          <div class="row q-col-gutter-sm">
            <div class="col-xs-12 col-sm-12 col-md-6">
              <q-input
                label="เลขที่หนังสือรายงานตัวกลับเข้าปฏิบัติราชการ"
                v-model="bookNumber"
                outlined
                lazy-rules
                dense
                hide-bottom-space
                :rules="[
                            (val:string) =>
                                !!val || `${'กรุณากรอกเลขที่หนังสือรายงานตัวกลับเข้าปฏิบัติราชการ'}`,
                            ]"
                class="inputgreen"
              />
            </div>
            <div class="col-xs-12 col-sm-12 col-md-6">
              <datepicker
                menu-class-name="modalfix"
                v-model="bookDate"
                :locale="'th'"
                autoApply
                :enableTimePicker="false"
                week-start="0"
              >
                <template #year="{ year }">{{ year + 543 }}</template>
                <template #year-overlay-value="{ value }">{{
                  parseInt(value + 543)
                }}</template>
                <template #trigger>
                  <q-input
                    dense
                    outlined
                    :model-value="bookDate ? date2Thai(bookDate) : null"
                    :label="`${'หนังสือรายงานตัวกลับเข้าปฏิบัติราชการลงวันที่'}`"
                    hide-bottom-space
                    class="inputgreen"
                    :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-xs-12 col-sm-12 col-md-6">
              <datepicker
                menu-class-name="modalfix"
                v-model="governmentDate"
                :locale="'th'"
                autoApply
                :enableTimePicker="false"
                week-start="0"
              >
                <template #year="{ year }">{{ year + 543 }}</template>
                <template #year-overlay-value="{ value }">{{
                  parseInt(value + 543)
                }}</template>
                <template #trigger>
                  <q-input
                    dense
                    outlined
                    :model-value="
                      governmentDate ? date2Thai(governmentDate) : null
                    "
                    :label="`${'วันที่กลับเข้าปฏิบัติราชการ'}`"
                    hide-bottom-space
                    class="inputgreen"
                    :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-xs-12 col-sm-12 col-md-6">
              <datepicker
                menu-class-name="modalfix"
                v-model="governmentEndDate"
                :locale="'th'"
                autoApply
                :enableTimePicker="false"
                week-start="0"
              >
                <template #year="{ year }">{{ year + 543 }}</template>
                <template #year-overlay-value="{ value }">{{
                  parseInt(value + 543)
                }}</template>
                <template #trigger>
                  <q-input
                    dense
                    outlined
                    :model-value="
                      governmentEndDate ? date2Thai(governmentEndDate) : null
                    "
                    :label="`${' วันสิ้นสุดภาระผูกพัน'}`"
                    class="inputgreen"
                  >
                    <template v-slot:prepend>
                      <q-icon
                        name="event"
                        class="cursor-pointer"
                        style="color: var(--q-primary)"
                      >
                      </q-icon>
                    </template>
                    <template v-slot:append>
                      <q-icon
                        v-if="governmentEndDate"
                        name="clear"
                        class="cursor-pointer"
                        @click.stop.prevent="governmentEndDate = null"
                      >
                      </q-icon>
                    </template>
                  </q-input>
                </template>
              </datepicker>
            </div>
            <q-radio
              v-model="isGraduated"
              checked-icon="task_alt"
              unchecked-icon="panorama_fish_eye"
              val="true"
              label="สำเร็จการศึกษาตามที่หลักสูตรกำหนด"
            />

            <q-radio
              v-model="isGraduated"
              checked-icon="task_alt"
              unchecked-icon="panorama_fish_eye"
              val="false"
              label="เสร็จสิ้นการศึกษาตามที่หลักสูตรกำหนดแล้วแต่ยังไม่สำเร็จการศึกษา"
            />
            <div v-if="isGraduated == 'true'" class="col-12">
              <datepicker
                menu-class-name="modalfix"
                v-model="graduatedDate"
                :locale="'th'"
                autoApply
                :enableTimePicker="false"
                week-start="0"
              >
                <template #year="{ year }">{{ year + 543 }}</template>
                <template #year-overlay-value="{ value }">{{
                  parseInt(value + 543)
                }}</template>
                <template #trigger>
                  <q-input
                    dense
                    outlined
                    :model-value="
                      graduatedDate ? date2Thai(graduatedDate) : null
                    "
                    :label="`${'ตั้งแต่ (วันที่)'}`"
                    hide-bottom-space
                    class="inputgreen"
                    :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="isGraduated == 'false'" class="col-12">
              <q-input
                v-model="graduatedReason"
                type="textarea"
                dense
                outlined
                hide-bottom-space
                class="inputgreen"
                :rules="[
                            (val:string) =>
                                !!val || `${'กรุณากรอก เนื่องจาก'}`,
                            ]"
                label="เนื่องจาก"
              />
            </div>
          </div>
        </q-card-section>
        <q-separator />
        <q-card-actions align="right">
          <q-btn label="บันทึก" color="secondary" type="submit"
            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
          >
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>
