<!-- tab ข้อมูลส่วนบุคคล -->
<template>
  <Information
    :prefixOptions="prefixOptions"
    :genderOptions="genderOptions"
    :bloodOptions="bloodOptions"
    :statusOptions="statusOptions"
    :religionOptions="religionOptions"
    :provinceOptions="provinceOptions"
    v-model:statusEdit="statusEdit"
    :notiNoEdit="notiNoEdit"
    :step="step"
  />
  <Address v-model:statusEdit="statusEdit" :notiNoEdit="notiNoEdit" :step="step" />
  <Family
    :prefixOptions="prefixOptions"
    v-model:statusEdit="statusEdit"
    :notiNoEdit="notiNoEdit"
    :step="step"
  />
  <Occupation v-model:statusEdit="statusEdit" :notiNoEdit="notiNoEdit" :step="step" />
  <NotifyError
    :modal="modalNoEdit"
    :tittle="modalNoEditTittle"
    :detail="modalNoEditDetail"
    :close="closeModalError"
  />
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import type { DataOption } from '@/modules/01_exam/interface/index/Main'
import Information from '@/modules/01_exam/components/Form/Profile/Information.vue'
import Address from '@/modules/01_exam/components/Form/Profile/Address.vue'
import Family from '@/modules/01_exam/components/Form/Profile/Family.vue'
import Occupation from '@/modules/01_exam/components/Form/Profile/Occupation.vue'
import NotifyError from '@/components/NotifyError.vue'
import http from '@/plugins/http'
import config from '@/app.config'
import { useQuasar } from 'quasar'
import { useCounterMixin } from '@/stores/mixin'

const props = defineProps({
  loader: {
    //หน้า main มีการอัพเดทค่าให้ refresh data
    type: Boolean,
    required: true
  },
  statusEdit: {
    type: Boolean,
    required: true
  },
  step: {
    type: Number,
    required: true
  }
})

const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
const { notifyConfirm } = mixin
const loader = ref<boolean>(true)
const statusEdit = ref<boolean>(false)
const modalNoEdit = ref<boolean>(false)
// const modalNoEditTittle = ref<string>('ยืนยันการเปลี่ยนแท็ปใช่หรือไม่?')
// const modalNoEditDetail = ref<string>(
//   'ยังมีข้อมูลที่ยังไม่ถูกบันทึก ถ้าตกลงเปลี่ยนแท็ปข้อมูลที่ยังไม่ถูกบันทึกจะหาย'
// )
const modalNoEditTittle = ref<string>('ไม่สามารถไม่สามารถแก้ไขข้อมูลได้?')
const modalNoEditDetail = ref<string>('มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล')

const prefixOptions = ref<DataOption[]>([])
const bloodOptions = ref<DataOption[]>([])
const genderOptions = ref<DataOption[]>([])
const statusOptions = ref<DataOption[]>([])
const religionOptions = ref<DataOption[]>([])
const provinceOptions = ref<DataOption[]>([])

const emit = defineEmits(['update:loader', 'update:statusEdit'])

watch(statusEdit, (count: boolean, prevCount: boolean) => {
  emit('update:statusEdit', count)
})

const closeModalError = () => {
  modalNoEdit.value = false
}

const notiNoEdit = () => {
  modalNoEdit.value = true
}
</script>
