<template>
  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md text-dark">
    <HeaderTop
      v-model:edit="edit"
      header="ข้อมูลครอบครัว"
      icon="mdi-account-group"
      :save="saveData"
      :history="!statusAdd()"
      :changeBtn="changeBtn"
      :disable="statusEdit"
      :cancel="refreshData"
      :historyClick="historyData"
      :addEmployee="statusAdd()"
    />
    <q-form ref="myform" class="col-12">
      <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
        <div class="col-12 row q-pb-sm q-pt-md">
          <div class="col-xs-2 col-sm-1 text-weight-bold">• บิดา</div>
          <div class="q-gutter-sm">
            <q-radio
              v-model="familyData.liveM"
              checked-icon="task_alt"
              unchecked-icon="panorama_fish_eye"
              val="1"
              label="มีชีวิต"
              dense
              color="blue"
              :disable="!edit"
            />
            <q-radio
              v-model="familyData.liveM"
              checked-icon="task_alt"
              unchecked-icon="panorama_fish_eye"
              val="0"
              color="red"
              label="เสียชีวิต"
              dense
              :disable="!edit"
            />
          </div>
        </div>
        <div class="col-xs-6 col-sm-2 col-md-2">
          <q-input
            :class="getClass(edit)"
            hide-bottom-space
            :outlined="edit"
            dense
            lazy-rules
            :readonly="!edit"
            :borderless="!edit"
            v-model="familyData.citizenIdM"
            :label="`${'เลขที่บัตรประชาชน'}`"
            maxlength="13"
            mask="#############"
          />
        </div>
        <div class="col-xs-12 col-sm-2 col-md-2">
          <selector
            :hide-dropdown-icon="!edit"
            hide-bottom-space
            :class="getClass(edit)"
            :readonly="!edit"
            :borderless="!edit"
            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
            :outlined="edit"
            dense
            lazy-rules
            v-model="familyData.prefixIdM"
            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="getClass(edit)"
            hide-bottom-space
            :outlined="edit"
            dense
            lazy-rules
            :readonly="!edit"
            :borderless="!edit"
            v-model="familyData.firstnameM"
            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
            :label="`${'ชื่อ'}`"
          />
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-input
            :class="getClass(edit)"
            hide-bottom-space
            :outlined="edit"
            dense
            lazy-rules
            :readonly="!edit"
            :borderless="!edit"
            v-model="familyData.lastnameM"
            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
            :label="`${'นามสกุล'}`"
          />
        </div>
        <div class="col-xs-12 col-sm-2 col-md-2">
          <q-input
            :class="getClass(edit)"
            hide-bottom-space
            :outlined="edit"
            dense
            lazy-rules
            :readonly="!edit"
            :borderless="!edit"
            v-model="familyData.occupationM"
            :label="`${'อาชีพ'}`"
          />
        </div>

        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
        <div class="row col-12 q-py-sm">
          <div class="col-xs-2 col-sm-1 text-weight-bold">• มารดา</div>
          <div class="q-gutter-sm">
            <q-radio
              v-model="familyData.liveF"
              checked-icon="task_alt"
              unchecked-icon="panorama_fish_eye"
              val="1"
              label="มีชีวิต"
              color="blue"
              dense
              :disable="!edit"
            />
            <q-radio
              v-model="familyData.liveF"
              checked-icon="task_alt"
              unchecked-icon="panorama_fish_eye"
              val="0"
              label="เสียชีวิต"
              color="red"
              dense
              :disable="!edit"
            />
          </div>
        </div>
        <div class="col-xs-6 col-sm-2 col-md-2">
          <q-input
            :class="getClass(edit)"
            hide-bottom-space
            :outlined="edit"
            dense
            lazy-rules
            :readonly="!edit"
            :borderless="!edit"
            v-model="familyData.citizenIdF"
            :label="`${'เลขที่บัตรประชาชน'}`"
            maxlength="13"
            mask="#############"
          />
        </div>
        <div class="col-xs-12 col-sm-2 col-md-2">
          <selector
            :hide-dropdown-icon="!edit"
            hide-bottom-space
            :class="getClass(edit)"
            :readonly="!edit"
            :borderless="!edit"
            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
            :outlined="edit"
            dense
            lazy-rules
            v-model="familyData.prefixIdF"
            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="getClass(edit)"
            hide-bottom-space
            :outlined="edit"
            dense
            lazy-rules
            :readonly="!edit"
            :borderless="!edit"
            v-model="familyData.firstnameF"
            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
            :label="`${'ชื่อ'}`"
          />
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-input
            :class="getClass(edit)"
            hide-bottom-space
            :outlined="edit"
            dense
            lazy-rules
            :readonly="!edit"
            :borderless="!edit"
            v-model="familyData.lastnameF"
            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
            :label="`${'นามสกุล'}`"
          />
        </div>
        <div class="col-xs-12 col-sm-2 col-md-2">
          <q-input
            :class="getClass(edit)"
            hide-bottom-space
            :outlined="edit"
            dense
            lazy-rules
            :readonly="!edit"
            :borderless="!edit"
            v-model="familyData.occupationF"
            :label="`${'อาชีพ'}`"
          />
        </div>
        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>

        <div class="row col-12 q-py-sm">
          <div class="col-xs-2 col-sm-1 text-weight-bold">• คู่สมรส</div>
          <div class="q-gutter-sm">
            <q-radio
              v-model="familyData.same"
              checked-icon="task_alt"
              unchecked-icon="panorama_fish_eye"
              val="1"
              label="มี"
              dense
              :disable="!edit"
              @update:model-value="selectRadio"
            />
            <q-radio
              v-model="familyData.same"
              checked-icon="task_alt"
              unchecked-icon="panorama_fish_eye"
              val="0"
              label="ไม่มี"
              color="grey-9"
              dense
              :disable="!edit"
              @update:model-value="selectRadio"
            />
          </div>
          <q-separator
            vertical
            color="grey-4"
            size="2px"
            class="q-mx-md"
            v-if="familyData.same == '1'"
          />
          <div class="q-gutter-sm" v-if="familyData.same == '1'">
            <q-radio
              v-model="familyData.liveC"
              checked-icon="task_alt"
              unchecked-icon="panorama_fish_eye"
              val="1"
              label="มีชีวิต"
              color="blue"
              dense
              :disable="!edit"
            />
            <q-radio
              v-model="familyData.liveC"
              checked-icon="task_alt"
              unchecked-icon="panorama_fish_eye"
              val="0"
              label="เสียชีวิต"
              color="red"
              dense
              :disable="!edit"
            />
          </div>
        </div>
        <div class="col-xs-6 col-sm-2 col-md-2" v-if="familyData.same == '1'">
          <q-input
            :class="getClass(edit)"
            hide-bottom-space
            :outlined="edit"
            dense
            lazy-rules
            :readonly="!edit"
            :borderless="!edit"
            v-model="familyData.citizenIdC"
            :label="`${'เลขที่บัตรประชาชน'}`"
            maxlength="13"
            mask="#############"
          />
        </div>

        <div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
          <selector
            :hide-dropdown-icon="!edit"
            hide-bottom-space
            :class="getClass(edit)"
            :readonly="!edit"
            :borderless="!edit"
            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
            :outlined="edit"
            dense
            lazy-rules
            v-model="familyData.prefixIdC"
            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-2 col-md-2" v-if="familyData.same == '1'">
          <q-input
            :class="getClass(edit)"
            hide-bottom-space
            :outlined="edit"
            dense
            lazy-rules
            :readonly="!edit"
            :borderless="!edit"
            v-model="familyData.firstnameC"
            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
            :label="`${'ชื่อ'}`"
          />
        </div>
        <div class="col-xs-6 col-sm-2 col-md-2" v-if="familyData.same == '1'">
          <q-input
            :class="getClass(edit)"
            hide-bottom-space
            :outlined="edit"
            dense
            lazy-rules
            :readonly="!edit"
            :borderless="!edit"
            v-model="familyData.lastnameC"
            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
            :label="`${'นามสกุล'}`"
          />
        </div>
        <div class="col-xs-6 col-sm-2 col-md-2" v-if="familyData.same == '1'">
          <q-input
            :class="getClass(edit)"
            hide-bottom-space
            :outlined="edit"
            dense
            lazy-rules
            :readonly="!edit"
            :borderless="!edit"
            v-model="familyData.lastnameCOld"
            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล(เดิม)'}`]"
            :label="`${'นามสกุล(เดิม)'}`"
          />
        </div>
        <div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
          <q-input
            :class="getClass(edit)"
            hide-bottom-space
            :outlined="edit"
            dense
            lazy-rules
            :readonly="!edit"
            :borderless="!edit"
            v-model="familyData.occupationC"
            :label="`${'อาชีพ'}`"
          />
        </div>

        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
      </div>
      <div
        class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs q-mb-sm"
      >
        <div class="col-xs-12 q-col-gutter-x-sm items-center flex">
          <label class="text-weight-bold">• บุตร</label>
          <div>
            <q-btn
              v-if="edit"
              size="12px"
              flat
              round
              :disable="!edit"
              :color="!edit ? 'grey-7' : 'primary'"
              @click="addChildren"
              icon="mdi-plus"
            >
              <q-tooltip>เพิ่มข้อมูล</q-tooltip>
            </q-btn>
          </div>
        </div>

        <div
          class="row col-12 items-center q-col-gutter-xs"
          v-for="(items, index) in familyData.childrens"
          :key="index"
        >
          <div class="col-12 row q-gutter-sm q-pb-xs">
            <q-avatar class="bg-grey-2" size="28px">{{ index + 1 }}</q-avatar>
            <q-radio
              v-model="items.childrenLive"
              checked-icon="task_alt"
              unchecked-icon="panorama_fish_eye"
              val="1"
              label="มีชีวิต"
              color="blue"
              dense
              :disable="!edit"
            />
            <q-radio
              v-model="items.childrenLive"
              checked-icon="task_alt"
              unchecked-icon="panorama_fish_eye"
              val="0"
              label="เสียชีวิต"
              color="red"
              dense
              :disable="!edit"
            />
          </div>
          <div>
            <q-btn
              v-if="edit"
              flat
              dense
              size="12px"
              round
              :disable="!edit"
              :color="!edit ? 'grey-7' : 'red'"
              @click="deleteChildren(items)"
              icon="mdi-delete-outline"
            >
              <q-tooltip>ลบข้อมูล {{ index + 1 }}</q-tooltip>
            </q-btn>
          </div>
          <div class="col-xs-6 col-sm-2 col-md-2">
            <q-input
              :class="getClass(edit)"
              hide-bottom-space
              :outlined="edit"
              dense
              lazy-rules
              :readonly="!edit"
              :borderless="!edit"
              v-model="items.childrenCitizenId"
              :label="`${'เลขที่บัตรประชาชน'}`"
              maxlength="13"
              mask="#############"
            />
          </div>
          <div class="col-xs-12 col-sm-2 col-md-2">
            <selector
              :hide-dropdown-icon="!edit"
              hide-bottom-space
              :class="getClass(edit)"
              :readonly="!edit"
              :borderless="!edit"
              :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
              :outlined="edit"
              dense
              lazy-rules
              v-model="items.childrenPrefixId"
              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="getClass(edit)"
              hide-bottom-space
              :outlined="edit"
              dense
              lazy-rules
              :readonly="!edit"
              :borderless="!edit"
              v-model="items.childrenFirstName"
              :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
              :label="`${'ชื่อ'}`"
            />
          </div>
          <div class="col-xs-6 col-sm-3 col-md-3">
            <q-input
              :class="getClass(edit)"
              hide-bottom-space
              :outlined="edit"
              dense
              lazy-rules
              :readonly="!edit"
              :borderless="!edit"
              v-model="items.childrenLastName"
              :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
              :label="`${'นามสกุล'}`"
            />
          </div>
          <div
            :class="
              edit
                ? 'col-xs-10 col-sm-1 col-md-1'
                : 'col-xs-12 col-sm-2 col-md-2'
            "
          >
            <q-input
              :class="getClass(edit)"
              hide-bottom-space
              :outlined="edit"
              dense
              lazy-rules
              :readonly="!edit"
              :borderless="!edit"
              v-model="items.childrenCareer"
              :label="`${'อาชีพ'}`"
            />
          </div>
          <div
            class="col-12 q-my-sm"
            v-if="index + 1 < familyData.childrens.length"
          >
            <q-separator v-if="edit" inset />
          </div>
        </div>
      </div>
    </q-form>
  </q-card>
  <DialogHistory
    v-model:modal="modal"
    v-model:fix="fix"
    title="ประวัติแก้ไขข้อมูลครอบครัว"
  >
    <template v-slot:body>
      <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
        <div class="col-xs-12 text-weight-bold">
          {{
            `${
              familyDataHistory.length > 0 &&
              familyDataHistory[indexRow].createdAt != null
                ? date2Thai(familyDataHistory[indexRow].createdAt, false, true)
                : ""
            }`
          }}
        </div>
        <div class="col-xs-12 text-weight-bold">
          • บิดา
          <q-radio
            v-model="familyDataHistory[indexRow].fatherLive"
            checked-icon="task_alt"
            unchecked-icon="panorama_fish_eye"
            val="1"
            label="มีชีวิต"
            dense
            :disable="true"
          />
          <q-radio
            v-model="familyDataHistory[indexRow].fatherLive"
            checked-icon="task_alt"
            unchecked-icon="panorama_fish_eye"
            val="0"
            label="เสียชีวิต"
            dense
            :disable="true"
          />
        </div>
        <div class="col-xs-6 col-sm-2 col-md-2">
          <q-input
            :class="getClass(false)"
            hide-bottom-space
            :outlined="false"
            dense
            lazy-rules
            :readonly="true"
            :borderless="true"
            v-model="familyDataHistory[indexRow].fatherCitizenId"
            :label="`${'เลขที่บัตรประชาชน'}`"
            maxlength="13"
            mask="#############"
          />
        </div>
        <div class="col-xs-12 col-sm-2 col-md-2">
          <selector
            :hide-dropdown-icon="true"
            hide-bottom-space
            :class="getClass(false)"
            :readonly="true"
            :borderless="true"
            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
            :outlined="false"
            dense
            lazy-rules
            v-model="familyDataHistory[indexRow].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="getClass(false)"
            hide-bottom-space
            :outlined="false"
            dense
            lazy-rules
            :readonly="true"
            :borderless="true"
            v-model="familyDataHistory[indexRow].fatherFirstName"
            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
            :label="`${'ชื่อ'}`"
          />
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-input
            :class="getClass(false)"
            hide-bottom-space
            :outlined="false"
            dense
            lazy-rules
            :readonly="true"
            :borderless="true"
            v-model="familyDataHistory[indexRow].fatherLastName"
            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
            :label="`${'นามสกุล'}`"
          />
        </div>
        <div class="col-xs-12 col-sm-2 col-md-2">
          <q-input
            :class="getClass(false)"
            hide-bottom-space
            :outlined="false"
            dense
            lazy-rules
            :readonly="true"
            :borderless="true"
            v-model="familyDataHistory[indexRow].fatherCareer"
            :label="`${'อาชีพ'}`"
          />
        </div>

        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
        <div class="col-xs-12 text-weight-bold">
          • มารดา
          <q-radio
            v-model="familyDataHistory[indexRow].motherLive"
            checked-icon="task_alt"
            unchecked-icon="panorama_fish_eye"
            val="1"
            label="มีชีวิต"
            dense
            :disable="true"
          />
          <q-radio
            v-model="familyDataHistory[indexRow].motherLive"
            checked-icon="task_alt"
            unchecked-icon="panorama_fish_eye"
            val="0"
            label="เสียชีวิต"
            dense
            :disable="true"
          />
        </div>
        <div class="col-xs-6 col-sm-2 col-md-2">
          <q-input
            :class="getClass(false)"
            hide-bottom-space
            :outlined="false"
            dense
            lazy-rules
            :readonly="true"
            :borderless="true"
            v-model="familyDataHistory[indexRow].motherCitizenId"
            :label="`${'เลขที่บัตรประชาชน'}`"
            maxlength="13"
            mask="#############"
          />
        </div>
        <div class="col-xs-12 col-sm-2 col-md-2">
          <selector
            :hide-dropdown-icon="true"
            hide-bottom-space
            :class="getClass(false)"
            :readonly="true"
            :borderless="true"
            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
            :outlined="false"
            dense
            lazy-rules
            v-model="familyDataHistory[indexRow].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="getClass(false)"
            hide-bottom-space
            :outlined="false"
            dense
            lazy-rules
            :readonly="true"
            :borderless="true"
            v-model="familyDataHistory[indexRow].motherFirstName"
            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
            :label="`${'ชื่อ'}`"
          />
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-input
            :class="getClass(false)"
            hide-bottom-space
            :outlined="false"
            dense
            lazy-rules
            :readonly="true"
            :borderless="true"
            v-model="familyDataHistory[indexRow].motherLastName"
            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
            :label="`${'นามสกุล'}`"
          />
        </div>
        <div class="col-xs-12 col-sm-2 col-md-2">
          <q-input
            :class="getClass(false)"
            hide-bottom-space
            :outlined="false"
            dense
            lazy-rules
            :readonly="true"
            :borderless="true"
            v-model="familyDataHistory[indexRow].motherCareer"
            :label="`${'อาชีพ'}`"
          />
        </div>
        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
        <div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
          <label class="text-weight-bold">• คู่สมรส</label>
          <q-radio
            v-model="familyDataHistory[indexRow].couple"
            checked-icon="task_alt"
            unchecked-icon="panorama_fish_eye"
            val="1"
            label="มี"
            dense
            :disable="true"
            @update:model-value="selectRadio"
          />
          <q-radio
            v-model="familyDataHistory[indexRow].couple"
            checked-icon="task_alt"
            unchecked-icon="panorama_fish_eye"
            val="0"
            label="ไม่มี"
            color="grey-9"
            dense
            :disable="true"
            @update:model-value="selectRadio"
          />
          <q-separator
            vertical
            color="grey-4"
            size="2px"
            class="q-mx-md"
            v-if="familyData.same == '1'"
          />
          <div class="q-gutter-sm" v-if="familyData.same == '1'">
            <q-radio
              v-model="familyDataHistory[indexRow].coupleLive"
              checked-icon="task_alt"
              unchecked-icon="panorama_fish_eye"
              val="1"
              label="มีชีวิต"
              color="blue"
              dense
              :disable="true"
            />
            <q-radio
              v-model="familyDataHistory[indexRow].coupleLive"
              checked-icon="task_alt"
              unchecked-icon="panorama_fish_eye"
              val="0"
              label="เสียชีวิต"
              color="red"
              dense
              :disable="true"
            />
          </div>
        </div>
        <div
          class="col-xs-6 col-sm-2 col-md-2"
          v-if="familyDataHistory[indexRow].couple == '1'"
        >
          <q-input
            :class="getClass(false)"
            hide-bottom-space
            :outlined="false"
            dense
            lazy-rules
            :readonly="true"
            :borderless="true"
            v-model="familyDataHistory[indexRow].coupleCitizenId"
            :label="`${'เลขที่บัตรประชาชน'}`"
            maxlength="13"
            mask="#############"
          />
        </div>

        <div
          class="col-xs-12 col-sm-2 col-md-2"
          v-if="familyDataHistory[indexRow].couple == '1'"
        >
          <selector
            :hide-dropdown-icon="true"
            hide-bottom-space
            :class="getClass(false)"
            :readonly="true"
            :borderless="true"
            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
            :outlined="false"
            dense
            lazy-rules
            v-model="familyDataHistory[indexRow].couplePrefixId"
            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="familyDataHistory[indexRow].couple == '1'"
        >
          <q-input
            :class="getClass(false)"
            hide-bottom-space
            :outlined="false"
            dense
            lazy-rules
            :readonly="true"
            :borderless="true"
            v-model="familyDataHistory[indexRow].coupleFirstName"
            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
            :label="`${'ชื่อ'}`"
          />
        </div>
        <div
          class="col-xs-6 col-sm-3 col-md-3"
          v-if="familyDataHistory[indexRow].couple == '1'"
        >
          <q-input
            :class="getClass(false)"
            hide-bottom-space
            :outlined="false"
            dense
            lazy-rules
            :readonly="true"
            :borderless="true"
            v-model="familyDataHistory[indexRow].coupleLastName"
            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
            :label="`${'นามสกุล'}`"
          />
        </div>
        <div
          class="col-xs-6 col-sm-2 col-md-2"
          v-if="familyDataHistory[indexRow].couple == '1'"
        >
          <q-input
            :class="getClass(false)"
            hide-bottom-space
            :outlined="false"
            dense
            lazy-rules
            :readonly="true"
            :borderless="true"
            v-model="familyDataHistory[indexRow].coupleLastNameOld"
            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล(เดิม)'}`]"
            :label="`${'นามสกุล(เดิม)'}`"
          />
        </div>
        <div
          class="col-xs-12 col-sm-2 col-md-2"
          v-if="familyDataHistory[indexRow].couple == '1'"
        >
          <q-input
            :class="getClass(false)"
            hide-bottom-space
            :outlined="false"
            dense
            lazy-rules
            :readonly="true"
            :borderless="true"
            v-model="familyDataHistory[indexRow].coupleCareer"
            :label="`${'อาชีพ'}`"
          />
        </div>

        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
      </div>
      <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
        <div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
          <label class="text-weight-bold">• บุตร</label>
        </div>

        <div
          class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
          v-for="items in familyDataHistory[indexRow].childrens"
          :key="items.id"
        >
          <div class="col-12 row q-gutter-sm q-pb-xs">
            <q-radio
              v-model="items.childrenLive"
              checked-icon="task_alt"
              unchecked-icon="panorama_fish_eye"
              val="1"
              label="มีชีวิต"
              color="blue"
              dense
              :disable="true"
            />
            <q-radio
              v-model="items.childrenLive"
              checked-icon="task_alt"
              unchecked-icon="panorama_fish_eye"
              val="0"
              label="เสียชีวิต"
              color="red"
              dense
              :disable="true"
            />
          </div>
          <div class="col-xs-6 col-sm-2 col-md-2">
            <q-input
              :class="getClass(false)"
              hide-bottom-space
              :outlined="false"
              dense
              lazy-rules
              :readonly="true"
              :borderless="true"
              v-model="items.childrenCitizenId"
              :label="`${'เลขที่บัตรประชาชน'}`"
              maxlength="13"
              mask="#############"
            />
          </div>
          <div class="col-xs-6 col-sm-2 col-md-2">
            <selector
              :hide-dropdown-icon="true"
              hide-bottom-space
              :class="getClass(false)"
              :readonly="true"
              :borderless="true"
              :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
              :outlined="false"
              dense
              lazy-rules
              v-model="items.childrenPrefixId"
              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="getClass(false)"
              hide-bottom-space
              :outlined="false"
              dense
              lazy-rules
              :readonly="true"
              :borderless="true"
              v-model="items.childrenFirstName"
              :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
              :label="`${'ชื่อ'}`"
            />
          </div>
          <div class="col-xs-6 col-sm-3 col-md-3">
            <q-input
              :class="getClass(false)"
              hide-bottom-space
              :outlined="false"
              dense
              lazy-rules
              :readonly="true"
              :borderless="true"
              v-model="items.childrenLastName"
              :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
              :label="`${'นามสกุล'}`"
            />
          </div>
          <div class="col-xs-12 col-sm-2 col-md-2">
            <q-input
              :class="getClass(false)"
              hide-bottom-space
              :outlined="false"
              dense
              lazy-rules
              :readonly="true"
              :borderless="true"
              v-model="items.childrenCareer"
              :label="`${'อาชีพ'}`"
            />
          </div>
        </div>
      </div>
    </template>
    <template v-slot:footer>
      <q-btn
        flat
        round
        icon="mdi-menu-left"
        @click="clickPreviousNext('next')"
        :disable="previous == false"
        :color="!previous ? 'grey-7' : 'public'"
      />
      <q-btn
        flat
        round
        icon="mdi-menu-right"
        @click="clickPreviousNext('previous')"
        :disable="next == false"
        :color="!next ? 'grey-7' : 'public'"
      />
      <q-space />
      <div class="text-black text-subtitle2 text-bold">
        {{ indexRow + 1 }}/{{ familyDataHistory.length }}
      </div>
    </template>
  </DialogHistory>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import type { QForm } from "quasar";
import { useCounterMixin } from "@/stores/mixin";

import { useQuasar } from "quasar";
import type {
  Family,
  DataOption,
} from "@/modules/04_registry/components/profileType";
import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
import DialogHistory from "@/modules/04_registry/components/DialogHistory.vue";
import type {
  ResponseObject,
  childrenFamily,
  ResponseHistory,
} from "@/modules/04_registry/interface/response/Family";
import http from "@/plugins/http";
import config from "@/app.config";
import { useRoute } from "vue-router";

const props = defineProps({
  statusEdit: {
    type: Boolean,
    required: true,
  },
  notiNoEdit: {
    type: Function,
    default: () => console.log("not function"),
  },
  statusAdd: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["update:statusEdit"]);

const route = useRoute();
const $q = useQuasar();

const mixin = useCounterMixin();
const { date2Thai, success, messageError, showLoader, hideLoader } = mixin;
const edit = ref<boolean>(false);
const fix = ref<boolean>(true);
const myform = ref<QForm | null>(null);
const modal = ref<boolean>(false);
const indexRow = ref<number>(0);
const previous = ref<boolean>(false);
const next = ref<boolean>(false);
//C Couple
//M Male
//F Female
const familyData = ref<Family>({
  prefixC: null,
  prefixIdC: null,
  firstnameC: null,
  lastnameC: null,
  lastnameCOld: null,
  occupationC: null,
  liveC: null,
  citizenIdC: null,
  prefixM: null,
  prefixIdM: null,
  firstnameM: null,
  lastnameM: null,
  occupationM: null,
  liveM: null,
  citizenIdM: null,
  prefixF: null,
  prefixIdF: null,
  firstnameF: null,
  lastnameF: null,
  occupationF: null,
  liveF: null,
  citizenIdF: null,
  same: "0",
  childrens: [],
});
const familyDataHistory = ref<ResponseHistory[]>([]);
const Ops = ref<any>({
  prefixOps: [],
});
const OpsFilter = ref<any>({
  prefixOps: [],
});

onMounted(async () => {
  await fetchPrefix();
  await fetchData();
  emit("update:statusEdit", false);
  defaultAdd();
});

const statusAdd = () => props.statusAdd;

const defaultAdd = () => {
  if (props.statusAdd) {
    edit.value = props.statusAdd;
    familyData.value = {
      prefixC: null,
      prefixIdC: null,
      firstnameC: null,
      lastnameC: null,
      lastnameCOld: null,
      occupationC: null,
      citizenIdC: null,
      liveC: null,
      prefixM: null,
      prefixIdM: null,
      firstnameM: null,
      lastnameM: null,
      occupationM: null,
      citizenIdM: null,
      liveM: null,
      prefixF: null,
      prefixIdF: null,
      firstnameF: null,
      lastnameF: null,
      occupationF: null,
      citizenIdF: null,
      liveF: null,
      same: "0",
      childrens: [],
    };
  }
};

const historyData = async () => {
  await fetchHistory();
};

const filterSelector = (val: any, update: Function, refData: string) => {
  update(() => {
    Ops.value[`${refData}`] = OpsFilter.value[`${refData}`].filter(
      (v: DataOption) => v.name.indexOf(val) > -1
    );
  });
};

const refreshData = async () => {
  if (myform.value != null) {
    myform.value.reset();
  }
  await fetchData();
};

const fetchPrefix = async () => {
  showLoader();
  await http
    .get(config.API.prefix)
    .then((res) => {
      const data = res.data.result;
      let option: DataOption[] = [];
      data.map((r: any) => {
        option.push({ id: r.id.toString(), name: r.name.toString() });
      });
      Ops.value.prefixOps = option;
      OpsFilter.value.prefixOps = option;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};

const addChildren = async () => {
  familyData.value.childrens.push({
    id: `${familyData.value.childrens.length + 1}`,
    childrenPrefixId: "",
    childrenFirstName: "",
    childrenLastName: "",
    childrenCareer: "",
    childrenLive: "1",
    childrenCitizenId: "",
  });

  familyData.value.childrens.sort(
    (a: childrenFamily, b: childrenFamily) => Number(b.id) - Number(a.id)
  );
};

const deleteChildren = (items: childrenFamily) => {
  const index = familyData.value.childrens.findIndex(
    (r: childrenFamily) => r.id == items.id
  );

  familyData.value.childrens.splice(index, 1);
};

const fetchHistory = async () => {
  familyDataHistory.value = [];
  showLoader();
  await http
    .get(config.API.profileFamiHisId(route.params.id.toString()))
    .then((res) => {
      const data: ResponseObject[] = res.data.result;
      data.map((row: ResponseObject) => {
        const arrayData: ResponseHistory = {
          couple: row.couple ? "1" : "0",
          couplePrefixId: row.couplePrefixId,
          coupleFirstName: row.coupleFirstName,
          coupleLastName: row.coupleLastName,
          coupleLastNameOld: row.coupleLastNameOld,
          coupleCareer: row.coupleCareer,
          coupleLive: row.coupleLive ? "1" : "0",
          coupleCitizenId: row.coupleCitizenId,
          fatherPrefixId: row.fatherPrefixId,
          fatherFirstName: row.fatherFirstName,
          fatherLastName: row.fatherLastName,
          fatherCareer: row.fatherCareer,
          fatherLive: row.fatherLive ? "1" : "0",
          fatherCitizenId: row.fatherCitizenId,
          motherPrefixId: row.motherPrefixId,
          motherFirstName: row.motherFirstName,
          motherLastName: row.motherLastName,
          motherCareer: row.motherCareer,
          motherLive: row.motherLive ? "1" : "0",
          motherCitizenId: row.motherCitizenId,
          childrens: row.childrens,
          createdFullName: row.createdFullName,
          createdAt: new Date(row.createdAt),
        };
        familyDataHistory.value.push(arrayData);
      });
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      hideLoader();
      if (familyDataHistory.value.length == 0) {
        // modalError(
        //   $q,
        //   "ประวัติแก้ไขข้อมูลครอบครัว",
        //   "ไม่มีข้อมูลประวัติแก้ไขข้อมูลครอบครัว"
        // );
      } else {
        modal.value = true;
        indexRow.value = 0;
        if (familyDataHistory.value.length > 1) {
          next.value = true;
          previous.value = false;
        } else {
          next.value = false;
          previous.value = false;
        }
      }
    });
};

const fetchData = async () => {
  if (route.params.id) {
    showLoader();
    await http
      .get(config.API.profileFamiId(route.params.id.toString()))
      .then((res) => {
        const data: ResponseObject = res.data.result;
        familyData.value.prefixC = "";
        familyData.value.prefixIdC = data.couplePrefixId;
        familyData.value.firstnameC = data.coupleFirstName;
        familyData.value.lastnameC = data.coupleLastName;
        familyData.value.lastnameCOld = data.coupleLastNameOld;
        familyData.value.occupationC = data.coupleCareer;
        familyData.value.liveC = data.coupleLive ? "1" : "0";
        familyData.value.citizenIdC = data.coupleCitizenId;

        familyData.value.prefixM = "";
        familyData.value.prefixIdM = data.fatherPrefixId;
        familyData.value.firstnameM = data.fatherFirstName;
        familyData.value.lastnameM = data.fatherLastName;
        familyData.value.occupationM = data.fatherCareer;
        familyData.value.liveM = data.fatherLive ? "1" : "0";
        familyData.value.citizenIdM = data.fatherCitizenId;

        familyData.value.prefixF = "";
        familyData.value.prefixIdF = data.motherPrefixId;
        familyData.value.firstnameF = data.motherFirstName;
        familyData.value.lastnameF = data.motherLastName;
        familyData.value.occupationF = data.motherCareer;
        familyData.value.liveF = data.motherLive ? "1" : "0";
        familyData.value.citizenIdF = data.motherCitizenId;
        familyData.value.same = data.couple ? "1" : "0";

        if (data.childrens.length > 0) {
          let dataChild: childrenFamily[] = [];
          data.childrens.map((row: childrenFamily, index: number) => {
            dataChild.push({
              id: `${index + 1}`,
              childrenPrefixId: row.childrenPrefixId,
              childrenFirstName: row.childrenFirstName,
              childrenLastName: row.childrenLastName,
              childrenCareer: row.childrenCareer,
              childrenLive: row.childrenLive,
              childrenCitizenId: row.childrenCitizenId,
            });
          });
          familyData.value.childrens = dataChild;
        } else {
          familyData.value.childrens = [];
        }
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(async () => {
        hideLoader();
      });
  }
};

const editData = async () => {
  showLoader();
  const body: ResponseObject = {
    couple: familyData.value.same == "1",
    couplePrefixId: familyData.value.prefixIdC,
    coupleFirstName: familyData.value.firstnameC,
    coupleLastName: familyData.value.lastnameC,
    coupleLastNameOld: familyData.value.lastnameCOld,
    coupleCareer: familyData.value.occupationC,
    coupleLive: familyData.value.liveC == "1",
    coupleCitizenId: familyData.value.citizenIdC,
    fatherPrefixId: familyData.value.prefixIdM,
    fatherFirstName: familyData.value.firstnameM,
    fatherLastName: familyData.value.lastnameM,
    fatherCareer: familyData.value.occupationM,
    fatherLive: familyData.value.liveM == "1",
    fatherCitizenId: familyData.value.citizenIdM,
    motherPrefixId: familyData.value.prefixIdF,
    motherFirstName: familyData.value.firstnameF,
    motherLastName: familyData.value.lastnameF,
    motherCareer: familyData.value.occupationF,
    motherLive: familyData.value.liveF == "1",
    motherCitizenId: familyData.value.citizenIdF,
    childrens: familyData.value.childrens,
    createdFullName: "-",
    createdAt: new Date(),
  };
  await http
    .put(config.API.profileFamiId(route.params.id.toString()), body)
    .then((res) => {
      success($q, "บันทึกข้อมูลสำเร็จ");
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      edit.value = false;
      emit("update:statusEdit", false);
      await fetchData();
    });
};

const addData = async () => {
  //     showLoader();
  //   await http
  //     .put(config.API.profileInforId(route.params.id.toString()), body)
  //     .then((res) => {
  //       success($q, "บันทึกข้อมูลสำเร็จ");
  //     })
  //     .catch((e) => {
  //       messageError($q, e);
  //     })
  //     .finally(async () => {
  //       edit.value = false;
  //       emit("update:statusEdit", false);
  //       await fetchData();
  //       await changeBirth(informaData.value.birthDate ?? new Date());
  //     });
};

const saveData = async () => {
  await myform.value?.validate().then(async (success: boolean) => {
    if (success) {
      if (props.statusAdd) {
        await addData();
      } else {
        await editData();
      }
    } else {
    }
  });
};

const clickPreviousNext = (page: string) => {
  const index: number =
    page == "next" ? indexRow.value - 1 : indexRow.value + 1;
  let length: number = familyDataHistory.value.length;
  previous.value = index == 0 ? false : true;
  next.value = index == length - 1 ? false : true;
  indexRow.value = index;
};

const selectRadio = (e: boolean, i: any) => {
  if (e) {
    familyData.value.prefixIdC = "";
    familyData.value.firstnameC = "";
    familyData.value.lastnameC = "";
    familyData.value.lastnameCOld = "";
    familyData.value.occupationC = "";
    familyData.value.liveC = "";
    familyData.value.citizenIdC = "";
  }
};

const changeBtn = async () => {
  if (edit.value == true) {
    if (props.statusEdit === true) {
      edit.value = false;
      props.notiNoEdit();
    } else {
      emit("update:statusEdit", true);
    }
  } else {
    emit("update:statusEdit", false);
  }
};

const getClass = (val: boolean) => {
  return {
    "full-width inputgreen cursor-pointer": val,
    "full-width cursor-pointer": !val,
  };
};
</script>
