<!-- card ข้อมูลส่วนตัว -->
<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>
		<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 row items-center ">
							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
							วันเริ่มทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่
							<span class="text-primary q-px-sm">{{date2Thai(dateToday)}}</span> 
							ถึงวันที 
							<span class="text-primary q-px-sm">{{date2Thai(dateEnd)}}</span>
						</div>
						<div class="col-12 text-top0 row items-center">
							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
							การทดลองปฏิบัติหน้าที่ราชการมีผล ดังนี้
							<span class="text-primary q-px-sm">{{ "ครั้งที่" + period }}</span>
							ระหว่างวันที่
							<span class="text-primary q-px-sm">{{ date2Thai(dateToday)}}</span>
							ถึงวันที่
							<span class="text-primary q-px-sm">{{date2Thai(dateEnd)}}</span>
						</div>
						<div class="col-12 q-pt-md">
							<q-separator size="3px" color="grey-2" />
						</div>
					</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">1</q-avatar>
							ผลสัมฤทธิ์ของการทดลองปฏิบัติบัติหน้าที่ราชการ
						</div>
						<div class="col-12 text-top0 row items-center q-pl-lg">
							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
							1.1 ความสำเร็จของงานที่ได้รับมอบหมาย
						</div>
						<div class="col-xs-12 col-sm-11 col-md-10  offset-md-1 text-top2">
							1.ผลผลิตของงานที่คาดหวัง
						</div>
						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
							<q-list dense v-for="(list,i) in list1_1" :key="i">
								<q-item dense tag="label" v-ripple>
									<q-item-section>
										<q-item-label>{{ list.label }}</q-item-label>
									</q-item-section>
									<q-item-section side >
										<q-rating
											v-model="model"
											:val="list.id"
											max="5"
											size="sm"
											color="grey"
											:color-selected="ratingColors"
											label="ระดับการประเมินพฤติกรรม"
										>
											<template v-slot:tip-1>
												<q-tooltip>ปรับปรุง</q-tooltip>
											</template>
											<template v-slot:tip-2>
												<q-tooltip>พอใช้</q-tooltip>
											</template>
											<template v-slot:tip-3>
												<q-tooltip>ปานกลาง</q-tooltip>
											</template>
											<template v-slot:tip-4>
												<q-tooltip>ดี</q-tooltip>
											</template>
											<template v-slot:tip-5>
												<q-tooltip>ดีมาก</q-tooltip>
											</template>
										</q-rating>
									</q-item-section>
								</q-item>
								<q-separator class="q-my-xs" v-if="i + 1 < list1_1.length"  />
							</q-list>
						</q-card>
					</div>
					<div class="col-12 row">
						<div class="col-12 text-top0 row items-center q-pl-lg">
							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
							1.1 ความสำเร็จของงานที่ได้รับมอบหมาย
						</div>
						<div class="col-xs-12 col-sm-11 col-md-10  offset-md-1 text-top2">
							1.ผลผลิตของงานที่เกิดขึ้น
						</div>
						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
							<q-list dense v-for="(list,i) in list1_2" :key="i">
								<q-item dense tag="label" v-ripple>
									<q-item-section>
										<q-item-label>{{ list.label }}</q-item-label>
									</q-item-section>
									<q-item-section side >
										<q-rating
											v-model="model1"
											:val="list.id"
											max="5"
											size="sm"
											color="grey"
											:color-selected="ratingColors"
											label="ระดับการประเมินพฤติกรรม"
										>
											<template v-slot:tip-1>
												<q-tooltip>ปรับปรุง</q-tooltip>
											</template>
											<template v-slot:tip-2>
												<q-tooltip>พอใช้</q-tooltip>
											</template>
											<template v-slot:tip-3>
												<q-tooltip>ปานกลาง</q-tooltip>
											</template>
											<template v-slot:tip-4>
												<q-tooltip>ดี</q-tooltip>
											</template>
											<template v-slot:tip-5>
												<q-tooltip>ดีมาก</q-tooltip>
											</template>
										</q-rating>
									</q-item-section>
								</q-item>
								<q-separator class="q-my-xs" v-if="i + 1 < list1_2.length"  />
							</q-list>
						</q-card>
					</div>
					<div class="col-12 row">
						<div class="col-12 text-top0 row items-center q-pl-lg">
							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
							1.2 ความรู้ความสามารถ
						</div>
						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
							<q-list dense>
								<q-item dense tag="label" v-ripple>
									<q-item-section>
										<q-item-label>ความรู้ความสามารถ</q-item-label>
									</q-item-section>
									<q-item-section side >
										<q-rating
											v-model="model1_2"
											max="5"
											size="sm"
											color="grey"
											:color-selected="ratingColors"
											label="ระดับการประเมินพฤติกรรม"
										>
											<template v-slot:tip-1>
												<q-tooltip>ปรับปรุง</q-tooltip>
											</template>
											<template v-slot:tip-2>
												<q-tooltip>พอใช้</q-tooltip>
											</template>
											<template v-slot:tip-3>
												<q-tooltip>ปานกลาง</q-tooltip>
											</template>
											<template v-slot:tip-4>
												<q-tooltip>ดี</q-tooltip>
											</template>
											<template v-slot:tip-5>
												<q-tooltip>ดีมาก</q-tooltip>
											</template>
										</q-rating>
									</q-item-section>
								</q-item>
							</q-list>
						</q-card>
					</div>
					<div class="col-12 row">
						<div class="col-12 text-top0 row items-center q-pl-lg">
							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
							1.3 ทักษะ
						</div>
						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
							<q-list dense>
								<q-item dense tag="label" v-ripple>
									<q-item-section>
										<q-item-label>ทักษะ</q-item-label>
									</q-item-section>
									<q-item-section side >
										<q-rating
											v-model="model1_3"
											max="5"
											size="sm"
											color="grey"
											:color-selected="ratingColors"
											label="ระดับการประเมินพฤติกรรม"
										>
											<template v-slot:tip-1>
												<q-tooltip>ปรับปรุง</q-tooltip>
											</template>
											<template v-slot:tip-2>
												<q-tooltip>พอใช้</q-tooltip>
											</template>
											<template v-slot:tip-3>
												<q-tooltip>ปานกลาง</q-tooltip>
											</template>
											<template v-slot:tip-4>
												<q-tooltip>ดี</q-tooltip>
											</template>
											<template v-slot:tip-5>
												<q-tooltip>ดีมาก</q-tooltip>
											</template>
										</q-rating>
									</q-item-section>
								</q-item>
							</q-list>
						</q-card>
					</div>
					<div class="col-12 row">
						<div class="col-12 text-top0 row items-center q-pl-lg">
							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
							1.4 สมรรถนะ
						</div>
						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
							<q-list dense>
								<q-item dense tag="label" v-ripple>
									<q-item-section>
										<q-item-label>สมรรถนะ</q-item-label>
									</q-item-section>
									<q-item-section side >
										<q-rating
											v-model="model1_4"
											max="5"
											size="sm"
											color="grey"
											:color-selected="ratingColors"
											label="ระดับการประเมินพฤติกรรม"
										>
											<template v-slot:tip-1>
												<q-tooltip>ปรับปรุง</q-tooltip>
											</template>
											<template v-slot:tip-2>
												<q-tooltip>พอใช้</q-tooltip>
											</template>
											<template v-slot:tip-3>
												<q-tooltip>ปานกลาง</q-tooltip>
											</template>
											<template v-slot:tip-4>
												<q-tooltip>ดี</q-tooltip>
											</template>
											<template v-slot:tip-5>
												<q-tooltip>ดีมาก</q-tooltip>
											</template>
										</q-rating>
									</q-item-section>
								</q-item>
							</q-list>
						</q-card>
					</div>
					<div class="col-12 row">
						<div class="col-12 text-top0 row items-center q-pl-lg">
							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
							1.5 ความสามารถในการเรียนรู้งาน
						</div>
						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
							<q-list dense>
								<q-item dense tag="label" v-ripple>
									<q-item-section>
										<q-item-label>ความสามารถในการเรียนรู้งาน</q-item-label>
									</q-item-section>
									<q-item-section side >
										<q-rating
											v-model="model1_5"
											max="5"
											size="sm"
											color="grey"
											:color-selected="ratingColors"
											label="ระดับการประเมินพฤติกรรม"
										>
											<template v-slot:tip-1>
												<q-tooltip>ปรับปรุง</q-tooltip>
											</template>
											<template v-slot:tip-2>
												<q-tooltip>พอใช้</q-tooltip>
											</template>
											<template v-slot:tip-3>
												<q-tooltip>ปานกลาง</q-tooltip>
											</template>
											<template v-slot:tip-4>
												<q-tooltip>ดี</q-tooltip>
											</template>
											<template v-slot:tip-5>
												<q-tooltip>ดีมาก</q-tooltip>
											</template>
										</q-rating>
									</q-item-section>
								</q-item>
							</q-list>
						</q-card>
					</div>
					<div class="col-12 row">
						<div class="col-12 text-top0 row items-center q-pl-lg">
							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
							1.6 ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่
						</div>
						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
							<q-list dense>
								<q-item dense tag="label" v-ripple>
									<q-item-section>
										<q-item-label>ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label>
									</q-item-section>
									<q-item-section side >
										<q-rating
											v-model="model1_6"
											max="5"
											size="sm"
											color="grey"
											:color-selected="ratingColors"
											label="ระดับการประเมินพฤติกรรม"
										>
											<template v-slot:tip-1>
												<q-tooltip>ปรับปรุง</q-tooltip>
											</template>
											<template v-slot:tip-2>
												<q-tooltip>พอใช้</q-tooltip>
											</template>
											<template v-slot:tip-3>
												<q-tooltip>ปานกลาง</q-tooltip>
											</template>
											<template v-slot:tip-4>
												<q-tooltip>ดี</q-tooltip>
											</template>
											<template v-slot:tip-5>
												<q-tooltip>ดีมาก</q-tooltip>
											</template>
										</q-rating>
									</q-item-section>
								</q-item>
							</q-list>
						</q-card>
					</div>
					<div class="col-12 row">
						<div class="col-12 text-top0 row items-center q-pl-lg">
							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
							1.7 อื่นๆ 
							<q-checkbox class="q-ml-sm" dense v-model="etc" />
						</div>
						<q-card  v-if="etc" flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
							<q-list dense>
								<q-item dense tag="label" v-ripple>
									<q-item-section>
										<q-item-label>
											<q-input
												v-model="etc_text"
												label="กรอกอื่นๆ"
												dense
												lazy-rules
												autogrow
												hide-bottom-space
												outlined
												class="bg-white"
												:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
											/>
										</q-item-label>
									</q-item-section>
									<q-item-section side >
										<q-rating
											v-model="modelEtc"
											max="5"
											size="sm"
											color="grey"
											:color-selected="ratingColors"
											label="ระดับการประเมินพฤติกรรม"
										>
											<template v-slot:tip-1>
												<q-tooltip>ปรับปรุง</q-tooltip>
											</template>
											<template v-slot:tip-2>
												<q-tooltip>พอใช้</q-tooltip>
											</template>
											<template v-slot:tip-3>
												<q-tooltip>ปานกลาง</q-tooltip>
											</template>
											<template v-slot:tip-4>
												<q-tooltip>ดี</q-tooltip>
											</template>
											<template v-slot:tip-5>
												<q-tooltip>ดีมาก</q-tooltip>
											</template>
										</q-rating>
									</q-item-section>
								</q-item>
							</q-list>
						</q-card>
					</div>
					<div class="col-12 row">
						<div class="col-12 text-top0 row items-center q-pl-lg">
							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
							จุดเด่น (ไม่เกิน 5 บรรทัด)
						</div>
						<q-input
							outlined
							dense
							v-model="text2_1"
							class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
							lazy-rules
							type="textarea"
							label="กรอกจุดเด่น"
							hide-bottom-space
							:row="5"
							:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
						/>
					</div>
					<div class="col-12 row">
						<div class="col-12 text-top0 row items-center q-pl-lg">
							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
							สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)
						</div>
						<q-input
							outlined
							dense
							v-model="text2_2"
							class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
							lazy-rules
							type="textarea"
							hide-bottom-space
							label="กรอกสิ่งที่ควรปรับปรุง"
							:row="5"
							:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
						/>
					</div>

					<div class="col-12">
						<q-separator size="3px" color="grey-2" />
					</div>

					<!-- 2 -->
					<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>
							พฤติกรรมของผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
						</div>
						<div class="col-12 text-top0 row items-center q-pl-lg">
							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
							2.1 ความประพฤติ
						</div>
						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
							<q-list dense v-for="(list,i) in list2_1" :key="i">
								<q-item dense tag="label" v-ripple>
									<q-item-section>
										<q-item-label>{{ list.label }}</q-item-label>
									</q-item-section>
									<q-item-section side >
										<q-rating
											v-model="model"
											:val="list.id"
											max="5"
											size="sm"
											color="grey"
											:color-selected="ratingColors"
											label="ระดับการประเมินพฤติกรรม"
										>
											<template v-slot:tip-1>
												<q-tooltip>ปรับปรุง</q-tooltip>
											</template>
											<template v-slot:tip-2>
												<q-tooltip>พอใช้</q-tooltip>
											</template>
											<template v-slot:tip-3>
												<q-tooltip>ปานกลาง</q-tooltip>
											</template>
											<template v-slot:tip-4>
												<q-tooltip>ดี</q-tooltip>
											</template>
											<template v-slot:tip-5>
												<q-tooltip>ดีมาก</q-tooltip>
											</template>
										</q-rating>
									</q-item-section>
								</q-item>
								<q-separator class="q-my-xs" v-if="i + 1 < list2_1.length"  />
							</q-list>
						</q-card>
					</div>
					<div class="col-12 row">
						<div class="col-12 text-top0 row items-center q-pl-lg">
							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
							2.2 ความมีคุณธรรมจริยธรรม
						</div>
						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
							<q-list dense v-for="(list,i) in list2_2" :key="i">
								<q-item dense tag="label" v-ripple>
									<q-item-section>
										<q-item-label>{{ list.label }}</q-item-label>
									</q-item-section>
									<q-item-section side >
										<q-rating
											v-model="model"
											:val="list.id"
											max="5"
											size="sm"
											color="grey"
											:color-selected="ratingColors"
											label="ระดับการประเมินพฤติกรรม"
										>
											<template v-slot:tip-1>
												<q-tooltip>ปรับปรุง</q-tooltip>
											</template>
											<template v-slot:tip-2>
												<q-tooltip>พอใช้</q-tooltip>
											</template>
											<template v-slot:tip-3>
												<q-tooltip>ปานกลาง</q-tooltip>
											</template>
											<template v-slot:tip-4>
												<q-tooltip>ดี</q-tooltip>
											</template>
											<template v-slot:tip-5>
												<q-tooltip>ดีมาก</q-tooltip>
											</template>
										</q-rating>
									</q-item-section>
								</q-item>
								<q-separator class="q-my-xs" v-if="i + 1 < list2_2.length"  />
							</q-list>
						</q-card>
					</div>
					<div class="col-12 row">
						<div class="col-12 text-top0 row items-center q-pl-lg">
							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
							2.3 การรักษาวินัย
						</div>
						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
							<q-list dense v-for="(list,i) in list2_3" :key="i">
								<q-item dense tag="label" v-ripple>
									<q-item-section>
										<q-item-label>{{ list.label }}</q-item-label>
									</q-item-section>
									<q-item-section side >
										<q-rating
											v-model="model"
											:val="list.id"
											max="5"
											size="sm"
											color="grey"
											:color-selected="ratingColors"
											label="ระดับการประเมินพฤติกรรม"
										>
											<template v-slot:tip-1>
												<q-tooltip>ปรับปรุง</q-tooltip>
											</template>
											<template v-slot:tip-2>
												<q-tooltip>พอใช้</q-tooltip>
											</template>
											<template v-slot:tip-3>
												<q-tooltip>ปานกลาง</q-tooltip>
											</template>
											<template v-slot:tip-4>
												<q-tooltip>ดี</q-tooltip>
											</template>
											<template v-slot:tip-5>
												<q-tooltip>ดีมาก</q-tooltip>
											</template>
										</q-rating>
									</q-item-section>
								</q-item>
								<q-separator class="q-my-xs" v-if="i + 1 < list2_3.length"  />
							</q-list>
						</q-card>
					</div>
					<div class="col-12 row">
						<div class="col-12 text-top0 row items-center q-pl-lg">
							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
							2.4 อื่นๆ 
							<q-checkbox class="q-ml-sm" dense v-model="etc_4" />
						</div>
						<q-card  v-if="etc_4" flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
							<q-list dense>
								<q-item dense tag="label" v-ripple>
									<q-item-section>
										<q-item-label>
											<q-input
												v-model="etc_text2"
												label="กรอกอื่นๆ"
												dense
												lazy-rules
												autogrow
												hide-bottom-space
												outlined
												class="bg-white"
												:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
											/>
										</q-item-label>
									</q-item-section>
									<q-item-section side >
										<q-rating
											v-model="modelEtc"
											max="5"
											size="sm"
											color="grey"
											:color-selected="ratingColors"
											label="ระดับการประเมินพฤติกรรม"
										>
											<template v-slot:tip-1>
												<q-tooltip>ปรับปรุง</q-tooltip>
											</template>
											<template v-slot:tip-2>
												<q-tooltip>พอใช้</q-tooltip>
											</template>
											<template v-slot:tip-3>
												<q-tooltip>ปานกลาง</q-tooltip>
											</template>
											<template v-slot:tip-4>
												<q-tooltip>ดี</q-tooltip>
											</template>
											<template v-slot:tip-5>
												<q-tooltip>ดีมาก</q-tooltip>
											</template>
										</q-rating>
									</q-item-section>
								</q-item>
							</q-list>
						</q-card>
					</div>
					<div class="col-12 row">
						<div class="col-12 text-top0 row items-center q-pl-lg">
							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
							จุดเด่น (ไม่เกิน 5 บรรทัด)
						</div>
						<q-input
							outlined
							dense
							v-model="text3_1"
							class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
							lazy-rules
							type="textarea"
							label="กรอกจุดเด่น"
							hide-bottom-space
							:row="5"
							:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
						/>
					</div>
					<div class="col-12 row">
						<div class="col-12 text-top0 row items-center q-pl-lg">
							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
							สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)
						</div>
						<q-input
							outlined
							dense
							v-model="text3_2"
							class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
							lazy-rules
							type="textarea"
							hide-bottom-space
							label="กรอกสิ่งที่ควรปรับปรุง"
							:row="5"
							:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
						/>
					</div>

					<div class="col-12">
						<q-separator size="3px" color="grey-2" />
					</div>

					<!-- 3 -->
					<div class="col-12 row justify-center">
						<div class="col-12 text-top0 items-center">
							<q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
							การพัฒนาผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
						</div>
						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1">
							<q-list dense>
								<q-item dense tag="label" v-ripple>
									<q-item-section>
										<q-item-label>1. การปฐมนิเทศ</q-item-label>
									</q-item-section>
									<q-item-section side >
										<div class="row">
											<q-radio
												checked-icon="task_alt"
												unchecked-icon="panorama_fish_eye"
												v-model="radio_1"
												val="1"
												label="ดำเนินการเเล้ว"
											/>
											<q-radio
												checked-icon="task_alt"
												unchecked-icon="panorama_fish_eye"
												v-model="radio_1"
												val="0"
												label=" ยังไม่ได้ดำเนินการ"
											/>
										</div>
									</q-item-section>
								</q-item>
								<q-separator class="q-my-xs"/>
								<q-item dense tag="label" v-ripple>
									<q-item-section>
										<q-item-label>2. การเรียนรู้ด้วยตนเอง</q-item-label>
									</q-item-section>
									<q-item-section side >
										<div class="row">
											<q-radio
												checked-icon="task_alt"
												unchecked-icon="panorama_fish_eye"
												v-model="radio_2"
												val="1"
												label="ดำเนินการเเล้ว"
											/>
											<q-radio
												checked-icon="task_alt"
												unchecked-icon="panorama_fish_eye"
												v-model="radio_2"
												val="0"
												label=" ยังไม่ได้ดำเนินการ"
											/>
										</div>
									</q-item-section>
								</q-item>
								<q-separator class="q-my-xs"/>
								<q-item dense tag="label" v-ripple>
									<q-item-section>
										<q-item-label>3. การอบรมสัมนาร่วมกัน</q-item-label>
									</q-item-section>
									<q-item-section side >
										<div class="row">
											<q-radio
												checked-icon="task_alt"
												unchecked-icon="panorama_fish_eye"
												v-model="radio_3"
												val="1"
												label="ดำเนินการเเล้ว"
											/>
											<q-radio
												checked-icon="task_alt"
												unchecked-icon="panorama_fish_eye"
												v-model="radio_3"
												val="0"
												label=" ยังไม่ได้ดำเนินการ"
											/>
										</div>
									</q-item-section>
								</q-item>
								<q-separator class="q-my-xs"/>
								<q-item dense tag="label" v-ripple>
									<q-item-section>
										<q-item-label>4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</q-item-label>
									</q-item-section>
									<q-item-section side >
										<div class="row">
											<q-radio
												checked-icon="task_alt"
												unchecked-icon="panorama_fish_eye"
												v-model="radio_4"
												val="1"
												label="ดำเนินการเเล้ว"
											/>
											<q-radio
												checked-icon="task_alt"
												unchecked-icon="panorama_fish_eye"
												v-model="radio_4"
												val="0"
												label=" ยังไม่ได้ดำเนินการ"
											/>
										</div>
									</q-item-section>
								</q-item>
							</q-list>
						</q-card>
					</div>

					<div class="col-12">
						<q-separator size="3px" color="grey-2" />
					</div>

					<div class="col-12 row">
						<div class="col-12 text-top2 row items-center">
							ผู้บังคับบัญชาผู้มอบหมายงาน
						</div>
						<div class="col-12 row q-col-gutter-md">
							<q-select 
								class="col-xs-12 col-sm-8" 
								dense 
								v-model="Autherise"
								outlined
          						:options="option"
								label="ผู้บังคับบัญชา" />
							<div class="col-xs-12 col-sm-4">
								<datepicker
									menu-class-name="modalfix"
									v-model="dateAutherise"
									: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
										outlined
										dense
										class="full-width datepicker col-3"
										:model-value="
										dateAutherise != null ? date2Thai(dateAutherise) : null
										"
										:label="`${'ลงวันที่'}`"
										:rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
									>
										<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 />
			<div 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 { ref } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useRoute } from "vue-router";
import { useQuasar } from "quasar";
import router from "@/router";

const $q = useQuasar();
const ratingColors = [ 'light-green-3', 'light-green-6', 'green', 'green-9', 'green-10' ];
const list1_1 = [
	{id: '1', label: 'ผลผลิตของงานที่คาดหวัง 1'},
	{id: '2', label: 'ผลผลิตของงานที่คาดหวัง 2'},
	{id: '3', label: 'ผลผลิตของงานที่คาดหวัง 3'},
	{id: '4', label: 'ผลผลิตของงานที่คาดหวัง 4'},
	{id: '5', label: 'ผลผลิตของงานที่คาดหวัง 5'}
];
const list1_2 = [
	{id: '1', label: 'ผลผลิตของงานที่เกิดขึ้น 1'},
	{id: '2', label: 'ผลผลิตของงานที่เกิดขึ้น 2'},
	{id: '3', label: 'ผลผลิตของงานที่เกิดขึ้น 3'},
	{id: '4', label: 'ผลผลิตของงานที่เกิดขึ้น 4'},
	{id: '5', label: 'ผลผลิตของงานที่เกิดขึ้น 5'}
];

const list2_1 = [
	{id: '1', label: 'ให้บริการประชาชนหรือผู้รับบริการด้วยอัธยาศัยดี'},
	{id: '2', label: 'มีความรับผิดชอบในการปฏิบัติบัติงาน'},
	{id: '3', label: 'ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว เอาใจใส่เป็นมาตรฐานเดียวกัน'},
	{id: '4', label: 'ตั้งใจปฏิบัติบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันหมั่นเพียร'},
];
const list2_2 = [
	{id: '1', label: 'อุทิศตนและเสียสละเวลาในการปฏิบัติบัติงานอย่างเต็มกำลังความสามารถ'},
	{id: '2', label: 'มีจิตสำนึกที่ดี ปฏิบัติบัติงานด้วยความซื่อสัตย์ สุจริต'},
	{id: '3', label: 'ยึดมั่นในสถาบันบัพระมหากษัตริย์ และไม่กระทำการใด ๆ อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ'},
];

const list2_3 = [
	{id: '1', label: 'มีความรับรัผิดชอบในการรักษาเวลาทำงาน'},
	{id: '2', label: 'แต่งกายในการปฏิบัติบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ'},
	{id: '3', label: 'ไม่กระทำการใด ๆ อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน'},
	{id: '4', label: 'ไม่กระทำการใด ๆ อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ'},
	{id: '5', label: 'ปฏิบัติบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ'}
];

const etc_text = ref<any>(null);
const etc_text2 = ref<any>(null);

const text3_1 = ref<any>(null);
const text3_2 = ref<any>(null);
const mixin = useCounterMixin();
const { date2Thai } = mixin;
const dateToday = ref<Date>(new Date("10-10-2023"));
const dateEnd = ref<Date>(new Date("12-10-2023"));
const period = ref<number>(1);

const Autherise = ref<any>(null);

const model = ref<any>(0);
const model1 = ref<any>(0);
const model1_2 = ref<any>(0);
const model1_3 = ref<any>(0);
const model1_4 = ref<any>(0);
const model1_5 = ref<any>(0);
const model1_6 = ref<any>(0);
const modelEtc = ref<any>(0);
const dateAutherise = ref<any>(new Date());
const etc = ref<any>(false);
const etc_4 = ref<any>(false);
const radio_1 = ref<any>(null);
const radio_2 = ref<any>(null);
const radio_3 = ref<any>(null);
const radio_4 = ref<any>(null);
const option = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
const text2_1 = ref<string>('');
const text2_2 = ref<string>('');

const onSubmit = () => {
  $q.notify({
    color: "green-4",
    textColor: "white",
    icon: "cloud_done",
    message: "ส่งแบบประเมินเเล้ว",
  });
};

const onReset = () => {
  router.push({ name: "probation" });
};
</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>