<script setup lang="ts">
import { ref} from "vue";
import { useRouter } from "vue-router";
import { useQuasar } from "quasar";

const router = useRouter();

const $q = useQuasar();

const tab = ref('')

const currentRouteName = router.currentRoute.value.name;
const currentRoute = ref(currentRouteName);
const text = ref('');
const tabManu = [
	{name: 'metadata',label:'ข้อมูลหลัก',path: 'metadata'},
	{name: 'organizational',label:'โครงสร้างอัตรากำลัง',path: 'organizational'},
	{name: '3',label:'ทะเบียนประวัติ',path: ''},
	{name: '4',label:'ทะเบียนประวัติลูกจ้าง',path: ''},
	{name: '5',label:'ออกคำสั่ง',path: ''},
	{name: '6',label:'สรรหา',path: ''},
];
const tabManu2 = [
	{name: '7',label:'บรรจุ แต่งตั้ง ย้าย โอน',path: ''},
	{name: '8',label:'พ้นราชการ',path: ''},
	{name: '9',label:'เครื่องราชฯ',path: ''},
	{name: '10',label:'การลา',path: ''},
	{name: '11',label:'วินัย',path: ''},
	{name: '12',label:'Maintenance',path: 'maintenance'},
];

const mainmenu = [
	{text: 'ข้อมูลหลัก', icon:'mdi-account-outline', path: 'metadata'},
	{text: 'โครงสร้างอัตรากำลัง', icon:'mdi-account-group-outline',path: 'organizational'},
	{text: 'ทะเบียนประวัติ', icon:'mdi-file-account-outline',path: 'organizational'},
	{text: 'ทะเบียนประวัติลูกจ้าง', icon:'mdi-file-account-outline',path: 'organizational'},
	{text: 'ออกคำสั่ง', icon:'mdi-file-certificate-outline',path: 'organizational'},
	{text: 'สรรหา', icon:'mdi-magnify',path: 'organizational'},
	{text: 'บรรจุ แต่งตั้ง ย้าย โอน', icon:'mdi-account-check',path: 'organizational'},
	{text: 'พ้นราชการ', icon:'mdi-account-cancel-outline',path: 'organizational'},
	{text: 'เครื่องราชฯ', icon:'mdi-medal-outline',path: 'organizational'},
	{text: 'การลา', icon:'mdi-calendar',path: 'organizational'},
	{text: 'วินัย', icon:'mdi-scale-balance',path: 'organizational'}
];


const mainmanual = [
	{text: 'คู่มือการใช้งาน', icon:'mdi-account-outline', path: 'metadata'}
];

const redirectToManual = () => {
  const newTab = window.open('https://bma-ehr-manual.frappet.synology.me/', '_blank');
  if (newTab) {
    newTab.focus();
  }
};

const clickMain = (val: string) => {
	router.push(val)
	currentRoute.value = val
	tab.value=val
};

const clickTab= (val2: string,el: any ) => {
	router.push(val2)
	window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
};

const goHome = () => {
	router.push('/')
	currentRoute.value = 'home'
};

const click = () => {
	router.push('/contact')
	currentRoute.value = 'contact'
};

const clickmainte = () => {
	router.push('/maintenance')
	currentRoute.value = 'maintenance'
};

const scrollInfo = ref({})
const onScroll = (info: any) => { scrollInfo.value = info}

</script>
<!-- โครงเว็บ -->
<template>
	<q-layout view="hHh LpR fFr" @scroll="onScroll" >
		
		<!-- header -->
		<q-header flat :class="scrollInfo.position >= 10 ? 'text-dark col-12 bgHeader': 'text-dark col-12 bg-transparent'" height-hint="7">
			<q-toolbar class="items-center" :style="$q.screen.gt.xs ? 'padding: 1% 2%;': 'padding: 1% 4%;'">
				<div class="row items-center no-wrap cursor-pointer" @click="goHome" v-if="$q.screen.gt.xs">
					<q-img src="@/assets/logo.png" spinner-color="white" style="height: 35px; max-width: 35px"/>
					<q-separator vertical inset class="q-ml-md" />
					<div class="row q-ml-md items-center q-pt-xs">
						<div 
							style="color: #ffffff; letter-spacing: 1px; line-height:10px;"
							class="text-body2 text-weight-bolder col-12"
							
						>
							ระบบ<span class="text-primary">ทรัพยากรบุคคล</span>
						</div>

						<div class="text-caption text-white">SUPPORT</div>

					</div>
					
				</div>
				
				<div v-else class="row items-center">
					<img src="@/assets/logo.png" style="height: 35px; max-width: 35px" />
				</div>
				<q-space></q-space>
				<div class="row q-col-gutter-x-sm">
					<div><q-btn class="text-weight-medium" flat color="white" label="หน้าแรก" @click="goHome"/></div>
					<div><q-btn color="secondary" text-color="white" label="ติดต่อเรา" @click="click()"/></div>
				</div>
			</q-toolbar>
		</q-header>

		<div class="bg-top"  :style="$q.screen.gt.xs ? 'height: 240px;': 'height: 240px;'" />
		<!-- end header -->

		<q-page-container class="bg-grey-2 q-pb-md">
			<q-page :style="$q.screen.gt.xs ? 'padding: 1.8% 2%; margin-top: -250px;': 'padding: 5% 4%; margin-top: -250px;'">
				<div class="col-12 row justify-center">
					<div class="col-xs-10 col-md-8 text-h6 text-white">
						<div class="q-pb-md">เราจะช่วยคุณได้อย่างไร</div>
						<q-input outlined bg-color="white" label="ค้นหา" v-model="text" dense>
							<template v-slot:prepend>
								<q-icon name="search" />
							</template>
						</q-input>
					</div>

					<div class="col-xs-10 col-md-8 row q-col-gutter-md" style=" margin-top: 80px;" v-if="currentRoute == 'home'">
						<div class="col-12 row justify-center text-h6 text-dark">ระบบทรัพยากรบุคคล</div>
						<div class="col-12"><q-separator color="grey-4" /></div>
						<div class="col-12">
							<div class="col-12 row q-col-gutter-lg">

							<div class="col-xs-12 col-sm-4" 
								v-for="(menu , index) in mainmenu"
								:key="index"
							>
								<q-card class="q-pa-md row justify-center text-dark cursor-pointer cardmenu" @click="clickMain(menu.path)" ><!-- router.push({ name: `${}`}) -->
									<q-icon class="col-12 items-center" size="25px" :name="`${menu.icon}`"/>
									<div class="q-pt-md">{{ menu.text }} </div>
								</q-card>
							</div>	
							</div>
						</div>
					</div>



					<div class="col-xs-10 col-md-8 row q-col-gutter-md" style=" margin-top: 80px;" v-if="currentRoute == 'home'">
						<div class="col-12 row justify-center text-h6 text-dark">คู่มือการใช้งาน</div>
						<div class="col-12"><q-separator color="grey-4" /></div>
						<div class="col-12">
							<div class="col-12 row q-col-gutter-lg">

							<div class="col-xs-12 col-sm-12" 
								v-for="(menu , index) in mainmanual"
								:key="index"
							>
							
								<q-card class="q-pa-md row justify-center text-dark cursor-pointer cardmenu" @click="redirectToManual" ><!-- router.push({ name: `${}`}) -->
									<q-icon class="col-12 items-center" size="25px" :name="`${menu.icon}`"/>
									<div class="q-pt-md">คู่มือการใช้งาน</div>
								</q-card>
							</div>	
							</div>
						</div>
					</div>





					<div class="col-xs-10 col-md-8 row q-col-gutter-md" style=" margin-top: 80px;" v-if="currentRoute == 'home'">
						<div class="col-12 row justify-center text-h6 text-dark">Maintenant</div>
						<div class="col-12"><q-separator color="grey-4" /></div>
						<div class="col-12">
							<div class="col-12 row q-col-gutter-lg">

							<div class="col-xs-12 col-sm-12" 
								v-for="(menu , index) in mainmanual"
								:key="index"
							>
							
								<q-card class="q-pa-md row justify-center text-dark cursor-pointer cardmenu" @click="clickMain(menu.path)" ><!-- router.push({ name: `${}`}) -->
									<q-icon class="col-12 items-center" size="25px" :name="`${menu.icon}`"/>
									<div class="q-pt-md">Maintenance</div>
								</q-card>
							</div>	
							</div>
						</div>
					</div>




					
					<div class="col-8 row" style=" margin-top: 80px;" v-else>
						<q-layout>
							<q-page-container class="col-12 ">
								<q-page>
									<div class="col-12 row ">
										<div class="col-12 q-mt-lg" >
											<router-view :key="$route.fullPath" />
										</div>

										<div class="col-12 row justify-center q-mt-lg" style="margin-top: 50px;" v-if="currentRoute != 'contact'">
											<q-tabs
												v-model="tab" 
												class="text-grey-8" dense 
												align="center" 
												no-caps 
												active-color="primary" 
												indicator-color="transparent" 
												 >
												<q-tab 
													v-for="(tab,index) in tabManu"
													:key="index"
													:name="tab.name" 
													:label="tab.label" 
													@click="clickTab(tab.path)" />
											</q-tabs>
											<q-tabs class="text-grey-8" dense align="center" no-caps active-color="primary" indicator-color="transparent" v-model="tab">
												<q-tab 
													v-for="(tab,index) in tabManu2"
													:key="index"
													:name="tab.name" 
													:label="tab.label" 
													@click="clickTab(tab.path)" />
											</q-tabs>
										</div>
									</div>

								</q-page>
							</q-page-container>


							
						</q-layout>
					</div>
				</div>
			</q-page>
			<!-- place QPageScroller at end of page -->
			<q-page-scroller position="bottom-right" :scroll-offset="150" :offset="[18, 50]">
				<q-btn fab icon="keyboard_arrow_up" color="blue" />
			</q-page-scroller>
		</q-page-container>
	</q-layout>
</template>

<style>
.bg-drawer{
  background: #242a3d;
}
.menu {
  padding-bottom: 5px;
  padding-top: 5px;
}
.tabsHome .q-tab__icon{
	font-size: 18px;
}
.border-100{
	border-radius: 100px;
}
.bg-header{
 	background:rgba(39, 50, 56, 0)8 !important;
}

.bg-top{
	/* background: #273238; */
	background-image: url("@/assets/1.png");
	background-size: cover;
}
.header-br{
	border-bottom: 1px solid #fdfdfd31;
}
.menuActive {
  background: #1e2234;
  border-radius: 0 100px 100px 0;
  margin-right: 4%;
}
.q-card {
  box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261) !important;
	border: 1px solid #eeeded;
}
.q-menu {
  box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
}
.toptitle {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 1.2%;
}
.q-field--outlined .q-field__control{
	border-radius: 5px;
}
.q-field--outlined .q-field__control:before {
  border-color: #C8D3DB;
}
.q-field--outlined .q-icon{
	color: #7474747f;
}

.cardmenu:hover{
   border-color: #02A998;
   color: #02A998 !important;
   box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
}

.cardmenu{
	padding: 35px; /* ปรับขนาด padding ตามที่คุณต้องการ */

}

.content-heigt{
	height: 60vh !important;
	overflow-y:auto;
}

.bgHeader{
	background: #1e2234e5;
}

</style>
