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

/**importType*/
import type { FormFeature } from "@/modules/12_evaluatePersonal/interface/index/evalute";

const props = defineProps({
  data: {
    type: Object,
    default: {},
  },
});

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

<template>
  <div class="q-pa-sm" :style="$q.screen.lt.sm ? '' : 'max-height: 64vh; overflow: scroll;' ">
    <q-list dense>
      <q-item v-ripple class="listItem">
        <q-item-section avatar>
          <q-checkbox
            disable
            keep-color
            color="primary"
            size="sm"
            v-model="formData.isEducationalQft"
          />
        </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
            keep-color
            color="primary"
            size="sm"
            v-model="formData.isGovermantServiceHtr"
          />
        </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
            disabled
            keep-color
            color="primary"
            size="sm"
            v-model="formData.isOperatingExp"
          />
        </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
            keep-color
            color="primary"
            size="sm"
            v-model="formData.isMinPeriodOfTenure"
          />
        </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
            keep-color
            color="primary"
            size="sm"
            v-model="formData.isHaveSpecificQft"
          />
        </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
            keep-color
            color="primary"
            size="sm"
            v-model="formData.isHaveProLicense"
          />
        </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
            keep-color
            color="primary"
            size="sm"
            v-model="formData.isHaveMinPeriodOrHoldPos"
          />
        </q-item-section>
        <q-item-section>
          <q-item-label
            >มีระยะเวลาขั้นต่ำในการดำรงตำแหน่งหรือเคยดำรงตำแหน่งในสายงานที่จะคัดเลือกตามคุณวุฒิของบุคคลและระดับตำแหน่งที่จะคัดเลือก</q-item-label
          >
        </q-item-section>
      </q-item>
    </q-list>
  </div>
</template>

<style scoped>
.listItem{
  padding: 5px 0px !important;
}
.listItem .q-item__section--avatar{
  min-width:  auto !important;
}
</style>

