<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import dialogHeader from "@/components/DialogHeader.vue";
import { useCounterMixin } from "@/stores/mixin";
import { QForm, useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useRoute } from "vue-router";
import { useProfileDataStore } from "@/modules/04_registryNew/stores/profile";
const mixin = useCounterMixin();
const $q = useQuasar();
const {
  dialogRemove,
  dialogConfirm,
  showLoader,
  hideLoader,
  messageError,
  success,
  date2Thai,
} = mixin;

const store = useProfileDataStore();
const { fetchPerson, filterSelector } = store;
const route = useRoute();
const id = ref<string>(route.params.id.toString());
const dialog = ref<boolean>(false);
const historyDialog = ref<boolean>(false);
const fatherIsHaveInfo = ref<boolean>(false);
const motherIsHaveInfo = ref<boolean>(false);
const spouseIsHave = ref<boolean>(false);
const fatherIsLive = ref<boolean>(false);
const motherIsLive = ref<boolean>(false);
const spouseIsLive = ref<boolean>(false);
const index = ref<number>(1);
const fatherData = reactive({
  isHaveInfo: 1,
  isLive: 0,
  citizenId: "",
  prefix: "",
  firstName: "",
  lastName: "",
  job: "",
});

const fatherDataEdit = reactive({
  isHaveInfo: 1,
  isLive: 0,
  citizenId: "",
  prefix: "",
  firstName: "",
  lastName: "",
  job: "",
});

const motherData = reactive({
  isHaveInfo: 1,
  isLive: 0,
  citizenId: "",
  prefix: "",
  firstName: "",
  lastName: "",
  job: "",
});

const motherDataEdit = reactive({
  isHaveInfo: 1,
  isLive: 0,
  citizenId: "",
  prefix: "",
  firstName: "",
  lastName: "",
  job: "",
});

const spouseData = reactive({
  isHave: 1,
  isLive: 0,
  citizenId: "",
  prefix: "",
  firstName: "",
  lastName: "",
  job: "",
});

const spouseDataEdit = reactive({
  isHave: 1,
  isLive: 0,
  citizenId: "",
  prefix: "",
  firstName: "",
  lastName: "",
  job: "",
});

const rows = ref<any>([]);
const historyRows = ref<any>([]);
const prefixFilter = ref([]);
const childrenData: any = reactive({
  childrens: [],
});
const childrenDataEdit: any = reactive({
  childrens: [],
});

function editForm(rows: any) {
  if (rows !== null) {
    fatherDataEdit.isHaveInfo = rows.fatherFirstName !== null ? 1 : 0;
    fatherDataEdit.isLive = rows.fatherLive ? 1 : 0;
    fatherDataEdit.citizenId = rows.fatherCitizenId;
    fatherDataEdit.prefix = rows.fatherPrefix;
    fatherDataEdit.firstName = rows.fatherFirstName;
    fatherDataEdit.lastName = rows.fatherLastName;
    fatherDataEdit.job = rows.fatherCareer;
    motherDataEdit.isHaveInfo = rows.motherLive ? 1 : 0;
    motherDataEdit.isLive = rows.firstName !== null ? 1 : 0;
    motherDataEdit.citizenId = rows.motherCitizenId;
    motherDataEdit.prefix = rows.motherPrefix;
    motherDataEdit.firstName = rows.motherFirstName;
    motherDataEdit.lastName = rows.motherLastName;
    motherDataEdit.job = rows.motherCareer;
    spouseDataEdit.isLive = rows.coupleFirstName !== null ? 1 : 0;
    spouseDataEdit.citizenId = rows.coupleCitizenId;
    spouseDataEdit.prefix = rows.couplePrefix;
    spouseDataEdit.firstName = rows.coupleFirstName;
    spouseDataEdit.lastName = rows.coupleLastName;
    spouseDataEdit.job = rows.coupleCareer;
    spouseDataEdit.isHave = rows.couple ? 1 : 0;
    childrenDataEdit.childrens = rows.children.map((e: any) => ({
      ...e,
      childrenLive: e.childrenLive ? 1 : 0,
    }));
  }
}

async function fetchData(id: string) {
  showLoader();
  await http
    .get(config.API.profileNewFamilyByProfileId(id))
    .then(async (res) => {
      const data = res.data.result;
      rows.value = res.data.result;
      if (rows.value !== null) {
        fatherData.isLive = data.fatherLive ? 1 : 0;
        fatherData.citizenId = data.fatherCitizenId;
        fatherData.prefix = data.fatherPrefix;
        fatherData.firstName = data.fatherFirstName;
        fatherData.lastName = data.fatherLastName;
        fatherData.job = data.fatherCareer;
        motherData.isLive = data.motherLive ? 1 : 0;
        motherData.citizenId = data.motherCitizenId;
        motherData.prefix = data.motherPrefix;
        motherData.firstName = data.motherFirstName;
        motherData.lastName = data.motherLastName;
        motherData.job = data.motherCareer;
        spouseData.isLive = data.coupleLive ? 1 : 0;
        spouseData.citizenId = data.coupleCitizenId;
        spouseData.prefix = data.couplePrefix;
        spouseData.firstName = data.coupleFirstName;
        spouseData.lastName = data.coupleLastName;
        spouseData.job = data.coupleCareer;
        spouseData.isHave = data.couple ? 1 : 0;
        childrenData.childrens = data.children.map((e: any) => ({
          ...e,
          childrenLive: e.childrenLive ? 1 : 0,
        }));
      }
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

async function fetchHistoryData(id: string) {
  showLoader();
  await http
    .get(config.API.profileNewFamilyHisByFamilyId(id))
    .then(async (res) => {
      historyRows.value = res.data.result;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      index.value = 1;
      historyDialog.value = true;
      hideLoader();
    });
}

async function addData() {
  fatherIsHaveInfo.value = fatherDataEdit.isHaveInfo === 1 ? true : false;
  motherIsHaveInfo.value = motherDataEdit.isHaveInfo === 1 ? true : false;
  spouseIsHave.value = spouseDataEdit.isHave === 1 ? true : false;
  fatherIsLive.value = fatherDataEdit.isLive === 1 ? true : false;
  motherIsLive.value = motherDataEdit.isLive === 1 ? true : false;
  spouseIsLive.value = spouseDataEdit.isLive === 1 ? true : false;
  const children = childrenDataEdit.childrens.map((e: any) => ({
    childrenLive: !!e.childrenLive,
    childrenCareer: e.childrenCareer,
    childrenCitizenId: e.childrenCitizenId,
    childrenFirstName: e.childrenFirstName,
    childrenLastName: e.childrenLastName,
    childrenPrefix: e.childrenPrefix,
    id: e.id,
  }));
  const url =
    rows.value === null
      ? config.API.profileNewFamily
      : config.API.profileNewFamilyByProfileId(id.value);
  const method = rows.value === null ? "post" : "patch";

  await http[method](url, {
    profileId: rows.value === null ? id.value : undefined,
    motherLive: motherIsHaveInfo.value ? motherIsLive.value : null,
    motherCitizenId: motherIsHaveInfo.value ? motherDataEdit.citizenId : null,
    motherPrefix: motherIsHaveInfo.value ? motherDataEdit.prefix : null,
    motherFirstName: motherIsHaveInfo.value ? motherDataEdit.firstName : null,
    motherLastName: motherIsHaveInfo.value ? motherDataEdit.lastName : null,
    motherCareer: motherIsHaveInfo.value ? motherDataEdit.job : null,
    fatherLive: fatherIsHaveInfo.value ? fatherIsLive.value : null,
    fatherCitizenId: fatherIsHaveInfo.value ? fatherDataEdit.citizenId : null,
    fatherPrefix: fatherIsHaveInfo.value ? fatherDataEdit.prefix : null,
    fatherFirstName: fatherIsHaveInfo.value ? fatherDataEdit.firstName : null,
    fatherLastName: fatherIsHaveInfo.value ? fatherDataEdit.lastName : null,
    fatherCareer: fatherIsHaveInfo.value ? fatherDataEdit.job : null,
    coupleLive: spouseIsHave.value ? spouseIsLive.value : null,
    coupleCitizenId: spouseIsHave.value ? spouseDataEdit.citizenId : null,
    couplePrefix: spouseIsHave.value ? spouseDataEdit.prefix : null,
    coupleFirstName: spouseIsHave.value ? spouseDataEdit.firstName : null,
    coupleLastName: spouseIsHave.value ? spouseDataEdit.lastName : null,
    coupleLastNameOld: spouseIsHave.value ? spouseDataEdit.lastName : null,
    coupleCareer: spouseIsHave.value ? spouseDataEdit.job : null,
    couple: spouseIsHave.value,
    children: children,
  })

    .then(() => {
      fetchData(id.value);
      success($q, "บันทึกข้อมูลสำเร็จ");
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

const childrenOptionPrefix = ["นาย", "นาง", "นางสาว"];

function closeDialog() {
  dialog.value = false;
}

function closeHistoryDialog() {
  historyDialog.value = false;
}

async function onSubmit() {
  dialogConfirm(
    $q,
    async () => {
      addData();
      closeDialog();
    },
    "ยืนยันการบันทึกข้อมูล",
    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
  );
}

const addChildren = async () => {
  childrenDataEdit.childrens.push({
    childrenLive: 0,
    childrenCitizenId: "",
    childrenPrefix: "",
    childrenFirstName: "",
    childrenLastName: "",
    childrenCareer: "",
    id: "",
  });
};

function deleteChildren(items: any) {
  const index = childrenDataEdit.childrens.findIndex(
    (r: any) => r.id == items.id
  );

  childrenDataEdit.childrens.splice(index, 1);
}

onMounted(async () => {
  if (
    store.Ops.prefixOps.length === 0 ||
    store.Ops.genderOps.length === 0 ||
    store.Ops.bloodOps.length === 0 ||
    store.Ops.statusOps.length === 0 ||
    store.Ops.religionOps.length === 0
  ) {
    await fetchPerson();
  }
  await fetchData(id.value);
});
</script>

<template>
  <div>
    <div class="flex justify-end q-gutter-x-sm">
        <q-btn
          round
          flat
          color="primary"
          icon="mdi-pencil-outline"
          size="14px"
          dense
          @click="
            () => {
              editForm(rows);
              dialog = true;
            }
          "
        >
          <q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
        >
        <q-btn
          round
          flat
          dense
          color="info"
          icon="mdi-history"
          size="14px"
          @click="
            () => {
              fetchHistoryData(id);
            }
          "
        >
          <q-tooltip>ประวัติการแก้ไขข้อมูลครอบครัว</q-tooltip></q-btn
        >
    </div>
    <div v-if="fatherData.firstName !== null">
      <div class="col-12 row q-pb-sm">
        <div class="q-mr-md text-weight-bold text-primary text-subtitle1">
          • บิดา
        </div>
      </div>
      <q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
        <div class="row items-center">
          <div class="col-2 text-grey-6 text-weight-medium">
            <div>เลขบัตรประจำตัวประชาชน</div>
          </div>
          <div class="col">
            {{ fatherData.citizenId ? fatherData.citizenId : "-" }}
          </div>
        </div>
        <div class="row items-center">
          <div class="col-2 text-grey-6 text-weight-medium">ชื่อ-นามสกุล</div>
          <div class="col-6">
            {{
              fatherData.prefix
                ? fatherData.prefix +
                  fatherData.firstName +
                  " " +
                  fatherData.lastName
                : "-"
            }}
          </div>
          <div class="col-1 text-grey-6 text-weight-medium">อาชีพ</div>
          <div class="col">
            {{ fatherData.job ? fatherData.job : "-" }}
          </div>
        </div>
        <div class="row items-center">
          <div class="col-2 text-grey-6 text-weight-medium">สถานภาพการมีชีวิต</div>
          <div class="col-10">
            <div v-if="fatherData.isLive">มีชีวิตอยู่</div>
            <div v-else>ถึงแก่กรรม</div>
          </div>
        </div>
      </q-card>
    </div>
    <q-separator  class="q-my-lg" />
    <div v-if="motherData.firstName !== null">
      <div class="col-12 row q-pb-sm">
        <div class="q-mr-md text-weight-bold text-primary text-subtitle1">
          • มารดา
        </div>
      </div>
      <q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
        <div class="row items-center">
          <div class="col-2 text-grey-6 text-weight-medium">
            <div>เลขบัตรประจำตัวประชาชน</div>
          </div>
          <div class="col">
            {{ motherData.citizenId ? motherData.citizenId : "-" }}
          </div>
        </div>
        <div class="row items-center">
          <div class="col-2 text-grey-6 text-weight-medium">ชื่อ-นามสกุล</div>
          <div class="col-6">
            {{
              motherData.prefix
                ? motherData.prefix +
                  motherData.firstName +
                  " " +
                  motherData.lastName
                : "-"
            }}
          </div>
          <div class="col-1 text-grey-6 text-weight-medium">อาชีพ</div>
          <div class="col">
            {{ motherData.job ? motherData.job : "-" }}
          </div>
        </div>
        <div class="row items-center">
          <div class="col-2 text-grey-6 text-weight-medium">สถานภาพการมีชีวิต</div>
          <div class="col">
            <div v-if="motherData.isLive">มีชีวิตอยู่</div>
            <div v-else>ถึงแก่กรรม</div>
          </div>
        </div>
      </q-card>
    </div>
    <q-separator  class="q-my-lg" />
    <div v-if="spouseData.firstName !== null">
      <div class="col-12 row q-pb-sm">
        <div class="q-mr-md text-weight-bold text-primary text-subtitle1">
          • คู่สมรส
        </div>
      </div>
      <q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
        <div class="row items-center">
          <div class="col-2 text-grey-6 text-weight-medium">
            <div>เลขบัตรประจำตัวประชาชน</div>
          </div>
          <div class="col">
            {{ spouseData.citizenId ? spouseData.citizenId : "-" }}
          </div>
        </div>
        <div class="row items-center">
          <div class="col-2 text-grey-6 text-weight-medium">ชื่อ-นามสกุล</div>
          <div class="col-6">
            {{
              spouseData.prefix
                ? spouseData.prefix +
                  spouseData.firstName +
                  " " +
                  spouseData.lastName
                : "-"
            }}
          </div>
          <div class="col-1 text-grey-6 text-weight-medium">อาชีพ</div>
          <div class="col">
            {{ spouseData.job ? spouseData.job : "-" }}
          </div>
        </div>
        <div class="row items-center">
          <div class="col-2 text-grey-6 text-weight-medium">สถานภาพการมีชีวิต</div>
          <div class="col">
            <div v-if="spouseData.isLive">มีชีวิตอยู่</div>
            <div v-else>ถึงแก่กรรม</div>
          </div>
        </div>
      </q-card>
    </div>
    <q-separator  class="q-my-lg" />
    <div v-if="childrenData.childrens[0] !== undefined">
      <div class="col-12 row q-pb-sm">
        <div class="q-mr-md text-weight-bold text-primary text-subtitle1">
          • บุตร
        </div>
      </div>
      <div v-for="(children, index) in childrenData.childrens" :key="index">
        <q-card bordered class="bg-grey-1  q-pb-md">
          <div class="col-12 row q-py-sm q-px-md bg-grey-2 items-center ">
            <div class=" text-weight-medium q-pr-md">
              บุตรคนที่ : {{ index + 1 }}
            </div>
          </div>
          <q-separator/>
          <div class="col-12 q-pa-md q-col-gutter-md">
            <div class="row items-center ">
              <div class="col-2 text-grey-6 text-weight-medium">
                <div>เลขบัตรประจำตัวประชาชน</div>
              </div>
              <div class="col-10">
                {{ children.childrenCitizenId }}
              </div>
            </div>
            <div class="row items-center">
              <div class="col-2 text-grey-6 text-weight-medium">ชื่อ-นามสกุล</div>
              <div class="col-6">
                {{
                  children.childrenPrefix
                    ? children.childrenPrefix +
                      children.childrenFirstName +
                      " " +
                      children.childrenLastName
                    : "-"
                }}
              </div>
              <div class="col-1 text-grey-6 text-weight-medium">อาชีพ</div>
              <div class="col">
                {{ children.childrenCareer }}
              </div>
            </div>
            <div class="row items-center">
              <div class="col-2 text-grey-6 text-weight-medium">สถานภาพการมีชีวิต</div>
              <div class="col">
                <div v-if="children.childrenLive">มีชีวิตอยู่</div>
                <div v-else>ถึงแก่กรรม</div>
              </div>
            </div>
          </div>
        </q-card>
      </div>
    </div>
  </div>

  <q-dialog v-model="dialog" class="dialog" persistent>
    <q-card style="min-width: 80%">
      <q-form @submit.prevent greedy @validation-success="onSubmit()">
        <dialog-header tittle="แก้ไขข้อมูลครอบครัว" :close="closeDialog" />
        <q-separator color="grey-4" />
        <q-card-section style="max-height: 70vh" class="scroll">
          <div class="col-12 row q-pb-sm">
            <div
              class="q-mr-md q-pl-md text-weight-bold text-primary text-subtitle1"
            >
              • บิดา
            </div>
            <div class="flex q-gutter-sm">
              <q-radio
                v-model="fatherDataEdit.isHaveInfo"
                checked-icon="task_alt"
                unchecked-icon="panorama_fish_eye"
                :val="1"
                label="มีข้อมูล"
                dense
                color="primary"
              />
              <q-radio
                v-model="fatherDataEdit.isHaveInfo"
                checked-icon="task_alt"
                unchecked-icon="panorama_fish_eye"
                :val="0"
                color="red"
                label="ไม่มีข้อมูล"
                dense
              />
            </div>
          </div>
          <q-card
            v-if="fatherDataEdit.isHaveInfo"
            bordered
            class="bg-grey-1 q-pa-md"
          >
            <div class="row q-col-gutter-md">
              <div class="col">
                <q-input
                  :disable="!fatherDataEdit.isHaveInfo"
                  outlined
                  hide-bottom-space
                  bg-color="white"
                  dense
                  v-model="fatherDataEdit.citizenId"
                  :label="`${'เลขประจำตัวประชาชน'}`"
                  maxlength="13"
                  :rules="[
                    (val) => val.length === 13 || 'กรุณากรอกเลขบัตรประชาชน',
                  ]"
                  class="inputgreen"
                  mask="#############"
                />
              </div>
              <div class="col">
                <q-select
                  :disable="!fatherDataEdit.isHaveInfo"
                  outlined
                  bg-color="white"
                  lazy-rules
                  hidden-space
                  dense
                  class="inputgreen"
                  :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
                  label="คำนำหน้าชื่อ"
                  v-model="fatherDataEdit.prefix"
                  use-input
                  input-debounce="0"
                  emit-value
                  map-options
                  :options="store.Ops.prefixOps"
                  option-label="name"
                  option-value="name"
                  @filter="(inputValue:string,
                    doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
                    ) "
                />
              </div>
              <div class="col">
                <q-input
                  :disable="!fatherDataEdit.isHaveInfo"
                  outlined
                  dense
                  bg-color="white"
                  class="inputgreen"
                  lazy-rules
                  v-model="fatherDataEdit.firstName"
                  :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
                  label="ชื่อ"
                  hidden-space
                />
              </div>
              <div class="col">
                <q-input
                  :disable="!fatherDataEdit.isHaveInfo"
                  outlined
                  dense
                  class="inputgreen"
                  bg-color="white"
                  lazy-rules
                  v-model="fatherDataEdit.lastName"
                  :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
                  label="นามสกุล"
                />
              </div>
              <div class="col">
                <q-input
                  :disable="!fatherDataEdit.isHaveInfo"
                  outlined
                  dense
                  class="inputgreen"
                  bg-color="white"
                  v-model="fatherDataEdit.job"
                  label="อาชีพ"
                />
              </div>
            </div>
            <div class="row">
              <div class="q-mr-sm">สถานภาพการมีชีวิต</div>
              <div>
                <q-radio
                  :disable="!fatherDataEdit.isHaveInfo"
                  class="q-mr-sm"
                  v-model="fatherDataEdit.isLive"
                  checked-icon="task_alt"
                  unchecked-icon="panorama_fish_eye"
                  :val="1"
                  label="ยังมีชีวิตอยู่"
                  dense
                  :color="!fatherDataEdit.isHaveInfo ? 'grey' : 'primary'"
                />
                <q-radio
                  :disable="!fatherDataEdit.isHaveInfo"
                  v-model="fatherDataEdit.isLive"
                  checked-icon="task_alt"
                  unchecked-icon="panorama_fish_eye"
                  :val="0"
                  :color="!fatherDataEdit.isHaveInfo ? 'grey' : 'red'"
                  label="ถึงแก่กรรม"
                  dense
                />
              </div>
            </div>
          </q-card>
          <q-separator  class="q-my-lg" />
          <div class="col-12 row q-pb-sm">
            <div
              class="q-mr-md q-pl-md text-weight-bold text-primary text-subtitle1"
            >
              • มารดา
            </div>
            <div class="flex q-gutter-sm">
              <q-radio
                v-model="motherDataEdit.isHaveInfo"
                checked-icon="task_alt"
                unchecked-icon="panorama_fish_eye"
                :val="1"
                label="มีข้อมูล"
                dense
                color="primary"
              />
              <q-radio
                v-model="motherDataEdit.isHaveInfo"
                checked-icon="task_alt"
                unchecked-icon="panorama_fish_eye"
                :val="0"
                color="red"
                label="ไม่มีข้อมูล"
                dense
              />
            </div>
          </div>
          <q-card
            v-if="motherDataEdit.isHaveInfo"
            bordered
            class="bg-grey-1 q-pa-md"
          >
            <div class="row q-col-gutter-md">
              <div class="col">
                <q-input
                  :disable="!motherDataEdit.isHaveInfo"
                  outlined
                  hide-bottom-space
                  bg-color="white"
                  dense
                  v-model="motherDataEdit.citizenId"
                  :label="`${'เลขประจำตัวประชาชน'}`"
                  maxlength="13"
                  :rules="[
                    (val) => val.length === 13 || 'กรุณากรอกเลขบัตรประชาชน',
                  ]"
                  class="inputgreen"
                  mask="#############"
                />
              </div>
              <div class="col">
                <q-select
                  :disable="!motherDataEdit.isHaveInfo"
                  outlined
                  bg-color="white"
                  lazy-rules
                  dense
                  v-model="motherDataEdit.prefix"
                  :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
                  label="คำนำหน้าชื่อ"
                  hidden-space
                  class="inputgreen"
                  use-input
                  input-debounce="0"
                  emit-value
                  map-options
                  :options="store.Ops.prefixOps"
                  option-label="name"
                  option-value="name"
                  @filter="(inputValue:string,
                    doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
                    ) "
                />
              </div>
              <div class="col">
                <q-input
                  :disable="!motherDataEdit.isHaveInfo"
                  outlined
                  dense
                  class="inputgreen"
                  bg-color="white"
                  lazy-rules
                  v-model="motherDataEdit.firstName"
                  :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
                  label="ชื่อ"
                  hidden-space
                />
              </div>
              <div class="col">
                <q-input
                  :disable="!motherDataEdit.isHaveInfo"
                  outlined
                  class="inputgreen"
                  dense
                  bg-color="white"
                  lazy-rules
                  v-model="motherDataEdit.lastName"
                  :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
                  label="นามสกุล"
                />
              </div>
              <div class="col">
                <q-input
                  :disable="!motherDataEdit.isHaveInfo"
                  outlined
                  class="inputgreen"
                  dense
                  bg-color="white"
                  v-model="motherDataEdit.job"
                  label="อาชีพ"
                />
              </div>
            </div>
            <div class="row">
              <div class="q-mr-sm">สถานภาพการมีชีวิต</div>
              <div>
                <q-radio
                  :disable="!motherDataEdit.isHaveInfo"
                  class="q-mr-sm"
                  v-model="motherDataEdit.isLive"
                  checked-icon="task_alt"
                  unchecked-icon="panorama_fish_eye"
                  :val="1"
                  label="ยังมีชีวิตอยู่"
                  dense
                  :color="!motherDataEdit.isHaveInfo ? 'grey' : 'primary'"
                />
                <q-radio
                  :disable="!motherDataEdit.isHaveInfo"
                  v-model="motherDataEdit.isLive"
                  checked-icon="task_alt"
                  unchecked-icon="panorama_fish_eye"
                  :val="0"
                  :color="!motherDataEdit.isHaveInfo ? 'grey' : 'red'"
                  label="ถึงแก่กรรม"
                  dense
                />
              </div>
            </div>
          </q-card>
          <q-separator  class="q-my-lg" />
          <div class="col-12 row q-pb-sm">
            <div
              class="q-mr-md q-pl-md text-weight-bold text-primary text-subtitle1"
            >
              • คู่สมรส
            </div>
            <div class="flex q-gutter-sm">
              <q-radio
                v-model="spouseDataEdit.isHave"
                checked-icon="task_alt"
                unchecked-icon="panorama_fish_eye"
                :val="1"
                label="มี"
                dense
                color="primary"
              />
              <q-radio
                v-model="spouseDataEdit.isHave"
                checked-icon="task_alt"
                unchecked-icon="panorama_fish_eye"
                :val="0"
                color="red"
                label="ไม่มี"
                dense
              />
            </div>
          </div>
          <q-card
            v-if="spouseDataEdit.isHave"
            bordered
            class="bg-grey-1 q-pa-md"
          >
            <div class="row q-col-gutter-md">
              <div class="col">
                <q-input
                  :disable="!spouseDataEdit.isHave"
                  outlined
                  hide-bottom-space
                  bg-color="white"
                  dense
                  class="inputgreen"
                  v-model="spouseDataEdit.citizenId"
                  :label="`${'เลขประจำตัวประชาชน'}`"
                  maxlength="13"
                  :rules="[
                    (val) => val.length === 13 || 'กรุณากรอกเลขบัตรประชาชน',
                  ]"
                  mask="#############"
                />
              </div>
              <div class="col">
                <q-select
                  :disable="!spouseDataEdit.isHave"
                  outlined
                  class="inputgreen"
                  bg-color="white"
                  lazy-rules
                  dense
                  v-model="spouseDataEdit.prefix"
                  :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
                  label="คำนำหน้าชื่อ"
                  hidden-space
                  use-input
                  input-debounce="0"
                  emit-value
                  map-options
                  :options="store.Ops.prefixOps"
                  option-label="name"
                  option-value="name"
                  @filter="(inputValue: any,
            doneFn: Function) => filterSelector(inputValue, doneFn, 'prefixOps'
            )"
                />
              </div>
              <div class="col">
                <q-input
                  :disable="!spouseDataEdit.isHave"
                  outlined
                  class="inputgreen"
                  dense
                  bg-color="white"
                  lazy-rules
                  v-model="spouseDataEdit.firstName"
                  :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
                  label="ชื่อ"
                  hidden-space
                />
              </div>
              <div class="col">
                <q-input
                  :disable="!spouseDataEdit.isHave"
                  outlined
                  dense
                  class="inputgreen"
                  bg-color="white"
                  lazy-rules
                  v-model="spouseDataEdit.lastName"
                  :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
                  label="นามสกุล"
                />
              </div>
              <div class="col">
                <q-input
                  :disable="!spouseDataEdit.isHave"
                  outlined
                  dense
                  class="inputgreen"
                  bg-color="white"
                  v-model="spouseDataEdit.job"
                  label="อาชีพ"
                />
              </div>
            </div>
            <div class="row">
              <div class="q-mr-sm">สถานภาพการมีชีวิต</div>
              <div>
                <q-radio
                  :disable="!spouseDataEdit.isHave"
                  class="q-mr-sm"
                  v-model="spouseDataEdit.isLive"
                  checked-icon="task_alt"
                  unchecked-icon="panorama_fish_eye"
                  :val="1"
                  label="ยังมีชีวิตอยู่"
                  dense
                  :color="!spouseDataEdit.isHave ? 'grey' : 'primary'"
                />
                <q-radio
                  :disable="!spouseDataEdit.isHave"
                  v-model="spouseDataEdit.isLive"
                  checked-icon="task_alt"
                  unchecked-icon="panorama_fish_eye"
                  :val="0"
                  :color="!motherData.isHaveInfo ? 'grey' : 'red'"
                  label="ถึงแก่กรรม"
                  dense
                />
              </div>
            </div>
          </q-card>
          <q-separator  class="q-mt-lg q-mb-md" />
          <div class="col-12 row items-center q-pb-sm">
            <div
              class="q-mr-md q-pl-md text-weight-bold text-primary text-subtitle1"
            >
              • บุตร
            </div>
            <q-btn
              flat
              round
              color="primary"
              icon="add"
              size="14px"
              dense
              @click="addChildren"
            >
              <q-tooltip> เพิ่มข้อมูล </q-tooltip>
            </q-btn>
          </div>
          <div
            v-for="(items, index) in childrenDataEdit.childrens"
            :key="index"
          >
            
            <div class="row items-center">
              <q-card bordered class="bg-grey-1 col-12 q-mb-lg">
                <div class="col-12 row q-py-sm q-px-md bg-grey-2 items-center ">
                  <div class=" text-weight-medium q-pr-md">
                    บุตรคนที่ : {{ index + 1 }}
                  </div>
                  <q-btn
                    flat
                    dense
                    size="12px"
                    round
                    color="red"
                    @click="deleteChildren(items)"
                    icon="mdi-delete"
                  >
                    <q-tooltip>ลบข้อมูลบุตรคนที่ {{ index + 1 }}</q-tooltip>
                  </q-btn>
                </div>
                <q-separator/>
                <div class="q-pa-md col-12">
                  <div class="row q-col-gutter-md">
                    <div class="col">
                      <q-input
                        outlined
                        hide-bottom-space
                        dense
                        v-model="items.childrenCitizenId"
                        :label="`${'เลขประจำตัวประชาชน'}`"
                        bg-color="white"
                        class="inputgreen"
                        :rules="[
                          (val) =>
                            val.length === 13 || 'กรุณากรอกเลขบัตรประชาชน',
                        ]"
                        maxlength="13"
                        mask="#############"
                      />
                    </div>
                    <div class="col">
                      <q-select
                        outlined
                        dense
                        lazy-rules
                        bg-color="white"
                        v-model="items.childrenPrefix"
                        :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
                        label="คำนำหน้าชื่อ"
                        use-input
                        class="inputgreen"
                        input-debounce="0"
                        emit-value
                        map-options
                        :options="store.Ops.prefixOps"
                        option-label="name"
                        option-value="name"
                        @filter="(inputValue:string,
                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
                      ) "
                      />
                    </div>
                    <div class="col">
                      <q-input
                        outlined
                        dense
                        lazy-rules
                        class="inputgreen"
                        bg-color="white"
                        v-model="items.childrenFirstName"
                        :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
                        label="ชื่อ"
                      />
                    </div>
                    <div class="col">
                      <q-input
                        outlined
                        lazy-rules
                        class="inputgreen"
                        bg-color="white"
                        dense
                        v-model="items.childrenLastName"
                        :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
                        label="นามสกุล"
                      />
                    </div>
                    <div class="col">
                      <q-input
                        outlined
                        bg-color="white"
                        dense
                        class="inputgreen"
                        v-model="items.childrenCareer"
                        label="อาชีพ"
                      />
                    </div>
                  </div>
                  <div class="row">
                    <div class="q-mr-sm">สถานภาพการมีชีวิต</div>
                    <div>
                      <q-radio
                        class="q-mr-sm"
                        v-model="items.childrenLive"
                        checked-icon="task_alt"
                        unchecked-icon="panorama_fish_eye"
                        :val="1"
                        label="ยังมีชีวิตอยู่"
                        dense
                        color="primary"
                      />
                      <q-radio
                        v-model="items.childrenLive"
                        checked-icon="task_alt"
                        unchecked-icon="panorama_fish_eye"
                        :val="0"
                        color="red"
                        label="ถึงแก่กรรม"
                        dense
                      />
                    </div>
                  </div>
                </div>
              </q-card>
            </div>
          </div>
        </q-card-section>
        <q-separator />
        <q-card-actions align="right">
          <q-btn
            dense
            unelevated
            label="บันทึก"
            id="onSubmit"
            type="submit"
            color="public"
            class="q-px-md"
          >
            <q-tooltip>บันทึกข้อมูล</q-tooltip>
          </q-btn>
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>

  <q-dialog v-model="historyDialog" class="dialog" persistent>
    <q-card style="min-width: 60%">
      <dialog-header
        tittle="ประวัติแก้ไขข้อมูลครอบครัว"
        :close="closeHistoryDialog"
      />
      <q-separator color="grey-4" />
      <q-card-section style="max-height: 60vh" class="scroll q-pa-none">
        <div v-if="historyRows.length === 0">ไม่พบข้อมูล</div>
        <div v-else class="scroll">
            <div class="row col-12 bg-teal-1 q-py-sm q-px-md">
                ลำดับที่ <strong class="q-pl-sm q-pr-md">{{ index }}</strong> <span class="q-pr-md">: </span>
                แก้ไขโดย <strong class="q-pl-sm q-pr-md">{{ historyRows[index - 1].lastUpdateFullName }}</strong>
                วันที่แก้ไข <strong class="q-pl-sm q-pr-md">{{ date2Thai(historyRows[index - 1].lastUpdatedAt) }}</strong>
            </div>
            <div class="q-pa-md">
              <div class="col-12 row q-pb-sm">
                <div
                  class="q-mr-md text-weight-bold text-primary text-subtitle1"
                >
                  • บิดา
                </div>
              </div>
              <q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md" >
                <div class="row items-center">
                  <div class="col-2 text-grey-6 text-weight-medium">
                    <div>เลขบัตรประจำตัวประชาชน</div>
                  </div>
                  <div class="col">
                    {{ historyRows[index - 1].fatherCitizenId }}
                  </div>
                </div>
                <div class="row items-center">
                  <div class="col-2 text-grey-6 text-weight-medium">ชื่อ-นามสกุล</div>
                  <div class="col-6">
                    {{
                      historyRows[index - 1].fatherPrefix +
                      historyRows[index - 1].fatherFirstName +
                      " " +
                      historyRows[index - 1].fatherLastName
                    }}
                  </div>
                  <div class="col-1 text-grey-6 text-weight-medium">อาชีพ</div>
                  <div class="col">
                    {{ historyRows[index - 1].fatherCareer }}
                  </div>
                </div>
                <div class="row items-center">
                  <div class="col-2 text-grey-6 text-weight-medium">สถานภาพการมีชีวิต</div>
                  <div class="col-10">
                    <div v-if="historyRows[index - 1].fatherLive">
                      มีชีวิตอยู่
                    </div>
                    <div v-else>ถึงแก่กรรม</div>
                  </div>
                </div>
              </q-card>


              <div class="col-12 row q-pb-sm q-mt-lg" >
                <div
                  class="q-mr-md text-weight-bold text-primary text-subtitle1"
                >
                  • มารดา
                </div>
              </div>
              <q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
                <div class="row items-center">
                  <div class="col-2 text-grey-6 text-weight-medium">
                    <div>เลขบัตรประจำตัวประชาชน</div>
                  </div>
                  <div class="col">
                    {{ historyRows[index - 1].motherCitizenId }}
                  </div>
                </div>
                <div class="row items-center">
                  <div class="col-2 text-grey-6 text-weight-medium">ชื่อ-นามสกุล</div>
                  <div class="col-6">
                    {{
                      historyRows[index - 1].motherPrefix +
                      historyRows[index - 1].motherFirstName +
                      " " +
                      historyRows[index - 1].motherLastName
                    }}
                  </div>
                  <div class="col-1 text-grey-6 text-weight-medium">อาชีพ</div>
                  <div class="col">
                    {{ historyRows[index - 1].motherCareer }}
                  </div>
                </div>
                <div class="row items-center">
                  <div class="col-2 text-grey-6 text-weight-medium">สถานภาพการมีชีวิต</div>
                  <div class="col">
                    <div v-if="historyRows[index - 1].motherLive">
                      มีชีวิตอยู่
                    </div>
                    <div v-else>ถึงแก่กรรม</div>
                  </div>
                </div>
              </q-card>

              <div
                v-if="historyRows[index - 1].couple"
                class="col-12 row q-pb-sm q-mt-lg"
              >
                <div
                  class="q-mr-md text-weight-bold text-primary text-subtitle1"
                >
                  • คู่สมรส
                </div>
              </div>
              <q-card
                v-if="historyRows[index - 1].couple"
                bordered
                class="bg-grey-1 q-gutter-md q-ma-none q-pb-md"
              >
                <div class="row items-center">
                  <div class="col-2 text-grey-6 text-weight-medium">
                    <div>เลขบัตรประจำตัวประชาชน</div>
                  </div>
                  <div class="col">
                    {{ historyRows[index - 1].coupleCitizenId }}
                  </div>
                </div>
                <div class="row items-center">
                  <div class="col-2 text-grey-6 text-weight-medium">ชื่อ-นามสกุล</div>
                  <div class="col-6">
                    {{
                      historyRows[index - 1].couplePrefix +
                      historyRows[index - 1].coupleFirstName +
                      " " +
                      historyRows[index - 1].coupleLastName
                    }}
                  </div>
                  <div class="col-1 text-grey-6 text-weight-medium">อาชีพ</div>
                  <div class="col">
                    {{ historyRows[index - 1].coupleCareer }}
                  </div>
                </div>
                <div class="row items-center">
                  <div class="col-2 text-grey-6 text-weight-medium">สถานภาพการมีชีวิต</div>
                  <div class="col">
                    <div v-if="historyRows[index - 1].coupleLive">
                      มีชีวิตอยู่
                    </div>
                    <div v-else>ถึงแก่กรรม</div>
                  </div>
                </div>
              </q-card>
          
              <div
                v-if="historyRows[index - 1].children[0] !== undefined"
                class="col-12 row q-pb-sm q-mt-lg"
              >
                <div
                  class="q-mr-md text-weight-bold text-primary text-subtitle1"
                >
                  • บุตร
                </div>
              </div>
              <div
                v-for="children in historyRows[index - 1].children"
                :key="index"
              >
                <q-card bordered class="bg-grey-1  q-pb-md">
                  <div class="col-12 row q-py-sm q-px-md bg-grey-2 items-center ">
                    <div class=" text-weight-medium q-pr-md">
                      บุตรคนที่ : {{ index + 1 }}
                    </div>
                  </div>
                  <q-separator/>
                  <div class="col-12 q-pa-md q-col-gutter-md">
                    <div class="row items-center">
                      <div class="col-2 text-grey-6 text-weight-medium">
                        <div>เลขบัตรประจำตัวประชาชน</div>
                      </div>
                      <div class="col-10">
                        {{ children.childrenCitizenId }}
                      </div>
                    </div>
                    <div class="row items-center">
                      <div class="col-2 text-grey-6 text-weight-medium">ชื่อ-นามสกุล</div>
                      <div class="col-6">
                        {{
                          children.childrenPrefix +
                          children.childrenFirstName +
                          " " +
                          children.childrenLastName
                        }}
                      </div>
                      <div class="col-1 text-grey-6 text-weight-medium">อาชีพ</div>
                      <div class="col">
                        {{ children.childrenCareer }}
                      </div>
                    </div>
                    <div class="row items-center">
                      <div class="col-2 text-grey-6 text-weight-medium">สถานภาพการมีชีวิต</div>
                      <div class="col">
                        <div v-if="children.childrenLive">มีชีวิตอยู่</div>
                        <div v-else>ถึงแก่กรรม</div>
                      </div>
                    </div>
                  </div>
                </q-card>
              </div>
            </div>
        </div>
      </q-card-section>
      <q-separator color="grey-4" />
      <q-card-actions align="center">
        <div class="q-pa-sm flex flex-center">
          <q-pagination v-model="index" :max="historyRows.length" input />
        </div>
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>
