<script setup lang="ts">
import { ref, Static } from "vue"
const link = ref<number>(1)
import { useQuasar } from "quasar"
import router from "@/router"

const $q = useQuasar()
const fullname = ref<string>("ธัญลักษณ์")
const inboxList = ref<any>([
	{
		no: 1,
		sender: "เจ้าหน้าที่ทะเบียนประวัติ",
		subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
		timereceive: "13/12/2565",
		body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
		ratingModel: 0,
	},
	{
		no: 2,
		sender: "เจ้าหน้าที่ทะเบียนประวัติ",
		subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
		timereceive: "13/12/2565",
		body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
		ratingModel: 1,
	},
	{
		no: 3,
		sender: "เจ้าหน้าที่ทะเบียนประวัติ",
		subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
		timereceive: "13/12/2565",
		body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
		ratingModel: 0,
	},
])
const items = ref<any>([
	{
		icon: "mdi-account-group-outline",
		title: "แผนผังองค์กร",
		sub: "ดูแผนผังองค์กร",
		color: "blue-3",
		path: "",
		active: false,
	},
	{
		icon: "mdi-clipboard-account-outline",
		title: "ประเมินผล",
		sub: "ข้อมูลการประเมินผลการปฏิบัติราชการ",
		color: "lime-4",
		path: "",
		active: false,
	},
	{
		icon: "mdi-calendar-account-outline",
		title: "การลา",
		sub: "ดู/ลงเวลา ทำเรื่องลา",
		color: "cyan-3",
		path: "",
		active: false,
	},
	{
		icon: "mdi-folder-account-outline",
		title: "ผลงาน",
		sub: "ดูผลงาน",
		color: "light-green-3",
		path: "",
		active: false,
	},
	{
		icon: "mdi-account-arrow-right-outline",
		title: "ขอโอน",
		sub: "ทำเรื่องขอโอนย้าย",
		color: "deep-purple-3",
		path: "/transfer",
		active: false,
	},
	{
		icon: "mdi-account-remove-outline",
		title: "ลาออก",
		sub: "ทำเรื่องลาออก",
		color: "orange-3",
		path: "/leave",
		active: false,
	},
])

const transferToPage = (path?: string) => {
	router.push(`${path}`)
}
</script>
<template>
	<div class="col-12 row q-col-gutter-md" style="padding-top: 1.8%">
		<div class="col-12 row" v-if="!$q.screen.gt.xs">
			<div class="text-white text-weight-light text-18px">สวัสดี, {{ fullname }}</div>
			<div style="color: #ffffff" class="text-18px text-weight-medium col-12">ระบบทรัพยากรบุคคล</div>
		</div>
		<div class="col-xs-12 col-sm-12 col-md-9">
			<div class="row justify-start q-col-gutter-md">
				<div class="col-xs-6 col-sm-4 col-md-4 col-lg-3 col-xl-2 row" v-for="(item, j) in items" :key="j">
					<q-card bordered @click="transferToPage(item.path)" class="noactive col-12">
						<div class="col-12">
							<q-avatar :color="item.color" text-color="white" :size="$q.screen.gt.xs ? '55px' : '40px'">
								<q-icon :name="item.icon" :size="$q.screen.gt.xs ? '28px' : '20px'" color="black" />
							</q-avatar>
						</div>
						<div class="q-pt-md col-12 text-left text-18px">{{ item.title }}</div>
						<div class="col-12 text-left text-grey text-weight-regular gt-xs" style="font-size: 14px">{{ item.sub }}</div>
					</q-card>
				</div>
			</div>
		</div>
		<div class="col-xs-12 col-sm-12 col-md-3 row">
			<q-card flat bordered :style="$q.screen.gt.xs ? 'max-height: 80vh' : 'height: auto;'" class="q-pb-md col-12">
				<div class="col-12 row q-pa-md">
					<div class="text-subtitle1 text-weight-bold text-dark">กล่องข้อความ</div>
					<q-space />
					<q-btn dense icon="mdi-dots-vertical" color="grey-6" size="11px" flat />
				</div>
				<q-list v-for="(contact, index) in inboxList" :key="index" class="q-px-md">
					<q-item clickable v-ripple class="q-py-md q-mb-sm my-menu" :active="link === contact.no" @click="link = contact.no" active-class="my-menu-link">
						<q-item-section>
							<q-item-label>{{ contact.sender }}</q-item-label>
							<q-item-label caption class="text-grey-6" lines="2">{{ contact.subject }}</q-item-label>
						</q-item-section>

						<q-item-section side top>
							<q-item-label caption>{{ contact.timereceive }}</q-item-label>
						</q-item-section>
					</q-item>
				</q-list>
				<q-banner rounded class="bg-amber-1 text-center q-mx-sm" v-if="inboxList.length < 1">
					<div class="text-yellow-10">
						<q-icon name="mdi-alert-box" class="q-mx-xs" size="sm" color="yellow-10" />
						ไม่พบข้อความ
					</div>
				</q-banner>
			</q-card>
		</div>
	</div>
</template>
<style>
.my-menu-link {
	color: #1bb19b;
	background: #ebf9f7 !important;
	font-weight: 600;
	border-radius: 10px;
}
.my-menu-link .q-hoverable {
	border-radius: 10px;
}
.my-menu {
	background: #f1f0f04a;
	border-radius: 10px;
}
.q-card {
	border-radius: 12px;
}
.text-18px {
	font-size: 1.25em;
}
.noactive {
	color: #35473c;
	border-radius: 12px;
	padding: 10%;
	transition: 0.1s ease;
	opacity: 1;
	cursor: pointer;
}
.noactive:hover {
	background: #ebf9f7;
	color: #1bb19b !important;
	font-weight: 600;
	border: 1px solid #6dbdb142;
}
.disabledcard {
	color: rgba(209, 209, 209, 0.733) !important;
	border-color: rgba(207, 207, 207, 0.322) !important;
	box-shadow: none !important;
	border-radius: 12px;
	cursor: no-drop !important;
	padding: 10%;
}
</style>
