<!-- card อาชีพ -->
<template>
  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
    <HeaderTop
      v-model:edit="edit"
      header="อาชีพ"
      icon="mdi-briefcase"
      :save="saveData"
      :addData="true"
      :editOnly="false"
      :cancel="cancelData"
      :changeBtn="changeBtn"
      :editData="step == 2"
      :disable="statusEdit"
    />
    <q-form ref="myform">
      <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
        <div class="col-12 row">
          <q-input
            :class="getClass(edit)"
            hide-bottom-space
            dense
            lazy-rules
            type="textarea"
            autogrow
            :readonly="!edit"
            :borderless="!edit"
            v-model="occupationData.official"
            :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
            :disable="occupationData.status !== 'official' || !edit"
          >
            <template v-slot:before>
              <q-radio
                v-model="occupationData.status"
                checked-icon="task_alt"
                unchecked-icon="panorama_fish_eye"
                val="official"
                label="ข้าราชการกรุงเทพมหานคร ตำแหน่ง"
                dense
                :disable="!edit"
                size="md"
                style="font-size: 14px; color: black"
              />
            </template>
          </q-input>
          <q-input
            :class="getClass(edit)"
            hide-bottom-space
            dense
            lazy-rules
            type="textarea"
            autogrow
            :readonly="!edit"
            :borderless="!edit"
            v-model="occupationData.personnel"
            :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
            :disable="occupationData.status !== 'personnel' || !edit"
          >
            <template v-slot:before>
              <q-radio
                v-model="occupationData.status"
                checked-icon="task_alt"
                unchecked-icon="panorama_fish_eye"
                val="personnel"
                label="บุคลากรกรุงเทพมหานคร ตำแหน่ง"
                dense
                :disable="!edit"
                size="md"
                style="font-size: 14px; color: black"
              />
            </template>
          </q-input>
          <q-input
            :class="getClass(edit)"
            hide-bottom-space
            dense
            lazy-rules
            type="textarea"
            autogrow
            :readonly="!edit"
            :borderless="!edit"
            v-model="occupationData.officialsOther"
            :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
            :disable="occupationData.status !== 'officialsOther' || !edit"
          >
            <template v-slot:before>
              <q-radio
                v-model="occupationData.status"
                checked-icon="task_alt"
                unchecked-icon="panorama_fish_eye"
                val="officialsOther"
                label="ข้าราชการประเภทอื่น ตำแหน่ง"
                dense
                :disable="!edit"
                size="md"
                style="font-size: 14px; color: black"
              />
            </template>
          </q-input>
          <q-input
            :class="getClass(edit)"
            hide-bottom-space
            dense
            lazy-rules
            type="textarea"
            autogrow
            :readonly="!edit"
            :borderless="!edit"
            v-model="occupationData.employee"
            :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
            :disable="occupationData.status !== 'employee' || !edit"
          >
            <template v-slot:before>
              <q-radio
                v-model="occupationData.status"
                checked-icon="task_alt"
                unchecked-icon="panorama_fish_eye"
                val="employee"
                label="ลูกจ้าง/พนักงานราชการของส่วนราชการอื่น ตำแหน่ง"
                dense
                :disable="!edit"
                size="md"
                style="font-size: 14px; color: black"
              />
            </template>
          </q-input>
          <q-radio
            v-model="occupationData.status"
            checked-icon="task_alt"
            unchecked-icon="panorama_fish_eye"
            val="studying"
            label="กำลังศึกษาต่อ"
            dense
            :disable="!edit"
            size="md"
            style="font-size: 14px; color: black"
          />
          <q-input
            :class="getClass(edit)"
            hide-bottom-space
            dense
            lazy-rules
            type="textarea"
            autogrow
            :readonly="!edit"
            :borderless="!edit"
            v-model="occupationData.other"
            :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
            :disable="occupationData.status !== 'other' || !edit"
          >
            <template v-slot:before>
              <q-radio
                v-model="occupationData.status"
                checked-icon="task_alt"
                unchecked-icon="panorama_fish_eye"
                val="other"
                label="อื่นๆ"
                dense
                :disable="!edit"
                size="md"
                style="font-size: 14px; color: black"
              />
            </template>
          </q-input>
        </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
            type="textarea"
            autogrow
            :readonly="!edit"
            :borderless="!edit"
            v-model="occupationData.company"
            :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
            type="textarea"
            autogrow
            :readonly="!edit"
            :borderless="!edit"
            v-model="occupationData.department"
            :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
            type="textarea"
            autogrow
            :readonly="!edit"
            :borderless="!edit"
            v-model="occupationData.email"
            :rules="[(val) => !!val || `${'กรุณากรอก E-mail address'}`]"
            :label="`${'E-mail address'}`"
          />
        </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
            type="textarea"
            autogrow
            :readonly="!edit"
            :borderless="!edit"
            v-model="occupationData.tel"
            :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 { ref, onMounted, watch } from 'vue'

import http from '@/plugins/http'
import config from '@/app.config'
import type { Occupation } from '@/modules/01_exam/interface/index/Main'
import { defaultOccupation } 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'

const store = useExamDataStore()

const edit = ref<boolean>(false)
const occupationData = ref<Occupation>(defaultOccupation)
const myform = ref<any>()
const modalConsend = ref<boolean>(false)

const props = defineProps({
  statusEdit: {
    type: Boolean,
    required: true
  },
  notiNoEdit: {
    type: Function,
    default: () => console.log('not function')
  },
  step: {
    type: Number,
    required: true
  }
})

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

onMounted(() => {})

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 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>
