<script setup lang="ts">
import { ref, watch, reactive, type PropType } from "vue";
import { useQuasar } from "quasar";

import http from "@/plugins/http";
import config from "@/app.config";
import { useProfileDataStore } from "@/modules/05_placement/store";
import { useCounterMixin } from "@/stores/mixin";

import type {
  DataOption,
  Information,
} from "@/modules/05_placement/components/PersonalDetail/profileType";

const $q = useQuasar();
const mixin = useCounterMixin();
const profileStore = useProfileDataStore();
const { changeRetireText, changeBirth } = profileStore;
const { showLoader, hideLoader, messageError, dateToISO, date2Thai } = mixin;

const informaData = defineModel<Information>("formInformations", {
  required: true,
});
const age = defineModel<boolean>("age", { required: true });
const props = defineProps({
  Ops: {
    type: Object as PropType<any>,
  },
  OpsFilter: {
    type: Object as PropType<any>,
  },
});

/**
 * ฟังก์เลือกวันเดือนปีเกิด
 * @param modelData วันเดือนปีเกิด
 */
async function handleDate(modelData: Date) {
  informaData.value.dateOfBirth = modelData;
  await calRetire(modelData);
}

/**
 * ฟังก์ชันคำนวนวันเกษียณอายุราชการ
 * @param birth  วันเดือนปีเกิด
 */
async function calRetire(birth: Date) {
  const body = {
    birthDate: dateToISO(birth),
  };
  showLoader();
  await http
    .post(config.API.profileCalRetire, body)
    .then((res: any) => {
      const data = res.data.result;
      informaData.value.age = data.age;
      changeRetireText(data.retireDate);
      age.value = true;
    })
    .catch((e: any) => {
      age.value = false;
      messageError($q, e);
      const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
      changeRetireText(date2Thai(retire));
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * ฟังก์ชันค้นหาข้อมูลในรายการตัวเลือก
 * @param val คำค้นหา
 * @param update ฟังก์ชัน
 * @param refData ประเภทของตัวเลือก
 */
function filterSelector(val: string, update: Function, refData: string) {
  switch (refData) {
    case "prefixOps":
      update(() => {
        props.Ops.prefixOps = props.OpsFilter.prefixOps.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "genderOps":
      update(() => {
        props.Ops.genderOps = props.OpsFilter.genderOps.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "bloodOps":
      update(() => {
        props.Ops.bloodOps = props.OpsFilter.bloodOps.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "statusOps":
      update(() => {
        props.Ops.statusOps = props.OpsFilter.statusOps.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "religionOps":
      update(() => {
        props.Ops.religionOps = props.OpsFilter.religionOps.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "employeeClassOps":
      update(() => {
        props.Ops.employeeClassOps = props.OpsFilter.employeeClassOps.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "employeeTypeOps":
      update(() => {
        props.Ops.employeeTypeOps = props.OpsFilter.employeeTypeOps.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;

    default:
      break;
  }
}
</script>
<template>
  <div class="row q-col-gutter-sm">
    <div class="col-12 text-tooltip text-weight-medium">ข้อมูลส่วนตัว</div>
    <div class="col-xs-6 col-sm-3 col-md-3">
      <q-input
        class="inputgreen"
        hide-bottom-space
        dense
        lazy-rules
        readonly
        outlined
        v-model="informaData.idCard"
        maxlength="13"
        :rules="[
              (val:string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
              (val:string) =>
                val.length >= 13 ||
                `${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
            ]"
        label="เลขประจำตัวประชาชน"
        mask="#############"
      />
    </div>
    <div class="col-xs-6 col-sm-3 col-md-3">
      <q-select
        hide-bottom-space
        class="inputgreen"
        :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
        outlined
        dense
        lazy-rules
        v-model="informaData.prefixId"
        emit-value
        map-options
        option-label="name"
        :options="Ops.prefixOps"
        option-value="id"
        :label="`${'คำนำหน้า'}`"
        use-input
        input-debounce="0"
        @filter="(inputValue:string,
                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
                      ) "
      />
    </div>
    <div class="col-xs-6 col-sm-3 col-md-3">
      <q-input
        class="inputgreen"
        hide-bottom-space
        outlined
        dense
        lazy-rules
        v-model="informaData.firstname"
        :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
        :label="`${'ชื่อ'}`"
      />
    </div>
    <div class="col-xs-6 col-sm-3 col-md-3">
      <q-input
        class="inputgreen"
        hide-bottom-space
        outlined
        dense
        lazy-rules
        v-model="informaData.lastname"
        :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
        :label="`${'นามสกุล'}`"
      />
    </div>
    <div class="col-xs-6 col-sm-3 col-md-3">
      <datepicker
        v-model="informaData.dateOfBirth"
        :locale="'th'"
        autoApply
        :enableTimePicker="false"
        week-start="0"
        :max-date="new Date()"
        @update:model-value="handleDate"
      >
        <template #year="{ year }">
          {{ year + 543 }}
        </template>
        <template #year-overlay-value="{ value }">
          {{ parseInt(value + 543) }}
        </template>
        <template #trigger>
          <q-input
            class="inputgreen"
            hide-bottom-space
            outlined
            dense
            :model-value="
              informaData.dateOfBirth ? date2Thai(informaData.dateOfBirth) : ''
            "
            :rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
            :label="`${'วัน/เดือน/ปี เกิด'}`"
          >
            <template v-slot:prepend>
              <q-icon
                name="event"
                class="cursor-pointer"
                style="color: var(--q-primary)"
              >
              </q-icon>
            </template>
          </q-input>
        </template>
      </datepicker>
    </div>
    <div class="col-xs-6 col-sm-3 col-md-3">
      <q-input
        class="inputgreen"
        hide-bottom-space
        dense
        lazy-rules
        readonly
        borderless
        style="padding: 0 12px"
        :model-value="informaData.age"
        :label="`${'อายุ'}`"
      />
    </div>
    <div class="col-xs-6 col-sm-3 col-md-3">
      <q-select
        hide-bottom-space
        class="inputgreen"
        :rules="[(val:string) => !!val || `${'กรุณาเลือก เพศ'}`]"
        outlined
        dense
        lazy-rules
        v-model="informaData.genderId"
        emit-value
        map-options
        option-label="name"
        :options="Ops.genderOps"
        option-value="id"
        :label="`${'เพศ'}`"
        use-input
        input-debounce="0"
        @filter="(inputValue:string,
                      doneFn:Function) => filterSelector(inputValue, doneFn,'genderOps'
                      ) "
      />
    </div>
    <div class="col-xs-6 col-sm-3 col-md-3">
      <q-select
        hide-bottom-space
        class="inputgreen"
        :rules="[(val:string) => !!val || `${'กรุณาเลือก สถานภาพ'}`]"
        outlined
        dense
        lazy-rules
        v-model="informaData.relationshipId"
        emit-value
        map-options
        option-label="name"
        :options="Ops.statusOps"
        option-value="id"
        :label="`${'สถานภาพ'}`"
        use-input
        input-debounce="0"
        @filter="(inputValue:string,
                      doneFn:Function) => filterSelector(inputValue, doneFn,'statusOps'
                      ) "
      />
    </div>
    <div class="col-xs-6 col-sm-3 col-md-3">
      <q-select
        hide-bottom-space
        class="inputgreen"
        outlined
        dense
        lazy-rules
        v-model="informaData.bloodGroupId"
        emit-value
        map-options
        option-label="name"
        :options="Ops.bloodOps"
        option-value="id"
        :label="`${'หมู่เลือด'}`"
        use-input
        input-debounce="0"
        @filter="(inputValue:string,
                      doneFn:Function) => filterSelector(inputValue, doneFn,'bloodOps'
                      ) "
      />
    </div>
    <div class="col-xs-6 col-sm-3 col-md-3">
      <q-input
        class="inputgreen"
        outlined
        dense
        v-model="informaData.nationality"
        :label="`${'สัญชาติ'}`"
      />
    </div>
    <div class="col-xs-6 col-sm-3 col-md-3">
      <q-input
        class="inputgreen"
        outlined
        dense
        v-model="informaData.race"
        :label="`${'เชื้อชาติ'}`"
      />
    </div>
    <div class="col-xs-6 col-sm-3 col-md-3">
      <q-select
        hide-bottom-space
        class="inputgreen"
        :rules="[(val:string) => !!val || `${'กรุณาเลือก ศาสนา'}`]"
        outlined
        dense
        lazy-rules
        v-model="informaData.religionId"
        emit-value
        map-options
        option-label="name"
        :options="Ops.religionOps"
        option-value="id"
        :label="`${'ศาสนา'}`"
        use-input
        input-debounce="0"
        @filter="(inputValue:string,
                      doneFn:Function) => filterSelector(inputValue, doneFn,'religionOps'
                      ) "
      />
    </div>
    <div class="col-xs-6 col-sm-3 col-md-3">
      <q-input
        hide-bottom-space
        outlined
        dense
        lazy-rules
        type="tel"
        class="inputgreen"
        v-model="informaData.telephone"
        :label="`${'เบอร์โทร'}`"
        mask="##########"
      />
    </div>
  </div>
</template>
