<script setup lang="ts">
import { ref, reactive, 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 { useDataStore } from "@/stores/data";

/** import type*/
import type {
  FremDetail,
  FormDelete,
  FormDeleteRef,
  FromCancelDetail,
} from "@/modules/05_leave/interface/response/leave";

import DialogHeader from "@/components/DialogHeader.vue";
import Workflow from "@/components/Workflow/Main.vue";
import FormLeave from "@/modules/05_leave/components/formDetail/01_SickForm.vue";
import FormChildbirth from "@/modules/05_leave/components/formDetail/04_HelpWifeBirthForm.vue";
import FormHoliday from "@/modules/05_leave/components/formDetail/05_VacationForm.vue";
import FormUpasom from "@/modules/05_leave/components/formDetail/06_OrdinationForm.vue";
import FormHajj from "@/modules/05_leave/components/formDetail/07_HajjForm.vue";
import FormCheckSelect from "@/modules/05_leave/components/formDetail/08_MilitaryForm.vue";
import FormStudy from "@/modules/05_leave/components/formDetail/09_StudyForm.vue";
import FormLeaveToTraining from "@/modules/05_leave/components/formDetail/10_TrainForm.vue";
import FormLeaveToWorkInternational from "@/modules/05_leave/components/formDetail/11_WorkInternationalForm.vue";
import FormSpouse from "@/modules/05_leave/components/formDetail/12_FollowSpouseForm.vue";
import FormVocationalRehabilitation from "@/modules/05_leave/components/formDetail/13_RehabilitationForm.vue";
import FormCancel from "@/modules/05_leave/components/formDetail/formCancel.vue";

const $q = useQuasar();
const dataStore = useLeaveStore();
const mainStore = useDataStore();
const { convertStatud } = dataStore;
const mixin = useCounterMixin();
const {
  showLoader,
  hideLoader,
  messageError,
  date2Thai,
  success,
  dialogConfirm,
  calculateDurationYmd,
} = mixin;

const checkForm = ref<string>("");
const titleMain = ref<string>("รายละเอียดการลาของ");
const titleMainCancle = ref<string>("รายละเอียดการยกเลิกการลาของ");
const titleName = ref<string>("");

/**Prop */
const props = defineProps({
  modal: {
    type: Boolean,
    require: true,
  },
  leaveId: {
    type: String,
    require: true,
  },
  onClickClose: {
    type: Function,
    require: true,
  },
  leaveType: {
    type: Object,
    require: true,
  },
  leaveStatus: {
    type: String,
    require: true,
  },
  fetchDataTable: {
    type: Function,
    require: true,
  },
});

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

/** Form รายละเอียดข้อมูล*/
const formDataCancle = reactive<FromCancelDetail>({
  id: "",
  leaveTypeName: "",
  fullname: "",
  status: "",
  leaveDocDelete: "",
  leaveResonDelete: "",
  leaveWrote: "",
  leaveAddress: "",
  leaveNumber: "",
  leaveDetail: "",
  leaveSubTypeName: "",
  leaveTotal: 0,
  leaveDateStart: new Date(),
  leaveDateEnd: new Date(),
  leaveRange: "",
  leaveRangeEnd: "",
  leaveDirectorComment: "",
});

/** form ขอยกเลิก*/
const formDelete = reactive<FormDelete>({
  writeAt: "",
  reason: "",
  doc: null,
});

/**Validate ข้อมูล */
const writeAtRef = ref<Object | null>(null);
const reasonRef = ref<Object | null>(null);
const docRef = ref<Object | null>(null);
const formDeleteRef: FormDeleteRef = {
  writeAt: writeAtRef,
  reason: reasonRef,
  doc: docRef,
};

/**
 * function เรียกข้อมูลการลา
 * @param id การลา
 */
async function fetchDataDetail(id: string) {
  showLoader();
  await http
    .get(config.API.leaveUserId(id), {})
    .then((res) => {
      const data = res.data.result;
      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.leaveDateStart =
        data.leaveStartDate && date2Thai(data.leaveStartDate);
      formData.leaveDateEnd = data.leaveEndDate && date2Thai(data.leaveEndDate);
      formData.leaveCount = calculateDurationYmd(
        data.leaveStartDate,
        data.leaveEndDate
      );
      formData.leaveWrote = data.leaveWrote ?? "-";
      formData.leaveAddress = data.leaveAddress ?? "-";
      formData.leaveNumber = data.leaveNumber ?? "-";
      formData.leaveDetail = data.leaveDetail ?? "-";
      formData.leaveSubTypeName = data.leaveSubTypeName ?? null;
      formData.leaveDocument = data.leaveDocument;
      formData.leaveDraftDocument = data.leaveDraftDocument;
      formData.leaveRange = data.leaveRange;
      formData.leaveRangeEnd = data.leaveRangeEnd;
      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
        ? data.leaveSalary.toLocaleString("th-TH")
        : "-";
      formData.leaveSalaryText = data.leaveSalaryText ?? "-";
      formData.wifeDayName = data.wifeDayName ?? "-";
      formData.wifeDayDateBorn =
        data.wifeDayDateBorn && date2Thai(data.wifeDayDateBorn);
      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 && date2Thai(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 && date2Thai(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 &&
        date2Thai(data.coupleDayStartDateHistory);
      formData.coupleDayEndDateHistory =
        data.coupleDayEndDateHistory && date2Thai(data.coupleDayEndDateHistory);
      formData.coupleDaySumTotalHistory = data.coupleDaySumTotalHistory ?? "-";
      formData.approveStep = data.approveStep ?? "-";
      formData.dear = data.dear ?? "-";
      checkLeaveType(formData.leaveTypeId);
    })
    .catch((err) => {
      props.onClickClose?.();
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * function check ประเภทการลา
 * @param leaveTypeId  ประเภทการลา
 * @param leaveTypeName  ประเภทการลา
 */
function checkLeaveType(leaveTypeId: string) {
  if (props.leaveType) {
    const filtertype = props.leaveType.find((e: any) => e.id === leaveTypeId);
    const type = filtertype.code;
    if (type === "LV-001" || type === "LV-002" || type === "LV-003") {
      checkForm.value = "FormLeave";
    } else if (type === "LV-004") {
      checkForm.value = "FormChildbirth";
    } else if (type === "LV-005") {
      checkForm.value = "FormHoliday";
    } else if (type === "LV-006" && formData.leaveSubTypeName === "ลาอุปสมบท") {
      checkForm.value = "FormUpasom";
    } else if (
      type === "LV-006" &&
      formData.leaveSubTypeName === "ลาประกอบพิธีฮัจญ์"
    ) {
      checkForm.value = "FormHajj";
    } else if (type === "LV-007") {
      checkForm.value = "FormCheckSelect";
    } else if (
      type === "LV-008" &&
      formData.leaveSubTypeName === "ศึกษาต่อ"
    ) {
      checkForm.value = "FormStudy";
    } else if (
      (type === "LV-008" && formData.leaveSubTypeName === "ฝึกอบรม") ||
      (type === "LV-008" && formData.leaveSubTypeName === "ปฎิบัติการวิจัย") ||
      (type === "LV-008" && formData.leaveSubTypeName === "ดูงาน")
    ) {
      checkForm.value = "FormLeaveToTraining";
    } else if (type === "LV-009") {
      checkForm.value = "FormLeaveToWorkInternational";
    } else if (type === "LV-010") {
      checkForm.value = "FormSpouse";
    } else if (type === "LV-011") {
      checkForm.value = "FormVocationalRehabilitation";
    }
  }
}

/**
 * function เรียกข้อมูลยกเลิกการลา
 * @param id ยกเลิกการลา
 */
async function fetchDataCancelDetail(id: string) {
  showLoader();
  await http
    .get(config.API.leaveCancelById(id))
    .then((res) => {
      const data = res.data.result;
      formDataCancle.leaveTypeName = data.leaveTypeName ?? "-";
      formDataCancle.leaveWrote = data.leaveWrote ?? "-";
      formDataCancle.fullname = data.fullName ?? "-";
      formDataCancle.status = convertStatud(data.status) ?? "-";
      formDataCancle.leaveDateStart =
        data.leaveStartDate && date2Thai(data.leaveStartDate);
      formDataCancle.leaveDateEnd =
        data.leaveEndDate && date2Thai(data.leaveEndDate);
      formDataCancle.leaveTotal = data.leaveTotal ?? "-";
      formDataCancle.leaveAddress = data.leaveAddress ?? "-";
      formDataCancle.leaveNumber = data.leaveNumber ?? "-";
      formDataCancle.leaveResonDelete = data.leaveReasonDelete ?? "-";
      formDataCancle.leaveDetail = data.leaveDetail ?? "-";
      formDataCancle.leaveSubTypeName = data.leaveSubTypeName ?? null;
      formDataCancle.leaveDocDelete = data.leaveDocDelete ?? null;
      formDataCancle.leaveRange = data.leaveRange;
      formDataCancle.leaveRangeEnd = data.leaveRangeEnd;
      formDataCancle.leaveDirectorComment = data.leaveDirectorComment;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/** function ยินยันการบันทึกข้อมูล*/
async function onClickSave() {
  const hasError = [];
  for (const key in formDeleteRef) {
    if (Object.prototype.hasOwnProperty.call(formDeleteRef, key)) {
      const property = formDeleteRef[key];
      if (property.value && typeof property.value.validate === "function") {
        const isValid = property.value.validate();
        hasError.push(isValid);
      }
    }
  }
  if (hasError.every((result) => result === true)) {
    dialogConfirm(
      $q,
      () => {
        onSubmit();
      },
      "ยืนยันการบันทึกข้อมูล",
      "ต้องการยินยันการบันทึกข้อมูลนี้หรือไม่ ?"
    );
  } else {
  }
}

/** function บันทึกข้อมูล*/
async function onSubmit() {
  showLoader();
  const id = props.leaveId ? props.leaveId : "";
  const formData = new FormData();
  formData.append("leaveWrote", formDelete.writeAt);
  formData.append("reason", formDelete.reason);
  formData.append("doc", formDelete.doc);
  await http
    .post(config.API.leaveCancelById(id), formData)
    .then(() => {
      success($q, "บันทึกข้อมูลสำเร็จ");
      props.onClickClose?.();
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      props.fetchDataTable?.();
      hideLoader();
    });
}

/**** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาแล้วเปิด modal */
watch(
  () => props.modal,
  () => {
    if (props.modal === true) {
      formDelete.writeAt = "";
      formDelete.reason = "";
      formDelete.doc = null;

      props.leaveStatus === "DELETE"
        ? props.leaveId && fetchDataCancelDetail(props.leaveId)
        : props.leaveId && fetchDataDetail(props.leaveId);
    }
  }
);
</script>

<template>
  <q-dialog v-model="props.modal" persistent>
    <q-card
      v-if="props.leaveStatus != 'DELETE'"
      style="width: 900px; max-width: 80vw"
    >
      <DialogHeader
        :tittle="`${titleMain} ${titleName}`"
        :close="props.onClickClose"
      />

      <q-separator />

      <q-card-section class="scroll" style="max-height: 60vh">
        <div class="row">
          <div
            flat
            :class="
              props.leaveStatus === 'CANCEL' ? 'col-xs-12 col-sm-6' : 'col-12'
            "
          >
            <!-- ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว -->
            <FormLeave v-if="checkForm === 'FormLeave'" :data="formData" />

            <!-- ลาไปช่วยเหลือภริยาที่คลอดบุตร -->
            <FormChildbirth
              v-else-if="checkForm === 'FormChildbirth'"
              :data="formData"
            />

            <!-- ลาพักผ่อน -->
            <FormHoliday
              v-else-if="checkForm === 'FormHoliday'"
              :data="formData"
            />

            <!-- ลาอุปสมบท -->
            <FormUpasom
              v-else-if="checkForm === 'FormUpasom'"
              :data="formData"
            />

            <!-- ลาประกอบพิธีฮัจญ์ -->
            <FormHajj v-else-if="checkForm === 'FormHajj'" :data="formData" />

            <!-- ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล -->
            <FormCheckSelect
              v-else-if="checkForm === 'FormCheckSelect'"
              :data="formData"
            />

            <!-- ลาไปศึกษา -->
            <FormStudy v-else-if="checkForm === 'FormStudy'" :data="formData" />

            <!-- ลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน -->
            <FormLeaveToTraining
              v-else-if="checkForm === 'FormLeaveToTraining'"
              :data="formData"
            />

            <!-- ลาไปปฏิบัติงานในองค์การระหว่างประเทศ -->
            <FormLeaveToWorkInternational
              v-else-if="checkForm === 'FormLeaveToWorkInternational'"
              :data="formData"
            />

            <!-- ลาติดตามคู่สมรส -->
            <FormSpouse
              v-else-if="checkForm === 'FormSpouse'"
              :data="formData"
            />

            <!-- ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ -->
            <FormVocationalRehabilitation
              v-else-if="checkForm === 'FormVocationalRehabilitation'"
              :data="formData"
            />

            <!-- ข้าราชการแสดงเฉพาะที่ยื่นใบลาไปแล้วเท่านั้น ลูกจ้างไม่มี workflow -->
            <!-- <Workflow
              v-if="leaveStatus != 'DRAFT'"
              :id="props.leaveId"
              :sys-name="
                mainStore.officerType == 'OFFICER'
                  ? 'SYS_LEAVE_LIST'
                  : 'SYS_LEAVE_LIST_EMP'
              "
            /> -->
          </div>

          <div
            flat
            class="col-xs-12 col-sm-6 q-pa-sm q-gutter-sm"
            v-if="props.leaveStatus === 'CANCEL'"
          >
            <q-input
              ref="writeAtRef"
              v-model="formDelete.writeAt"
              label="เขียนที่"
              :rules="[(val:string) => !!val || 'กรุณากรอกเขียนที่']"
              lazy-rules
              hide-bottom-space
              outlined
              dense
            />
            <q-input
              ref="reasonRef"
              v-model="formDelete.reason"
              type="textarea"
              label="กรอกเหตุผล"
              :rules="[(val:string) => !!val || 'กรูณากรอกเหตุผล']"
              hide-bottom-space
              lazy-rules
              outlined
              dense
            />
            <q-file
              ref="docRef"
              outlined
              v-model="formDelete.doc"
              label="เลือกไฟล์เอกสารหลักฐาน"
              :rules="props.leaveStatus === 'CANCEL' ? []:[(val:string) => !!val || 'กรูณา เลือกไฟล์เอกสารหลักฐาน']"
              hide-bottom-space
              lazy-rules
              use-chips
              dense
            >
              <template v-slot:prepend>
                <q-icon name="attach_file" />
              </template>
            </q-file>
          </div>
        </div>
      </q-card-section>
      <q-separator />
      <q-card-section v-if="props.leaveStatus === 'CANCEL'" align="right">
        <q-btn
          label="ยืนยัน"
          unelevated
          color="secondary"
          @click="onClickSave"
        />
      </q-card-section>
    </q-card>

    <q-card v-if="props.leaveStatus === 'DELETE'" style="min-width: 40vw">
      <DialogHeader
        :tittle="`${titleMainCancle} ${titleName}`"
        :close="props.onClickClose"
      />

      <q-separator />
      <q-card-section class="q-p-md row q-gutter-y-md">
        <div flat class="col-12">
          <div class="col-12 q-col-gutter-sm row items-center"></div>
          <FormCancel :data="formDataCancle" />
        </div>
      </q-card-section>
      <q-separator />
    </q-card>
  </q-dialog>
</template>

<style scoped></style>
