<!-- card ข้อมูลครอบครัว -->
<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"
      :addData="true"
      :editOnly="false"
      :cancel="cancelData"
      :changeBtn="changeBtn"
      :editData="step == 2"
      :disable="statusEdit"
    />
    <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-xs-12 q-gutter-sm items-center flex q-my-sm">
          <label class="text-weight-bold">• คู่สมรส</label>
          <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="ไม่มี"
            dense
            :disable="!edit"
            @update:model-value="selectRadio"
          />
        </div>
        <div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
          <q-select
            hide-bottom-space
            :class="getClass(edit)"
            :readonly="!edit"
            :borderless="!edit"
            :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
            :outlined="edit"
            dense
            lazy-rules
            v-model="prefixRelation"
            emit-value
            map-options
            option-label="name"
            :options="prefixRelationOptions"
            option-value="id"
            :label="`${'คำนำหน้า'}`"
          />
        </div>

        <div class="col-xs-6 col-sm-3 col-md-3" 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) => !!val || `${'กรุณากรอก ชื่อ'}`]"
            :label="`${'ชื่อ'}`"
          />
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3" 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) => !!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"
            :rules="[(val) => !!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.nationalityC"
            :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
            :label="`${'สัญชาติ'}`"
          />
        </div>

        <div class="col-xs-12 text-weight-bold">• บิดา</div>
        <div class="col-xs-12 col-sm-2 col-md-2">
          <q-select
            hide-bottom-space
            :class="getClass(edit)"
            :readonly="!edit"
            :borderless="!edit"
            :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
            :outlined="edit"
            dense
            lazy-rules
            v-model="prefixDad"
            emit-value
            map-options
            option-label="name"
            :options="prefixDadOptions"
            option-value="id"
            :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.firstnameM"
            :rules="[(val) => !!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) => !!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"
            :rules="[(val) => !!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.nationalityM"
            :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
            :label="`${'สัญชาติ'}`"
          />
        </div>

        <div class="col-xs-12 text-weight-bold">• มารดา</div>
        <div class="col-xs-12 col-sm-2 col-md-2">
          <q-select
            hide-bottom-space
            :class="getClass(edit)"
            :readonly="!edit"
            :borderless="!edit"
            :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
            :outlined="edit"
            dense
            lazy-rules
            v-model="prefixMom"
            emit-value
            map-options
            option-label="name"
            :options="prefixMomOptions"
            option-value="id"
            :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.firstnameF"
            :rules="[(val) => !!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) => !!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"
            :rules="[(val) => !!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.nationalityF"
            :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
            :label="`${'สัญชาติ'}`"
          />
        </div>
      </div>
    </q-form>
  </q-card>
  <q-dialog :model-value="modalConsend" persistent>
    <q-card style="min-width: 800px">
      <Conference :ok="consendOk" :close="consenClose" />
    </q-card>
  </q-dialog>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import type { PropType } from 'vue'
import { useCounterMixin } from '@/stores/mixin'
import type { Family, DataOption } from '@/modules/01_exam/interface/index/Main'
import { defaultFamily } from '@/modules/01_exam/interface/index/Main'
import HeaderTop from '@/components/top.vue'
import Conference from '@/modules/01_exam/components/Conference.vue'
import { useExamDataStore } from '@/modules/01_exam/store'
import http from '@/plugins/http'
import config from '@/app.config'

const mixin = useCounterMixin()
const store = useExamDataStore()
const { date2Thai, calAge } = mixin
const prefixRelation = ref<string>()
const prefixMom = ref<string>()
const prefixDad = ref<string>()
const prefixDadOptions = ref<DataOption[]>([])
const prefixMomOptions = ref<DataOption[]>([])
const prefixRelationOptions = ref<DataOption[]>([])
const edit = ref<boolean>(false)
const myform = ref<any>()
const familyData = ref<Family>(defaultFamily)
const statusOptions = ref<DataOption[]>([])
const modalConsend = ref<boolean>(false)

// const prefixOptions = ref<any>([
//   { id: "1", name: "นาย" },
//   { id: "2", name: "นาง" },
//   { id: "3", name: "นางสาว" },
// ]);

const props = defineProps({
  prefixOptions: {
    type: Array as PropType<DataOption[]>,
    required: true
  },
  statusEdit: {
    type: Boolean,
    required: true
  },
  notiNoEdit: {
    type: Function,
    default: () => console.log('not function')
  },
  step: {
    type: Number,
    required: true
  }
})

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

onMounted(async () => {
  await fetchData()
  await fetchprefixMom()
  await fetchprefixDad()
  await fetchprefixRelation()
})
const fetchData = () => {
  prefixRelation.value = 'e4e6a4f8-39c6-467f-bd84-7650d105fc4c'
  prefixDad.value = '02fbc0e3-1da0-45b5-90da-783d344b5896'
  prefixMom.value = '362405f7-9ca2-4f3a-b5ac-08b56c24555d'
}

const fetchprefixMom = async () => {
  //   loader.value = true;
  await http
    .get(config.API.prefix)
    .then((res) => {
      const data = res.data.result
      let option: DataOption[] = []
      data.map((r: DataOption) => {
        option.push({ id: r.id.toString(), name: r.name.toString() })
      })
      prefixMomOptions.value = option
    })
    .catch((e) => {})
    .finally(() => {
      //   loader.value = false;
    })
}

const fetchprefixDad = async () => {
  //   loader.value = true;
  await http
    .get(config.API.prefix)
    .then((res) => {
      const data = res.data.result
      let option: DataOption[] = []
      data.map((r: DataOption) => {
        option.push({ id: r.id.toString(), name: r.name.toString() })
      })
      prefixDadOptions.value = option
    })
    .catch((e) => {})
    .finally(() => {
      //   loader.value = false;
    })
}

const fetchprefixRelation = async () => {
  //   loader.value = true;
  await http
    .get(config.API.prefix)
    .then((res) => {
      const data = res.data.result
      let option: DataOption[] = []
      data.map((r: DataOption) => {
        option.push({ id: r.id.toString(), name: r.name.toString() })
      })
      prefixRelationOptions.value = option
    })
    .catch((e) => {})
    .finally(() => {
      //   loader.value = false;
    })
}

const saveData = async () => {
  if (store.consend == true) {
    edit.value = false
    emit('update:statusEdit', false)
    await myform.value.validate().then(async (success: boolean) => {
      if (success) {
      } else {
      }
    })
  } else {
    modalConsend.value = true
  }
}

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 selectRadio = (e: boolean, i: any) => {
  if (!e) {
    familyData.value.prefixIdC = ''
    familyData.value.firstnameC = ''
    familyData.value.lastnameC = ''
    familyData.value.occupationC = ''
  }
}

const consenClose = () => {
  modalConsend.value = false
}

const consendOk = () => {
  modalConsend.value = false
  store.consend = true
  saveData()
}

const cancelData = () => {}

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