<script setup lang="ts">
import { reactive, ref, onMounted, computed, watch } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";

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

import type { HajiForm } from "@/modules/05_leave/interface/request/AddAbsence";
import type {
  DocumentLists,
  DataOptions,
} from "@/modules/05_leave/interface/index/main";

/** Use */
const dataStore = useLeaveStore();
const $q = useQuasar();
const mixin = useCounterMixin();
const {
  date2Thai,
  calculateDurationYmd,
  messageError,

  convertDateToAPI,
} = mixin;

const edit = ref<boolean>(true);
const leaveId = ref<string>("");
const leaveText = ref<string>("");

/** ตัวแปร ref สำหรับแสดง validate */
const leaveWroteRef = ref<object | null>(null);
const leavegovernmentDateRef = ref<object | null>(null);
const leaveStartDateRef = ref<object | null>(null);
const leaveEndDateRef = ref<object | null>(null);
const leaveDocumentRef = ref<object | null>(null);

/** รับ props มาจากหน้าหลัก */
const props = defineProps({
  data: {
    type: Object,
    default: null,
  },
  onSubmit: {
    type: Function,
    default: () => "",
  },
  onConfirm: {
    type: Function,
    default: () => "",
  },
  clickDelete: {
    type: Function,
    default: () => "",
  },
});

/** ข้อมูล v-model ของฟอร์ม */
const formDataHaji = reactive<any>({
  type: dataStore.typeId,
  leaveWrote: "",
  leavegovernmentDate: null,
  leaveStartDate: null,
  leaveEndDate: null,
  leaveTotal: 0,
  hajjDayStatus: true,
  leaveDocument: [],
  leaveDetail: "",
  leaveRange: "ALL",
  leaveRangeEnd: "ALL",
});

/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const formRef: HajiForm = {
  leaveWrote: leaveWroteRef,
  leavegovernmentDate: leavegovernmentDateRef,
  leaveStartDate: leaveStartDateRef,
  leaveEndDate: leaveEndDateRef,
  leaveDocument: leaveDocumentRef,
};

/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const fileDocDataUpload = ref<File[]>([]);
const fileUploadDoc = async (files: File[]) => {
  files.forEach((file: File) => {
    fileDocDataUpload.value.push(file);
  });
};

/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
function onValidate() {
  const hasError = [];
  for (const key in formRef) {
    if (Object.prototype.hasOwnProperty.call(formRef, key)) {
      const property = formRef[key];
      if (property.value && typeof property.value.validate === "function") {
        const isValid = property.value.validate();
        hasError.push(isValid);
      }
    }
  }
  if (hasError.every((result) => result === true)) {
    const formData = new FormData();
    if (formDataHaji.leaveDocument) {
      formDataHaji.leaveDocument.forEach((file: File) => {
        formData.append("leaveDocument", file);
      });
    }
    // formData.append("leaveDocument", formDataHaji.leaveDocument);
    formData.append("type", formDataHaji.type);
    formData.append(
      "leaveStartDate",
      convertDateToAPI(formDataHaji.leaveStartDate) ?? ""
    );
    formData.append(
      "leaveEndDate",
      convertDateToAPI(formDataHaji.leaveEndDate) ?? ""
    );
    formData.append("hajjDayStatus", formDataHaji.hajjDayStatus);
    formData.append("leaveWrote", formDataHaji.leaveWrote);
    formData.append("leaveDetail", formDataHaji.leaveDetail);
    formData.append("leaveTotal", formDataHaji.leaveTotal);
    formData.append("leaveRange", formDataHaji.leaveRange);
    formData.append("leaveRangeEnd", formDataHaji.leaveRangeEnd);
    formData.append("hajj", "true");
    props.onSubmit(formData, isLeave.value);
  }
}

/**
 * check ว่าลาได้ไหม จาก api
 * @param formData
 */
const isLeave = ref<boolean>(true);
const reasonLeave = ref<string>("");

const checkDate = computed(() => {
  if (
    convertDateToAPI(formDataHaji.leaveEndDate) ==
    convertDateToAPI(formDataHaji.leaveStartDate)
  ) {
    return true;
  } else {
    return false;
  }
});

const isLoadCheck = ref<boolean>(false);
async function fetchCheck() {
  if (formDataHaji.leaveStartDate && formDataHaji.leaveEndDate) {
    isLoadCheck.value = true;
    await http
      .post(config.API.leaveCheck(), {
        type: dataStore.typeId ?? null,
        StartLeaveDate: convertDateToAPI(formDataHaji.leaveStartDate) ?? null,
        EndLeaveDate: convertDateToAPI(formDataHaji.leaveEndDate) ?? null,
        leaveRange: formDataHaji.leaveRange,
        leaveRangeEnd: checkDate.value
          ? formDataHaji.leaveRange
          : formDataHaji.leaveRangeEnd,
      })
      .then((res) => {
        const data = res.data.result;
        formDataHaji.leaveTotal = data.totalDate;
        leaveText.value = calculateDurationYmd(
          convertDateToAPI(formDataHaji.leaveStartDate),
          convertDateToAPI(formDataHaji.leaveEndDate)
        );
        reasonLeave.value =
          data.message != ""
            ? data.message
            : formDataHaji.leaveTotal > 0
            ? "จำนวนวันลาเกินที่กำหนด"
            : "ช่วงวันลาที่ระบุไม่ถูกต้อง";
        isLeave.value = formDataHaji.leaveTotal > 0 ? data.isLeave : false;
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        isLoadCheck.value = false;
      });
  }
}

/** แจ้งเมื่อวันลาไม่ถูกต้อง */
const dateEndInputStyle = computed(() => {
  return !isLeave.value ? "input-alert" : "";
});

/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
const leaveDocumentList = ref<DocumentLists[]>([]);
const statusCheck = ref<string>("");
watch(
  () => props.data,
  async () => {
    if (props.data) {
      // totalCheck.value = null;
      formDataHaji.leaveWrote = props.data.leaveWrote;
      formDataHaji.leaveTotal = props.data.leaveTotal;
      formDataHaji.leaveStartDate = props.data.leaveStartDate;
      formDataHaji.leaveEndDate = props.data.leaveEndDate;
      formDataHaji.hajjDayStatus = props.data.hajjDayStatus;
      formDataHaji.leaveDetail = props.data.leaveDetail;
      formDataHaji.leaveRangeEnd = props.data.leaveRangeEnd;
      formDataHaji.leaveRange = props.data.leaveRange;
      leaveDocumentList.value = props.data.leaveDocument;
      statusCheck.value = props.data.status;
      formDataHaji.leaveDocument = [];
    }
  },
  { deep: true }
);

/**Hook */
onMounted(async () => {
  if (props.data) {
    // totalCheck.value = null;
    formDataHaji.leaveWrote = props.data.leaveWrote;
    formDataHaji.leaveTotal = props.data.leaveTotal;
    formDataHaji.leaveStartDate = props.data.leaveStartDate;
    formDataHaji.leaveEndDate = props.data.leaveEndDate;
    formDataHaji.hajjDayStatus = props.data.hajjDayStatus;
    formDataHaji.leaveDetail = props.data.leaveDetail;
    leaveDocumentList.value = props.data.leaveDocument;
    formDataHaji.leaveRange = props.data.leaveRange;
    formDataHaji.leaveRangeEnd = props.data.leaveRangeEnd;
    statusCheck.value = props.data.status;
    // formDataHaji.leaveDocument = props.data.leaveDocument;
    leaveId.value = props.data.id;
  }
});
</script>

<template>
  <div style="display: flex; align-items: center">
    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
  </div>
  <form @submit.prevent="onValidate" class="full-width">
    <q-card bordered class="q-pa-md bg-grey-1">
      <div class="row q-pa-sm q-col-gutter-sm">
        <q-input
          v-model="formDataHaji.leaveWrote"
          ref="leaveWroteRef"
          class="col-12 col-sm-12 inputgreen"
          bg-color="white"
          dense
          outlined
          label="เขียนที่"
          hide-bottom-space
          :readonly="!edit || statusCheck === 'NEW'"
          :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
        />

        <div class="col-12">
          <div class="row q-col-gutter-sm">
            <datepicker
              class="col-12 col-md-3 col-sm-6 inputgreen"
              v-model="formDataHaji.leaveStartDate"
              :locale="'th'"
              autoApply
              hide-bottom-space
              borderless
              :enableTimePicker="false"
              week-start="0"
              :readonly="!edit || statusCheck === 'NEW'"
              @update:model-value="
                (formDataHaji.leaveEndDate = null), fetchCheck()
              "
            >
              <template #year="{ year }">
                {{ year + 543 }}
              </template>
              <template #year-overlay-value="{ value }">
                {{ parseInt(value + 543) }}
              </template>
              <template #trigger>
                <q-input
                  outlined
                  dense
                  ref="leaveStartDateRef"
                  for="leaveStartDateRef"
                  hide-bottom-space
                  bg-color="white"
                  :readonly="!edit || statusCheck === 'NEW'"
                  class="full-width datepicker"
                  :model-value="
                    formDataHaji.leaveStartDate != null
                      ? date2Thai(formDataHaji.leaveStartDate)
                      : null
                  "
                  :label="`${'วันที่เริ่มต้น'}`"
                  :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>
            <q-select
              outlined
              dense
              class="col-12 col-md-3 col-sm-6 inputgreen"
              bg-color="white"
              v-model="formDataHaji.leaveRange"
              :options="dataStore.rangeOptions"
              emit-value
              map-options
              option-value="id"
              option-label="name"
              @update:model-value="fetchCheck()"
            >
              <template v-slot:prepend>
                <q-icon
                  name="mdi-clock-outline"
                  style="color: var(--q-primary)"
                />
              </template>
            </q-select>
          </div>
        </div>
        <div class="col-12">
          <div class="row q-col-gutter-sm">
            <datepicker
              class="col-12 col-md-3 col-sm-6 inputgreen"
              v-model="formDataHaji.leaveEndDate"
              :locale="'th'"
              autoApply
              hide-bottom-space
              @update:model-value="fetchCheck()"
              borderless
              :enableTimePicker="false"
              week-start="0"
              :min-date="formDataHaji.leaveStartDate"
            >
              <template #year="{ year }">
                {{ year + 543 }}
              </template>
              <template #year-overlay-value="{ value }">
                {{ parseInt(value + 543) }}
              </template>
              <template #trigger>
                <q-input
                  outlined
                  dense
                  ref="leaveEndDateRef"
                  for="leaveEndDateRef"
                  hide-bottom-space
                  bg-color="white"
                  class="full-width datepicker"
                  :model-value="
                    formDataHaji.leaveEndDate != null
                      ? date2Thai(formDataHaji.leaveEndDate)
                      : null
                  "
                  :label="`${'วันที่สิ้นสุด'}`"
                  :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>
            <q-select
              v-if="!checkDate"
              outlined
              dense
              class="col-12 col-md-3 col-sm-6 inputgreen"
              bg-color="white"
              v-model="formDataHaji.leaveRangeEnd"
              :options="dataStore.rangeOptions.filter((items:DataOptions)=> items.id !== 'AFTERNOON')"
              emit-value
              map-options
              option-value="id"
              option-label="name"
              @update:model-value="fetchCheck()"
            >
              <template v-slot:prepend>
                <q-icon
                  name="mdi-clock-outline"
                  style="color: var(--q-primary)"
                />
              </template>
            </q-select>
          </div>
        </div>

        <div class="full-width">
          <div class="q-col-gutter-sm row">
            <div class="col-12 col-md-3 col-sm-6">
              <q-input
                :bottom-slots="!isLeave ? true : false"
                :color="!isLeave ? 'red' : 'black'"
                :bg-color="!isLeave ? 'red-2' : 'white'"
                :border-color="!isLeave ? 'red' : 'gray'"
                :input-class="!isLeave ? dateEndInputStyle : ''"
                dense
                outlined
                ref="leaveTotalRef"
                for="leaveTotalRef"
                v-model="formDataHaji.leaveTotal"
                label="จำนวนวันที่ลา (วัน)"
                readonly
                :loading="isLoadCheck"
              >
                <template v-slot:hint>
                  <span style="color: red">
                    {{ !isLeave ? reasonLeave : "" }}
                  </span>
                </template>
              </q-input>
            </div>

            <datepicker
              class="col-12 col-md-3 col-sm-6"
              autoApply
              borderless
              readonly
              week-start="0"
              :locale="'th'"
              :enableTimePicker="false"
            >
              <template #year="{ year }">
                {{ year + 543 }}
              </template>
              <template #year-overlay-value="{ value }">
                {{ parseInt(value + 543) }}
              </template>
              <template #trigger>
                <q-input
                  ref="leavegovernmentDateRef"
                  bg-color="white"
                  class="full-width"
                  outlined
                  dense
                  readonly
                  hide-bottom-space
                  :label="`${'วันที่เข้ารับราชการ'}`"
                  :model-value="
                    dataStore.dateAppoint != null
                      ? date2Thai(dataStore.dateAppoint)
                      : null
                  "
                  :rules="[
                    (val:string) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
                  ]"
                >
                  <template v-slot:prepend>
                    <q-icon
                      name="event"
                      class="cursor-pointer"
                      style="color: var(--black)"
                    >
                    </q-icon>
                  </template>
                </q-input>
              </template>
            </datepicker>
          </div>
        </div>

        <div class="q-pl-sm text-weight-bold text-dark col-12">
          เคยไปประกอบพิธีฮัจญ์หรือไม่
        </div>
        <div class="col-12">
          <q-radio
            v-model="formDataHaji.hajjDayStatus"
            :disable="statusCheck === 'NEW'"
            :val="true"
            checked-icon="task_alt"
            label="เคย"
          />
          <q-radio
            v-model="formDataHaji.hajjDayStatus"
            :disable="statusCheck === 'NEW'"
            :val="false"
            checked-icon="task_alt"
            label="ไม่เคยไปประกอบพิธีฮัจญ์"
          />
        </div>

        <div class="col-12 inputgreen">
          <q-input
            v-model="formDataHaji.leaveDetail"
            :readonly="!edit || statusCheck === 'NEW'"
            bg-color="white"
            dense
            outlined
            type="textarea"
            label="สาเหตุการลา"
          />
        </div>

        <div class="full-width" v-if="statusCheck != 'NEW'">
          <div class="q-col-gutter-sm row">
            <!-- multiple -->
            <q-file
              v-model="formDataHaji.leaveDocument"
              multiple
              bg-color="white"
              label="เอกสารประกอบ"
              use-chips
              @added="fileUploadDoc"
              dense
              outlined
              hide-bottom-space
              class="col-12 q-pl-sm col-12"
            >
              <template v-slot:prepend>
                <q-icon name="attach_file" color="primary" />
              </template>
            </q-file>
          </div>
        </div>
        <div class="col-12" v-if="data">
          <div class="col-12 col-md-12 col-sm-12">
            <q-card>
              <q-list
                separator
                v-if="leaveDocumentList && leaveDocumentList.length > 0"
              >
                <q-item
                  v-for="(document, index) in leaveDocumentList"
                  :key="index"
                  class="q-my-xs"
                >
                  <q-item-section>
                    <q-item-label class="row items-baseline">
                      <div class="col">
                        {{ "เอกสารแนบที่ " + (index + 1) }}
                      </div>
                      <div>
                        <q-btn
                          :href="document.path"
                          target="_blank"
                          outline
                          flat
                          dense
                          color="blue"
                          icon="mdi-download"
                          size="12px"
                          class="q-mr-md"
                        >
                          <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
                        </q-btn>
                      </div>
                      <div>
                        <q-btn
                          @click="clickDelete(leaveId, document.docId)"
                          target="_blank"
                          outline
                          color="red"
                          flat
                          dense
                          icon="delete"
                          size="12px"
                        >
                          <q-tooltip>ลบไฟล์</q-tooltip>
                        </q-btn>
                      </div>
                    </q-item-label>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-card>
          </div>
        </div>
      </div>
    </q-card>
    <q-separator class="q-mt-sm" />
    <div class="row col-12 q-pt-md">
      <q-space />
      <!-- <div v-if="totalCheck == 0" class="text-red q-mr-sm">**จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด</div> -->
      <q-btn
        v-if="!props.data || props.data.status == 'DRAFT'"
        id="onSubmit"
        type="submit"
        unelevated
        class="q-px-md items-center btnBlue"
        label="บันทึก"
        :disable="!isLeave"
        :loading="isLoadCheck"
      >
        <q-tooltip>บันทึกแบบร่าง</q-tooltip>
      </q-btn>
      <q-btn
        v-if="data && statusCheck != 'NEW'"
        id="onSubmit"
        type="button"
        unelevated
        class="q-px-md items-center q-ml-sm"
        color="primary"
        label="ยื่นใบลา"
        @click="onConfirm()"
        :loading="isLoadCheck"
      >
        <q-tooltip>ยื่นใบลา</q-tooltip>
      </q-btn>
    </div>
  </form>
</template>
