<!-- step กรอกข้อมูล -->
<template>
  <div>
    <q-banner class="text-red bg-red-1 q-pa-md q-mb-md" dense>
      <div>คำแนะนำ: ใส่เครื่องหมายแดช (-) ในช่องที่ไม่มีข้อมูล</div>
    </q-banner>
    <q-form greedy @submit.prevent @validation-success="onSubmitForm">
      <Profile
        :status="status"
        :isStatusRegister="isStatusRegister"
        v-model:formInformation="formInformation"
        v-model:formAddress="formAddress"
        v-model:formOccupation="formOccupation"
        v-model:formEducation="formEducation"
        v-model:formContact="formContact"
        :positionLevel="positionLevel"
      />
      <!-- v-model:formFamily="formFamily" -->
      <div v-html="editorConfirm"></div>
      <div class="text-center q-pt-sm">
        <q-checkbox
          v-model="acceptTermOfUse"
          :disable="!isStatusRegister || 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">
        <!-- @click="clickSave" -->
        <q-btn
          color="blue"
          class="q-ml-md"
          label="บันทึกข้อมูล"
          outline
          icon="mdi-content-save"
          type="submit"
          v-if="isStatusRegister"
          :disable="!acceptTermOfUse || statusEdit"
          @click="saveType = 'save'"
        />
        <!-- @click="status === 'checkRegister' && !stepPayment ? (secondDialog = true) : dialogOpen()" -->
        <q-btn
          color="primary"
          class="q-ml-md"
          icon="mdi-check"
          label="ส่งใบสมัคร"
          type="submit"
          v-if="isStatusRegister"
          :disable="!acceptTermOfUse || statusEdit"
          @click="saveType = 'confirm'"
        />
      </div>
    </q-form>
  </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>

  <q-dialog v-model="secondDialog" persistent transition-show="scale" transition-hide="scale">
    <q-card style="width: 400px">
      <q-card-section>
        <!-- <div class="text-h6">เตือน</div> -->
      </q-card-section>

      <q-card-section>
        <div class="text-body1 text-center text-red-8">
          !!! โปรดตรวจสอบข้อมูลให้ถูกต้อง !!! <br />
          ก่อนส่งใบสมัคร
          <br />
          เมื่อส่งใบสมัครแล้วจะแก้ไขไม่ได้ / สมัครใหม่ไม่ได้
        </div>
      </q-card-section>

      <q-separator />

      <q-card-actions align="right" class="bg-white text-teal">
        <div class="col-12 row" align="center">
          <div class="col-6" align="center">
            <q-btn class="" label="แก้ไข" color="red-5" outline @click="secondDialog = false" />
          </div>
          <div class="col-6" align="center">
            <q-btn class="" label="ส่งใบสมัคร" color="primary" @click="onSubmit" />
          </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,
  defaultCareer
} 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
  },
  isStatusRegister: {
    type: Boolean,
    required: true
  },
  stepPayment: {
    type: Boolean,
    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)
const secondDialog = ref<boolean>(false)

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

const saveType = ref<string>('')

function onSubmitForm() {
  if (defaultInformation.value.profileImg == null || defaultInformation.value.profileImg == '') {
    notifyError($q, 'กรุณาอัพโหลดรูปถ่าย')
    return
  }
  if (!defaultCareer.value) {
    notifyError($q, 'กรุณากรอกข้อมูลประวัติการทำงาน')
    return
  }
  if (saveType.value === 'save') {
    clickSave()
  } else if (saveType.value === 'confirm') {
    if (props.status === 'checkRegister' && !props.stepPayment) {
      secondDialog.value = true
    } else {
      dialogOpen()
    }
  }
}

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

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

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

const fetchStatus = async () => {
  loaderPage(true)
  await http
    .get(config.API.candidateCard(examId.value, positionId.value))
    .then(() => {
      acceptTermOfUse.value = true
    })
    .catch(() => {
      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) {
    loaderPage(true)
    await http
      .post(config.API.candidateId(examId.value, positionId.value), {
        // prefixId: defaultInformation.value.prefixId,
        prefixName: defaultInformation.value.prefix,
        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,
        religionName: defaultInformation.value.religionName,
        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,
        contactprefixName: defaultContact.value.contactprefixName,
        contactfirstname: defaultContact.value.contactfirstname,
        contactlastname: defaultContact.value.contactlastname,
        contactrelations: defaultContact.value.contactrelations,
        contacttel: defaultContact.value.contacttel
      })
      .then(async () => {
        if (!props.stepPayment) {
          secondDialog.value = true
        } else {
          success($q, 'บันทึกข้อมูลส่วนตัวสำเร็จ')
        }
        await saveForm()
        await props.fetchStep()
        dialog.value = false
      })
      .catch((e) => {
        messageError($q, e)
        loaderPage(false)
      })
  } else {
    loaderPage(true)
    await http
      .post(config.API.candidateId(examId.value, positionId.value), {
        // prefixId: defaultInformation.value.prefixId,
        prefixName: defaultInformation.value.prefix,
        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,
        religionName: defaultInformation.value.religionName,
        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,
        contactprefixName: defaultContact.value.contactprefixName,
        contactfirstname: defaultContact.value.contactfirstname,
        contactlastname: defaultContact.value.contactlastname,
        contactrelations: defaultContact.value.contactrelations,
        contacttel: defaultContact.value.contacttel
      })
      .then(async () => {
        !secondDialog.value && success($q, 'บันทึกข้อมูลส่วนตัวสำเร็จ')
        await props.fetchStep()
      })
      .catch((e) => {
        messageError($q, e)
        loaderPage(false)
      })
  }
}

async function onSubmit() {
  try {
    saveAuto.value = false
    await saveData()
    await http.post(config.API.registerConfirm(examId.value, positionId.value))
    success($q, 'ส่งใบสมัครสำเร็จ')
    await props.fetchStep()
    // do something
  } catch (error) {
    console.error(error)
  }
}
</script>

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