<script setup lang="ts">
import { reactive, onMounted, ref } from "vue";

import { useEvaluateStore } from "@/modules/06_evaluate/store";

import type {
  PersonInformation,
  FormSpec,
} from "@/modules/06_evaluate/interface/evalute";

import PopupCheckFeatures from "@/modules/06_evaluate/components/PopupCheckFeatures.vue";
import PopupPosition from "@/modules/06_evaluate/components/PopupPosition.vue";

/** use*/
const store = useEvaluateStore();

const props = defineProps({
  educations: Array,
  data: {
    type: Object as () => PersonInformation,
  },
});

const education = ref<any>();
const emit = defineEmits(["update:spec"]);

const modal = ref<boolean>(false);
const modalPosition = ref<boolean>(false);
const show = ref<boolean>(false);

const formData = reactive<FormSpec>({
  isEducationalQft: false, // คุณวุฒิการศึกษา
  isGovermantServiceHtr: false, // ประวัติการรับราชการ
  isOperatingExp: false, // ประสบการณ์ในการปฏิบัติงาน
  isMinPeriodOfTenure: false, // ระยะเวลาขั้นต่ำในการดำรงตำแหน่งในสายงานที่ขอเข้ารับการคัดเลือก
  isHaveSpecificQft: false, // มีคุณสมบัติตรงตามคุณสมบัติเฉพาะสำหรับตำแหน่งที่กำหนด ในมาตราฐานกำหนดตำแหน่ง
  isHaveProLicense: false, // มีใบอนุญาตประกอบวิชาชีพของสายงานต่างๆ
  isHaveMinPeriodOrHoldPos: false, // มีระยะเวลาขั้นต่ำในการดำรงตำแหน่งหรือเคยดำรงตำแหน่งในสายงานที่จะคัดเลือกตามคุณวุฒิของบุคคลและระดับตำแหน่งที่จะคัดเลือก]
});

/** function อัปเดทตรวจสอบคุณสมบัติ*/
async function updateValue() {
  emit("update:spec", formData);
}

/**
 *  function fetchData ตรวจสอบคุณสมบัติ
 * @param data ตรวจสอบคุณสมบัติ
 */
async function fetchCheckSpec(data: PersonInformation) {
  formData.isEducationalQft = data.isEducationalQft;
  formData.isGovermantServiceHtr = data.isGovermantServiceHtr;
  formData.isOperatingExp = data.isOperatingExp;
  formData.isMinPeriodOfTenure = data.isMinPeriodOfTenure;
  formData.isHaveSpecificQft = data.isHaveSpecificQft;
  formData.isHaveProLicense = data.isHaveProLicense;
  formData.isHaveMinPeriodOrHoldPos = data.isHaveMinPeriodOrHoldPos;
}

/**
 * function openPopup
 * @param status
 */
function openModal(status: boolean) {
  modal.value = true;
  show.value = status;
}

/** function closePopup*/
function closeModal() {
  modal.value = false;
}

function onViewDataPosition() {
  modalPosition.value = true;
}

/**hook lifecycle*/
onMounted(() => {
  props.data && fetchCheckSpec(props.data);
  setTimeout(() => {
    education.value = props.educations
      ? props.educations
      : props.data?.educations;
  }, 100);
});
</script>

<template>
  <div class="q-pa-sm">
    <q-list dense>
      <q-item v-ripple class="listItem">
        <q-item-section avatar>
          <q-checkbox
            :disable="store.currentStep > 1"
            keep-color
            color="primary"
            v-model="formData.isEducationalQft"
            @update:model-value="updateValue"
          />
        </q-item-section>
        <q-item-section>
          <q-item-label
            >คุณวุฒิการศึกษา
            <q-btn
              flat
              round
              dense
              color="info"
              icon="info"
              @click="openModal(false)"
            >
              <q-tooltip>ข้อมูลเพิ่มเติม</q-tooltip>
            </q-btn>
          </q-item-label>
        </q-item-section>
      </q-item>
      <q-item v-ripple class="listItem">
        <q-item-section avatar>
          <q-checkbox
            :disable="store.currentStep > 1"
            keep-color
            color="primary"
            v-model="formData.isGovermantServiceHtr"
            @update:model-value="updateValue"
          />
        </q-item-section>
        <q-item-section>
          <q-item-label
            >ประวัติการรับราชการ
            <q-btn
              flat
              round
              dense
              color="info"
              icon="info"
              @click="onViewDataPosition()"
            >
              <q-tooltip>ข้อมูลประวัติการรับราชการ</q-tooltip>
            </q-btn>
          </q-item-label>
        </q-item-section>
      </q-item>
      <q-item v-ripple class="listItem">
        <q-item-section avatar>
          <q-checkbox
            :disable="store.currentStep > 1"
            keep-color
            color="primary"
            v-model="formData.isOperatingExp"
            @update:model-value="updateValue"
          />
        </q-item-section>
        <q-item-section>
          <q-item-label>ประสบการณ์ในการปฏิบัติงาน </q-item-label>
        </q-item-section>
      </q-item>
      <q-item v-ripple class="listItem">
        <q-item-section avatar>
          <q-checkbox
            :disable="store.currentStep > 1"
            keep-color
            color="primary"
            v-model="formData.isMinPeriodOfTenure"
            @update:model-value="updateValue"
          />
        </q-item-section>
        <q-item-section>
          <q-item-label
            >ระยะเวลาขั้นต่ำในการดำรงตำแหน่งในสายงานที่ขอเข้ารับการคัดเลือก
            <q-btn
              flat
              round
              dense
              color="info"
              icon="info"
              @click="openModal(true)"
            >
              <q-tooltip>ข้อมูลเพิ่มเติม</q-tooltip>
            </q-btn></q-item-label
          >
        </q-item-section>
      </q-item>
      <q-item v-ripple class="listItem">
        <q-item-section avatar>
          <q-checkbox
            :disable="store.currentStep > 1"
            keep-color
            color="primary"
            v-model="formData.isHaveSpecificQft"
            @update:model-value="updateValue"
          />
        </q-item-section>
        <q-item-section>
          <q-item-label
            >มีคุณสมบัติตรงตามคุณสมบัติเฉพาะ สำหรับตำแหน่งที่กำหนด
            ในมาตรฐานกำหนดตำแหน่ง</q-item-label
          >
        </q-item-section>
      </q-item>
      <q-item v-ripple class="listItem">
        <q-item-section avatar>
          <q-checkbox
            :disable="store.currentStep > 1"
            keep-color
            color="primary"
            v-model="formData.isHaveProLicense"
            @update:model-value="updateValue"
          />
        </q-item-section>
        <q-item-section>
          <q-item-label
            >มีใบอนุญาตประกอบวิชาชีพของสายงานต่างๆ และ/หรือ
            คุณวุฒิเพิ่มเติมครบถ้วนตามที่ ก.ก. กำหนด (แพทย์พยาบาล วิศวกรโยธา
            สถาปนิก ฯลฯ)</q-item-label
          >
        </q-item-section>
      </q-item>
      <q-item v-ripple class="listItem">
        <q-item-section avatar>
          <q-checkbox
            :disable="store.currentStep > 1"
            keep-color
            color="primary"
            v-model="formData.isHaveMinPeriodOrHoldPos"
            @update:model-value="updateValue"
          />
        </q-item-section>
        <q-item-section>
          <q-item-label
            >มีระยะเวลาขั้นต่ำในการดำรงตำแหน่งหรือเคยดำรงตำแหน่งในสายงานที่จะคัดเลือกตามคุณวุฒิของบุคคลและระดับตำแหน่งที่จะคัดเลือก</q-item-label
          >
        </q-item-section>
      </q-item>
    </q-list>
  </div>

  <PopupCheckFeatures
    :modal="modal"
    :show="show"
    :close-modal="closeModal"
    :educations="educations"
  />

  <PopupPosition v-model:modal="modalPosition" />
</template>

<style>
.listItem {
  padding: 5px 0px !important;
}
</style>
