<!-- step กรอกข้อมูล -->
<template>
  <div>
    <Profile
      :status="status"
      v-model:formInformation="formInformation"
      v-model:formAddress="formAddress"
      v-model:formOccupation="formOccupation"
      v-model:formEducation="formEducation"
      v-model:formContact="formContact"
    />
    <!-- v-model:formFamily="formFamily" -->
    <div v-html="editorConfirm"></div>
    <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="dialogOpen"
        v-if="status === 'register' || status === 'rejectRegister'"
        :disable="!acceptTermOfUse || statusEdit"
      />
    </div>
  </div>
  <q-dialog v-model="dialog" persistent>
    <q-card>
      <q-card-section class="row items-center q-pa-sm">
        <div class="text-bold">กรุณาตรวจสอบข้อมูลก่อนส่งใบสมัคร</div>
        <q-space />
        <q-btn
          icon="close"
          unelevated
          round
          dense
          v-close-popup
          style="color: #ff8080; background-color: #ffdede"
        />
      </q-card-section>

      <q-card-section class="q-pt-none">
        <div class="col-12 q-pa-md">
          <div class="q-pt-xs row">
            <div class="">ชื่อ :</div>
            <div class="text-black text-bold q-pl-sm">
              {{ defaultInformation.prefix }}{{ defaultInformation.firstname }}
              {{ defaultInformation.lastname }}
            </div>
          </div>
          <div class="q-pt-xs row">
            <div class="">เลขประจำตัวประชาชน :</div>
            <div class="text-black text-bold q-pl-sm">{{ defaultInformation.cardid }}</div>
          </div>
          <div class="q-pt-xs row">
            <div class="">ตำแหน่งที่สมัคร :</div>
            <div class="text-black text-bold q-pl-sm">{{ position }}{{ positionLevel }}</div>
          </div>
        </div>
      </q-card-section>

      <q-card-actions align="center">
        <div class="col-12 row" align="center">
          <div class="col-6" align="center">
            <q-btn class="" label="แก้ไข" color="red-5" outline @click="dialogClose" />
          </div>
          <div class="col-6" align="center">
            <q-btn class="" label="ส่งใบสมัคร" color="primary" @click="okModalConfirm" />
          </div>
        </div>
      </q-card-actions>
    </q-card>
  </q-dialog>
</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,
  defaultEducation,
  defaultContact
} 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
  },
  editorConfirm: {
    type: String,
    default: () =>
      `<div style="color: rgb(53, 71, 60); font-size: 14px;">1. ข้าพเจ้าขอให้คำรับรองว่า ข้อความดังกล่าวข้างต้นนี้เป็นจริงทุกประการและข้าพเจ้ามีคุณสมบัติทั่วไปและ ไม่มีลักษณะต้องห้าม ตามมาตรา 43 แห่งพระราชบัญญัติระเบียบข้าราชการกรุงเทพมหานครและบุคลากร-กรุงเทพมหานคร พ.ศ. 2554 และมีคุณสมบัติเฉพาะสำหรับตำแหน่งที่สมัครตรงตามประกาศรับสมัคร</div><div style="color: rgb(53, 71, 60); font-size: 14px;">2. กรณีข้าพเจ้ามีลักษณะต้องห้าม ตามมาตรา 43 ข. แห่งพระราชบัญญัติระเบียบข้าราชการกรุงเทพมหานคร และบุคลากรกรุงเทพมหานคร พ.ศ. 2554 และประสงค์จะยื่นคำขอยกเว้นเข้ารับราชการฯ ต่อหัวหน้าสำนักงาน ก.ก. ตามระเบียบ ก.ก. ว่าด้วยการยกเว้นให้ผู้มีลักษณะต้องห้ามเข้ารับราชการเป็นข้าราชการกรุงเทพมหานคร พ.ศ. 2556 ตามมติ ก.ก. ครั้งที่ 7/2556 เมื่อวันที่ 15 สิงหาคม 2556 ข้าพเจ้าจะยื่นภายในวันปิดรับสมัคร ทั้งนี้ หากยื่นภายหลังกำหนด สำนักงาน ก.ก. จะไม่รับคำขอดังกล่าว</div><div style="color: rgb(53, 71, 60); font-size: 14px;">3. ข้าพเจ้าจะยื่นหลักฐานและเอกสารที่แสดงว่าเป็นผู้มีคุณสมบัติทั่วไปและมีคุณสมบัติเฉพาะสำหรับตำแหน่งที่สมัครตรงตามประกาศรับสมัครภายในระยะเวลาที่กำหนดตามประกาศฯ</div><div style="color: rgb(53, 71, 60); font-size: 14px;">4. หากมีการตรวจสอบหลักฐานและเอกสารและหรือคุณวุฒิการศึกษาของข้าพเจ้าในภายหลัง ปรากฏว่าข้าพเจ้ามีคุณสมบัติไม่ตรงหรือมีลักษณะต้องห้ามตามประกาศรับสมัครหรือไม่ได้รับการยกเว้นให้ถือว่าข้าพเจ้า เป็นผู้ขาดคุณสมบัติในการสมัครครั้งนี้มาตั้งแต่ต้น และไม่มีสิทธิได้รับการบรรจุและแต่งตั้งให้ดำรงตำแหน่ง และข้าพเจ้าจะไม่ใช้สิทธิเรียกร้องใด ๆ ทั้งสิ้น และหากข้าพเจ้าจงใจกรอกข้อความอันเป็นเท็จอาจมีความผิดทางอาญาฐานแจ้งความเท็จต่อเจ้าพนักงานตามประมวลกฎหมายอาญา มาตรา 137</div>`
  },
  position: {
    type: String,
    required: true
  },
  positionLevel: {
    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 formEducation = ref<any>({})
const formOccupation = ref<any>({})
const formContact = ref<any>({})
const saveAuto = ref<boolean>(false)
const dialog = ref<boolean>(false)

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

const dialogClose = () => {
  dialog.value = false
}

const dialogOpen = () => {
  dialog.value = true
}

const okModalConfirm = () => {
  if (statusEdit.value == true) {
    modalError($q, 'ไม่สามารถสมัครสอบได้', 'มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล')
  } else {
    saveAuto.value = true
    // modalConfirm(
    //   $q,
    //   'ยืนยันการสมัครสอบ?',
    //   'เมื่อยืนยันการสมัครสอบแล้วจะไม่สามารถแก้ไขข้อมูลได้',
    //   saveData
    // )
    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 () => {
  if (saveAuto.value == true) {
    if (defaultInformation.value.profileImg == null || defaultInformation.value.profileImg == '') {
      notifyError($q, 'กรุณาอัพโหลดรูปถ่าย')
      return
    }
    await formInformation.value.validate().then(async (suc: boolean) => {
      if (suc) {
        await formAddress.value.validate().then(async (suc: boolean) => {
          if (suc) {
            await formEducation.value.validate().then(async (suc: boolean) => {
              if (suc) {
                await formOccupation.value.validate().then(async (suc: boolean) => {
                  if (suc) {
                    await formContact.value.validate().then(async (suc: boolean) => {
                      if (suc) {
                        loaderPage(true)
                        await http
                          .post(config.API.candidateId(examId.value, positionId.value), {
                            prefixId: defaultInformation.value.prefixId,
                            prefixName: defaultInformation.value.prefixId,
                            lastName: defaultInformation.value.lastname,
                            dateOfBirth:
                              defaultInformation.value.birthDate == null
                                ? null
                                : dateToISO(defaultInformation.value.birthDate),
                            citizenId: defaultInformation.value.cardid,
                            firstName: defaultInformation.value.firstname,
                            religionId: defaultInformation.value.religionId,
                            nationality: defaultInformation.value.nationality,
                            email: defaultInformation.value.email,
                            mobilePhone: defaultInformation.value.phone,
                            telephone: defaultInformation.value.tel,
                            knowledge: defaultInformation.value.knowledge,
                            occupationOrg: defaultOccupation.value.org,
                            occupationPile: defaultOccupation.value.pile,
                            occupationGroup: defaultOccupation.value.group,
                            occupationSalary: defaultOccupation.value.salary,
                            occupationPosition: defaultOccupation.value.position,
                            occupationPositionType: defaultOccupation.value.positionType,
                            occupationTelephone: defaultOccupation.value.tel,
                            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,
                            educationLevelExamId: defaultEducation.value.educationLevelExamId,
                            educationName: defaultEducation.value.educationName,
                            educationMajor: defaultEducation.value.educationMajor,
                            educationLocation: defaultEducation.value.educationLocation,
                            educationType: defaultEducation.value.educationType,
                            educationEndDate:
                              defaultEducation.value.educationEndDate == null
                                ? null
                                : dateToISO(defaultEducation.value.educationEndDate),
                            educationScores: defaultEducation.value.educationScores,
                            educationLevelHighId: defaultEducation.value.educationLevelHighId,

                            contactprefixId: defaultContact.value.contactprefixId,
                            contactfirstname: defaultContact.value.contactfirstname,
                            contactlastname: defaultContact.value.contactlastname,
                            contactrelations: defaultContact.value.contactrelations,
                            contacttel: defaultContact.value.contacttel
                          })
                          .then(async () => {
                            success($q, 'บันทึกข้อมูลส่วนตัวสำเร็จ')
                            await saveForm()
                            await props.fetchStep()
                          })
                          .catch((e) => {
                            messageError($q, e)
                            loaderPage(false)
                          })
                          .finally(async () => {})
                      } else {
                        notifyError($q, 'กรุณากรอกข้อมูลให้ครบถ้วน')
                      }
                    })
                  } else {
                    notifyError($q, 'กรุณากรอกข้อมูลให้ครบถ้วน')
                  }
                })
              } else {
                notifyError($q, 'กรุณากรอกข้อมูลให้ครบถ้วน')
              }
            })
          } else {
            notifyError($q, 'กรุณากรอกข้อมูลให้ครบถ้วน')
          }
        })
      } else {
        notifyError($q, 'กรุณากรอกข้อมูลให้ครบถ้วน')
      }
    })
  } else {
    loaderPage(true)
    await http
      .post(config.API.candidateId(examId.value, positionId.value), {
        prefixId: defaultInformation.value.prefixId,
        prefixName: defaultInformation.value.prefixId,
        lastName: defaultInformation.value.lastname,
        dateOfBirth:
          defaultInformation.value.birthDate == null
            ? null
            : dateToISO(defaultInformation.value.birthDate),
        citizenId: defaultInformation.value.cardid,
        firstName: defaultInformation.value.firstname,
        religionId: defaultInformation.value.religionId,
        nationality: defaultInformation.value.nationality,
        email: defaultInformation.value.email,
        mobilePhone: defaultInformation.value.phone,
        telephone: defaultInformation.value.tel,
        knowledge: defaultInformation.value.knowledge,
        occupationOrg: defaultOccupation.value.org,
        occupationPile: defaultOccupation.value.pile,
        occupationGroup: defaultOccupation.value.group,
        occupationSalary: defaultOccupation.value.salary,
        occupationPosition: defaultOccupation.value.position,
        occupationPositionType: defaultOccupation.value.positionType,
        occupationTelephone: defaultOccupation.value.tel,
        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,
        educationLevelExamId: defaultEducation.value.educationLevelExamId,
        educationName: defaultEducation.value.educationName,
        educationMajor: defaultEducation.value.educationMajor,
        educationLocation: defaultEducation.value.educationLocation,
        educationType: defaultEducation.value.educationType,
        educationEndDate:
          defaultEducation.value.educationEndDate == null
            ? null
            : dateToISO(defaultEducation.value.educationEndDate),
        educationScores: defaultEducation.value.educationScores,
        educationLevelHighId: defaultEducation.value.educationLevelHighId,

        contactprefixId: defaultContact.value.contactprefixId,
        contactfirstname: defaultContact.value.contactfirstname,
        contactlastname: defaultContact.value.contactlastname,
        contactrelations: defaultContact.value.contactrelations,
        contacttel: defaultContact.value.contacttel
      })
      .then(async () => {
        success($q, 'บันทึกข้อมูลส่วนตัวสำเร็จ')
        await props.fetchStep()
      })
      .catch((e) => {
        messageError($q, e)
        loaderPage(false)
      })
      .finally(async () => {})
  }
}
</script>

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