<script setup lang="ts">
import { ref, watch, onMounted } from "vue";
import { QForm, useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";

/** impotrType */
import type { DataOption } from "@/modules/04_registry/components/profileType";

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

/** impotrStores */
import { useCounterMixin } from "@/stores/mixin";
import { useBrrowDataStore } from "@/modules/07_insignia/storeBrrow";

const $q = useQuasar();
const myForm = ref<QForm>();

const DataStore = useBrrowDataStore();
const mixin = useCounterMixin();
const {
  date2Thai,
  dialogConfirm,
  success,
  messageError,
  showLoader,
  hideLoader,
  notifyError,
} = mixin;

const brand = ref<string>("");
const roundNo = ref<string | undefined>("");
const cardid = ref<string>("");
const OrganazationId = ref<string>("");
const fullName = ref<string>("");
const receivedate = ref<Date | null>();
const returndate = ref<Date | null>();
const reason = ref<string>("");
const listPerson = ref<any>([]);
const OrgList = ref<DataOption[]>([]);
const filterOrgList = ref<any>([]);
const insigniaNoteProfileId = ref<string>("");
const filterSelectRound = ref<any>();
const selectRound = ref<any>();
const type = ref<any>(DataStore.type);

const props = defineProps({
  modal: Boolean,
  save: {
    type: Function,
    default: () => console.log("not function"),
  },
  close: {
    type: Function,
    default: () => console.log("not function"),
  },
  closeAndFecth: {
    type: Function,
    default: () => console.log("not function"),
  },
  roundId: {
    type: String,
  },
  action: {
    type: String,
  },
  typeId: {
    type: String,
  },
  selectRoundOption: {
    type: Array,
  },
  filterSelectRoundOption: {
    type: Array,
  },
  profileId: {
    type: String,
    default: "",
  },
  type: {
    type: Array,
  },
});

/** function เคลียร์ข้อมูลในฟอร์ม*/
function clearData() {
  receivedate.value = null;
  returndate.value = null;
  OrganazationId.value = "";
  roundNo.value = "";
  cardid.value = "";
  fullName.value = "";
  brand.value = "";
  reason.value = "";
}

/** function เรียกข้อมูลรายการเครื่องราช */
async function fecthlistInsignia() {
  if (roundNo.value !== "" && roundNo.value !== null) {
    showLoader();
    let data = {
      insigniaTypeId: props.typeId,
      insigniaNoteId: roundNo.value,
      insigniaId: "",
    };
    await http
      .post(config.API.noteSearch(), data)
      .then((res) => {
        listPerson.value = res.data.result;
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        cardid.value = "";
        fullName.value = "";
        brand.value = "";
        OrganazationId.value = "";
        reason.value = "";
        hideLoader();
      });
  }
}

/** function ดึงข้อมูลรายการหน่วยงาน */
async function fetchOrgList() {
  showLoader();
  await http
    .get(config.API.typeOc())
    .then(async (response: any) => {
      const orgArr = response.data.result.map((e: any) => ({
        id: e.organizationId,
        name: e.organizationName,
      }));
      OrgList.value = orgArr;
      filterOrgList.value = OrgList.value;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

// ดึงข้อมูลการยืม-คืนมาแสดงเก็บไว้ก่อนเผื่อต้องเอาข้อมูลมาแสดงเพิ่ม
// const fetchData = async () => {
//   showLoader();
//   await http
//     .get(config.API.insigniaManageBorrowById(props.profileId))
//     .catch((err) => {
//       messageError($q, err);
//     })
//     .finally(() => {
//       hideLoader();
//     });
// };

// บันทึกข้อมูลการยืม-คืน

/** function บันทึกการเพิ่มข้อมูล*/
async function clickSave() {
  await myForm.value!.validate().then((result: boolean) => {
    if (result) {
      dialogConfirm($q, async () => {
        if (props.action == "addData") {
          await http
            .post(config.API.insigniaManageBorrow(), {
              borrowDate: receivedate.value,
              // borrowOrganizationId: OrganazationId.value,
              insigniaNoteProfileId: insigniaNoteProfileId.value,
            })
            .then(() => {
              success($q, "บันทึกข้อมูลสำเร็จ");
            })
            .catch((err) => {
              messageError($q, err);
            })
            .finally(() => {
              clearData();
              props.closeAndFecth();
            });
        } else {
          await http
            .put(config.API.insigniaManageBorrowReturn(props.profileId), {
              returnDate: returndate.value,
              returnOrganizationId: OrganazationId.value,
              returnReason: reason.value,
            })
            .then(() => {
              success($q, "บันทึกข้อมูลสำเร็จ");
            })
            .catch((err) => {
              messageError($q, err);
            })
            .finally(() => {
              clearData();
              props.closeAndFecth();
            });
        }
      });
    }
  });
}

/** function ค้นหาคนจากเลขประจำตัวประชาชน*/
async function searchcardid() {
  if (cardid.value.length === 13) {
    showLoader();
    const node = await listPerson.value.find(
      (e: any) => e.citizenId === cardid.value
    );

    if (node) {
      fullName.value = ` ${node.fullName}`;
      brand.value = `${node.requestInsignia} (${
        type.value.find((item: any) => item.name === node.requestInsignia)
          ?.shortName || ""
      })`;
      insigniaNoteProfileId.value = node.id;
      insigniaNoteProfileId.value = node.id;
      hideLoader();
    } else {
      notifyError($q, "ไม่พบข้อมูลการได้รับในรอบนี้");
      fullName.value = "";
      brand.value = "";
      OrganazationId.value = "";
      reason.value = "";
      hideLoader();
    }
  } else {
    fullName.value = "";
    brand.value = "";
    receivedate.value = null
    // OrganazationId.value = "";
  }
}

/** function closePopup*/
function closeDialog() {
  clearData();
  props.close();
}


/** function reset วันที่คืน*/
function clearReturnDate() {
  returndate.value = null;
}

/**
 * function ค้นหาข้อมูลใน option
 * @param val คำค้นหา
 * @param update function
 * @param name ชื่อ Selec
 */
function filterSelector(val: any, update: Function, name: any) {
  update(() => {
    const needle = val.toLowerCase();
    if (name === "filterOrgList") {
      OrganazationId.value = "";
      filterOrgList.value = OrgList.value.filter(
        (v: any) => v.name.toLowerCase().indexOf(needle) > -1
      );
    }
    if (name === "filterSelectRoundOption") {
      roundNo.value = "";
      filterSelectRound.value = selectRound.value.filter(
        (v: any) => v.name.toLowerCase().indexOf(needle) > -1
      );
    }
  });
}

/** function setValue*/
const setValue = () => {
  filterSelectRound.value = props.filterSelectRoundOption;
  selectRound.value = props.selectRoundOption;
};

/** Hook*/
onMounted(() => {
  setValue();
});

/** function callback  เช็ค props ถ้าเปิด dialog ให้ดึงรายการข้อมูล */
watch(props, () => {
  // type.value = props.type;
  if (props.modal == true && props.roundId != "all") {
    roundNo.value = props.roundId;
    fecthlistInsignia();
    fetchOrgList();
  }
});
</script>

<template>
  <q-dialog v-model="props.modal" persistent>
    <q-card style="min-width: 900px">
      <DialogHeader tittle="ยืม-คืนเครื่องราชฯ" :close="closeDialog" />
      <q-separator />

      <q-form ref="myForm">
        <div class="q-pa-md bg-grey-1">
          <div
            class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
          >
            <div
              v-if="props.action === 'addData'"
              class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
            >
              <div class="col-6">
                <q-select
                  v-model="roundNo"
                  dense
                  outlined
                  lazy-rules
                  hide-bottom-space
                  :label="`${'รอบการขอเครื่องราชฯ'}`"
                  emit-value
                  map-options
                  use-input
                  option-label="name"
                  :options="filterSelectRound"
                  option-value="id"
                  :readonly="false"
                  :borderless="false"
                  style="min-width: 150px"
                  :rules="[(val) => !!val || 'กรุณาเลือกรอบการขอเครื่องราชฯ']"
                  @update:model-value="fecthlistInsignia()"
                  @filter="(inputValue:any,
                      doneFn:Function) => filterSelector(inputValue, doneFn,'filterSelectRoundOption'
                      ) "
                />
              </div>
              <div class="col-12 q-mt-md text-weight-bold text-grey-7">
                ข้อมูลผู้ยืม
              </div>
              <div class="col-xs-12 col-sm-6">
                <q-input
                  :disable="roundNo == ''"
                  hide-bottom-space
                  outlined
                  class="inputgreen"
                  v-model="cardid"
                  dense
                  lazy-rules
                  :rules="[
                    (val: string) => !!val || `${'กรุณากรอกเลขประจำตัวประชาชน'}`,
                    (val: string) =>
                      val.length >= 13 ||
                      `${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
                  ]"
                  label="เลขประจำตัวประชาชน"
                  maxlength="13"
                  mask="#############"
                  @keyup="searchcardid"
                />
              </div>
              <div class="col-xs-6 col-sm-6">
                <q-input
                  readonly
                  hide-bottom-space
                  outlined
                  dense
                  lazy-rules
                  class="inputgreen"
                  borderless
                  v-model="fullName"
                  :label="`${'ชื่อ-นามสกุล'}`"
                  :rules="[
                    (val) =>
                      !!val ||
                      'ชื่อ-นามสกุลต้องไม่ว่าง กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง',
                  ]"
                />
              </div>

              <div class="col-12 q-mt-md text-weight-bold text-grey-7">
                รายละเอียดการยืมเครื่องราชฯ
              </div>
              <div class="col-xs-12 col-sm-6">
                <q-input
                  :rules="[(val) => !!val || 'กรุณาเลือกเครื่องราชฯ']"
                  v-model="brand"
                  disable
                  dense
                  outlined
                  lazy-rules
                  hide-bottom-space
                  :label="`${'เครื่องราชฯ'}`"
                />
              </div>
              <div class="col-xs-12 col-sm-6">
                <datepicker
                  menu-class-name="modalfix"
                  v-model="receivedate"
                  :locale="'th'"
                  autoApply
                  borderless
                  :enableTimePicker="false"
                  week-start="0"
                >
                  <template #year="{ year }">
                    {{ year + 543 }}
                  </template>
                  <template #year-overlay-value="{ value }">
                    {{ parseInt(value + 543) }}
                  </template>
                  <template #trigger>
                    <q-input
                      dense
                      borderless
                      outlined
                      :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
                      hide-bottom-space
                      :model-value="
                        receivedate != null ? date2Thai(receivedate) : undefined
                      "
                      :label="`${'วันที่ยืม'}`"
                    >
                    <template v-if="receivedate" v-slot:append>
                      <q-icon
                        name="cancel"
                        @click.stop.prevent="receivedate = null"
                        class="cursor-pointer"
                      />
                    </template>
                    </q-input>
                  </template>
                </datepicker>
              </div>

              <!-- <div class="col-xs-12 col-sm-6">
                <q-select
                  hide-bottom-space
                  :options="filterOrgList"
                  dense
                  borderless
                  option-label="name"
                  option-value="id"
                  emit-value
                  use-input
                  map-options
                  outlined
                  v-model="OrganazationId"
                  lazy-rules
                  :label="`เลือกหน่วยงาน`"
                  :rules="[(val) => !!val || 'กรุณาเลือกหน่วยงาน']"
                  @filter="(inputValue:any,
                      doneFn:Function) => filterSelector(inputValue, doneFn,'filterOrgList'
                      ) "
                />
              </div> -->
            </div>

            <div
              class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
              v-if="props.action === 'editData'"
            >
              <div class="col-12 text-weight-bold text-grey-7">
                รายละเอียดการคืนเครื่องราชฯ
              </div>
              <div class="col-xs-12 col-sm-6">
                <datepicker
                  menu-class-name="modalfix"
                  v-model="returndate"
                  :locale="'th'"
                  autoApply
                  borderless
                  :enableTimePicker="false"
                  week-start="0"
                >
                  <template #year="{ year }">
                    {{ year + 543 }}
                  </template>
                  <template #year-overlay-value="{ value }">
                    {{ parseInt(value + 543) }}
                  </template>
                  <template #trigger>
                    <q-input
                      dense
                      borderless
                      outlined
                      lazy-rules
                      :rules="[(val) => !!val || 'กรุณาเลือกวันที่คืน']"
                      hide-bottom-space
                      :model-value="
                        returndate != null ? date2Thai(returndate) : undefined
                      "
                      :label="`${'วันที่คืน'}`"
                      clearable
                      @clear="clearReturnDate"
                    >
                      <template v-slot:prepend>
                        <q-icon
                          name="event"
                          class="cursor-pointer"
                          color="primary"
                        >
                        </q-icon>
                      </template>
                    </q-input>
                  </template>
                </datepicker>
              </div>

              <!-- <div class="col-xs-12 col-sm-6">
                <q-select
                  hide-bottom-space
                  :options="filterOrgList"
                  dense
                  lazy-rules
                  borderless
                  option-label="name"
                  option-value="id"
                  emit-value
                  map-options
                  outlined
                  use-input
                  v-model="OrganazationId"
                  :label="`เลือกหน่วยงานที่ส่งคืน`"
                  :rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่คืน']"
                  @filter="(inputValue:any,
                      doneFn:Function) => filterSelector(inputValue, doneFn,'filterOrgList'
                      ) "
                />
              </div> -->

              <div class="col-12">
                <q-input
                  type="textarea"
                  hide-bottom-space
                  dense
                  borderless
                  option-label="name"
                  option-value="id"
                  emit-value
                  map-options
                  lazy-rules
                  outlined
                  v-model="reason"
                  :label="`สาเหตุที่ส่งคืนเครื่องราชอิสริยาภรณ์`"
                />
              </div>
            </div>
          </div>
        </div>
      </q-form>

      <q-separator />
      <div class="q-pa-md">
        <div class="row justify-end">
          <q-btn label="บันทึก" @click="clickSave" color="public">
            <q-tooltip>บันทึก</q-tooltip>
          </q-btn>
        </div>
      </div>
    </q-card>
  </q-dialog>
</template>
