<script setup lang="ts">
import router from "@/router";
import { onMounted, ref, watch, reactive } from "vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore";
import type {
  FormData,
  MyObjectInvestigateRef,
} from "@/modules/11_discipline/interface/request/investigate";
import { diffDates } from "@fullcalendar/core/internal";

const $q = useQuasar();

const investigateFactStore = useInvestigateFactStore(); // เรียกใช้ store
const { filterFnOptionsType } = investigateFactStore; // เรียกใช้ filterFnOptionsType จาก store

const mixin = useCounterMixin(); // เรียกใช้ mixin
const { date2Thai, dialogConfirm } = mixin; // เรียกใช้ date2Thai, dialogConfirm จาก mixin

const props = defineProps({
  data: {
    type: Object,
    default: null,
  },
  onSubmit: {
    type: Function,
    default: () => "",
  },
});

const complaintsOptions = ref<any>([]);
const isUpdate = ref<boolean>(false);

const complaintRef = ref<Object | null>(null);
const complaintdetailRef = ref<Object | null>(null);
const detailRef = ref<Object | null>(null);
const faultRef = ref<Object | null>(null);
const otherRef = ref<Object | null>(null);
const evidenceFilesRef = ref<Object | null>(null);
const fileComplaintRef = ref<Object | null>(null);
const clickTimeRef = ref<Object | null>(null);
const dateRef = ref<Object | null>(null);
const dateEndRef = ref<Object | null>(null);
const investigationRef = ref<Object | null>(null);
const daysExtendRef = ref<Object | null>(null);
const statusResultRef = ref<Object | null>(null);
const causeTextRef = ref<Object | null>(null);

const formData = reactive<FormData>({
  complaint: "",
  complaintdetail: "",
  detail: "",
  fault: "",
  other: "",
  evidenceFiles: null,
  fileComplaint: null,
  clickTime: false,
  date: null,
  dateEnd: new Date(),
  investigation: "",
  daysExtend: null,
  statusResult: "ยังไม่ระบุ",
  causeText: "",
});

const objectInvestigate: MyObjectInvestigateRef = {
  complaint: complaintRef,
  complaintdetail: complaintdetailRef,
  detail: detailRef,
  fault: faultRef,
  other: otherRef,
  evidenceFiles: evidenceFilesRef,
  fileComplaint: fileComplaintRef,
  date: dateRef,
  dateEnd: dateEndRef,
  investigation: investigationRef,
  daysExtend: daysExtendRef,
  statusResult: statusResultRef,
  causeText: causeTextRef,
};

/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
function validateForm() {
  const hasError = [];
  for (const key in objectInvestigate) {
    if (Object.prototype.hasOwnProperty.call(objectInvestigate, key)) {
      const property = objectInvestigate[key];
      if (property.value && typeof property.value.validate === "function") {
        const isValid = property.value.validate();
        hasError.push(isValid);
      }
    }
  }

  if (hasError.every((result) => result === true)) {
    onSubmit();
  } else {
    console.log("ไม่ผ่าน ");
    console.log(hasError);
  }
}

/**
 * ฟังก์ชั่นสำหรับบันทึกข้อมูล ระบบจะแสดง dialog ให้ยืนยันการบันทึก
 * หากยืนยันจะส่งข้อมูลไปบันทึกที่ api
 * หากยกเลิกจะกลับไปหน้าฟอร์ม
 */
function onSubmit() {
  dialogConfirm(
    $q,
    async () => {
      props.onSubmit(formData);
    },
    "ยืนยันการบันทึกข้อมูล",
    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
  );
}

function calEndDate(val: string) {
  const date = new Date(props.data.dateEnd);
  const dateNew = new Date();
  formData.dateEnd = new Date(dateNew.setDate(date.getDate() + Number(val)));
}

watch(props.data, async () => {
  if (props.data !== null) {
    isUpdate.value = true;
    formData.complaint = props.data.complaint;
    formData.complaintdetail = props.data.complaintdetail;
    formData.detail = props.data.detail;
    formData.fault = props.data.fault;
    formData.other = props.data.other;
    formData.evidenceFiles = props.data.evidenceFiles;
    formData.fileComplaint = props.data.fileComplaint;
    formData.clickTime = props.data.clickTime;
    formData.date = props.data.date;
    formData.dateEnd = props.data.dateEnd;
    formData.investigation = props.data.investigation;
    formData.daysExtend = props.data.daysExtend;
    formData.statusResult = props.data.results;
    formData.causeText = props.data.results;
  }
});
</script>
<template>
  <q-card flat bordered class="col-12 q-mt-sm">
    <form @submit.prevent="validateForm">
      <div class="q-pa-md">
        <div class="col-xs-12 row items-center q-col-gutter-md">
          <div class="col-6">
            <q-select
              for="#fault"
              outlined
              dense
              ref="complaintRef"
              v-model="formData.complaint"
              :rules="[(val) => !!val || `${'กรุณาเลือกเรื่องร้องเรียน'}`]"
              :options="complaintsOptions"
              label="เรื่องร้องเรียน"
              emit-value
              map-options
              option-label="name"
              option-value="id"
              use-input
              @filter="(inputValue: any,
                doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'faultOp'
                )"
              ><template v-slot:no-option>
                <q-item>
                  <q-item-section class="text-grey">
                    ไม่มีข้อมูล
                  </q-item-section>
                </q-item>
              </template>
            </q-select>
          </div>
          <div class="col-3">
            <q-select
              for="#fault"
              outlined
              dense
              ref="faultRef"
              v-model="formData.fault"
              :rules="[(val) => !!val || `${'กรุณาเลือกลักษณะความผิด'}`]"
              :options="investigateFactStore.faultOp"
              label="ลักษณะความผิด"
              emit-value
              map-options
              option-label="name"
              option-value="id"
              use-input
              @filter="(inputValue: any,
                doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'faultOp'
                )"
              ><template v-slot:no-option>
                <q-item>
                  <q-item-section class="text-grey">
                    ไม่มีข้อมูล
                  </q-item-section>
                </q-item>
              </template>
            </q-select>
          </div>
          <div class="col-3">
            <q-select
              for="#investigation"
              outlined
              dense
              ref="investigationRef"
              :rules="[(val) => !!val || `${'กรุณาเลือกลักษณะการสืบสวน'}`]"
              v-model="formData.investigation"
              :options="investigateFactStore.investigationOp"
              label="ลักษณะการสืบสวน"
              emit-value
              map-options
              option-label="name"
              option-value="id"
              use-input
              @filter="(inputValue: any,
        doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'investigationOp'
        )"
              ><template v-slot:no-option>
                <q-item>
                  <q-item-section class="text-grey">
                    ไม่มีข้อมูล
                  </q-item-section>
                </q-item>
              </template>
            </q-select>
          </div>
          <div v-if="formData.investigation === '003'" class="col-12">
            <q-input
              for="#other"
              class="full-width cursor-pointer"
              outlined
              ref="otherRef"
              dense
              borderless
              v-model="formData.other"
              hide-bottom-space
              :label="`${'รายการอื่นๆ(โปรดระบุ)'}`"
              type="textarea"
              :rules="[
                (val) =>
                  formData.investigation === '003'
                    ? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
                    : true,
              ]"
            />
          </div>
          <div class="row col-12">
            <q-card
              bordered
              class="row col-12"
              style="border: 1px solid #d6dee1"
            >
              <div
                class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
              >
                วันที่สืบสวน
                <q-checkbox
                  v-if="data != null"
                  for="#clickTime"
                  size="md"
                  v-model="formData.clickTime"
                  label="ขยายเวลา"
                  color="primary"
                  dense
                  class="text-weight-medium q-ml-sm"
                  keep-color
                />
              </div>
              <div class="col-12"><q-separator /></div>
              <div class="col-xs-12 col-sm-12 q-pa-sm row">
                <div class="q-col-gutter-sm row">
                  <datepicker
                    v-if="!formData.clickTime"
                    menu-class-name="modalfix"
                    :readonly="isUpdate"
                    v-model="formData.date"
                    :locale="'th'"
                    autoApply
                    :enableTimePicker="false"
                    week-start="0"
                  >
                    <template #year="{ year }">{{ year + 543 }}</template>
                    <template #year-overlay-value="{ value }">{{
                      parseInt(value + 543)
                    }}</template>
                    <template #trigger>
                      <q-input
                        for="#date"
                        class="full-width cursor-pointer"
                        ref="dateRef"
                        :readonly="isUpdate"
                        outlined
                        dense
                        lazy-rules
                        borderless
                        hide-bottom-space
                        :model-value="
                          formData.date ? date2Thai(formData.date) : null
                        "
                        :rules="[
                          (val) =>
                            !!val || `${'กรุณาเลือกวันที่เริ่มการสอบสวน'}`,
                        ]"
                        :label="`${'วันที่เริ่มการสอบสวน'}`"
                      >
                        <template v-slot:prepend>
                          <q-icon
                            name="event"
                            class="cursor-pointer"
                            color="primary"
                          >
                          </q-icon>
                        </template>
                      </q-input>
                    </template>
                  </datepicker>

                  <q-select
                    v-if="formData.clickTime"
                    for="#daysExtend"
                    outlined
                    dense
                    lazy-rules
                    ref="daysExtendRef"
                    v-model="formData.daysExtend"
                    :options="investigateFactStore.daysExtendOp"
                    label="จำนวนวันที่ต้องการขยาย"
                    emit-value
                    hide-bottom-space
                    map-options
                    :rules="[
                      (val) =>
                        formData.clickTime
                          ? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
                          : true,
                    ]"
                    option-label="name"
                    option-value="id"
                    use-input
                    @update:model-value="calEndDate"
                    ><template v-slot:no-option>
                      <q-item>
                        <q-item-section class="text-grey">
                          ไม่มีข้อมูล
                        </q-item-section>
                      </q-item>
                    </template>
                  </q-select>

                  <datepicker
                    menu-class-name="modalfix"
                    v-model="formData.dateEnd"
                    :readonly="isUpdate"
                    :locale="'th'"
                    autoApply
                    :enableTimePicker="false"
                    week-start="0"
                  >
                    <template #year="{ year }">{{ year + 543 }}</template>
                    <template #year-overlay-value="{ value }">{{
                      parseInt(value + 543)
                    }}</template>
                    <template #trigger>
                      <q-input
                        for="#dateEnd"
                        ref="dateEndRef"
                        class="full-width cursor-pointer"
                        :readonly="isUpdate"
                        outlined
                        dense
                        lazy-rules
                        hide-bottom-space
                        borderless
                        :model-value="
                          formData.dateEnd ? date2Thai(formData.dateEnd) : null
                        "
                        :rules="[
                          (val) =>
                            !!val || `${'กรุณาเลือกวันที่สิ้นสุดการสอบสวน'}`,
                        ]"
                        :label="`${'วันที่สิ้นสุดการสอบสวน'}`"
                      >
                        <template v-slot:prepend>
                          <q-icon
                            name="event"
                            class="cursor-pointer"
                            color="primary"
                          >
                          </q-icon>
                        </template>
                      </q-input>
                    </template>
                  </datepicker>
                </div>
              </div>
            </q-card>
          </div>
          <div class="col-12">
            <q-input
              for="#complaintdetail"
              class="full-width cursor-pointer"
              outlined
              ref="complaintdetailRef"
              dense
              lazy-rules
              borderless
              v-model="formData.complaintdetail"
              :rules="[
                (val) => !!val || `${'กรุณากรอกรายละเอียดเรื่องร้องเรียน'}`,
              ]"
              hide-bottom-space
              :label="`${'รายละเอียดเรื่องร้องเรียน'}`"
              type="textarea"
            />
          </div>
          <div class="col-12">
            <q-file
              for="#fileComplaint"
              outlined
              ref="fileComplaintRef"
              dense
              v-model="formData.fileComplaint"
              label="ไฟล์เอกสารหลักฐานเรื่องร้องเรียน"
              lazy-rules
              :rules="[(val) => !!val || 'กรุณาเลือกไฟล์หลักฐานการรับ']"
              hide-bottom-space
            >
              <template v-slot:prepend>
                <q-icon name="attach_file" color="primary" />
              </template>
            </q-file>
          </div>
          <div class="col-12">
            <q-input
              for="#detail"
              class="full-width cursor-pointer"
              outlined
              ref="detailRef"
              dense
              lazy-rules
              borderless
              v-model="formData.detail"
              :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
              hide-bottom-space
              :label="`${'รายละเอียด'}`"
              type="textarea"
            />
          </div>
          <div class="col-12">
            <q-file
              for="#evidenceFiles"
              outlined
              dense
              ref="evidenceFilesRef"
              v-model="formData.evidenceFiles"
              label="ไฟล์เอกสารหลักฐาน"
              lazy-rules
              :rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']"
              hide-bottom-space
            >
              <template v-slot:prepend>
                <q-icon name="attach_file" color="primary" />
              </template>
            </q-file>
          </div>
          <div class="row col-12 q-col-gutter-md">
            <div class="col-3">
              <q-select
                for="#fault"
                outlined
                dense
                ref="statusResultRef"
                v-model="formData.statusResult"
                :rules="[(val) => !!val || `${'กรุณาเลือกผลการสืบสวน'}`]"
                :options="investigateFactStore.statusResultOptions"
                label="ผลการสืบสวน"
                emit-value
                map-options
                option-label="name"
                option-value="id"
                use-input
                @filter="(inputValue: any,
                doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'faultOp'
                )"
                ><template v-slot:no-option>
                  <q-item>
                    <q-item-section class="text-grey">
                      ไม่มีข้อมูล
                    </q-item-section>
                  </q-item>
                </template>
              </q-select>
            </div>

            <div v-if="formData.statusResult == 'have_cause'" class="col-3">
              <q-select
                for="#fault"
                outlined
                dense
                ref="causeTextRef"
                v-model="formData.causeText"
                :rules="[(val) => !!val || `${'กรุณาเลือกร้ายแรง/ไม่ร้ายแรง'}`]"
                :options="investigateFactStore.causeTextOptions"
                label="ร้ายแรง/ไม่ร้ายแรง"
                emit-value
                map-options
                option-label="name"
                option-value="id"
                use-input
                ><template v-slot:no-option>
                  <q-item>
                    <q-item-section class="text-grey">
                      ไม่มีข้อมูล
                    </q-item-section>
                  </q-item>
                </template>
              </q-select>
            </div>
          </div>
        </div>
      </div>
      <q-separator />
      <div class="row col-12 q-pa-sm">
        <q-space />
        <q-btn
          id="onSubmit"
          type="submit"
          label="ยืนยันผลการสืบสวน"
          color="secondary"
          ><q-tooltip>ยืนยันผลการสืบสวน</q-tooltip></q-btn
        >
      </div>
    </form>
  </q-card>
</template>
