<!-- step กรอกข้อมูล -->
<template>
  <div>
    <Profile
      :status="status"
      v-model:formInformation="formInformation"
      v-model:formAddress="formAddress"
      v-model:formFamily="formFamily"
      v-model:formOccupation="formOccupation"
    />
    <div class="text-center q-pt-sm">
      <q-checkbox
        v-model="acceptTermOfUse"
        :disable="(status !== 'register' && status !== 'rejectRegister') || statusEdit"
        label="ข้าพเจ้าขอให้คำรับรอง"
      />
    </div>
    <div>
      1. ข้าพเจ้าขอให้คำรับรองว่า
      ข้อความดังกล่าวข้างต้นนี้เป็นจริงทุกประการและข้าพเจ้ามีคุณสมบัติทั่วไปและ ไม่มีลักษณะต้องห้าม
      ตามมาตรา 43 แห่งพระราชบัญญัติระเบียบข้าราชการกรุงเทพมหานครและบุคลากร-กรุงเทพมหานคร พ.ศ. 2554
      และมีคุณสมบัติเฉพาะสำหรับตำแหน่งที่สมัครตรงตามประกาศรับสมัคร
    </div>
    <div>
      2. กรณีข้าพเจ้ามีลักษณะต้องห้าม ตามมาตรา 43 ข. แห่งพระราชบัญญัติระเบียบข้าราชการกรุงเทพมหานคร
      และบุคลากรกรุงเทพมหานคร พ.ศ. 2554 และประสงค์จะยื่นคำขอยกเว้นเข้ารับราชการฯ ต่อหัวหน้าสำนักงาน
      ก.ก. ตามระเบียบ ก.ก.
      ว่าด้วยการยกเว้นให้ผู้มีลักษณะต้องห้ามเข้ารับราชการเป็นข้าราชการกรุงเทพมหานคร พ.ศ. 2556 ตามมติ
      ก.ก. ครั้งที่ 7/2556 เมื่อวันที่ 15 สิงหาคม 2556 ข้าพเจ้าจะยื่นภายในวันปิดรับสมัคร ทั้งนี้
      หากยื่นภายหลังกำหนด สำนักงาน ก.ก. จะไม่รับคำขอดังกล่าว
    </div>
    <div>
      3.
      ข้าพเจ้าจะยื่นหลักฐานและเอกสารที่แสดงว่าเป็นผู้มีคุณสมบัติทั่วไปและมีคุณสมบัติเฉพาะสำหรับตำแหน่งที่สมัครตรงตามประกาศรับสมัครภายในระยะเวลาที่กำหนดตามประกาศฯ
    </div>
    <div>
      4. หากมีการตรวจสอบหลักฐานและเอกสารและหรือคุณวุฒิการศึกษาของข้าพเจ้าในภายหลัง
      ปรากฏว่าข้าพเจ้ามีคุณสมบัติไม่ตรงหรือมีลักษณะต้องห้ามตามประกาศรับสมัครหรือไม่ได้รับการยกเว้นให้ถือว่าข้าพเจ้า
      เป็นผู้ขาดคุณสมบัติในการสมัครครั้งนี้มาตั้งแต่ต้น
      และไม่มีสิทธิได้รับการบรรจุและแต่งตั้งให้ดำรงตำแหน่ง และข้าพเจ้าจะไม่ใช้สิทธิเรียกร้องใด ๆ
      ทั้งสิ้น
      และหากข้าพเจ้าจงใจกรอกข้อความอันเป็นเท็จอาจมีความผิดทางอาญาฐานแจ้งความเท็จต่อเจ้าพนักงานตามประมวลกฎหมายอาญา
      มาตรา 137
    </div>

    <div class="row justify-center q-pa-md">
      <q-btn
        color="blue"
        class="q-ml-md"
        label="บันทึกข้อมูล"
        outline
        icon="mdi-content-save"
        @click="clickSave"
        v-if="status === 'register' || status === 'rejectRegister'"
        :disable="!acceptTermOfUse || statusEdit"
      />
      <q-btn
        color="primary"
        class="q-ml-md"
        icon="mdi-check"
        label="สมัครสอบ"
        @click="okModalConfirm"
        v-if="status === 'register' || status === 'rejectRegister'"
        :disable="!acceptTermOfUse || statusEdit"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useQuasar } from 'quasar'
import { useCounterMixin } from '@/stores/mixin'
import { useDataStore } from '@/stores/data'
import http from '@/plugins/http'
import config from '@/app.config'
import { useRoute } from 'vue-router'
import {
  defaultInformation,
  defaultOccupation,
  defaultAddress,
  defaultFamily
} from '@/modules/01_exam/interface/index/Main'
import Profile from '@/modules/01_exam/components/Form/Profile.vue'

const props = defineProps({
  fetchStep: {
    type: Function,
    default: () => console.log('not function')
  },
  status: {
    type: String,
    required: true
  }
})

const $q = useQuasar()
const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
const { modalConfirm, modalError, success, dateToISO, messageError,notifyError } = mixin
const dataStore = useDataStore()
const { loaderPage } = dataStore
const statusEdit = ref<boolean>(false)
const acceptTermOfUse = ref<boolean>(false)
const route = useRoute()
const examId = ref<string>(route.params.id.toString())
const positionId = ref<string>(route.params.positionId.toString())
const formInformation = ref<any>({})
const formAddress = ref<any>({})
const formFamily = ref<any>({})
const formOccupation = ref<any>({})
const saveAuto = ref<boolean>(false)

onMounted(async () => {
  await fetchStatus()
})

const okModalConfirm = () => {
  if (statusEdit.value == true) {
    modalError($q, 'ไม่สามารถสมัครสอบได้', 'มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล')
  } else {
    saveAuto.value = true
    modalConfirm(
      $q,
      'ยืนยันการสมัครสอบ?',
      'เมื่อยืนยันการสมัครสอบแล้วจะไม่สามารถแก้ไขข้อมูลได้',
      saveData
    )
  }
}

const fetchStatus = async () => {
  loaderPage(true)
  await http
    .get(config.API.candidateCard(examId.value, positionId.value))
    .then((res) => {
      acceptTermOfUse.value = true
    })
    .catch((e) => {
      acceptTermOfUse.value = false
    })
    .finally(() => {
      loaderPage(false)
    })
}

const saveForm = async () => {
  loaderPage(true)
  await http
    .get(config.API.candidateRegister(examId.value, positionId.value))
    .then(() => {})
    .catch((e) => {
      messageError($q, e)
    })
    .finally(async () => {
      await props.fetchStep()
    })
}

const clickSave = async () => {
  saveAuto.value = false
  await saveData()
}

const saveData = async () => {
  await formInformation.value.validate().then(async (suc: boolean) => {
    if (suc) {
      await formAddress.value.validate().then(async (suc: boolean) => {
        if (suc) {
          await formFamily.value.validate().then(async (suc: boolean) => {
            if (suc) {
              await formOccupation.value.validate().then(async (suc: boolean) => {
                if (suc) {
                  const type = ref<string | null>('')
                  if (defaultOccupation.value.status == 'official')
                    type.value = defaultOccupation.value.official
                  if (defaultOccupation.value.status == 'personnel')
                    type.value = defaultOccupation.value.personnel
                  if (defaultOccupation.value.status == 'officialsOther')
                    type.value = defaultOccupation.value.officialsOther
                  if (defaultOccupation.value.status == 'employee')
                    type.value = defaultOccupation.value.employee
                  if (defaultOccupation.value.status == 'other')
                    type.value = defaultOccupation.value.other
                  loaderPage(true)
                  await http
                    .post(config.API.candidateId(examId.value, positionId.value), {
                      prefixId: defaultInformation.value.prefixId,
                      lastName: defaultInformation.value.lastname,
                      citizenProvinceId: defaultInformation.value.provinceId,
                      citizenDistrictId: defaultInformation.value.districtId,
                      dateOfBirth:
                        defaultInformation.value.birthDate == null
                          ? null
                          : dateToISO(defaultInformation.value.birthDate),
                      citizenDate:
                        defaultInformation.value.cardIdDate == null
                          ? null
                          : dateToISO(defaultInformation.value.cardIdDate),
                      citizenId: defaultInformation.value.cardid,
                      firstName: defaultInformation.value.firstname,
                      relationshipId: defaultInformation.value.relationshipId,
                      nationality: defaultInformation.value.nationality,
                      email: defaultInformation.value.email,
                      mobilePhone: defaultInformation.value.phone,
                      telephone: defaultInformation.value.tel,
                      knowledge: defaultInformation.value.knowledge,
                      occupationType: defaultOccupation.value.status,
                      occupationCompany: defaultOccupation.value.company,
                      occupationDepartment: defaultOccupation.value.department,
                      occupationEmail: defaultOccupation.value.email,
                      occupationTelephone: defaultOccupation.value.tel,
                      occupationPosition: type.value,
                      registAddress: defaultAddress.value.address,
                      currentAddress: defaultAddress.value.addressC,
                      registProvinceId: defaultAddress.value.provinceId,
                      currentProvinceId: defaultAddress.value.provinceIdC,
                      registDistrictId: defaultAddress.value.districtId,
                      currentDistrictId: defaultAddress.value.districtIdC,
                      registSubDistrictId: defaultAddress.value.subdistrictId,
                      currentSubDistrictId: defaultAddress.value.subdistrictIdC,
                      registZipCode: defaultAddress.value.code,
                      currentZipCode: defaultAddress.value.codeC,
                      registSame:
                        defaultAddress.value.same == '1'
                          ? true
                          : defaultAddress.value.same == '0'
                          ? false
                          : null,
                      marryPrefixId: defaultFamily.value.prefixIdC,
                      marryFirstName: defaultFamily.value.firstnameC,
                      marryLastName: defaultFamily.value.lastnameC,
                      marryOccupation: defaultFamily.value.occupationC,
                      marryNationality: defaultFamily.value.nationalityC,
                      fatherPrefixId: defaultFamily.value.prefixIdM,
                      fatherFirstName: defaultFamily.value.firstnameM,
                      fatherLastName: defaultFamily.value.lastnameM,
                      fatherOccupation: defaultFamily.value.occupationM,
                      fatherNationality: defaultFamily.value.nationalityM,
                      motherPrefixId: defaultFamily.value.prefixIdF,
                      motherFirstName: defaultFamily.value.firstnameF,
                      motherLastName: defaultFamily.value.lastnameF,
                      motherOccupation: defaultFamily.value.occupationF,
                      motherNationality: defaultFamily.value.nationalityF,
                      marry:
                        defaultFamily.value.same == '1'
                          ? true
                          : defaultFamily.value.same == '0'
                          ? false
                          : null
                    })
                    .then(async () => {
                      success($q, 'บันทึกข้อมูลส่วนตัวสำเร็จ')
                      if (saveAuto.value) await saveForm()
                    })
                    .catch((e) => {
                      messageError($q, e)
                    })
                    .finally(async () => {
                      await props.fetchStep()
                    })
                }else{
        notifyError($q,"กรุณากรอกข้อมูลให้ครบถ้วน")
    }
              })
            }else{
        notifyError($q,"กรุณากรอกข้อมูลให้ครบถ้วน")
    }
          })
        }else{
        notifyError($q,"กรุณากรอกข้อมูลให้ครบถ้วน")
    }
      })
    }else{
        notifyError($q,"กรุณากรอกข้อมูลให้ครบถ้วน")
    }
  })
}
</script>

<style lang="scss" scoped></style>
