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

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

import type { FormRef } from "@/modules/05_leave/interface/request/FollowSpouseForm";
import type { DocumentLists } from "@/modules/05_leave/interface/index/main";

/** Use */
const dataStore = useLeaveStore();
const $q = useQuasar();
const mixin = useCounterMixin();

const { date2Thai, calculateDurationYmd, messageError, convertDateToAPI } =
  mixin;

const leaveText = ref<string>("");
const edit = ref<boolean>(true);
const leaveId = ref<string>("");
const checkDate = computed(() => {
  if (
    convertDateToAPI(formDataFollowSpouse.leaveEndDate) ==
    convertDateToAPI(formDataFollowSpouse.leaveStartDate)
  ) {
    return true;
  } else {
    return false;
  }
});

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

/** ข้อมูล v-model ของฟอร์ม */
const formDataFollowSpouse = reactive<any>({
  type: dataStore.typeId,
  leaveWrote: "",
  leaveStartDate: null,
  leaveEndDate: null,
  leaveTotal: "", //จำนวนวันลา
  leaveTotalDay: "", //จำนวนวันลา
  leaveSalaryText: "",
  leaveRange: "ALL",
  leaveRangeEnd: "ALL",
  leaveSalary: 0, //เงินเดือนปัจจุบัน
  coupleDayName: "", //ชื่อคู่สมรส
  coupleDayPosition: "", //ตำแหน่งคู่สมรส
  coupleDayLevel: "", //ระดับคู่สมรส
  coupleDayLevelCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ
  coupleDayCountryHistory: "", //ประวัติการลาติดตามคู่สมรส
  coupleDayTotalHistory: null,
  coupleDaySumTotalHistory: null,
  coupleDayStartDateHistory: null,
  coupleDayEndDateHistory: null,
  leaveDetail:
    "ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา ...ปี, ...เดือน, ...วัน", //รายละเอียดการลา
  leaveDocument: [], //เอกสารปะกอบ
});

/** ตัวแปร ref สำหรับแสดง validate */
const leaveWroteRef = ref<object | null>(null);
const leaveStartDateRef = ref<object | null>(null);
const leaveEndDateRef = ref<object | null>(null);
const leaveSalaryRef = ref<object | null>(null);
const leaveTotalRef = ref<object | null>(null);
const coupleDayNameRef = ref<object | null>(null);
const leaveAddressRef = ref<object | null>(null);
const leaveDetailRef = ref<object | null>(null);
const coupleDayPositionRef = ref<object | null>(null);
const coupleDayLevelRef = ref<object | null>(null);
const coupleDayLevelCountryRef = ref<object | null>(null);
const coupleDayCountryHistoryRef = ref<object | null>(null);
const coupleDayTotalHistoryRef = ref<object | null>(null);
const coupleDayStartDateHistoryRef = ref<object | null>(null);
const coupleDayEndDateHistoryRef = ref<object | null>(null);
const leaveDocumentRef = ref<object | null>(null);

/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const FormRef: FormRef = {
  leaveWrote: leaveWroteRef, //เขียนที่***
  leaveStartDate: leaveStartDateRef, //*วัน เดือน ปีเริ่มต้นลา
  leaveEndDate: leaveEndDateRef, //*วัน เดือน ปีสิ้นสุดลา
  leaveTotal: leaveTotalRef, //จำนวนวันลา
  leaveSalary: leaveSalaryRef, //เงินเดือนปัจจุบัน
  coupleDayName: coupleDayNameRef, //หมายเลขที่ติดต่อขณะลา
  coupleDayPosition: coupleDayPositionRef, //ตำแหน่งคู่สมรส
  coupleDayLevel: coupleDayLevelRef, //ระดับคู่สมรส
  coupleDayLevelCountry: coupleDayLevelCountryRef, //ไปปฏิบัติราชการ ณ ประเทศ
  coupleDayCountryHistory: coupleDayCountryHistoryRef, //ประวัติการลาติดตามคู่สมรส
  coupleDayEndDateHistory: coupleDayEndDateHistoryRef, //ประวัติการลาติดตามคู่สมรส
  coupleDayTotalHistory: coupleDayTotalHistoryRef, //ประวัติการลาติดตามคู่สมรส
  coupleDayStartDateHistory: coupleDayStartDateHistoryRef, //ประวัติการลาติดตามคู่สมรส
  leaveDetail: leaveDetailRef, //รายละเอียดการลา
  leaveAddress: leaveAddressRef, //สถานที่ติดต่อขณะลา
  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 (formDataFollowSpouse.leaveDocument.length > 0) {
      formDataFollowSpouse.leaveDocument.forEach((file: File) => {
        formData.append("leaveDocument", file);
      });
    }
    formData.append("type", formDataFollowSpouse.type); //
    formData.append(
      "leaveStartDate",
      convertDateToAPI(formDataFollowSpouse.leaveStartDate) ?? "",
    ); //
    formData.append(
      "leaveEndDate",
      convertDateToAPI(formDataFollowSpouse.leaveEndDate) ?? "",
    ); //
    formData.append(
      "coupleDayStartDateHistory",
      convertDateToAPI(formDataFollowSpouse.coupleDayStartDateHistory) ?? "",
    ); //
    formData.append(
      "coupleDayEndDateHistory",
      convertDateToAPI(formDataFollowSpouse.coupleDayEndDateHistory) ?? "",
    ); //
    formData.append("leaveWrote", formDataFollowSpouse.leaveWrote); //
    formData.append("leaveDetail", formDataFollowSpouse.leaveDetail); //
    formData.append("leaveSalaryText", formDataFollowSpouse.leaveSalaryText); //
    formData.append("leaveSalary", formDataFollowSpouse.leaveSalary); //

    if (formDataFollowSpouse.coupleDayTotalHistory) {
      formData.append(
        "coupleDayTotalHistory",
        formDataFollowSpouse.coupleDayTotalHistory,
      ); //
    }

    if (formDataFollowSpouse.coupleDaySumTotalHistory) {
      formData.append(
        "coupleDaySumTotalHistory",
        formDataFollowSpouse.coupleDaySumTotalHistory,
      ); //
    }

    if (formDataFollowSpouse.coupleDayCountryHistory) {
      formData.append(
        "coupleDayCountryHistory",
        formDataFollowSpouse.coupleDayCountryHistory,
      ); //
    }

    if (formDataFollowSpouse.coupleDayLevelCountry) {
      formData.append(
        "coupleDayLevelCountry",
        formDataFollowSpouse.coupleDayLevelCountry,
      ); //
    }

    formData.append("coupleDayLevel", formDataFollowSpouse.coupleDayLevel); //
    formData.append(
      "coupleDayPosition",
      formDataFollowSpouse.coupleDayPosition,
    ); //
    formData.append("coupleDayName", formDataFollowSpouse.coupleDayName); //
    formData.append("leaveTotal", formDataFollowSpouse.leaveTotal); //

    formData.append("leaveRange", formDataFollowSpouse.leaveRange);
    formData.append("leaveRangeEnd", formDataFollowSpouse.leaveRangeEnd);
    props.onSubmit(formData, isLeave.value);
  }
}

const reasonLeave = ref<string>("");

/**
 * check ว่าลาได้ไหม จาก api
 * @param formData
 */
const isLeave = ref<boolean>(true);
const isLoadCheck = ref<boolean>(false);
async function fetchCheck() {
  if (
    formDataFollowSpouse.leaveStartDate &&
    formDataFollowSpouse.leaveEndDate
  ) {
    isLoadCheck.value = true;
    await http
      .post(config.API.leaveCheck(), {
        type: dataStore.typeId ?? null,
        StartLeaveDate:
          convertDateToAPI(formDataFollowSpouse.leaveStartDate) ?? null,
        EndLeaveDate:
          convertDateToAPI(formDataFollowSpouse.leaveEndDate) ?? null,
        leaveRange: formDataFollowSpouse.leaveRange,
        leaveRangeEnd: checkDate.value
          ? formDataFollowSpouse.leaveRange
          : formDataFollowSpouse.leaveRangeEnd,
      })
      .then((res) => {
        const data = res.data.result;
        isLeave.value = data.isLeave;
        formDataFollowSpouse.leaveTotal = data.totalDate;
        // totalCheck.value = data.totalDate;
        leaveText.value = calculateDurationYmd(
          convertDateToAPI(formDataFollowSpouse.leaveStartDate),
          convertDateToAPI(formDataFollowSpouse.leaveEndDate),
        );
        reasonLeave.value = data.message
          ? data.message
          : "จำนวนวันลาเกินที่กำหนด";
        checkTotalHistory();
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        isLoadCheck.value = false;
      });
  }
}

/**
 * function อัพเดทค่า LeaveTotal
 */
function updateLeaveHistoryTotal() {
  const newLeaveTotal = calculateDurationYmd(
    formDataFollowSpouse.coupleDayStartDateHistory,
    formDataFollowSpouse.coupleDayEndDateHistory,
  );
  formDataFollowSpouse.coupleDayTotalHistory = newLeaveTotal;
  checkTotalHistory();
}

function checkTotalHistory() {
  if (
    formDataFollowSpouse.coupleDayStartDateHistory &&
    formDataFollowSpouse.coupleDayEndDateHistory
  ) {
    const start = new Date(formDataFollowSpouse.coupleDayStartDateHistory);
    const end = new Date(formDataFollowSpouse.coupleDayEndDateHistory);
    const msInDay = 1000 * 60 * 60 * 24;
    const diffTime = end.getTime() - start.getTime();
    const diffDays = Math.abs(Math.ceil(diffTime / msInDay)) + 1;
    formDataFollowSpouse.coupleDaySumTotalHistory =
      diffDays + formDataFollowSpouse.leaveTotal;
  }
}
/** แจ้งเมื่อวันลาไม่ถูกต้อง */
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;
      formDataFollowSpouse.leaveWrote = props.data.leaveWrote;
      formDataFollowSpouse.leaveStartDate = new Date(props.data.leaveStartDate);
      formDataFollowSpouse.leaveEndDate = new Date(props.data.leaveEndDate);
      formDataFollowSpouse.leaveDetail = props.data.leaveDetail;
      formDataFollowSpouse.leaveTotal = props.data.leaveTotal;
      formDataFollowSpouse.leaveSalaryText = props.data.leaveSalaryText;
      formDataFollowSpouse.leaveSalary = props.data.leaveSalary;
      formDataFollowSpouse.coupleDayName = props.data.coupleDayName;
      formDataFollowSpouse.coupleDayPosition = props.data.coupleDayPosition;
      formDataFollowSpouse.coupleDayLevel = props.data.coupleDayLevel;
      formDataFollowSpouse.leaveRange = props.data.leaveRange;
      formDataFollowSpouse.leaveRangeEnd = props.data.leaveRangeEnd;
      formDataFollowSpouse.coupleDaySumTotalHistory =
        props.data.coupleDaySumTotalHistory;
      formDataFollowSpouse.coupleDayLevelCountry =
        props.data.coupleDayLevelCountry;
      formDataFollowSpouse.coupleDayCountryHistory =
        props.data.coupleDayCountryHistory;
      formDataFollowSpouse.coupleDayTotalHistory =
        props.data.coupleDayTotalHistory;
      formDataFollowSpouse.coupleDayStartDateHistory =
        props.data.coupleDayStartDateHistory;
      formDataFollowSpouse.coupleDayEndDateHistory =
        props.data.coupleDayEndDateHistory;
      leaveDocumentList.value = props.data.leaveDocument;
      checkTotalHistory();
      const leaveTotal = calculateDurationYmd(
        props.data.leaveStartDate,
        props.data.leaveEndDate,
      );
      leaveText.value = leaveTotal;

      const coupleDayTotalHistory = calculateDurationYmd(
        props.data.coupleDayStartDateHistory,
        props.data.coupleDayEndDateHistory,
      );
      formDataFollowSpouse.coupleDayTotalHistory = coupleDayTotalHistory;
      statusCheck.value = props.data.status;
      formDataFollowSpouse.leaveDocument = [];
    }
  },
  { deep: true },
);

/**Hook */
onMounted(async () => {
  if (props.data) {
    // totalCheck.value = null;
    formDataFollowSpouse.leaveWrote = props.data.leaveWrote;
    formDataFollowSpouse.leaveStartDate = new Date(props.data.leaveStartDate);
    formDataFollowSpouse.leaveEndDate = new Date(props.data.leaveEndDate);
    formDataFollowSpouse.leaveDetail = props.data.leaveDetail;
    formDataFollowSpouse.leaveTotal = props.data.leaveTotal;
    formDataFollowSpouse.leaveRange = props.data.leaveRange;
    formDataFollowSpouse.leaveRangeEnd = props.data.leaveRangeEnd;

    formDataFollowSpouse.leaveSalaryText = props.data.leaveSalaryText;
    formDataFollowSpouse.leaveSalary = props.data.leaveSalary;
    formDataFollowSpouse.coupleDaySumTotalHistory =
      props.data.coupleDaySumTotalHistory;
    formDataFollowSpouse.coupleDayName = props.data.coupleDayName;
    formDataFollowSpouse.coupleDayPosition = props.data.coupleDayPosition;
    formDataFollowSpouse.coupleDayLevel = props.data.coupleDayLevel;
    formDataFollowSpouse.coupleDayLevelCountry =
      props.data.coupleDayLevelCountry;
    formDataFollowSpouse.coupleDayCountryHistory =
      props.data.coupleDayCountryHistory;
    formDataFollowSpouse.coupleDayTotalHistory =
      props.data.coupleDayTotalHistory;
    formDataFollowSpouse.coupleDayStartDateHistory =
      props.data.coupleDayStartDateHistory;
    formDataFollowSpouse.coupleDayEndDateHistory =
      props.data.coupleDayEndDateHistory;
    leaveDocumentList.value = props.data.leaveDocument;
    checkTotalHistory();
    const leaveTotal = calculateDurationYmd(
      props.data.leaveStartDate,
      props.data.leaveEndDate,
    );
    leaveText.value = leaveTotal;

    const coupleDayTotalHistory = calculateDurationYmd(
      props.data.coupleDayStartDateHistory,
      props.data.coupleDayEndDateHistory,
    );
    formDataFollowSpouse.coupleDayTotalHistory = coupleDayTotalHistory;
    statusCheck.value = props.data.status;
    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.stop="onValidate">
    <q-card bordered class="q-pa-md bg-grey-1">
      <div class="col-12 row q-pa-sm q-col-gutter-sm">
        <div class="col-12 col-sm-12 inputgreen">
          <q-input
            ref="leaveWroteRef"
            for="leaveWroteRef"
            dense
            hide-bottom-space
            bg-color="white"
            outlined
            v-model="formDataFollowSpouse.leaveWrote"
            label="เขียนที่"
            :readonly="!edit || statusCheck === 'NEW'"
            :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
          />
        </div>

        <div class="col-12">
          <div class="row q-col-gutter-sm">
            <div class="col-12 col-md-3 col-sm-6 inputgreen">
              <datepicker
                v-model="formDataFollowSpouse.leaveStartDate"
                :locale="'th'"
                autoApply
                hide-bottom-space
                borderless
                :enableTimePicker="false"
                week-start="0"
                :readonly="!edit || statusCheck === 'NEW'"
                @update:model-value="
                  (formDataFollowSpouse.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="
                      formDataFollowSpouse.leaveStartDate != null
                        ? date2Thai(formDataFollowSpouse.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>
            </div>

            <!-- <div class="col-12 col-md-3 col-sm-6 inputgreen">
              <q-select
                outlined
                dense
                bg-color="white"
                v-model="formDataFollowSpouse.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>

        <div class="col-12">
          <div class="row q-col-gutter-sm"> -->
            <div class="col-12 col-md-3 col-sm-6 inputgreen">
              <datepicker
                v-model="formDataFollowSpouse.leaveEndDate"
                :locale="'th'"
                autoApply
                hide-bottom-space
                @update:model-value="fetchCheck()"
                borderless
                :enableTimePicker="false"
                week-start="0"
                :min-date="formDataFollowSpouse.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="
                      formDataFollowSpouse.leaveEndDate != null
                        ? date2Thai(formDataFollowSpouse.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>
            </div>

            <!-- <div class="col-12 col-md-3 col-sm-6 inputgreen">
              <q-select
                v-if="!checkDate"
                outlined
                dense
                bg-color="white"
                v-model="formDataFollowSpouse.leaveRangeEnd"
                :options="dataStore.rangeOptions.filter((items:any)=> 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 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="leaveText"
                label="เป็นเวลา"
                readonly
                :loading="isLoadCheck"
              >
                <template v-slot:hint>
                  <span style="color: red">
                    {{ !isLeave ? reasonLeave : "" }}
                  </span>
                </template>
              </q-input>
            </div>
          </div>
        </div>

        <div class="col-12 col-md-3 col-sm-12">
          <q-input
            hide-bottom-space
            bg-color="white"
            class="col-12 col-sm-12"
            ref="leaveSalaryRef"
            for="leaveSalaryRef"
            dense
            outlined
            v-model="dataStore.salary"
            label="เงินเดือนปัจจุบัน"
            readonly
          />
        </div>
        <div class="col-12 col-md-9 col-sm-12">
          <q-input
            hide-bottom-space
            bg-color="white"
            class="col-12 col-sm-12"
            ref="leaveSalaryRef"
            for="leaveSalaryRef"
            dense
            outlined
            v-model="dataStore.salaryText"
            label="เงินเดือนปัจจุบัน"
            readonly
          />
        </div>

        <div class="col-md-3 col-sm-12">
          <q-input
            class="col-12 col-sm-12 inputgreen"
            hide-bottom-space
            ref="coupleDayNameRef"
            for="coupleDayNameRef"
            dense
            bg-color="white"
            outlined
            v-model="formDataFollowSpouse.coupleDayName"
            label="ชื่อคู่สมรส"
            :readonly="!edit || statusCheck === 'NEW'"
            :rules="[(val:string) => !!val || `${'ชื่อคู่สมรส'}`]"
          />
        </div>
        <div class="col-md-3 col-sm-12">
          <q-input
            class="col-12 col-sm-12 inputgreen"
            hide-bottom-space
            ref="coupleDayPositionRef"
            for="coupleDayPositionRef"
            dense
            outlined
            bg-color="white"
            v-model="formDataFollowSpouse.coupleDayPosition"
            label="ตำแหน่งคู่สมรส"
            :readonly="!edit || statusCheck === 'NEW'"
            :rules="[(val:string) => !!val || `${'ตำแหน่งคู่สมรส'}`]"
          />
        </div>
        <div class="col-md-3 col-sm-12">
          <q-input
            class="col-12 col-sm-12 inputgreen"
            ref="coupleDayLevelRef"
            for="coupleDayLevelRef"
            dense
            hide-bottom-space
            outlined
            bg-color="white"
            v-model="formDataFollowSpouse.coupleDayLevel"
            label="ระดับคู่สมรส"
            :readonly="!edit || statusCheck === 'NEW'"
            :rules="[(val:string) => !!val || `${'ระดับคู่สมรส'}`]"
          />
        </div>
        <div class="col-md-3 col-sm-12">
          <q-input
            class="col-12 col-sm-12 inputgreen"
            ref="coupleDayLevelCountryRef"
            for="coupleDayLevelCountryRef"
            hide-bottom-space
            dense
            outlined
            bg-color="white"
            v-model="formDataFollowSpouse.coupleDayLevelCountry"
            label="ไปปฏิบัติราชการ ณ ประเทศ"
            :readonly="!edit || statusCheck === 'NEW'"
            :rules="[(val:string) => !!val || `${'ปฏิบัติราชการ ณ ประเทศ'}`]"
          />
        </div>
        <div class="text-weight-bold text-dark col-12">
          ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย
        </div>

        <datepicker
          class="col-12 col-md-3 col-sm-12 inputgreen"
          v-model="formDataFollowSpouse.coupleDayStartDateHistory"
          :locale="'th'"
          autoApply
          hide-bottom-space
          borderless
          :readonly="!edit || statusCheck === 'NEW'"
          :enableTimePicker="false"
          week-start="0"
        >
          <template #year="{ year }">
            {{ year + 543 }}
          </template>
          <template #year-overlay-value="{ value }">
            {{ parseInt(value + 543) }}
          </template>
          <template #trigger>
            <q-input
              outlined
              dense
              ref="coupleDayStartDateHistoryRef"
              for="coupleDayStartDateHistoryRef"
              hide-bottom-space
              bg-color="white"
              class="full-width"
              :readonly="!edit || statusCheck === 'NEW'"
              :model-value="
                formDataFollowSpouse.coupleDayStartDateHistory != null
                  ? date2Thai(formDataFollowSpouse.coupleDayStartDateHistory)
                  : 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>
        <datepicker
          class="col-12 col-md-3 col-sm-12 inputgreen"
          v-model="formDataFollowSpouse.coupleDayEndDateHistory"
          :locale="'th'"
          autoApply
          hide-bottom-space
          borderless
          :enableTimePicker="false"
          :readonly="!edit || statusCheck === 'NEW'"
          :min-date="formDataFollowSpouse.coupleDayStartDateHistory"
          week-start="0"
          @update:model-value="updateLeaveHistoryTotal()"
        >
          <template #year="{ year }">
            {{ year + 543 }}
          </template>
          <template #year-overlay-value="{ value }">
            {{ parseInt(value + 543) }}
          </template>
          <template #trigger>
            <q-input
              outlined
              dense
              ref="coupleDayEndDateHistoryRef"
              for="coupleDayEndDateHistoryRef"
              hide-bottom-space
              bg-color="white"
              :readonly="!edit || statusCheck === 'NEW'"
              class="full-width"
              :model-value="
                formDataFollowSpouse.coupleDayEndDateHistory != null
                  ? date2Thai(formDataFollowSpouse.coupleDayEndDateHistory)
                  : 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-input
          class="col-12 col-md-3 col-sm-12"
          dense
          outlined
          readonly
          hide-bottom-space
          bg-color="white"
          ref="coupleDayTotalHistoryRef"
          for="coupleDayTotalHistoryRef"
          v-model="formDataFollowSpouse.coupleDayTotalHistory"
          label="เป็นเวลา"
        />

        <q-input
          class="col-12 col-md-3 col-sm-12"
          dense
          outlined
          hide-bottom-space
          bg-color="white"
          ref="coupleDayCountryHistoryRef"
          for="coupleDayCountryHistoryRef"
          v-model="formDataFollowSpouse.coupleDayCountryHistory"
          label="ประเทศ"
          :readonly="!edit || statusCheck === 'NEW'"
        />
        <!-- :rules="[(val:string) => !!val || `${'กรุณาเลือกประเทศ'}`]" -->

        <q-input
          hide-bottom-space
          type="textarea"
          class="col-12 col-md-12 col-sm-12 inputgreen"
          dense
          bg-color="white"
          outlined
          ref="leaveDetailRef"
          for="leaveDetailRef"
          v-model="formDataFollowSpouse.leaveDetail"
          label="สาเหตุการลา"
          :readonly="!edit || statusCheck === 'NEW'"
        />
        <div class="full-width" v-if="statusCheck != 'NEW'">
          <div class="q-col-gutter-sm row">
            <!-- multiple -->
            <q-file
              ref="fileRef"
              bg-color="white"
              v-model="formDataFollowSpouse.leaveDocument"
              multiple
              @added="fileUploadDoc"
              dense
              label="เอกสารประกอบ"
              outlined
              use-chips
              class="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 class="col-12 col-sm-6 row" v-if="!edit">
          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
            <div class="q-pl-sm text-weight-bold text-dark">
              เอกสารเพิ่มเติม
            </div>
          </div>
          <q-card bordered flat class="full-width">
            <q-list separator>
              <q-item
                v-for="(file, index) in leaveDocumentList"
                :key="index"
                class="q-my-xs"
              >
                <q-item-section>
                  <q-item-label class="full-width ellipsis">
                    {{ file.name }}
                  </q-item-label>
                  <q-item-label caption> </q-item-label>
                </q-item-section>
              </q-item>
            </q-list>
          </q-card>
        </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>
