<template>
	<div class="col-12 row justify-center">
		<div class="col-xs-12 col-sm-12 col-md-11">
			<div class="toptitle text-white 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 == 'addTransfer'">เพิ่มเรื่องขอโอน</div>
				<div v-else>รายละเอียดเรื่องขอโอน</div>
			</div>
			<div class="col-12">
				<q-card bordered>
					<div class="col-12 row q-col-gutter-md q-pa-md">
						<div class="col-xs-12 col-sm-8 row">
							<q-card bordered flat>
								<div class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold">ข้อมูลบุคคล</div>
								<q-separator />
								<div class="col-12 row q-pa-sm q-col-gutter-sm">
									<q-input class="col-12" dense outlined v-model="prefix" label="คำนำหน้านาม" :readonly="routeName != 'addTransfer'" />
									<q-input class="col-12" dense outlined v-model="name" label="ชื่อ - นามสกุล" :readonly="routeName != 'addTransfer'" />
									<q-input class="col-xs-12 col-sm-6" dense outlined v-model="brithdate" label="วัน เดือน ปีเกิด" :readonly="routeName != 'addTransfer'" />
									<q-input class="col-xs-12 col-sm-6" dense outlined v-model="address" label="ภูมิลําเนา (จังหวัดจากข้อมูลทะเบียนบ้าน)" :readonly="routeName != 'addTransfer'" />
									<q-input class="col-xs-12 col-sm-6" dense outlined v-model="homeAddress" label="ที่อยู่ที่ติดต่อได้" :readonly="routeName != 'addTransfer'" />
									<q-input class="col-xs-12 col-sm-6" dense outlined v-model="phone" label="หมายเลขโทรศัพท์ที่ติดต่อได้" :readonly="routeName != 'addTransfer'" />
								</div>
							</q-card>
						</div>
						<div class="col-xs-12 col-sm-4 row">
							<q-card bordered flat>
								<div class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold">ข้อมูลการศึกษา</div>
								<q-separator />
								<div class="col-12 row q-pa-sm q-col-gutter-sm">
									<q-input class="col-12" dense outlined v-model="edu" label="คุณวุฒิทางการศึกษา" :readonly="routeName != 'addTransfer'" />
									<q-input class="col-12" dense outlined v-model="highEdu" label="คุณวุฒิทางการศึกษาสูงสุด" :readonly="routeName != 'addTransfer'" />
									<q-input class="col-12" dense outlined v-model="eduEtc" label="คุณวุฒิทางการศึกษาอื่นๆหรือประกาศนียบัตรอื่นๆ" :readonly="routeName != 'addTransfer'" />
								</div>
							</q-card>
						</div>
					</div>
					<div class="col-12 row q-col-gutter-md q-pa-md">
						<div class="col-xs-12 col-sm-8 row">
							<q-card bordered flat>
								<div class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold">ข้อมูลการดํารงตําแหน่ง</div>
								<q-separator />
								<div class="col-12 row q-pa-sm q-col-gutter-sm">
									<q-input class="col-12" dense outlined v-model="typeServant" label="ประเภทข้าราชการ(สามัญ/ครู)" :readonly="routeName != 'addTransfer'" />
									<q-input class="col-12 col-sm-6" dense outlined v-model="position" label="ตําแหน่ง" :readonly="routeName != 'addTransfer'" />
									<q-input class="col-12 col-sm-6" dense outlined v-model="level" label="ระดับ" :readonly="routeName != 'addTransfer'" />
									<q-input class="col-12 col-sm-6" dense outlined v-model="positionNum" label="ตําแหน่งเลขที่" :readonly="routeName != 'addTransfer'" />
									<q-input class="col-12 col-sm-6" dense outlined v-model="groupOrga" label="ฝ่าย/กลุ่มงานที่สังกัด" :readonly="routeName != 'addTransfer'" />
									<q-input class="col-12 col-sm-6" dense outlined v-model="affiliation" label="ส่วนที่สังกัด (ถ้ามี)" :readonly="routeName != 'addTransfer'" />
									<q-input class="col-12 col-sm-6" dense outlined v-model="groupOrga" label="ส่วนราชการที่สังกัด" :readonly="routeName != 'addTransfer'" />
									<q-input class="col-12 col-sm-6" dense outlined v-model="groupOrga" label="หน่วยงานที่สังกัด" :readonly="routeName != 'addTransfer'" />
									<q-input class="col-12 col-sm-6" dense outlined v-model="groupOrga" label="อายุราชการ" :readonly="routeName != 'addTransfer'" />
									<q-input class="col-12 col-sm-6" dense outlined v-model="affiliation" label="อัตราเงินเดือน" :readonly="routeName != 'addTransfer'" />
									<q-input class="col-12 col-sm-6" dense outlined v-model="groupOrga" label="เงินเพิ่มพิเศษ" :readonly="routeName != 'addTransfer'" />
									<q-input
										class="col-12"
										dense
										outlined
										v-model="groupOrga"
										label="ประวัติการดํารงตําแหน่ง (ดึงข้อมูลจากระบบทะเบียนประวัติในส่วนของการแต่งตั้งย้ายเลื่อน)"
										:readonly="routeName != 'addTransfer'"
									/>
									<q-input class="col-12" dense outlined v-model="transfer" label=" ประวัติเกี่ยวกับวินัย" type="textarea" :readonly="routeName != 'addTransfer'" />
								</div>
								<div class="col-xs-6 col-sm-6 row">
									<q-card bordered flat>
										<div class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold">ตําแหน่ง ระดับ เลขที่ตําแหน่ง และสังกัดที่ขอโอน</div>
										<q-separator />
										<div class="col-12 row q-pa-sm q-col-gutter-sm">
											<q-input class="col-xs-12 col-sm-6" dense outlined v-model="positionNew" label="ตำแหน่ง" :readonly="routeName != 'addTransfer'" />
											<q-input class="col-xs-12 col-sm-6" dense outlined v-model="salaryNew" label="ระดับ" :readonly="routeName != 'addTransfer'" />
											<q-input class="col-12 col-sm-6" dense outlined v-model="transfer" label="เลขที่ตําแหน่ง" :readonly="routeName != 'addTransfer'" />
											<q-input class="col-12 col-sm-6" dense outlined v-model="note" label="สังกัดที่ขอโอน" :readonly="routeName != 'addTransfer'" />
											<q-input class="col-12" dense outlined v-model="note" label="เหตุผลที่ขอโอน" type="textarea" :readonly="routeName != 'addTransfer'" />
										</div>
									</q-card>
								</div>
							</q-card>
						</div>
						<div class="col-xs-12 col-sm-4 row">
							<q-card bordered flat>
								<div class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold">เอกสารหลักฐานที่แนบ</div>
								<q-separator />
								<div class="col-12 row q-pa-sm q-col-gutter-sm">
									<q-file
										class="col-xs-12 col-sm-12"
										outlined
										dense
										v-model="fileEdu"
										label="สําเนาหลักฐานการศึกษา (ปริญญาบัตรประกาศนียบัตร)"
										hide-bottom-space
										lazy-rules
										:rules="[val => val || 'กรุณาเลือกไฟล์สําเนาหลักฐานการศึกษา (ปริญญาบัตรประกาศนียบัตร)']"
									>
										<template v-slot:prepend>
											<q-icon name="attach_file" />
										</template>
									</q-file>
									<q-file
										class="col-xs-12 col-sm-12"
										outlined
										dense
										v-model="fileKorkor1"
										label="สําเนาประวัติราชการ (ก.ก.1)"
										hide-bottom-space
										lazy-rules
										:rules="[val => val || 'กรุณาเลือกไฟล์สําเนาประวัติราชการ (ก.ก.1)']"
									>
										<template v-slot:prepend>
											<q-icon name="attach_file" />
										</template>
									</q-file>
									<q-file class="col-xs-12 col-sm-12" outlined dense v-model="fileEtc" label="สําเนาเอกสารหลักฐานอื่นๆ" hide-bottom-space lazy-rules>
										<template v-slot:prepend>
											<q-icon name="attach_file" />
										</template>
									</q-file>
								</div>
							</q-card>
							<div class="col-xs-12 col-sm-12 row">
								<q-card bordered flat>
									<div class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold">ความเห็น</div>
									<q-separator />
									<div class="col-12 row q-pa-sm q-col-gutter-sm">
										<q-input
											class="col-12 col-sm-12"
											dense
											outlined
											v-model="note"
											label="ความเห็นผู้บังคับบัญชาชั้นต้น (หัวหน้าฝ่าย/กลุ่มงาน)"
											type="textarea"
											:readonly="routeName != 'addTransfer'"
										/>
										<q-input
											class="col-12 col-sm-12"
											dense
											outlined
											v-model="note"
											label="ความเห็นผู้บังคับบัญชาเหนือขึ้นไป (ผู้อํานวยการส่วน) (ถ้ามี)"
											type="textarea"
											:readonly="routeName != 'addTransfer'"
										/>
										<q-input
											class="col-12 col-sm-12"
											dense
											outlined
											v-model="note"
											label="ความเห็นหัวหน้าส่วนราชการผู้ขอโอน (ผอ. กอง)"
											type="textarea"
											:readonly="routeName != 'addTransfer'"
										/>
									</div>
								</q-card>
							</div>
						</div>
					</div>
					<q-separator />
					<div class="col-xs-12 col-sm-12 row">
						<q-card bordered flat>
							<div class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold">เอกสารหลักฐาน</div>
							<q-separator />
							<div class="col-12 row q-pa-sm q-col-gutter-sm">
								<q-file
									class="col-xs-12 col-sm-12"
									outlined
									dense
									v-model="fileEdu"
									label="หนังสือถึงหน่วยงานที่รับโอน"
									hide-bottom-space
									lazy-rules
									:rules="[val => val || 'กรุณาเลือกไฟล์หนังสือถึงหน่วยงานที่รับโอน']"
								>
									<template v-slot:prepend>
										<q-icon name="attach_file" />
									</template>
								</q-file>
								<q-file
									class="col-xs-12 col-sm-12"
									outlined
									dense
									v-model="fileKorkor1"
									label="หนังสือถึงสกจ. เพื่อตรวจสอบพฤติการณ์ทางวินัยและภาระหนี้สิน (เงินกู้สวัสดิการข้าราชการ) ของข้าราชการ"
									hide-bottom-space
									lazy-rules
									:rules="[val => val || 'กรุณาเลือกไฟล์หนังสือถึงสกจ. เพื่อตรวจสอบพฤติการณ์ทางวินัยและภาระหนี้สิน (เงินกู้สวัสดิการข้าราชการ) ของข้าราชการ']"
								>
									<template v-slot:prepend>
										<q-icon name="attach_file" />
									</template>
								</q-file>
								<q-file
									class="col-xs-12 col-sm-12"
									outlined
									dense
									v-model="fileEtc"
									label="หนังสือถึงสพท. เพื่อตรวจสอบภาระผูกพันกับกรุงเทพมหานครเกี่ยวกับการลาศึกษาอบรมของข้าราชการ"
									hide-bottom-space
									lazy-rules
								>
									<template v-slot:prepend>
										<q-icon name="attach_file" />
									</template>
								</q-file>
								<q-file
									class="col-xs-12 col-sm-12"
									outlined
									dense
									v-model="fileEtc"
									label="หนังสือถึงผู้จัดการสหกรณ์ออมทรัพย์กทม. เพื่อตรวจสอบหนี้สินและภาระผูกพันของข้าราชการ"
									hide-bottom-space
									lazy-rules
								>
									<template v-slot:prepend>
										<q-icon name="attach_file" />
									</template>
								</q-file>
								<q-file
									class="col-xs-12 col-sm-12"
									outlined
									dense
									v-model="fileEtc"
									label="หนังสือสําคัญการโอนอัตราและจ่ายเงินเดือนสําหรับรับรองการจ่ายเงินเดือนครั้งสุดท้ายและโอนอัตราเงินเดือนตามตัวไปตั้งจ่าย"
									hide-bottom-space
									lazy-rules
								>
									<template v-slot:prepend>
										<q-icon name="attach_file" />
									</template>
								</q-file>
								<q-file
									class="col-xs-12 col-sm-12"
									outlined
									dense
									v-model="fileEtc"
									label="แบบประเมินประสิทธิภาพและประสิทธิผลการปฏิบัติงานของข้าราชการพลเรือนสามัญ"
									hide-bottom-space
									lazy-rules
								>
									<template v-slot:prepend>
										<q-icon name="attach_file" />
									</template>
								</q-file>
								<q-file class="col-xs-12 col-sm-12" outlined dense v-model="fileEtc" label="หนังสือรับรองวันลา" hide-bottom-space lazy-rules>
									<template v-slot:prepend>
										<q-icon name="attach_file" />
									</template>
								</q-file>
								<q-file class="col-xs-12 col-sm-12" outlined dense v-model="fileEtc" label="หนังสือขอโอนจากกทม. ถึงหน่วยงานที่ประสงค์จะโอน" hide-bottom-space lazy-rules>
									<template v-slot:prepend>
										<q-icon name="attach_file" />
									</template>
								</q-file>
								<q-file class="col-xs-12 col-sm-12" outlined dense v-model="fileEtc" label="หนังสือตอบรับการโอนจากหน่วยงานที่ประสงค์จะโอน" hide-bottom-space lazy-rules>
									<template v-slot:prepend>
										<q-icon name="attach_file" />
									</template>
								</q-file>
								<q-file class="col-xs-12 col-sm-12" outlined dense v-model="fileEtc" label="คําสั่งรับโอนจากหน่วยงานที่ประสงค์จะโอน" hide-bottom-space lazy-rules>
									<template v-slot:prepend>
										<q-icon name="attach_file" />
									</template>
								</q-file>
							</div>
						</q-card>
					</div>
					<q-separator />
					<div class="row col-12 q-pa-sm" v-if="routeName == 'addTransfer'">
						<q-space />
						<q-btn unelevated dense class="q-px-md items-center" color="primary" label="ยื่นเรื่องขอโอน" @click="router.go(-1)" />
					</div>
				</q-card>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import type { QTableProps } from "quasar"
import { ref } from "vue"
import { useQuasar } from "quasar"
import { useRouter } from "vue-router"

const router = useRouter()
const $q = useQuasar()

const edu = ref("")
const academy = ref("")
const position = ref("")
const noPos = ref("")
const level = ref("")
const salary = ref("")
const positionNew = ref("")
const salaryNew = ref("")
const transfer = ref("")
const note = ref("")

const routeName = router.currentRoute.value.name
</script>
