<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 type*/
import type {
  FremDetail,
  FormDelete,
  FormDeleteRef,
  FromCancelDetail,
} from "@/modules/05_leave/interface/response/leave";

/** import componest*/
import FormLeave from "@/modules/05_leave/components/formDetail/formLeave.vue";
import FormChildbirth from "@/modules/05_leave/components/formDetail/formChildbirth.vue";
import FormHoliday from "@/modules/05_leave/components/formDetail/formHoliday.vue";
import FormUpasom from "@/modules/05_leave/components/formDetail/formUpasom.vue";
import FormHajj from "@/modules/05_leave/components/formDetail/formHajj.vue";
import FormCheckSelect from "@/modules/05_leave/components/formDetail/formCheckSelect.vue";
import FormStudy from "@/modules/05_leave/components/formDetail/formStudy.vue";
import FormLeaveToTraining from "@/modules/05_leave/components/formDetail/formLeaveToTraining.vue";
import FormLeaveToWorkInternational from "@/modules/05_leave/components/formDetail/formLeaveToWorkInternational.vue";
import FormSpouse from "@/modules/05_leave/components/formDetail/formSpouse.vue";
import FormVocationalRehabilitation from "@/modules/05_leave/components/formDetail/formVocationalRehabilitation.vue";
import FormCancel from "@/modules/05_leave/components/formDetail/formCancel.vue";

/** import stort*/
import { useCounterMixin } from "@/stores/mixin";
import { useLeaveStore } from "@/modules/05_leave/store";

const dataStore = useLeaveStore();
const { convertStatud } = dataStore;
const mixin = useCounterMixin();
const {
  showLoader,
  hideLoader,
  messageError,
  date2Thai,
  success,
  dialogConfirm,
} = mixin;

const $q = useQuasar();

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,
  },
});

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

/** Form รายละเอียดข้อมูล*/
const formData = reactive<FremDetail>({
  id: "", //Id การยื่นขอลา
  leaveTypeName: "", // Name ประเภทการลา
  leaveTypeId: "", //Id ประเภทการลา
  fullname: "", //คำนำหน้า ชื่อ นามสกุล คนขอลา
  dateSendLeave: new Date(), // วันที่ยืนใบลา
  status: "", //สถานะการของลา
  leaveDateStart: new Date(), //วันเริ่มการลา
  leaveDateEnd: new Date(), //วันสิ้นสุดการลา
  leaveCount: 0, //จำนวนวันลา
  leaveWrote: "", //เขียนที่
  leaveAddress: "", //สถานที่ติดต่อขณะลา
  leaveNumber: "", //หมายเลขที่ติดต่อขณะลา
  leaveDetail: "", //รายละเอียดการลา
  leaveDocument: "", //อัปโหลดเอกสารประกอบรายละเอียด
  leaveDraftDocument: "", //อัปโหลดแบบฟอร์มการลา
  leaveLastStart: new Date(), //ลาครั้งสุดท้ายในประเภทนั้น ๆ เริ่มเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
  leaveLastEnd: new Date(), //ลาครั้งสุดท้ายในประเภทนั้น ๆ สิ้นสุดเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
  leaveTotal: 0, //จำนวนวันที่ลา(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: "",
});
/** Form รายละเอียดข้อมูล*/
const formDataCancle = reactive<FromCancelDetail>({
  id: "",
  leaveTypeName: "",
  fullname: "",
  status: "",
  leaveDocDelete: "",
  leaveResonDelete: "",
  leaveWrote: "",
  leaveAddress: "",
  leaveNumber: "",
  leaveDetail: "",
  leaveTotal: 0,
  leaveStartDate: new Date(),
  leaveEndDate: new Date(),
});

/** 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 = 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 && 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, formData.leaveTypeName);
    })
    .catch((err) => {
      props.onClickClose?.();
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * function check ประเภทการลา
 * @param leaveTypeId  ประเภทการลา
 * @param leaveTypeName  ประเภทการลา
 */
function checkLeaveType(leaveTypeId: string, leaveTypeName: 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") {
      checkForm.value = "FormUpasom";
    } else if (type === "LV-006" && leaveTypeName === "พิธีฮัจญ์ฯ") {
      checkForm.value = "FormHajj";
    } else if (type === "LV-007") {
      checkForm.value = "FormCheckSelect";
    } else if (type === "LV-008" && leaveTypeName === "ลาไปศีกษา") {
      checkForm.value = "FormStudy";
    } else if (type === "LV-008") {
      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.leaveStartDate =
        data.leaveStartDate && date2Thai(data.leaveStartDate);
      formDataCancle.leaveEndDate =
        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.leaveDocDelete = data.leaveDocDelete ?? null;

      console.log(res);
    })
    .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 {
    console.log(hasError);
  }
}

/** 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();
    });
}

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 q-card style="min-width: 70%" v-if="props.leaveStatus != 'DELETE'">
      <q-card-section class="row items-center q-pa-sm">
        <div class="text-bold q-pl-sm">{{ titleMain }}{{ titleName }}</div>
        <q-space />
        <q-btn
          icon="close"
          unelevated
          round
          dense
          @click="props.onClickClose"
          style="color: #ff8080; background-color: #ffdede"
        />
      </q-card-section>
      <q-separator />
      <q-card-section class="q-p-md row q-gutter-y-md">
        <div
          flat
          :class="
            props.leaveStatus === 'CANCEL' ? 'col-xs-6 col-sm-6' : 'col-12'
          "
        >
          <div class="col-12 q-col-gutter-sm row items-center"></div>
          <!-- ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว -->
          <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"
          />
        </div>

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

    <q-card q-card style="min-width: 70%" v-if="props.leaveStatus === 'DELETE'">
      <q-card-section class="row items-center q-pa-sm">
        <div class="text-bold q-pl-sm">
          {{ titleMainCancle }}{{ titleName }}
        </div>
        <q-space />
        <q-btn
          icon="close"
          unelevated
          round
          dense
          @click="props.onClickClose"
          style="color: #ff8080; background-color: #ffdede"
        />
      </q-card-section>
      <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 -->
          <FormCancel :data="formDataCancle" />
        </div>
      </q-card-section>
      <q-separator />
    </q-card>
  </q-dialog>
</template>

<style scoped></style>
