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

import type { DataOption } from "@/modules/05_placement/components/PersonalDetail/profileType";
import type { Family } from "@/modules/05_placement/interface/index/Main";

const familyData = defineModel<Family>("familyData", { required: true });
const props = defineProps({
  Ops: {
    type: Object as PropType<any>,
  },
  OpsFilter: {
    type: Object as PropType<any>,
  },
});

/**
 * ฟังก์ชันค้นหาข้อมูลในรายการตัวเลือก
 * @param val คำค้นหา
 * @param update ฟังก์ชัน
 * @param refData ประเภทของตัวเลือก
 */
function filterSelector(val: string, update: Function, refData: string) {
  update(() => {
    props.Ops[`${refData}`] = props.OpsFilter[`${refData}`].filter(
      (v: DataOption) => v.name.indexOf(val) > -1
    );
  });
}

/**
 * ฟังก์ชันเลือกคู่สมรส
 * @param e มี, ไม่มีคู่สมรส
 */
function selectRadio(e: boolean) {
  if (e) {
    familyData.value.marryPrefixId = "";
    familyData.value.marryFirstName = "";
    familyData.value.marryLastName = "";
    familyData.value.marryOccupation = "";
  }
}
</script>
<template>
  <div class="row q-col-gutter-sm">
    <div class="col-12 text-tooltip text-weight-medium">ข้อมูลครอบครัว</div>
    <div class="col-xs-12 text-weight-bold">• บิดา</div>
    <div class="col-xs-12 col-sm-3 col-md-3">
      <selector
        hide-bottom-space
        class="inputgreen"
        :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
        outlined
        dense
        lazy-rules
        v-model="familyData.fatherPrefixId"
        emit-value
        map-options
        option-label="name"
        :options="Ops.prefixOps"
        option-value="id"
        :label="`${'คำนำหน้า'}`"
        use-input
        input-debounce="0"
        @filter="(inputValue:any,
                      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="familyData.fatherFirstName"
        :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="familyData.fatherLastName"
        :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
        :label="`${'นามสกุล'}`"
      />
    </div>
    <div class="col-xs-12 col-sm-3 col-md-3">
      <q-input
        class="inputgreen"
        hide-bottom-space
        outlined
        dense
        lazy-rules
        v-model="familyData.fatherOccupation"
        :label="`${'อาชีพ'}`"
      />
    </div>

    <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
    <div class="col-xs-12 text-weight-bold">• มารดา</div>
    <div class="col-xs-12 col-sm-3 col-md-3">
      <selector
        hide-bottom-space
        class="inputgreen"
        :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
        outlined
        dense
        lazy-rules
        v-model="familyData.motherPrefixId"
        emit-value
        map-options
        option-label="name"
        :options="Ops.prefixOps"
        option-value="id"
        :label="`${'คำนำหน้า'}`"
        use-input
        input-debounce="0"
        @filter="(inputValue:any,
                      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="familyData.motherFirstName"
        :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="familyData.motherLastName"
        :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
        :label="`${'นามสกุล'}`"
      />
    </div>
    <div class="col-xs-12 col-sm-3 col-md-3">
      <q-input
        class="inputgreen"
        hide-bottom-space
        outlined
        dense
        lazy-rules
        v-model="familyData.motherOccupation"
        :label="`${'อาชีพ'}`"
      />
    </div>
    <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
    <div class="col-xs-12 q-col-gutter-x-sm items-center flex q-my-sm">
      <label class="text-weight-bold">• คู่สมรส</label>
      <q-radio
        v-model="familyData.couple"
        checked-icon="task_alt"
        unchecked-icon="panorama_fish_eye"
        val="1"
        label="มี"
        dense
        @update:model-value="selectRadio"
      />
      <q-radio
        v-model="familyData.couple"
        checked-icon="task_alt"
        unchecked-icon="panorama_fish_eye"
        val="0"
        label="ไม่มี"
        dense
        @update:model-value="selectRadio"
      />
    </div>

    <div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.couple == '1'">
      <selector
        hide-bottom-space
        class="inputgreen"
        :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
        outlined
        dense
        lazy-rules
        v-model="familyData.marryPrefixId"
        emit-value
        map-options
        option-label="name"
        :options="Ops.prefixOps"
        option-value="id"
        :label="`${'คำนำหน้า'}`"
        use-input
        input-debounce="0"
        @filter="(inputValue:any,
                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
                      ) "
      />
    </div>

    <div class="col-xs-6 col-sm-3 col-md-3" v-if="familyData.couple == '1'">
      <q-input
        class="inputgreen"
        hide-bottom-space
        outlined
        dense
        lazy-rules
        v-model="familyData.marryFirstName"
        :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
        :label="`${'ชื่อ'}`"
      />
    </div>
    <div class="col-xs-6 col-sm-2 col-md-2" v-if="familyData.couple == '1'">
      <q-input
        class="inputgreen"
        hide-bottom-space
        outlined
        dense
        lazy-rules
        v-model="familyData.marryLastName"
        :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
        :label="`${'นามสกุล'}`"
      />
    </div>
    <div class="col-xs-12 col-sm-3 col-md-3" v-if="familyData.couple == '1'">
      <q-input
        class="inputgreen"
        hide-bottom-space
        outlined
        dense
        lazy-rules
        v-model="familyData.marryOccupation"
        :label="`${'อาชีพ'}`"
      />
    </div>
  </div>
</template>
