<script setup lang="ts">
import { ref, reactive } from "vue";
import { useRoute } from "vue-router";

import { useCounterMixin } from "@/stores/mixin";
import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore";
import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";

import DialogHeader from "@/components/DialogHeader.vue";

const route = useRoute();
const mixin = useCounterMixin();
const { dateThaiRange, convertDateToAPI } = mixin;
const store = useDisciplineMainStore();
const complainstStore = useComplainstDataStore();
const investigateStore = useInvestigateFactStore();
const InvestigateDisStore = useInvestigateDisStore();

const props = defineProps({
  getData: Function,
});
const modal = ref<boolean>(false);

/** เปิด popup ค้นหาขั้นสูง */
function onSearch() {
  modal.value = true;

  formComplaint.dateReceived = null;
  formComplaint.respondentType = "";
  formComplaint.offenseDetails = "";
  formComplaint.levelConsideration = "";
  formComplaint.dateConsideration = null;

  formInvestigateFacts.respondentType = "";
  formInvestigateFacts.offenseDetails = "";
  formInvestigateFacts.investigationDetail = "";
  formInvestigateFacts.investigationDate = null;
  formInvestigateFacts.dateReceived = null;
  formInvestigateFacts.investigationStatusResult = "";

  formInvestigateDisciplinary.respondentType = "";
  formInvestigateDisciplinary.offenseDetails = "";
  formInvestigateDisciplinary.disciplinaryFaultLevel = "";
  formInvestigateDisciplinary.disciplinaryCaseFault = "";
  formInvestigateDisciplinary.disciplinaryDate = null;
  formInvestigateDisciplinary.dateReceived = null;

  formResult.respondentType = "";
  formResult.offenseDetails = "";
  formResult.disciplinaryFaultLevel = "";
  formResult.disciplinaryCaseFault = "";
  formResult.disciplinaryDate = null;
  formResult.resultDisciplineType = "";
  formResult.resultTitleType = "";
  formResult.resultOc = "";
  formResult.resultYear = null;
}

/** ปิด popup ค้นหาขั้นสูง */
function onClose() {
  modal.value = false;
}

/** ตัวแปร ค้นหาขั้นสูง เรื่องร้องเรียน*/
const formComplaint = reactive<{
  dateReceived: [Date, Date] | null;
  respondentType: string;
  offenseDetails: string;
  levelConsideration: string;
  dateConsideration: [Date, Date] | null;
}>({
  dateReceived: null, // วันที่รับเรื่องเริ่มต้น[0] - สิ้นสุด[1]
  respondentType: "", // ผู้ถูกร้องเรียน
  offenseDetails: "", // ลักษณะความผิด
  levelConsideration: "", // ระดับการพิจารณา
  dateConsideration: null, // วันที่เริ่มต้น[0] - สิ้นสุดการพิจารณา[1]
});

const formInvestigateFacts = reactive<{
  respondentType: string;
  offenseDetails: string;
  investigationDetail: string;
  investigationDate: [Date, Date] | null;
  dateReceived: [Date, Date] | null;
  investigationStatusResult: string;
}>({
  respondentType: "", // ผู้ถูกสืบสวน
  offenseDetails: "", // ลักษณะความผิด
  investigationDetail: "", // ลักษณะการสืบสวน
  investigationDate: null, // วันที่สืบสวนเริ่มต้น[0] - สิ้นสุด[1]
  dateReceived: null, // วันที่รับเรื่องเริ่มต้น[0] - สิ้นสุด[1]
  investigationStatusResult: "", // ผลการสืบสวน
});

const formInvestigateDisciplinary = reactive<{
  respondentType: string;
  offenseDetails: string;
  disciplinaryFaultLevel: string;
  disciplinaryCaseFault: string;
  disciplinaryDate: [Date, Date] | null;
  dateReceived: [Date, Date] | null;
}>({
  respondentType: "", // ผู้ถูกสอบสวน
  offenseDetails: "", // ลักษณะความผิด
  disciplinaryFaultLevel: "", // ระดับโทษความผิด
  disciplinaryCaseFault: "", // กรณีความผิด
  disciplinaryDate: null, // วันที่สอบสวนเริ่มต้น[0]-สิ้นสุด[1]
  dateReceived: null, // วันที่รับเรื่องเริ่มต้น[0]-สิ้นสุด[1]
});

const formResult = reactive<{
  respondentType: string;
  offenseDetails: string;
  disciplinaryFaultLevel: string;
  disciplinaryCaseFault: string;
  disciplinaryDate: [Date, Date] | null;
  resultDisciplineType: string;
  resultTitleType: string;
  resultOc: string;
  resultYear: number | null;
}>({
  respondentType: "", // ผู้ถูกสอบสวน
  offenseDetails: "", // ลักษณะความผิด
  disciplinaryFaultLevel: "", // ระดับโทษความผิด
  disciplinaryCaseFault: "", // กรณีความผิด
  disciplinaryDate: null, // วันที่สอบสวนเริ่มต้น[0]-สิ้นสุด[1]
  resultDisciplineType: "", // ประเภทวินัย input
  resultTitleType: "", // ประเภทของเรื่อง
  resultOc: "", // หน่วยงาน/ส่วนราชการ
  resultYear: null, // ปีงบประมาณ
});

/** fn ค้นหาขั้นสูง */
function complaintBody() {
  return {
    dateReceivedStart: formComplaint.dateReceived?.[0]
      ? convertDateToAPI(formComplaint.dateReceived[0])
      : null,
    dateReceivedEnd: formComplaint.dateReceived?.[1]
      ? convertDateToAPI(formComplaint.dateReceived[1])
      : null,
    respondentType: formComplaint.respondentType,
    offenseDetails: formComplaint.offenseDetails,
    levelConsideration: formComplaint.levelConsideration,
    dateConsiderationStart: formComplaint.dateConsideration?.[0]
      ? convertDateToAPI(formComplaint.dateConsideration[0])
      : null,
    dateConsiderationEnd: formComplaint.dateConsideration?.[1]
      ? convertDateToAPI(formComplaint.dateConsideration[1])
      : null,
  };
}

function investigateFactsBody() {
  return {
    respondentType: formInvestigateFacts.respondentType,
    offenseDetails: formInvestigateFacts.offenseDetails,
    investigationDetail: formInvestigateFacts.investigationDetail,
    investigationDateStart: formInvestigateFacts.investigationDate?.[0]
      ? convertDateToAPI(formInvestigateFacts.investigationDate[0])
      : null,
    investigationDateEnd: formInvestigateFacts.investigationDate?.[1]
      ? convertDateToAPI(formInvestigateFacts.investigationDate[1])
      : null,
    dateReceivedStart: formInvestigateFacts.dateReceived?.[0]
      ? convertDateToAPI(formInvestigateFacts.dateReceived[0])
      : null,
    dateReceivedEnd: formInvestigateFacts.dateReceived?.[1]
      ? convertDateToAPI(formInvestigateFacts.dateReceived[1])
      : null,
    investigationStatusResult: formInvestigateFacts.investigationStatusResult,
  };
}

function disciplinaryBody() {
  return {
    respondentType: formInvestigateDisciplinary.respondentType,
    offenseDetails: formInvestigateDisciplinary.offenseDetails,
    disciplinaryFaultLevel: formInvestigateDisciplinary.disciplinaryFaultLevel,
    disciplinaryCaseFault:
      formInvestigateDisciplinary.disciplinaryCaseFault.trim(),
    disciplinaryDateStart: formInvestigateDisciplinary.disciplinaryDate?.[0]
      ? convertDateToAPI(formInvestigateDisciplinary.disciplinaryDate[0])
      : null,
    disciplinaryDateEnd: formInvestigateDisciplinary.disciplinaryDate?.[1]
      ? convertDateToAPI(formInvestigateDisciplinary.disciplinaryDate[1])
      : null,
    dateReceivedStart: formInvestigateDisciplinary.dateReceived?.[0]
      ? convertDateToAPI(formInvestigateDisciplinary.dateReceived[0])
      : null,
    dateReceivedEnd: formInvestigateDisciplinary.dateReceived?.[1]
      ? convertDateToAPI(formInvestigateDisciplinary.dateReceived[1])
      : null,
  };
}

function resultBody() {
  return {
    respondentType: formResult.respondentType,
    offenseDetails: formResult.offenseDetails,
    disciplinaryFaultLevel: formResult.disciplinaryFaultLevel,
    disciplinaryCaseFault: formResult.disciplinaryCaseFault.trim(),
    disciplinaryDateStart: formResult.disciplinaryDate?.[0]
      ? convertDateToAPI(formResult.disciplinaryDate[0])
      : null,
    disciplinaryDateEnd: formResult.disciplinaryDate?.[1]
      ? convertDateToAPI(formResult.disciplinaryDate[1])
      : null,
    resultDisciplineType: formResult.resultDisciplineType.trim(),
    resultTitleType: formResult.resultTitleType.trim(),
    resultOc: formResult.resultOc.trim(),
    resultYear: formResult.resultYear,
  };
}

function fnSearch() {
  let body: any;

  switch (route.name) {
    case "disciplineComplaints":
      body = complaintBody();
      break;
    case "disciplineInvestigatefacts":
      body = investigateFactsBody();
      break;
    case "disciplineDisciplinary":
      body = disciplinaryBody();
      break;
    case "disciplineResult":
      body = resultBody();
      break;
  }

  props.getData?.(body);
  onClose();
}
</script>
<template>
  <div>
    <q-btn
      size="12px"
      flat
      round
      color="blue"
      icon="mdi-filter-variant"
      @click="onSearch"
    >
      <q-tooltip>ค้นหาขั้นสูง</q-tooltip>
    </q-btn>
  </div>
  <q-dialog v-model="modal" persistent>
    <q-card class="col-12" style="width: 400px">
      <q-form greedy @submit.prevent @validation-success="fnSearch">
        <DialogHeader :tittle="'ค้นหาขั้นสูง'" :close="onClose" />
        <q-separator />
        <q-card-section>
          <div
            v-if="route.name == 'disciplineComplaints'"
            class="row q-col-gutter-sm"
          >
            <div class="col-12">
              <datepicker
                v-model="formComplaint.dateReceived"
                :locale="'th'"
                autoApply
                borderless
                range
                :enableTimePicker="false"
                week-start="0"
                class=""
                menu-class-name="modalfix"
              >
                <template #year="{ year }">
                  {{ year + 543 }}
                </template>
                <template #year-overlay-value="{ value }">
                  {{ parseInt(value + 543) }}
                </template>
                <template #trigger>
                  <q-input
                    outlined
                    dense
                    class="full-width datepicker"
                    :model-value="
                      formComplaint.dateReceived != null
                        ? dateThaiRange(formComplaint.dateReceived)
                        : null
                    "
                    :label="`${'วันที่รับเรื่องเริ่มต้น-สิ้นสุด'}`"
                  >
                    <template v-slot:prepend>
                      <q-icon
                        name="event"
                        class="cursor-pointer"
                        style="color: var(--q-primary)"
                      >
                      </q-icon>
                    </template>
                    <template v-slot:append>
                      <q-icon
                        v-if="formComplaint.dateReceived !== null"
                        name="clear"
                        class="cursor-pointer"
                        @click.prevent.stop="formComplaint.dateReceived = null"
                      >
                      </q-icon>
                    </template>
                  </q-input>
                </template>
              </datepicker>
            </div>
            <div class="col-12">
              <q-select
                v-model="formComplaint.respondentType"
                :options="store.complainantoptionsMain"
                option-label="name"
                option-value="id"
                outlined
                dense
                map-options
                emit-value
                clearable
                label="ผู้ถูกร้องเรียน"
              >
              </q-select>
            </div>
            <div class="col-12">
              <q-select
                v-model="formComplaint.offenseDetails"
                :options="store.offenseDetailstOptions"
                option-label="name"
                option-value="id"
                outlined
                dense
                map-options
                emit-value
                clearable
                label="ลักษณะความผิด"
              >
              </q-select>
            </div>
            <div class="col-12">
              <q-select
                v-model="formComplaint.levelConsideration"
                :options="complainstStore.levelConsiderationtOptions"
                option-label="name"
                option-value="id"
                outlined
                dense
                map-options
                emit-value
                clearable
                label="ระดับการพิจารณา"
              >
              </q-select>
            </div>
            <div class="col-12">
              <datepicker
                v-model="formComplaint.dateConsideration"
                :locale="'th'"
                autoApply
                borderless
                range
                :enableTimePicker="false"
                week-start="0"
                menu-class-name="modalfix"
              >
                <template #year="{ year }">
                  {{ year + 543 }}
                </template>
                <template #year-overlay-value="{ value }">
                  {{ parseInt(value + 543) }}
                </template>
                <template #trigger>
                  <q-input
                    outlined
                    dense
                    class="full-width datepicker"
                    :model-value="
                      formComplaint.dateConsideration != null
                        ? dateThaiRange(formComplaint.dateConsideration)
                        : null
                    "
                    :label="`${'วันที่เริ่มต้น-สิ้นสุดการพิจารณา'}`"
                  >
                    <template v-slot:prepend>
                      <q-icon
                        name="event"
                        class="cursor-pointer"
                        style="color: var(--q-primary)"
                      >
                      </q-icon>
                    </template>
                    <template v-slot:append>
                      <q-icon
                        v-if="formComplaint.dateConsideration !== null"
                        name="clear"
                        class="cursor-pointer"
                        @click.prevent.stop="
                          formComplaint.dateConsideration = null
                        "
                      >
                      </q-icon>
                    </template>
                  </q-input>
                </template>
              </datepicker>
            </div>
          </div>

          <div
            v-if="route.name == 'disciplineInvestigatefacts'"
            class="row q-col-gutter-sm"
          >
            <div class="col-12">
              <q-select
                v-model="formInvestigateFacts.respondentType"
                :options="store.complainantoptionsMain"
                option-label="name"
                option-value="id"
                outlined
                dense
                map-options
                emit-value
                clearable
                label="ผู้ถูกสืบสวน"
              >
              </q-select>
            </div>
            <div class="col-12">
              <q-select
                v-model="formInvestigateFacts.offenseDetails"
                :options="store.offenseDetailstOptions"
                option-label="name"
                option-value="id"
                outlined
                dense
                map-options
                emit-value
                clearable
                label="ลักษณะความผิด"
              >
              </q-select>
            </div>
            <div class="col-12">
              <q-select
                v-model="formInvestigateFacts.investigationDetail"
                :options="investigateStore.investigationDetailOp"
                option-label="name"
                option-value="id"
                outlined
                dense
                map-options
                emit-value
                clearable
                label="ลักษณะการสืบสวน"
              >
              </q-select>
            </div>

            <div class="col-12">
              <datepicker
                v-model="formInvestigateFacts.investigationDate"
                :locale="'th'"
                autoApply
                borderless
                range
                :enableTimePicker="false"
                week-start="0"
                menu-class-name="modalfix"
              >
                <template #year="{ year }">
                  {{ year + 543 }}
                </template>
                <template #year-overlay-value="{ value }">
                  {{ parseInt(value + 543) }}
                </template>
                <template #trigger>
                  <q-input
                    outlined
                    dense
                    class="full-width datepicker"
                    :model-value="
                      formInvestigateFacts.investigationDate != null
                        ? dateThaiRange(formInvestigateFacts.investigationDate)
                        : null
                    "
                    :label="`${'วันที่สืบสวนเริ่มต้น-สิ้นสุด'}`"
                  >
                    <template v-slot:prepend>
                      <q-icon
                        name="event"
                        class="cursor-pointer"
                        style="color: var(--q-primary)"
                      >
                      </q-icon>
                    </template>
                    <template v-slot:append>
                      <q-icon
                        v-if="formInvestigateFacts.investigationDate !== null"
                        name="clear"
                        class="cursor-pointer"
                        @click.prevent.stop="
                          formInvestigateFacts.investigationDate = null
                        "
                      >
                      </q-icon>
                    </template>
                  </q-input>
                </template>
              </datepicker>
            </div>
            <div class="col-12">
              <datepicker
                v-model="formInvestigateFacts.dateReceived"
                :locale="'th'"
                autoApply
                borderless
                range
                :enableTimePicker="false"
                week-start="0"
                menu-class-name="modalfix"
              >
                <template #year="{ year }">
                  {{ year + 543 }}
                </template>
                <template #year-overlay-value="{ value }">
                  {{ parseInt(value + 543) }}
                </template>
                <template #trigger>
                  <q-input
                    outlined
                    dense
                    class="full-width datepicker"
                    :model-value="
                      formInvestigateFacts.dateReceived != null
                        ? dateThaiRange(formInvestigateFacts.dateReceived)
                        : null
                    "
                    :label="`${'วันที่รับเรื่องเริ่มต้น-สิ้นสุด'}`"
                  >
                    <template v-slot:prepend>
                      <q-icon
                        name="event"
                        class="cursor-pointer"
                        style="color: var(--q-primary)"
                      >
                      </q-icon>
                    </template>
                    <template v-slot:append>
                      <q-icon
                        v-if="formInvestigateFacts.dateReceived !== null"
                        name="clear"
                        class="cursor-pointer"
                        @click.prevent.stop="
                          formInvestigateFacts.dateReceived = null
                        "
                      >
                      </q-icon>
                    </template>
                  </q-input>
                </template>
              </datepicker>
            </div>
            <div class="col-12">
              <q-select
                v-model="formInvestigateFacts.investigationStatusResult"
                :options="store.statusResultOptions"
                option-label="name"
                option-value="id"
                outlined
                dense
                map-options
                emit-value
                clearable
                label="ผลการสืบสวน"
              >
              </q-select>
            </div>
          </div>

          <div
            v-if="route.name == 'disciplineDisciplinary'"
            class="row q-col-gutter-sm"
          >
            <div class="col-12">
              <q-select
                v-model="formInvestigateDisciplinary.respondentType"
                :options="store.complainantoptionsMain"
                option-label="name"
                option-value="id"
                outlined
                dense
                map-options
                emit-value
                clearable
                label="ผู้ถูกสอบสวน"
              >
              </q-select>
            </div>
            <div class="col-12">
              <q-select
                v-model="formInvestigateDisciplinary.offenseDetails"
                :options="store.offenseDetailstOptions"
                option-label="name"
                option-value="id"
                outlined
                dense
                map-options
                emit-value
                clearable
                label="ลักษณะความผิด"
              >
              </q-select>
            </div>
            <div class="col-12">
              <q-select
                v-model="formInvestigateDisciplinary.disciplinaryFaultLevel"
                :options="InvestigateDisStore.optionsfaultLevel"
                option-label="name"
                option-value="id"
                outlined
                dense
                map-options
                emit-value
                clearable
                label="ระดับโทษความผิด"
              >
              </q-select>
            </div>
            <div class="col-12">
              <q-input
                v-model="formInvestigateDisciplinary.disciplinaryCaseFault"
                dense
                outlined
                label="กรณีความผิด"
              ></q-input>
            </div>
            <div class="col-12">
              <datepicker
                v-model="formInvestigateDisciplinary.disciplinaryDate"
                :locale="'th'"
                autoApply
                borderless
                range
                :enableTimePicker="false"
                week-start="0"
                menu-class-name="modalfix"
              >
                <template #year="{ year }">
                  {{ year + 543 }}
                </template>
                <template #year-overlay-value="{ value }">
                  {{ parseInt(value + 543) }}
                </template>
                <template #trigger>
                  <q-input
                    outlined
                    dense
                    class="full-width datepicker"
                    :model-value="
                      formInvestigateDisciplinary.disciplinaryDate != null
                        ? dateThaiRange(
                            formInvestigateDisciplinary.disciplinaryDate
                          )
                        : null
                    "
                    :label="`${'วันที่สอบสวนเริ่มต้น-สิ้นสุด'}`"
                  >
                    <template v-slot:prepend>
                      <q-icon
                        name="event"
                        class="cursor-pointer"
                        style="color: var(--q-primary)"
                      >
                      </q-icon>
                    </template>
                    <template v-slot:append>
                      <q-icon
                        v-if="
                          formInvestigateDisciplinary.disciplinaryDate !== null
                        "
                        name="clear"
                        class="cursor-pointer"
                        @click.prevent.stop="
                          formInvestigateDisciplinary.disciplinaryDate = null
                        "
                      >
                      </q-icon>
                    </template>
                  </q-input>
                </template>
              </datepicker>
            </div>
            <div class="col-12">
              <datepicker
                v-model="formInvestigateDisciplinary.dateReceived"
                :locale="'th'"
                autoApply
                borderless
                range
                :enableTimePicker="false"
                week-start="0"
                menu-class-name="modalfix"
              >
                <template #year="{ year }">
                  {{ year + 543 }}
                </template>
                <template #year-overlay-value="{ value }">
                  {{ parseInt(value + 543) }}
                </template>
                <template #trigger>
                  <q-input
                    outlined
                    dense
                    class="full-width datepicker"
                    :model-value="
                      formInvestigateDisciplinary.dateReceived != null
                        ? dateThaiRange(
                            formInvestigateDisciplinary.dateReceived
                          )
                        : null
                    "
                    :label="`${'วันที่รับเรื่องเริ่มต้น-สิ้นสุด'}`"
                  >
                    <template v-slot:prepend>
                      <q-icon
                        name="event"
                        class="cursor-pointer"
                        style="color: var(--q-primary)"
                      >
                      </q-icon>
                    </template>
                    <template v-slot:append>
                      <q-icon
                        v-if="formInvestigateDisciplinary.dateReceived !== null"
                        name="clear"
                        class="cursor-pointer"
                        @click.prevent.stop="
                          formInvestigateDisciplinary.dateReceived = null
                        "
                      >
                      </q-icon>
                    </template>
                  </q-input>
                </template>
              </datepicker>
            </div>
          </div>
          <div
            v-if="route.name == 'disciplineResult'"
            class="row q-col-gutter-sm"
          >
            <div class="col-12">
              <q-select
                v-model="formResult.respondentType"
                :options="store.complainantoptionsMain"
                option-label="name"
                option-value="id"
                outlined
                dense
                map-options
                emit-value
                clearable
                label="ผู้ถูกสอบสวน"
              >
              </q-select>
            </div>
            <div class="col-12">
              <q-select
                v-model="formResult.offenseDetails"
                :options="store.offenseDetailstOptions"
                option-label="name"
                option-value="id"
                outlined
                dense
                map-options
                emit-value
                clearable
                label="ลักษณะความผิด"
              >
              </q-select>
            </div>
            <div class="col-12">
              <q-select
                v-model="formResult.disciplinaryFaultLevel"
                :options="InvestigateDisStore.optionsfaultLevel"
                option-label="name"
                option-value="id"
                outlined
                dense
                map-options
                emit-value
                clearable
                label="ระดับโทษความผิด"
              >
              </q-select>
            </div>
            <div class="col-12">
              <q-input
                v-model="formResult.disciplinaryCaseFault"
                dense
                outlined
                label="กรณีความผิด"
              ></q-input>
            </div>
            <div class="col-12">
              <datepicker
                v-model="formResult.disciplinaryDate"
                :locale="'th'"
                autoApply
                borderless
                range
                :enableTimePicker="false"
                week-start="0"
                menu-class-name="modalfix"
              >
                <template #year="{ year }">
                  {{ year + 543 }}
                </template>
                <template #year-overlay-value="{ value }">
                  {{ parseInt(value + 543) }}
                </template>
                <template #trigger>
                  <q-input
                    outlined
                    dense
                    class="full-width datepicker"
                    :model-value="
                      formResult.disciplinaryDate != null
                        ? dateThaiRange(formResult.disciplinaryDate)
                        : null
                    "
                    :label="`${'วันที่สอบสวนเริ่มต้น-สิ้นสุด'}`"
                  >
                    <template v-slot:prepend>
                      <q-icon
                        name="event"
                        class="cursor-pointer"
                        style="color: var(--q-primary)"
                      >
                      </q-icon>
                    </template>
                    <template v-slot:append>
                      <q-icon
                        v-if="formResult.disciplinaryDate !== null"
                        name="clear"
                        class="cursor-pointer"
                        @click.prevent.stop="formResult.disciplinaryDate = null"
                      >
                      </q-icon>
                    </template>
                  </q-input>
                </template>
              </datepicker>
            </div>
            <div class="col-12">
              <q-input
                v-model="formResult.resultDisciplineType"
                dense
                outlined
                label="ประเภทวินัย"
              ></q-input>
            </div>
            <div class="col-12">
              <q-input
                v-model="formResult.resultTitleType"
                dense
                outlined
                label="ประเภทของเรื่อง"
              ></q-input>
            </div>
            <div class="col-12">
              <q-input
                v-model="formResult.resultOc"
                dense
                outlined
                label="หน่วยงาน/ส่วนราชการ"
              ></q-input>
            </div>
            <div class="col-12">
              <datepicker
                v-model="formResult.resultYear"
                class="col-2"
                :locale="'th'"
                autoApply
                year-picker
                :enableTimePicker="false"
              >
                <template #year="{ year }">{{ year + 543 }}</template>
                <template #year-overlay-value="{ value }">{{
                  parseInt(value + 543)
                }}</template>
                <template #trigger>
                  <q-input
                    dense
                    outlined
                    :model-value="
                      formResult.resultYear === null
                        ? null
                        : Number(formResult.resultYear) + 543
                    "
                    :label="`${'ปีงบประมาณ'}`"
                  >
                    <template v-slot:prepend>
                      <q-icon
                        name="event"
                        class="cursor-pointer"
                        style="color: var(--q-primary)"
                      >
                      </q-icon>
                    </template>
                    <template v-slot:append>
                      <q-icon
                        v-if="formResult.resultYear !== null"
                        name="clear"
                        class="cursor-pointer"
                        @click.prevent.stop="formResult.resultYear = null"
                      >
                      </q-icon>
                    </template>
                  </q-input>
                </template>
              </datepicker>
            </div>
          </div>
        </q-card-section>
        <q-separator />
        <q-card-actions align="right">
          <q-btn label="ค้นหา" color="secondary" type="submit"
            ><q-tooltip>ค้นหา</q-tooltip></q-btn
          >
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>
