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

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useLeaveStore } from "@/modules/05_leave/store";

import type { FormData } from "@/modules/05_leave/interface/index/main";

import FormPart2 from "@/modules/05_leave/components/FormLeave/Form.vue";
import SickForm from "@/modules/05_leave/components/FormLeave/01_SickForm.vue";
import FormBirth from "@/modules/05_leave/components/FormLeave/03_Birth.vue";
import HelpWifeBirthForm from "@/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue";
import VacationForm from "@/modules/05_leave/components/FormLeave/05_VacationForm.vue";
import OrdinationForm from "@/modules/05_leave/components/FormLeave/06_OrdinationForm.vue";
import HajjForm from "@/modules/05_leave/components/FormLeave/07_HajjForm.vue";
import MilitaryForm from "@/modules/05_leave/components/FormLeave/08_MilitaryForm.vue";
import StudyForm from "@/modules/05_leave/components/FormLeave/09_StudyForm.vue";
import TrainForm from "@/modules/05_leave/components/FormLeave/10_TrainForm.vue";
import WorkInternationalForm from "@/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue";
import FollowSpouseForm from "@/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue";
import RehabilitationForm from "@/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue";

const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const personalId = ref<string>(route.params.id as string);
const dataStore = useLeaveStore();
const mixin = useCounterMixin();
const {
  messageError,
  showLoader,
  hideLoader,
  dialogConfirm,
  success,
  date2Thai,
  dialogRemove,
  dialogMessageNotify,
} = mixin;

const titleName = ref<string>("");
const formData = reactive<FormData>({
  id: "", //Id การยื่นขอลา
  leaveTypeName: "", // Name ประเภทการลา
  leaveTypeId: "", //Id ประเภทการลา
  fullname: "", //คำนำหน้า ชื่อ นามสกุล คนขอลา
  dateSendLeave: null, // วันที่ยืนใบลา
  status: "", //สถานะการของลา
  leaveStartDate: null, //วันเริ่มการลา
  leaveEndDate: null, //วันสิ้นสุดการลา
  leaveCount: 0, //จำนวนวันลา
  leaveWrote: "", //เขียนที่
  leaveAddress: "", //สถานที่ติดต่อขณะลา
  leaveNumber: "", //หมายเลขที่ติดต่อขณะลา
  leaveDetail: "", //รายละเอียดการลา
  leaveDocument: [], //อัปโหลดเอกสารประกอบรายละเอียด
  leaveDraftDocument: "", //อัปโหลดแบบฟอร์มการลา
  leaveLastStart: null, //ลาครั้งสุดท้ายในประเภทนั้น ๆ เริ่มเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
  leaveLastEnd: null, //ลาครั้งสุดท้ายในประเภทนั้น ๆ สิ้นสุดเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
  leaveTotal: 0, //จำนวนวันที่ลา(Auto)
  leavebirthDate: null, //วันเดือนปีเกิด(Auto)
  leavegovernmentDate: null, //วันที่เข้ารับราชการ(Auto)
  leaveSalary: 0, //เงินเดือนปัจจุบัน(Auto)
  leaveSalaryText: "", //เงินเดือนปัจจุบัน(เขียนเป็นคำอ่าน)
  leaveTypeDay: "", //ประเภทการลาในวันนั้นเช่น
  wifeDayName: "", //ชื่อภรรยา(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
  wifeDayDateBorn: null, //วันที่คลอด(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
  restDayOldTotal: 0, //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา(ลาพักผ่อน)(Auto)
  restDayCurrentTotal: 0, //จำนวนวันลาพักผ่อนประจำปีปัจจุบัน(ลาพักผ่อน)(Auto)
  ordainDayStatus: "", //เคย/ไม่เคยบวช (ให้เลือก) (ลาอุปสมบท)
  ordainDayLocationName: "", //สถานที่บวช ชื่อวัด(ลาอุปสมบท)
  ordainDayLocationAddress: "", //สถานที่บวช ที่อยู่(ลาอุปสมบท)
  ordainDayLocationNumber: "", //สถานที่บวช หมายเลขโทรศัพท์(ลาอุปสมบท)
  ordainDayOrdination: null, //สถานที่บวช วันอุปสมบท(ลาอุปสมบท)
  ordainDayBuddhistLentName: "", //สถานที่จำพรรษา ชื่อวัด(ลาอุปสมบท)
  ordainDayBuddhistLentAddress: "", //สถานที่จำพรรษา ที่อยู่(ลาอุปสมบท)
  hajjDayStatus: "", //เคย/ไม่เคยไปประกอบพิธีฮัจญ์ (ให้เลือก) (ลาประกอบพิธีฮัจญ์)
  absentDaySummon: "", //ได้รับหมายเรียกของ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
  absentDayLocation: "", //ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
  absentDayRegistorDate: null, //ลงวันที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
  absentDayGetIn: "", //ให้เข้ารับการ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
  absentDayAt: "", //ณ ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
  studyDaySubject: "", //กรณีลาไปศึกษาต่อ ศึกษาวิชา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
  studyDayDegreeLevel: "", //กรณีลาไปศึกษาต่อ ขั้นปริญญา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
  studyDayUniversityName: "", //กรณีลาไปศึกษาต่อ ชื่อสถานศึกษา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
  studyDayTrainingSubject: "", //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ด้าน/หลักสูตร (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
  studyDayTrainingName: "", //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ณ สถานที่	(ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
  studyDayCountry: "", //ประเทศ (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
  studyDayScholarship: "", //ด้วยทุน (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
  coupleDayName: "", //ชื่อคู่สมรส (ลาติดตามคู่สมรส)
  coupleDayPosition: "", //ตำแหน่งคู่สมรส (ลาติดตามคู่สมรส)
  coupleDayLevel: "", //ระดับคู่สมรส (ลาติดตามคู่สมรส)
  coupleDayLevelCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ (ลาติดตามคู่สมรส)
  coupleDayCountryHistory: "", //ประวัติ ประเทศ (ลาติดตามคู่สมรส)
  coupleDayTotalHistory: "", //ประวัติ เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
  coupleDayStartDateHistory: null, //ประวัติ ตั้งแต่วันที่ (ลาติดตามคู่สมรส)
  coupleDayEndDateHistory: null, //ประวัติ ถึงวันที่ (ลาติดตามคู่สมรส)
  coupleDaySumTotalHistory: "", //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
  approveStep: "",
  leaveRangeEnd: "",
  dear: "",
  leaveLast: "",
  leaveRange: "",
  leaveSubTypeName: "",
});

const model = computed(() => {
  return (
    dataStore.options.find((x) => x.id == formData.leaveTypeId)?.code ?? ""
  );
});
const modelSpecific = ref<string>("");

/**
 * function เรียกข้อมูลการลา
 * @param id การลา
 */
async function fetchDataDetail(id: string) {
  showLoader();
  await http
    .get(config.API.leaveUserId(id), {})
    .then(async (res) => {
      const data = await res.data.result;
      dataStore.typeId = data.leaveTypeId;
      titleName.value = data.fullName ?? "-";
      formData.id = data.id ?? "-";
      formData.leaveTypeName = data.leaveTypeName ?? "-";
      formData.leaveTypeId = data.leaveTypeId ?? "-";
      formData.fullname = data.fullName ?? "-";
      formData.dateSendLeave =
        data.dateSendLeave && date2Thai(data.dateSendLeave);
      formData.status = data.status ?? "-";
      formData.leaveStartDate = data.leaveStartDate;
      formData.leaveEndDate = data.leaveEndDate;
      formData.leaveCount = data.leaveTotal ?? "-";
      formData.leaveWrote = data.leaveWrote ?? "-";
      formData.leaveAddress = data.leaveAddress ?? "-";
      formData.leaveNumber = data.leaveNumber ?? "-";
      formData.leaveDetail = data.leaveDetail ?? "-";
      formData.leaveDocument = data.leaveDocument;
      formData.leaveDraftDocument = data.leaveDraftDocument;
      formData.leaveLastStart =
        data.leaveLastStart && date2Thai(data.leaveLastStart);
      formData.leaveLastEnd =
        data.leaveLastStart && date2Thai(data.leaveLastEnd);
      formData.leaveTotal = data.leaveTotal;
      formData.leavebirthDate =
        data.leaveBirthDate && date2Thai(data.leaveBirthDate);
      formData.leavegovernmentDate =
        data.leaveGovernmentDate && date2Thai(data.leaveGovernmentDate);
      formData.leaveSalary = data.leaveSalary ?? "-";
      formData.leaveSalaryText = data.leaveSalaryText ?? "-";
      formData.wifeDayName = data.wifeDayName ?? "-";
      formData.wifeDayDateBorn = data.wifeDayDateBorn
        ? data.wifeDayDateBorn
        : null;
      formData.restDayOldTotal = data.restDayOldTotal ?? "-";
      formData.restDayCurrentTotal = data.restDayCurrentTotal ?? "-";
      formData.ordainDayStatus = data.ordainDayStatus;
      formData.ordainDayLocationName = data.ordainDayLocationName ?? "-";
      formData.ordainDayLocationAddress = data.ordainDayLocationAddress ?? "-";
      formData.ordainDayLocationNumber = data.ordainDayLocationNumber ?? "-";
      formData.ordainDayOrdination = data.ordainDayOrdination;
      formData.ordainDayBuddhistLentName =
        data.ordainDayBuddhistLentName ?? "-";
      formData.ordainDayBuddhistLentAddress =
        data.ordainDayBuddhistLentAddress ?? "-";
      formData.hajjDayStatus = data.hajjDayStatus;
      formData.absentDaySummon = data.absentDaySummon ?? "-";
      formData.absentDayLocation = data.absentDayLocation ?? "-";
      formData.absentDayRegistorDate = data.absentDayRegistorDate;
      formData.absentDayGetIn = data.absentDayGetIn ?? "-";
      formData.absentDayAt = data.absentDayAt ?? "-";
      formData.studyDaySubject = data.studyDaySubject ?? "-";
      formData.studyDayDegreeLevel = data.studyDayDegreeLevel ?? "-";
      formData.studyDayUniversityName = data.studyDayUniversityName ?? "-";
      formData.studyDayTrainingSubject =
        data.studyDayTrainingSubject ?? "-" ?? "-";
      formData.studyDayTrainingName = data.studyDayTrainingName ?? "-";
      formData.studyDayCountry = data.studyDayCountry ?? "-";
      formData.studyDayScholarship = data.studyDayScholarship ?? "-";
      formData.coupleDayName = data.coupleDayName ?? "-";
      formData.coupleDayPosition = data.coupleDayPosition ?? "-";
      formData.coupleDayLevel = data.coupleDayLevel ?? "-";
      formData.coupleDayLevelCountry = data.coupleDayLevelCountry ?? "-";
      formData.coupleDayCountryHistory = data.coupleDayCountryHistory ?? "-";
      formData.coupleDayTotalHistory = data.coupleDayTotalHistory ?? "-";
      formData.coupleDayStartDateHistory = data.coupleDayStartDateHistory;
      formData.coupleDayEndDateHistory = data.coupleDayEndDateHistory;
      formData.coupleDaySumTotalHistory = data.coupleDaySumTotalHistory ?? "-";
      formData.approveStep = data.approveStep ?? "-";
      formData.dear = data.dear ?? "-";
      formData.leaveLast = data.leaveLast ?? "-";
      formData.leaveRange = data.leaveRange;
      formData.leaveRangeEnd =
        data.leaveRangeEnd == "AFTERNOON" ? "ALL" : data.leaveRangeEnd;
      formData.ordainDayLocationNumber = data.ordainDayLocationNumber;
      formData.ordainDayStatus = data.ordainDayStatus;
      modelSpecific.value = data.leaveSubTypeName;

      dataStore.telephoneNumber =
        data.leaveNumber && data.leaveNumber !== "-" ? data.leaveNumber : null;
      dataStore.currentAddress = data.leaveAddress ? data.leaveAddress : "";

      await dataStore.fetchProfileOld(data);
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * function บันทึกข้อมูล
 * @param formData  ข้อมูลใน formdata
 * @param isLeave  ตัวแปรเช็คว่าใช้หน้า edit หรือไม่
 */
function onSubmit(formData: any, isLeave: boolean = true) {
  if (isLeave) {
    if (dataStore.commanderPosition !== "" && dataStore.dear !== "") {
      dialogConfirm($q, async () => {
        showLoader();
        if (model.value === "LV-006" || model.value === "LV-008") {
          formData.append("leaveSubTypeName", modelSpecific.value);
        }
        if (formData.get("leaveEndDate") === formData.get("leaveStartDate")) {
          formData.set("leaveRangeEnd", formData.get("leaveRange") as string);
        }
        formData.append("commanderPosition", dataStore.commanderPosition);
        formData.append("dear", dataStore.dear);
        await http
          .put(config.API.leaveUserId(personalId.value), formData)
          .then(async () => {
            await fetchDataDetail(personalId.value);
            success($q, "บันทึกสำเร็จ");
          })
          .catch((e: any) => {
            messageError($q, e);
          })
          .finally(() => {
            hideLoader();
          });
      });
    } else {
      dialogMessageNotify($q, "กรุณาเพิ่มรายชื่อ ผู้บังคับบัญชา");
    }
  } else {
    messageError($q, "", "ไม่มีสิทธิ์ลา");
  }
}

/**
 * funciotn ยื่นใบลา
 */
function onConfirm() {
  dialogConfirm(
    $q,
    async () => {
      showLoader();
      await http
        .put(config.API.leaveUserSendId(personalId.value), { reason: "" })
        .then(() => {
          router.push("/leave");
          success($q, "ยื่นใบลาสำเร็จ");
        })
        .catch((e: any) => {
          messageError($q, e);
        })
        .finally(() => {
          hideLoader();
        });
    },
    "ยืนยันการยื่นใบลา",
    "หากยืนยันแล้วจะไม่สามารถกลับมาแก้ไขได้ ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่"
  );
}

//เเจ้งเตือนลบข้อมูล
function clickDelete(id: string, docId: string) {
  dialogRemove($q, () => onClickDelete(id, docId));
}

/**
 * function ลบรายการ
 * @param id
 */
async function onClickDelete(id: string, docId: string) {
  await http
    .delete(config.API.leaveDocumentId(id, docId))
    .then(async () => {
      await fetchDataDetail(personalId.value);
      success($q, "ลบไฟล์สำเร็จ");
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/** function เรียกประเภทการลา */
async function fectOptionType() {
  await http
    .get(config.API.leaveType())
    .then(async (res) => {
      dataStore.fetchLeaveType(res.data.result);
    })
    .catch((err) => {
      messageError($q, err);
    });
}

/**เมื่อเริ่มโหลดหน้า
 * เรียกใช้งาน fetchData เพื่อดึงข้อมูล
 */
onMounted(async () => {
  if (dataStore.options.length == 0) {
    fectOptionType();
  }
  await fetchDataDetail(personalId.value);
});
</script>

<template>
  <div class="col-12 row justify-center">
    <div class="col-xs-12 col-sm-12 col-md-11">
      <div class="toptitle text-white col-12 row items-center">
        <q-btn
          to="/leave"
          icon="mdi-arrow-left"
          unelevated
          round
          dense
          flat
          color="primary"
          class="q-mr-sm"
        />
        <div>
          แก้ไขใบลา
          {{ formData.leaveTypeName }}
        </div>
      </div>
      <q-form ref="myform" class="col-12">
        <q-card bordered>
          <div class="col-12 row q-col-gutter-md q-pa-md">
            <div class="col-xs-12 col-sm-12">
              <div style="display: flex; align-items: center">
                <q-icon
                  name="mdi-numeric-1-circle"
                  size="20px"
                  color="primary"
                />
                <div class="q-pl-sm text-weight-bold text-dark">
                  เลือกประเภทการลา
                </div>
              </div>
              <div class="q-py-sm q-px-lg">
                <div class="row">
                  <q-select
                    readonly
                    dense
                    class="col-12 col-sm-9 col-md-6"
                    outlined
                    v-model="formData.leaveTypeName"
                    option-value="code"
                    option-label="name"
                    emit-value
                    map-options
                    prefix="ประเภทใบลา :"
                  />
                </div>
                <div class="row q-mt-sm">
                  <div
                    class="col-12 col-sm-6 col-md-4"
                    v-if="model === 'LV-006' || model === 'LV-008'"
                  >
                    <q-select
                      readonly
                      dense
                      outlined
                      v-model="modelSpecific"
                      :options="
                        model === 'LV-006'
                          ? dataStore.optionsOrdination
                          : dataStore.optionsSpecific
                      "
                      option-value="id"
                      option-label="name"
                      emit-value
                      map-options
                      prefix="ประเภทการลา :"
                    />
                  </div>
                </div>
              </div>

              <div>
                <div style="display: flex; align-items: center">
                  <q-icon
                    name="mdi-numeric-2-circle"
                    size="20px"
                    color="primary"
                  />
                  <div class="q-pl-sm text-weight-bold text-dark">
                    ข้อมูลการลา
                  </div>
                </div>
                <FormPart2
                  :model="model"
                  :data="formData"
                  :leave-type-id="formData.leaveTypeId"
                />
              </div>
            </div>
            <div class="col-12">
              <SickForm
                v-if="model === 'LV-001' || model === 'LV-002'"
                :data="formData"
                :on-submit="onSubmit"
                :on-confirm="onConfirm"
                :click-delete="clickDelete"
              />
              <FormBirth
                v-if="model === 'LV-003'"
                :data="formData"
                :on-submit="onSubmit"
                :on-confirm="onConfirm"
                :click-delete="clickDelete"
              />
              <HelpWifeBirthForm
                v-if="model === 'LV-004'"
                :data="formData"
                :on-submit="onSubmit"
                :on-confirm="onConfirm"
                :click-delete="clickDelete"
              />
              <VacationForm
                v-if="model === 'LV-005'"
                :data="formData"
                :on-submit="onSubmit"
                :on-confirm="onConfirm"
                :click-delete="clickDelete"
              />
              <OrdinationForm
                v-if="model === 'LV-006' && modelSpecific === 'ลาอุปสมบท'"
                :data="formData"
                :on-submit="onSubmit"
                :on-confirm="onConfirm"
                :click-delete="clickDelete"
              />
              <HajjForm
                v-if="
                  model === 'LV-006' && modelSpecific === 'ลาประกอบพิธีฮัจญ์'
                "
                :data="formData"
                :on-submit="onSubmit"
                :on-confirm="onConfirm"
                :click-delete="clickDelete"
              />
              <MilitaryForm
                v-if="model === 'LV-007'"
                style="width: 100%"
                :data="formData"
                :on-submit="onSubmit"
                :on-confirm="onConfirm"
                :click-delete="clickDelete"
              />
              <StudyForm
                v-if="model === 'LV-008' && modelSpecific === 'ศึกษาต่อ'"
                style="width: 100%"
                :data="formData"
                :on-submit="onSubmit"
                :on-confirm="onConfirm"
                :click-delete="clickDelete"
              />
              <TrainForm
                v-if="
                  (model === 'LV-008' && modelSpecific == 'ฝึกอบรม') ||
                  (model === 'LV-008' && modelSpecific == 'ปฎิบัติการวิจัย') ||
                  (model === 'LV-008' && modelSpecific == 'ดูงาน')
                "
                :data="formData"
                :on-submit="onSubmit"
                :on-confirm="onConfirm"
                :click-delete="clickDelete"
              />
              <WorkInternationalForm
                v-if="model === 'LV-009'"
                :data="formData"
                :on-submit="onSubmit"
                :on-confirm="onConfirm"
                :click-delete="clickDelete"
              />
              <FollowSpouseForm
                v-if="model === 'LV-010'"
                :data="formData"
                :on-submit="onSubmit"
                :on-confirm="onConfirm"
                :click-delete="clickDelete"
              />
              <RehabilitationForm
                v-if="model === 'LV-011'"
                :data="formData"
                :on-submit="onSubmit"
                :on-confirm="onConfirm"
                :click-delete="clickDelete"
              />
            </div>
          </div>
        </q-card>
      </q-form>
    </div>
  </div>
</template>
