<template>
    <div class="toptitle text-dark col-12 row items-center">
        <q-btn
            icon="mdi-arrow-left"
            unelevated
            round
            dense
            flat
            color="primary"
            class="q-mr-sm"
            @click="router.go(-1)"
        />
        แบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ
    </div>
    <q-card bordered class="row text-dark q-pa-lg">
        <div class="row col-12 q-gutter-lg">
            <div class="col-12 row">
                <div class="col-12 text-top2">
                    <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                    ผู้ทดลองปฏิบัติหน้าที่ราชการ
                </div>
                <div class="col-12 row q-col-gutter-md">
                    <div class="col-xs-12 col-sm-6">
                        <q-input dense outlined v-model="name" label="ชื่อ-สกุล" />
                    </div>
                    <div class="col-xs-12 col-sm-6">
                        <q-input dense outlined v-model="position" label="ตำแหน่ง" />
                    </div>
                </div>
            </div>
            <div class="col-12 row">
								<div class="col-12 text-top2 row items-center">
                    <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                    ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ (อาจมีได้มากกว่า 1 คน)
                    <q-btn round color="primary" dense icon="mdi-plus" flat class="q-ml-sm" />
                </div>
                <div class="col-12 row q-col-gutter-md">
                    <q-select :options="OPcaretaker1" class="col-xs-12 col-sm-6" dense outlined v-model="caretaker" label="ผู้ดูแลคนที่ 1" />
                    <q-select :options="OPcaretaker2" class="col-xs-12 col-sm-6" dense outlined v-model="caretaker2" label="ผู้ดูแลคนที่ 2" />
                </div>
            </div>
            <div class="col-12">
                <q-separator />
            </div>
            <div class="col-12 row">
                <div class="col-12 text-Hd">ผลการปฏิบัติงาน</div>
                <div class="col-12 text-top2 row items-center">
                    <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                    ชื่องาน / ภารกิจงานที่มอบหมาย (ควรมีมากกว่า 1 ภารกิจงาน)
                    <q-btn round color="primary" dense icon="mdi-plus" flat class="q-ml-sm" />
                </div>
                <div class="col-12 row q-gutter-md">
                    <q-card flat bordered class="col-12 q-pa-sm bg-grey-1">
                        <div class="col-12 row q-col-gutter-sm">
                            <div class="col-xs-12 col-sm-6">
                                <q-input class="bg-white" type="textarea" dense outlined v-model="activity1" label="กิจกรรมของงาน/ขั้นตอนการปฏิบัติงาน(ไม่เกิน10บรรทัด )" />
                            </div>
                            <div class="col-xs-12 col-sm-6">
                                <q-input class="bg-white" type="textarea" dense outlined v-model="goal1" label="เป้าหมายในการปฏิบัติงาน(ไม่เกิน10บรรทัด )" />
                            </div>
                        </div>
                    </q-card>
                    <q-card flat bordered class="col-12 q-pa-sm bg-grey-1">
                        <div class="col-12 row q-col-gutter-sm">
                            <div class="col-xs-12 col-sm-6">
                                <q-input class="bg-white" type="textarea" dense outlined v-model="activity2" label="กิจกรรมของงาน/ขั้นตอนการปฏิบัติงาน(ไม่เกิน10บรรทัด )" />
                            </div>
                            <div class="col-xs-12 col-sm-6">
                                <q-input class="bg-white" type="textarea" dense outlined v-model="goal2" label="เป้าหมายในการปฏิบัติงาน(ไม่เกิน10บรรทัด )" />
                            </div>
                        </div>
                    </q-card>
                </div>
            </div>
            <div class="col-12 row">
                <div class="col-12 text-top2 row items-center">
                    <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                    ความรู้ความสามารถและทักษะ(ตามที่ก.ก.กําหนด)
                    <q-btn round color="primary" dense icon="mdi-plus" flat class="q-ml-sm" />
                </div>
                <div class="col-12 row q-col-gutter-md">
                    <q-select :options="OPknowledge" class="col-12" dense outlined v-model="knowledge" label="ความรู้ความสามารถในการปฏิบัติงาน 1" />
                    <q-select :options="OPknowledge" class="col-12" dense outlined v-model="knowledge2" label="ความรู้ความสามารถในการปฏิบัติงาน 2" />
                    <q-select :options="OPknowledge" class="col-12" dense outlined v-model="knowledge3" label="ความรู้ความสามารถในการปฏิบัติงาน 2" />
                </div>
            </div>
            <div class="col-12 row">
                <div class="col-12 text-top2 row items-center">
                    <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                    ความรู้เรื่องกฎหมายและกฎระเบียบ (ไม่เกิน 20 หัวข้อ)
                    <q-btn round color="primary" dense icon="mdi-plus" flat class="q-ml-sm" />
                </div>
                <q-card flat bordered class="col-12 q-pa-md"  style="max-height: 500px; overflow-y: scroll">
                    <div class="col-12 row q-pb-sm" v-for="(lawl, index) in listlaw" :key="index" >
                        <q-checkbox  :val="lawl.id" dense v-model="law" :label="lawl.label" />
                    </div>
                </q-card>
            </div>
						<div class="col-12 row">
                <div class="col-12 text-top2">
                    <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                    กฎหมายอื่น ๆ ที่เกี่ยวข้องกับการปฏิบัติงาน
                </div>
                <div class="col-12 row q-col-gutter-md">
                    <div class="col-12">
                        <q-input dense outlined v-model="OtherLaw" />
                    </div>
                </div>
            </div>
						<div class="col-12 row">
                <div class="col-12 text-top2">
                    <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                    ทักษะ
                </div>
                <div class="col-12 row q-col-gutter-md">
                    <q-select :options="OPskill" class="col-xs-12 col-sm-6" dense outlined v-model="skill" label="ด้านที่ 1" />
                    <q-select :options="OPskill" class="col-xs-12 col-sm-6" dense outlined v-model="skill2" label="ด้านที่ 2" />
                    <q-select :options="OPskill" class="col-xs-12 col-sm-6" dense outlined v-model="skill3" label="ด้านที่ 3" />
										<q-select :options="OPskill" class="col-xs-12 col-sm-6" dense outlined v-model="skill4" label="ด้านที่ 4" />
                </div>
            </div>
            <div class="col-12 row">
                <div class="col-12 text-top2 ">
                    <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                    สมรรถนะหลัก
                </div>
                <div class="col-12 row q-col-gutter-md">
                    <q-select :options="OPmain" class="col-xs-12 col-sm-6" dense outlined v-model="main" label="ตัวที่ 1" />
                    <q-select :options="OPmain" class="col-xs-12 col-sm-6" dense outlined v-model="main2" label="ตัวที่ 2" />
                    <q-select :options="OPmain" class="col-xs-12 col-sm-6" dense outlined v-model="main3" label="ตัวที่ 3" />
										<q-select :options="OPmain" class="col-xs-12 col-sm-6" dense outlined v-model="main4" label="ตัวที่ 4" />
										<q-select :options="OPmain" class="col-xs-12 col-sm-6" dense outlined v-model="main5" label="ตัวที่ 4" />
                </div>
            </div>
						<div class="col-12 row">
							<div class="col-12 text-top2 ">
                    <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                    สมรรถนะประจํากลุ่มงาน
                </div>
                <div class="col-12 row q-col-gutter-md">
                    <q-select :options="OPgroup" class="col-xs-12 col-sm-6" dense outlined v-model="group" label="ตัวที่ 1" />
                    <q-select :options="OPgroup" class="col-xs-12 col-sm-6" dense outlined v-model="group2" label="ตัวที่ 2" />
                    <q-select :options="OPgroup" class="col-xs-12 col-sm-6" dense outlined v-model="group3" label="ตัวที่ 3" />
                </div>
						</div>
            <div class="col-12 row">
                <div class="col-12 text-top2">พฤติกรรมที่จําเป็นสําหรับการปฏิบัติงาน</div>
								(ได้แก่ ความประพฤติ ความมีคุณธรรมจริยธรรม การรักษาวินัย )
						</div>
						<div class="col-12 row">
							<div class="col-12 text-top2 ">
                    <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                    ความประพฤติ ได้แก่
                </div>
                <div class="col-12 row q-col-gutter-md">
									<div class="col-12 column q-ml-lg">
                    <li>ให้บริการประชาชนหรือผู้รับบริการด้วยอธัยาศัยดี</li>
										<li>มีความรับผิดชอบในการปฏิบัติงาน</li>
										<li>ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว เอาใจใส่เป็นมาตรฐานเดียวกัน</li>
										<li>ตั้งใจปฏิบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันหมั่นเพียร</li>
									</div>
								</div>
						</div>
						<div class="col-12 row">
							<div class="col-12 text-top2 ">
                    <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                    ความมีคุณธรรมจริยธรรม ได้แก่
                </div>
                <div class="col-12 row q-col-gutter-md">
									<div class="col-12 column q-ml-lg">
                    <li>อุทิศตนและเสียสละเวลาในการปฏิบัติงานอย่างเต็มกำลังความสามารถ</li>
										<li>มีจิตสำนึกที่ดี ปฏิบัติงานด้วยความซื่อสัตย์ สุจริต</li>
										<li>ยึดมั่นในสถาบันพระมหากษัตริย์ และไม่กระทำการใด ๆ อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ ศาสนา และพระมหากษัตริย์</li>
									</div>
								</div>
						</div>
						<div class="col-12 row">
							<div class="col-12 text-top2 ">
                    <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                    การรักษาวินัย ได้แก่
                </div>
                <div class="col-12 row q-col-gutter-md">
									<div class="col-12 column q-ml-lg">
                    <li>มีความรับผิดชอบในการรักษาเวลาทำงาน</li>
										<li>แต่งกายในการปฏิบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ</li>
										<li>ไม่กระทำการใด ๆ อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ</li>
										<li>ไม่กระทำการใด ๆ อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน</li>
										<li>ปฏิบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ</li>
									</div>
								</div>
						</div>
        </div>
    </q-card>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
const router = useRouter();
import { ref } from "vue";
import type OtherVue from "@/modules/04_registry/components/Other.vue";

const name = ref<string>('นายสมคิด ยอดใจ');
const position = ref<string>('นักจัดการงานทั่วไป');

const caretaker = ref<string>('นางสาวรัชภรณ์ ภักดี');
const caretaker2 = ref<string>('');
const OPcaretaker1 = ['นางสาวรัชภรณ์ ภักดี','นางสาวทวิดา กมลเวชชี'];
const OPcaretaker2 = ['นางสาวรัชภรณ์ ภักดี','นางสาวทวิดา กมลเวชชี'];

const activity1 = ref<string>('');
const goal1 = ref<string>('');
const activity2 = ref<string>('');
const goal2 = ref<string>('');

const knowledge = ref<string>('');
const knowledge2 = ref<string>('');
const knowledge3 = ref<string>('');
const OPknowledge = ['',''];

const law = ref([]);
const listlaw = [
  { id: 1, label: 'ความรู้เรื่องกฎหมายและกฎระเบียบ 1' },
	{ id: 2, label: 'ความรู้เรื่องกฎหมายและกฎระเบียบ 2' },
	{ id: 3, label: 'ความรู้เรื่องกฎหมายและกฎระเบียบ 3' },
	{ id: 4, label: 'ความรู้เรื่องกฎหมายและกฎระเบียบ 4' },
	{ id: 5, label: 'ความรู้เรื่องกฎหมายและกฎระเบียบ 5' }
];
const OtherLaw = ref<string>('');

const skill = ref<string>('ความรู้ความสามารถด้าน 1');
const skill2 = ref<string>('ความรู้ความสามารถด้าน 2');
const skill3 = ref<string>('ความรู้ความสามารถด้าน 3');
const skill4 = ref<string>('ความรู้ความสามารถด้าน 4');
const OPskill = [''];

const main = ref<string>('คุณธรรมจริยธรรม')
const main2 = ref<string>('การให้บริการที่ดี')
const main3 = ref<string>('การมุ่งผลสัมฤทธิ์')
const main4 = ref<string>('ทํางานเป็นทีม')
const main5 = ref<string>('การส่ังสมความเชี่ยวชาญในอาชีพ')
const OPmain = [''];

const group = ref<string>('')
const group2 = ref<string>('')
const group3 = ref<string>('')
const OPgroup = [''];
</script>
<style lang="scss" scope>
.text-top2{
	font-weight: 600;
	padding-bottom: 8px;
    color: rgb(70, 68, 68);
}
.text-Hd{
	font-weight: 600;
    font-size: 1rem;
    padding-bottom: 5px;
    color: #02A998;
}
</style>