<script setup lang="ts">

import { ref, reactive } from "vue";
import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";

const save = ref<boolean>(true); 
const props = defineProps({
    Modal: Boolean,
    close: {
        type: Function,
        default: () => console.log("not function"),
    },
    getdetail:{
        type: Object,
        required: true
    }
});

const information = reactive<any>({
    profileID: '',
    fullName: '',
    dateOfBirth: '',
    gender: '',
    address: '',
    university: '',
    degree: '',
    major: '',
    remark: '',
    scoreAFull: null,
    scoreA: null,
    scoreBFull: null,
    scoreB: null,
    scoreCFull: null,
    scoreC: null,
    examResult: '',
    examCount: null,
    number: null,
});

interface CheckboxItem {
  value: number;
  label: string;
}

const selection = ref([]);
const checkboxItems: CheckboxItem[] = [
  { value: 1, label: 'ไม่เป็นผู้ดำรงตำแหน่งทางการเมือง' },
  { value: 2, label: 'ไม่เป็นคนไร้ความสามารถ คนเสมือนไร้ความสามารถ คนวิกลจริตหรือจิตฟั่นเฟือน ไม่สมประกอบหรือเป็นโรคตามที่กำหนดในกฎ ก.พ.' },
  { value: 3, label: 'ไม่เป็นผู้อยู่ในระหว่างถูกสั่งพักราชการหรือถูกสั่งให้ออกจากราชการไว้ก่อนตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
  { value: 4, label: 'ไม่เป็นผู้บกพร่องในศีลธรรมอันดีจนเป็นที่รังเกียจของสังคม' },
  { value: 5, label: 'ไม่เป็นกรรมการหรือผู้ดำรงตำแหน่งที่รับผิดชอบในการบริหารพรรคการเมือง หรือเจ้าหน้าที่ในพรรคการเมือง' },
  { value: 6, label: 'ไม่เป็นบุคคลล้มละลาย' },
  { value: 7, label: 'ไม่เป็นผู้เคยต้องรับโทษจำคุกโดยคำพิพากษาถึงที่สุดให้จำคุกเพราะกระทำความผิดทางอาญา เว้นแต่เป็นโทษสำหรับความผิดที่ใด้กระทำโดยประมาทหรือความผิดลหุโทษ' },
  { value: 8, label: 'ไม่เป็นผู้เคยถูกลงโทษให้ออก ปลดออก หรือไล่ออกจากรัฐวิสาหกิจ หรือ หน่วยงานอื่นของรัฐ' },
  { value: 9, label: 'เป็นผู้เคยถูลงโทษให้ออก หรือปลดออก เพราะกระทำผิตวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
  { value: 10, label: 'เป็นผู้เคยถูกลงโทษไล่ออก เพราะกระทำผิดวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
  { value: 11, label: 'เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ' },
];

const clickSave = async () => {
  console.log(selection.value)
};

</script>

<template>
     
    <q-dialog v-model="props.Modal" full-height full-width>
        <q-card >
            <q-form ref="myForm">
                <DialogHeader 
                :title="`รายละเอียดของ ${ props.getdetail.fullName}`"
                :close="close"
                />
                <q-separator />
                <q-card-section class="q-pa-sm">

                    <div class="q-card q-card--bordered q-card--flat q-pa-md q-my-md">
                    <div class="col-12 row items-center q-pa-sm" style="font-weight: bold; ">
                        ข้อมูลทั่วไป
                    </div>
                    <div class="row">
                        <div class="col-3 q-pa-xs" style="color: gray; ">
                        เลขที่ประจำตัวประชาชน
                        </div>
                        <div class="col-3 q-pa-xs" style="">
                        {{ props.getdetail.profileID }}
                        </div>
                        <div class="col-3 q-pa-xs" style="color: gray; ">
                        ชื่อ-นามสกุล
                        </div>
                        <div class="col-3 q-pa-xs" style="">
                        {{ props.getdetail.fullName }}
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-3 q-pa-xs" style="color: gray; ">
                        วัน/เดือน/ปีเกิด
                        </div>
                        <div class="col-3 q-pa-xs" style="">
                        {{ props.getdetail.dateOfBirth }}
                        </div>
                        <div class="col-3 q-pa-xs" style="color: gray; ">
                        เพศ
                        </div>
                        <div class="col-3 q-pa-xs" style="">
                        {{ props.getdetail.gender }} 
                        </div>
                    </div>
                    </div>
                        
                    <div class="q-card q-card--bordered q-card--flat q-pa-md q-my-md">
                    <div class="col-12 row items-center q-pa-xs" style="font-weight: bold; ">
                        ภูมิลำนำ
                    </div>
                    <div class="row">
                        <div class="col-3 q-pa-xs" style="color: gray; ">
                        ที่อยู่
                        </div>
                        <div class="col q-pa-xs" >
                        {{ props.getdetail.address }}
                        </div>
                    </div>
                    </div>

                    <div class="q-card q-card--bordered q-card--flat q-pa-md q-my-md">
                    <div class="col-12 row items-center q-pa-xs" style="font-weight: bold; ">
                        การศึกษา
                    </div>
                    <div class="row">
                        <div class="col-3 q-pa-xs" style="color: gray; ">
                        สถานศึกษา
                        </div>
                        <div class="col-3 q-pa-xs" style="">
                        {{ props.getdetail.university }}
                        </div>
                        <div class="col-3 q-pa-xs" style="color: gray; ">
                        วุฒิการศึกษา
                        </div>
                        <div class="col-3 q-pa-xs">
                        {{ props.getdetail.degree }}
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-3 q-pa-xs" style="color: gray; ">
                        สาขาวิชาเอก
                        </div>
                        <div class="col-3 q-pa-xs" style="">
                        {{ props.getdetail.major }}
                        </div>
                        <div class="col-3 q-pa-xs" style="color: gray; ">
                        อื่นๆ
                        </div>
                        <div class="col-3 q-pa-xs" style="">
                        {{ props.getdetail.remark }}
                        </div>
                    </div>
                    </div>
                    
                    <div class="q-card q-card--bordered q-card--flat q-pa-md q-my-md">
                    <div class="col-12 row items-center q-pa-xs" style="font-weight: bold; ">
                        การสอบ
                    </div>
                    <div class="row q-mx-md"> 
                        <div class="col-2 q-pa-xs" style="color: gray; ">
                        ประเภท
                        </div>
                        <div class="col-2 q-pa-xs" style="color: #259E75; ">
                        คะแนนเต็ม
                        </div>
                        <div class="col-2 q-pa-xs" style="color: #259E75; ">
                        คะแนนที่ได้
                        </div>
                        <div class="col-2 q-pa-xs" style="color: gray; ">
                        ผลการสอบ
                        </div>
                        <div class="col-2 q-pa-xs">
                        {{ props.getdetail.scoreResult.examResult }}
                        </div>
                    </div>
                    <div class="row q-mx-md ">
                        <div class="col-2 q-pa-xs" style="color: gray; ">
                        ภาค ก
                        </div>
                        <div class="col-2 q-pa-xs" style="font-weight: bold; ">
                        {{ props.getdetail.scoreResult.scoreAFull }}
                        </div>
                        <div class="col-2 q-pa-xs" style="font-weight: bold;">
                        {{ props.getdetail.scoreResult.scoreA }}
                        </div>
                        <div class="col-2 q-pa-xs" style="color: gray;  ">
                        ลำดับที่สอบได้
                        </div>
                        <div class="col-2 q-pa-xs" style="font-weight: bold;">
                        {{ props.getdetail.number }}
                        </div>
                    </div>

                    <div class="row  q-mx-md">
                        <div class="col-2 q-pa-xs" style="color: gray; ">
                        ภาค ข
                        </div>
                        <div class="col-2 q-pa-xs" style="font-weight: bold;">
                        {{ props.getdetail.scoreResult.scoreBFull }}
                        </div>
                        <div class="col-2 q-pa-xs" style="font-weight: bold;">
                        {{ props.getdetail.scoreResult.scoreB }}
                        </div>
                        <div class="col-2 q-pa-xs" style="color: gray; ">
                        จำนวนครั้งที่สมัครสอบ
                        </div>
                        <div class="col-2 q-pa-xs" style="font-weight: bold;">
                        {{ props.getdetail.examCount }}
                        </div>
                    </div>

                    <div class="row  q-mx-md">
                        <div class="col-2 q-pa-xs" style="color: gray; ">
                        ภาค ค
                        </div>
                        <div class="col-2 q-pa-xs" style="font-weight: bold;">
                        {{ props.getdetail.scoreResult.scoreCFull }}
                        </div>
                        <div class="col-2 q-pa-xs" style="font-weight: bold;">
                        {{ props.getdetail.scoreResult.scoreCFull }}
                        </div>
                    </div>

                    <div class="row q-mx-md">
                        <div class="col-2 q-pa-xs" style="color: gray; ">
                        รวมทั้งหมด
                        </div>
                        <div class="col-2 q-pa-xs" style="font-weight: bold;">
                        {{ (props.getdetail.scoreResult.scoreSumFull) }}
                        </div>
                        <div class="col-2 q-pa-xs" style="font-weight: bold;">
                        {{ (props.getdetail.scoreResult.scoreSum) }}
                        </div>
                    </div>
                    </div>
                    
                    <div class="q-card q-card--bordered q-card--flat q-pa-sm">
                    <div class="col-12 row items-center q-pa-sm" style="font-weight: bold; ">
                        การคัดกรองคุณสมบัติ
                    </div>
                    <div >
                    <q-list >
                        <q-item>
                        <q-option-group v-model="selection" :options="checkboxItems" keep-color color="green" type="checkbox" style=""/>
                        </q-item>
                        <q-separator spaced inset />
                    </q-list>
                    </div>
                    </div>

                </q-card-section>
                <DialogFooter
                :save="clickSave"
                v-model:editvisible="save"
                />
            </q-form>
        </q-card>
    </q-dialog>
</template>