<template>
	<div class="q-pb-md">
		<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 v-if="routeName == 'probationWorkAdd'">
				เพิ่มแบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ
			</div>
			<div v-else>
				แบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ
			</div>
		</div>
		<q-card bordered class="col-12 text-dark">
			<div class="row col-12 q-pa-lg">
				<div class="row col-12 q-gutter-lg">
					<div class="col-12 row">
						<div class="col-12 text-top0 items-center">
							<q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
							ผู้ทดลองปฏิบัติหน้าที่ราชการ
						</div>
						<div class="col-12 row q-col-gutter-md">
							<div class="col-xs-12 col-sm-6">
								<q-input 
									:readonly="routeName != 'probationWorkAdd'"  
									dense 
									borderless 
									:outlined="routeName == 'probationWorkAdd'" 
									v-model="name" 
									label="ชื่อ-สกุล" />
							</div>
							<div class="col-xs-12 col-sm-6">
								<q-input 
									:readonly="routeName != 'probationWorkAdd'"  
									dense 
									borderless 
									:outlined="routeName == 'probationWorkAdd'" 
									v-model="position" 
									label="ตำแหน่ง" />
							</div>
						</div>
					</div>
					<div class="col-12">
						<q-separator size="3px" color="grey-2" />
					</div>
					<div class="col-12 row">
						<div class="col-12 text-top0 items-center">
							<q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
							ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ (อาจมีได้มากกว่า 1 คน)
							<q-btn v-if="routeName == 'probationWorkAdd'" 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" 
								:readonly="routeName != 'probationWorkAdd'"  
								dense 
								borderless 
								:outlined="routeName == 'probationWorkAdd'" 
								v-model="caretaker" 
								label="ผู้ดูแลคนที่ 1" />
							<q-select 
								:options="OPcaretaker2" 
								class="col-xs-12 col-sm-6" 
								:readonly="routeName != 'probationWorkAdd'"  
								dense 
								borderless 
								:outlined="routeName == 'probationWorkAdd'" 
								v-model="caretaker2" 
								label="ผู้ดูแลคนที่ 2" />
						</div>
					</div>
					<div class="col-12">
						<q-separator size="3px" color="grey-2"  />
					</div>
					<div class="col-12 row">
						<div class="col-12 text-top0 items-center">
							<q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
							ผลการปฏิบัติงาน</div>
						<div class="col-12 text-top2 row items-center ">
							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
							3.1 ชื่องาน / ภารกิจงานที่มอบหมาย (ควรมีมากกว่า 1 ภารกิจงาน)
							<q-btn v-if="routeName == 'probationWorkAdd'" 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 
										:readonly="routeName != 'probationWorkAdd'"  
										dense 
										borderless 
										:outlined="routeName == 'probationWorkAdd'" 
										class="bg-white" 
										type="textarea" 
										v-model="activity1" 
										label="กิจกรรมของงาน/ขั้นตอนการปฏิบัติงาน(ไม่เกิน10บรรทัด )" />
									</div>
									<div class="col-xs-12 col-sm-6">
										<q-input 
										:readonly="routeName != 'probationWorkAdd'"  
										dense 
										borderless 
										:outlined="routeName == 'probationWorkAdd'" 
										class="bg-white" 
										type="textarea" 
										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 
											:readonly="routeName != 'probationWorkAdd'"  
											dense 
											borderless 
											:outlined="routeName == 'probationWorkAdd'" 
											class="bg-white" 
											type="textarea" 
											v-model="activity2" 
											label="กิจกรรมของงาน/ขั้นตอนการปฏิบัติงาน(ไม่เกิน10บรรทัด )" />
									</div>
									<div class="col-xs-12 col-sm-6">
										<q-input 
											:readonly="routeName != 'probationWorkAdd'" 
											dense borderless 
											:outlined="routeName == 'probationWorkAdd'" 
											class="bg-white" 
											type="textarea" 
											v-model="goal2" 
											label="เป้าหมายในการปฏิบัติงาน(ไม่เกิน10บรรทัด )" />
									</div>
								</div>
							</q-card>
						</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" />
							3.2 ความรู้ความสามารถและทักษะ(ตามที่ก.ก.กําหนด)
						</div>
						<q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
							<div class="row col-12 q-gutter-lg">
								<div class="col-12 row">
									<div class="col-12 text-top2 row items-center">
										ความรู้ความสามารถในการปฏิบัติงาน
										<q-btn v-if="routeName == 'probationWorkAdd'" round color="primary" dense icon="mdi-plus" flat class="q-ml-sm" />
									</div>
									<div class="col-12 row q-col-gutter-sm">
										<div class="col-12 ">
											<q-select 
												:options="OPknowledge" 
												class="bg-white" 
												:readonly="routeName != 'probationWorkAdd'" 
												dense 
												borderless 
												:outlined="routeName == 'probationWorkAdd'"
												v-model="knowledge" 
												label="ความรู้ความสามารถในการปฏิบัติงาน 1" />
										</div>
										<div class="col-12 ">
											<q-select 
												:options="OPknowledge" 
												class="bg-white" 
												:readonly="routeName != 'probationWorkAdd'"  
												dense 
												borderless 
												:outlined="routeName == 'probationWorkAdd'"
												v-model="knowledge2" 
												label="ความรู้ความสามารถในการปฏิบัติงาน 2" />
											</div>
										<div class="col-12 ">
											<q-select 
												:options="OPknowledge" 
												class="bg-white" 
												:readonly="routeName != 'probationWorkAdd'"  
												dense 
												borderless 
												:outlined="routeName == 'probationWorkAdd'"
												v-model="knowledge3" 
												label="ความรู้ความสามารถในการปฏิบัติงาน 2" />
											</div>
									</div>
								</div>
								<div class="col-12 row">
									<div class="col-12 text-top2 row items-center">
										ความรู้เรื่องกฎหมายและกฎระเบียบ (ไม่เกิน 20 หัวข้อ)
										<q-btn v-if="routeName == 'probationWorkAdd'" 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 :disable="routeName != 'probationWorkAdd'"  :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">
										กฎหมายอื่น ๆ ที่เกี่ยวข้องกับการปฏิบัติงาน
									</div>
									<div class="col-12 row q-col-gutter-md">
										<div class="col-12">
											<q-input 
												class="bg-white"
												:readonly="routeName != 'probationWorkAdd'"  
												dense 
												borderless 
												:outlined="routeName == 'probationWorkAdd'"
												v-model="OtherLaw" 
											/>
										</div>
									</div>
								</div>
								<div class="col-12 row">
									<div class="col-12 text-top2">
										ทักษะ
									</div>
									<div class="col-12 row q-col-gutter-sm">
										<div class="col-xs-12 col-sm-6">
											<q-select 
												:options="OPskill" 
												class="bg-white" 
												:readonly="routeName != 'probationWorkAdd'"  
												dense 
												borderless 
												:outlined="routeName == 'probationWorkAdd'" 
												v-model="skill" 
												label="ด้านที่ 1" />
										</div>
										<div class="col-xs-12 col-sm-6">
											<q-select 
												:options="OPskill" 
												class="bg-white" 
												:readonly="routeName != 'probationWorkAdd'"  
												dense 
												borderless 
												:outlined="routeName == 'probationWorkAdd'" 
												v-model="skill2" 
												label="ด้านที่ 2" />
										</div>
										<div class="col-xs-12 col-sm-6">
											<q-select 
												:options="OPskill" 
												class="bg-white" 
												:readonly="routeName != 'probationWorkAdd'"  
												dense 
												borderless 
												:outlined="routeName == 'probationWorkAdd'"
												v-model="skill3" 
												label="ด้านที่ 3" />
										</div>
										<div class="col-xs-12 col-sm-6">
											<q-select 
												:options="OPskill" 
												class="bg-white" 
												:readonly="routeName != 'probationWorkAdd'"  
												dense 
												borderless 
												:outlined="routeName == 'probationWorkAdd'"
												v-model="skill4" 
												label="ด้านที่ 4" />
										</div>
									</div>
								</div>
							</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" />
							3.3 สมรรถนะ (ตามที่ ก.ก. กําหนด)
						</div>
						<q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
							<div class="row col-12 q-gutter-lg">
								<div class="col-12 row">
									<div class="col-12 text-top2 ">
										สมรรถนะหลัก
									</div>
									<div class="col-12 row q-col-gutter-sm">
										<div class="col-xs-12 col-sm-6">
											<q-select 
											:options="OPmain" 
											class="bg-white" 
											:readonly="routeName != 'probationWorkAdd'"  
											dense 
											borderless 
											:outlined="routeName == 'probationWorkAdd'"
											v-model="main" 
											label="ตัวที่ 1" />
										</div>
										<div class="col-xs-12 col-sm-6">
											<q-select 
											:options="OPmain" 
											class="bg-white" 
											:readonly="routeName != 'probationWorkAdd'"  
											dense 
											borderless 
											:outlined="routeName == 'probationWorkAdd'"
											v-model="main2" 
											label="ตัวที่ 2" />
										</div>
										<div class="col-xs-12 col-sm-6">
											<q-select 
												:options="OPmain" 
												class="bg-white" 
												:readonly="routeName != 'probationWorkAdd'"  
												dense 
												borderless 
												:outlined="routeName == 'probationWorkAdd'" 
												v-model="main3" 
												label="ตัวที่ 3" />
											</div>
										<div class="col-xs-12 col-sm-6">
											<q-select 
												:options="OPmain" 
												class="bg-white" 
												:readonly="routeName != 'probationWorkAdd'"  
												dense 
												borderless 
												:outlined="routeName == 'probationWorkAdd'" 
												v-model="main4" 
												label="ตัวที่ 4" />
										</div>
										<div class="col-xs-12 col-sm-6">
											<q-select 
												:options="OPmain" 
												class="bg-white" 
												:readonly="routeName != 'probationWorkAdd'"  
												dense 
												borderless 
												:outlined="routeName == 'probationWorkAdd'"
												v-model="main5" 
												label="ตัวที่ 4" />
										</div>
									</div>
								</div>
								<div class="col-12 row">
									<div class="col-12 text-top2 ">
										สมรรถนะประจํากลุ่มงาน
									</div>
									<div class="col-12 row q-col-gutter-sm">
										<div class="col-xs-12 col-sm-6">
											<q-select 
												:options="OPgroup" 
												class="bg-white" 
												:readonly="routeName != 'probationWorkAdd'"  
												dense 
												borderless 
												:outlined="routeName == 'probationWorkAdd'" 
												v-model="group" 
												label="ตัวที่ 1" />
										</div>
										<div class="col-xs-12 col-sm-6">
											<q-select 
												:options="OPgroup" 
												class="bg-white" 
												:readonly="routeName != 'probationWorkAdd'"  
												dense 
												borderless 
												:outlined="routeName == 'probationWorkAdd'" 
												v-model="group2" 
												label="ตัวที่ 2" />
											</div>
										<div class="col-xs-12 col-sm-6">
											<q-select 
												:options="OPgroup" 
												class="bg-white" 
												:readonly="routeName != 'probationWorkAdd'"  
												dense 
												borderless 
												:outlined="routeName == 'probationWorkAdd'" 
												v-model="group3" 
												label="ตัวที่ 3" />
										</div>
									</div>
								</div>
							</div>
						</q-card>
					</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" />
							3.4 พฤติกรรมที่จําเป็นสําหรับการปฏิบัติงาน<span class="text-weight-regular q-pl-sm"> ( ได้แก่ ความประพฤติ ความมีคุณธรรมจริยธรรม การรักษาวินัย )</span>
						</div>
						<q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
							<div class="row col-12 q-gutter-lg">
								<div class="col-12 row">
									<div class="col-12 text-top2 ">
										ความประพฤติ ได้แก่
									</div>
									<div class="col-12 row q-col-gutter-md">
										<div class="col-12 column q-ml-md">
											<li>ให้บริการประชาชนหรือผู้รับบริการด้วยอธัยาศัยดี</li>
											<li>มีความรับผิดชอบในการปฏิบัติงาน</li>
											<li>ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว เอาใจใส่เป็นมาตรฐานเดียวกัน</li>
											<li>ตั้งใจปฏิบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันหมั่นเพียร</li>
										</div>
									</div>
								</div>
								<div class="col-12 row">
									<div class="col-12 text-top2 ">
									ความมีคุณธรรมจริยธรรม ได้แก่
								</div>
								<div class="col-12 row q-col-gutter-md">
									<div class="col-12 column q-ml-md">
										<li>อุทิศตนและเสียสละเวลาในการปฏิบัติงานอย่างเต็มกำลังความสามารถ</li>
										<li>มีจิตสำนึกที่ดี ปฏิบัติงานด้วยความซื่อสัตย์ สุจริต</li>
										<li>ยึดมั่นในสถาบันพระมหากษัตริย์ และไม่กระทำการใด ๆ อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ ศาสนา และพระมหากษัตริย์</li>
									</div>
								</div>
								</div>
								<div class="col-12 row">
									<div class="col-12 text-top2 ">
										การรักษาวินัย ได้แก่
									</div>
									<div class="col-12 row q-col-gutter-md">
										<div class="col-12 column q-ml-md">
											<li>มีความรับผิดชอบในการรักษาเวลาทำงาน</li>
											<li>แต่งกายในการปฏิบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ</li>
											<li>ไม่กระทำการใด ๆ อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ</li>
											<li>ไม่กระทำการใด ๆ อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน</li>
											<li>ปฏิบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ</li>
										</div>
									</div>
								</div>
							</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" />
							3.5 อื่น ๆ (ถ้ามี)
						</div>
						<div class="col-12 row q-col-gutter-md">
							<div class="col-12">
								<q-input 
								:readonly="routeName != 'probationWorkAdd'"  
								dense 
								borderless 
								:outlined="routeName == 'probationWorkAdd'" 
								v-model="Other" />
							</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" />
							3.6 ผลผลิตของงานที่คาดหวังและตัวชี้วัดความสําเร็จของงาน
							<q-btn v-if="routeName == 'probationWorkAdd'" 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" 
											:readonly="routeName != 'probationWorkAdd'"  
											dense 
											borderless 
											:outlined="routeName == 'probationWorkAdd'" 
											v-model="activity1" 
											label="ผลผลิตของงานที่คาดหวัง (ไม่เกิน 10 บรรทัด)" />
										</div>
										<div class="col-xs-12 col-sm-6">
											<q-input 
											class="bg-white" 
											type="textarea" 
											:readonly="routeName != 'probationWorkAdd'"  
											dense 
											borderless 
											:outlined="routeName == 'probationWorkAdd'" 
											v-model="goal1" 
											label="ตัวชี้วัดความสําเร็จของงาน (ไม่เกิน 10 บรรทัด)" />
										</div>
								</div>
							</q-card>
						</div>
					</div>
					<div class="col-12">
						<q-separator size="3px" color="grey-2"  />
					</div>
					<div class="col-12 row">
						<div class="col-12 text-top0 items-center">
							<q-avatar class="bg-grey-2 q-mr-sm" size="28px">4</q-avatar>
							การพัฒนาผู้ทดลองปฏิบัติหน้าที่ราชการ
						</div>
						<div class="col-12 row">
							<div class="col-12 text-top2 ">
								ผู้ทดลองปฏิบัติหน้าที่ราชการต้องเข้าร่วมในการปฐมนิเทศและอบรมหลักสูตรต่าง ๆ ภายในระยะเวลาทดลองปฏิบัติหน้าที่ราชการ ดังนี้
							</div>
							<div class="col-12 text-top2 row items-center">
								<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
								4.1 การปฐมนิเทศเพื่อให้มีความรู้เกี่ยวกับหน่วยงาน/ส่วนราชการ
							</div>
							<div class="col-12 text-top2 row items-center">
								<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
								4.2 การเรียนรู้ด้วยตนเองเพื่อให้มีความรู้เกี่ยวกับกฎหมายกฎระเบียบแบบแผนของทางราชการ
							</div>
							<div class="col-12 text-top2 row items-center">
								<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
								4.3 การอบรมสัมมนาร่วมกันเพื่อปลูกฝังการประพฤติปฏิบัติตนเป็นข้าราชการที่ดี
							</div>
							<div class="col-12 text-top2 row items-center">
								<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
								4.4 การอบรมอื่น ๆ ที่หน่วยงานกำหนด (ถ้ามี)
							</div>
						</div>
					</div>
					<div class="col-12">
						<q-separator size="3px" color="grey-2"  />
					</div>
					<div class="col-12 row">
						<div class="col-12 text-top0 items-center">
							<q-avatar class="bg-grey-2 q-mr-sm" size="28px">5</q-avatar>
							การประเมินผลการทดลองปฏิบัติหน้าที่ราชการ
						</div>
						<div class="col-12 text-top2 row items-center">
							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
							5.1 ประเมินผลการทดลองปฏิบัติหน้าที่ราชการโดยคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ
						</div>
						<div class="col-12 text-top2 row items-center">
							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
							5.2 รายละเอียดการประเมินประกอบด้วย 2 ส่วนคือ
						</div>
						<div class="col-12 row q-gutter-md">
							<q-card flat bordered class="col-12 q-pa-md bg-grey-1">
								<div class="col-12 text-top2 ">
									การรักษาวินัย ได้แก่
								</div>
								<div class="col-12 row q-col-gutter-md">
									<div class="col-12 column q-ml-md">
										<li>ความรู้ความสามารถที่ ก.ก. กำหนด</li>
										<li>ทักษะที่ ก.ก. กำหนด</li>
										<li>สมรรถนะตามที่ ก.ก. กำหนด</li>
										<li>ความสามารถในการเรียนรู้งานในตำแหน่ง</li>
										<li>ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</li>
										<li>ความสำเร็จของงานที่ได้รับมอบหมาย</li>
										<li>อื่นๆ (ถ้ามี) <q-input dense outlined v-model="Other" label="กรอกอื่นๆ" /></li>
									</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" />
							5.3 ข้อมูลที่ใช้ประกอบการประเมินผลการทดลองปฏิบัติหน้าที่ราชการประกอบด้วย
						</div>
						<div class="col-12 row q-gutter-md">
							<q-card flat bordered class="col-12 q-pa-md bg-grey-1">
								<div class="col-12 row q-col-gutter-md">
									<div class="col-12 column q-ml-md">
										<li>บันทึกผลการทดลองปฏิบัติหน้าที่ราชการของผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการและผู้บังคับบัญา</li>
										<li>แบบประเมินผลการทดลองปฏิบัติหน้าที่ราชการของผู้บังคับบัญชา</li>
										<li>รายงานผลการพัฒนาตามที่สำนักงาน ก.ก.กำหนด</li>
									</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" />
							5.3 สัดส่วนของคะแนนและมาตรฐานการประเมิน
						</div>
						<div class="col-12 row q-gutter-md">
							<q-card flat bordered class="col-12 q-pa-md bg-grey-1">
								<div class="col-12 row q-col-gutter-md">
									<div class="col-12 column q-ml-md">
										<li>สัดส่วนของคะแนนการทดลองปฏิบัติหน้าที่ราชการ</li>
										<div class="q-pl-lg">ส่วนที่ 1 คะแนนผลสัมฤทธิ์ของการทดลองปฏิบัติหน้าที่ราชการร้อยละ 50</div>
										<div class="q-pl-lg">ส่วนที่ 2 คะแนนพฤติกรรมของผู้ทดลองปฏิบัติหน้าที่ราชการร้อยละ 50</div>
										<div class="q-pl-lg">มาตรฐานการประเมินแต่ละส่วนต้องได้คะแนนไม่ต่ำกว่าร้อยละ 60</div>
										<li>สัดส่วนคะแนนการพัฒนาข้าราชการที่อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ</li>
										<div class="q-pl-lg">คะแนนรวมของการพัฒนาจะต้องไม่น้อยกว่าร้อยละ 60</div>
										<div><span style="text-decoration: underline; ">หมายเหตุ</span> ให้นำคะแนนรวมทั้ง 2 ส่วนมารวมกันแล้วต้องได้คะแนนไม่น้อยกว่าร้อยละ 60 จึงถือว่าผ่านการประเมินการทดลองปฏิบัติหน้าที่ราชการ</div>
									</div>
								</div>
							</q-card>
						</div>
					</div>
					<div class="col-12">
						<q-separator size="3px" color="grey-2"  />
					</div>
					<div class="col-12 row">
						<div class="col-12 text-top0 items-center">
							การลงชื่อเพื่อมอบหมายงานและรับมอบหมายงานในการทดลองปฏิบัติหน้าที่ราชการ
						</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" />
								ผู้ทดลองปฏิบัติหน้าที่ราชการ
							</div>
						</div>
						<div class="col-12 row q-col-gutter-md">
							<div class="col-xs-12 col-sm-4">
								<q-input 
									:readonly="routeName != 'probationWorkAdd'"  
									dense 
									borderless 
									:outlined="routeName == 'probationWorkAdd'" 
									v-model="name" 
									label="ชื่อ-สกุล" />
							</div>
							<div class="col-xs-12 col-sm-4">
								<q-input 
									:readonly="routeName != 'probationWorkAdd'"  
									dense 
									borderless 
									:outlined="routeName == 'probationWorkAdd'" 
									v-model="position" 
									label="ตำแหน่ง" />
							</div>
							<div class="col-xs-12 col-sm-4">
								<datepicker
									menu-class-name="modalfix"
									v-model="date1"
									:locale="'th'"
									autoApply
									borderless
									:enableTimePicker="false"
									week-start="0"
									>
									<template #year="{ year }">
										{{ year + 543 }}
									</template>
									<template #year-overlay-value="{ value }">
										{{ parseInt(value + 543) }}
									</template>
									<template #trigger>
										<q-input
											:readonly="routeName != 'probationWorkAdd'"  
											dense 
											borderless 
											:outlined="routeName == 'probationWorkAdd'"
											class="full-width datepicker"
											:model-value="
												date1 != null ? date2Thai(date1) : null
											"
											label="ลงวันที่"
										>
											<template v-slot:prepend>
											<q-icon
												name="event"
												class="cursor-pointer"
												style="color: var(--q-primary)"
											>
											</q-icon>
											</template>
										</q-input>
									</template>
								</datepicker>
							</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" />
							ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ
						</div>
						<div class="col-12 row q-col-gutter-md">
							<q-select 
								:options="OPcaretaker1" 
								class="col-xs-12 col-sm-8" 
								:readonly="routeName != 'probationWorkAdd'"  
								dense 
								borderless 
								:outlined="routeName == 'probationWorkAdd'" 
								v-model="caretaker" 
								label="ผู้ดูแลคนที่ 1" />
							<div class="col-xs-12 col-sm-4">
								<datepicker
									menu-class-name="modalfix"
									v-model="date2"
									:locale="'th'"
									autoApply
									borderless
									:enableTimePicker="false"
									week-start="0"
									>
									<template #year="{ year }">
										{{ year + 543 }}
									</template>
									<template #year-overlay-value="{ value }">
										{{ parseInt(value + 543) }}
									</template>
									<template #trigger>
										<q-input
											:readonly="routeName != 'probationWorkAdd'"  
											dense 
											borderless 
											:outlined="routeName == 'probationWorkAdd'"
											class="full-width datepicker"
											:model-value="
												date2 != null ? date2Thai(date2) : null
											"
											label="ลงวันที่"
										>
											<template v-slot:prepend>
											<q-icon
												name="event"
												class="cursor-pointer"
												style="color: var(--q-primary)"
											>
											</q-icon>
											</template>
										</q-input>
									</template>
								</datepicker>
							</div>
							<q-select 
								:options="OPcaretaker2" 
								class="col-xs-12 col-sm-8" 
								:readonly="routeName != 'probationWorkAdd'"  
								dense 
								borderless 
								:outlined="routeName == 'probationWorkAdd'" 
								v-model="caretaker2" 
								label="ผู้ดูแลคนที่ 2" />
							<div class="col-xs-12 col-sm-4">
								<datepicker
									menu-class-name="modalfix"
									v-model="date3"
									:locale="'th'"
									autoApply
									borderless
									:enableTimePicker="false"
									week-start="0"
									>
									<template #year="{ year }">
										{{ year + 543 }}
									</template>
									<template #year-overlay-value="{ value }">
										{{ parseInt(value + 543) }}
									</template>
									<template #trigger>
										<q-input
											:readonly="routeName != 'probationWorkAdd'"
											dense 
s											borderless 
											:outlined="routeName == 'probationWorkAdd'"
											class="full-width datepicker"
											:model-value="
												date3 != null ? date2Thai(date3) : null
											"
											label="ลงวันที่"
										>
											<template v-slot:prepend>
											<q-icon
												name="event"
												class="cursor-pointer"
												style="color: var(--q-primary)"
											>
											</q-icon>
											</template>
										</q-input>
									</template>
								</datepicker>
							</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" />
							ผู้บังคับบัญชาผู้มอบหมายงาน
						</div>
						<div class="col-12 row q-col-gutter-md">
							<q-select 
								:options="OPcaretaker1" 
								class="col-xs-12 col-sm-8" 
								:readonly="routeName != 'probationWorkAdd'"  
								dense 
								borderless 
								:outlined="routeName == 'probationWorkAdd'" 
								v-model="commander" 
								label="ผู้บังคับบัญชา" />
							<div class="col-xs-12 col-sm-4">
								<datepicker
									menu-class-name="modalfix"
									v-model="date4"
									:locale="'th'"
									autoApply
									borderless
									:enableTimePicker="false"
									week-start="0"
									>
									<template #year="{ year }">
										{{ year + 543 }}
									</template>
									<template #year-overlay-value="{ value }">
										{{ parseInt(value + 543) }}
									</template>
									<template #trigger>
										<q-input
											:readonly="routeName != 'probationWorkAdd'"  
											dense 
											borderless 
											:outlined="routeName == 'probationWorkAdd'"
											class="full-width datepicker"
											:model-value="
												date4 != null ? date2Thai(date4) : null
											"
											label="ลงวันที่"
										>
											<template v-slot:prepend>
											<q-icon
												name="event"
												class="cursor-pointer"
												style="color: var(--q-primary)"
											>
											</q-icon>
											</template>
										</q-input>
									</template>
								</datepicker>
							</div>
						</div>
					</div>
				</div>
			</div>
			<q-separator v-show="routeName == 'probationWorkAdd'" />
			<div v-show="routeName == 'probationWorkAdd'" class="flex justify-end q-pa-sm q-gutter-sm">
				<q-btn unelevated label="บันทึก" color="public"/>
			</div>
		</q-card>
	</div>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
import { ref } from "vue";
import { useCounterMixin } from "@/stores/mixin";
// import type { QForm } from "quasar";

const router = useRouter();

const mixin = useCounterMixin();
const { date2Thai } = mixin;

const routeName = router.currentRoute.value.name

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 = [''];

const Other = ref<string>('');

const commander = ref<string>('')

const date1 = ref<Date>(new Date());
const date2 = ref<Date>(new Date());
const date3 = ref<Date>(new Date());
const date4 = ref<Date>(new Date());
</script>
<style lang="scss" scoped>
.text-top2{
	font-weight: 500;
	padding-bottom: 8px;
   color: rgb(70, 68, 68);
}
.text-top0{
	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>