<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: "registration" },
  { name: "4", label: "ทะเบียนประวัติลูกจ้าง", path: "registemployee" },
  { name: "5", label: "ออกคำสั่ง", path: "order" },
  { name: "6", label: "สรรหา", path: "recruitmain" },
];
const tabManu2 = [
  { name: "7", label: "บรรจุ แต่งตั้ง ย้าย โอน", path: "placement" },
  { name: "8", label: "พ้นราชการ", path: "retirement" },
  { name: "9", label: "เครื่องราชอิสริยาภรณ์", path: "insignia" },
  { name: "10", label: "การลา", path: "" },
  { name: "11", label: "วินัย", path: "" },
];

const mainmenu = [
  {
    text: "ข้อมูลหลัก",
    img: new URL("../assets/icon/1_metadata.png", import.meta.url).href,
    icon: "mdi-account-outline",
    path: "metadata",
  },
  {
    text: "โครงสร้างอัตรากำลัง",
    img: new URL("../assets/icon/2_organizational.png", import.meta.url).href,
    icon: "mdi-account-group-outline",
    path: "organizational",
  },
  {
    text: "ทะเบียนประวัติ",
    img: new URL("../assets/icon/3_registry.png", import.meta.url).href,
    icon: "mdi-file-account-outline",
    path: "registration",
  },
  {
    text: "ทะเบียนประวัติลูกจ้าง",
    img: new URL("../assets/icon/4_registry-employee.png", import.meta.url)
      .href,
    icon: "mdi-file-account-outline",
    path: "registemployee",
  },
  {
    text: "ออกคำสั่ง",
    img: new URL("../assets/icon/5_order.png", import.meta.url).href,
    icon: "mdi-file-certificate-outline",
    path: "order",
  },
  {
    text: "สรรหา",
    img: new URL("../assets/icon/6_recruitmain.png", import.meta.url).href,
    icon: "mdi-magnify",
    path: "recruitmain",
  },
  {
    text: "บรรจุ แต่งตั้ง ย้าย โอน",
    img: new URL("../assets/icon/7_placement.png", import.meta.url).href,
    icon: "mdi-account-check",
    path: "placement",
  },
  {
    text: "พ้นราชการ",
    img: new URL("../assets/icon/8_retirement.png", import.meta.url).href,
    icon: "แ",
    path: "retirement",
  },
  {
    text: "เครื่องราชอิสริยาภรณ์",
    img: new URL("../assets/icon/9_insignia.png", import.meta.url).href,
    icon: "mdi-medal-outline",
    path: "insignia",
  },
];

const mainmenu1 = [
  {
    text: "การลา (User)",
    img: new URL("../assets/.png", import.meta.url).href,
    icon: "mdi-calendar",
    path: "leaveuser",
  },
  {
    text: "ระบบการลา (admin)",
    img: new URL("../assets/.png", import.meta.url).href,
    icon: "mdi-scale-balance",
    path: "leaveadmin",
  },
  {
    text: "ระบบประเมินบุคคล",
    img: new URL("../assets/.png", import.meta.url).href,
    icon: "mdi-scale-balance",
    path: "estimate",
  },
  {
    text: "ระบบดำเนินการทางวินัย",
    img: new URL("../assets/.png", import.meta.url).href,
    icon: "mdi-scale-balance",
    path: "discipline",
  },
];

const mainmanual = [
  /*{text: 'คู่มือการใช้งาน', icon:'mdi-account-outline', path: 'metadata'},*/
  {
    text: "คู่มือการใช้งาน",
    img: new URL("../assets/icon/00_manual.png", import.meta.url).href,
    icon: "mdi-book-open-page-variant",
  },
];

const mainmaintenance = [
  /*{text: 'คู่มือการใช้งาน', icon:'mdi-account-outline', path: 'metadata'},*/
  {
    text: "ดูแลรักษาระบบ",
    img: new URL("../assets/icon/01_maintenance.png", import.meta.url).href,
    icon: "mdi-laptop",
    path: "maintenance",
  },
];

const redirectToManual = () => {
  const newTab = window.open(
    `${window.location.protocol}//${window.location.hostname}/manual`,
    "_blank"
  );
  if (newTab) {
    newTab.focus();
  }
};

const clickMain = (val: string) => {
  router.push(val);
  currentRoute.value = val;
  tab.value = val;
  window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
};

const clickTab = (val2: string) => {
  router.push(val2);
  window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
  currentRoute.value = val2;
};

const goHome = () => {
  router.push("/");
  currentRoute.value = "home";
  window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
};

const click = () => {
  router.push("/contact");
  currentRoute.value = "contact";
  window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
};

const clickmainte = () => {
  router.push("/maintenance");
  currentRoute.value = "maintenance";
  window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
};

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

window.onpopstate = function () {
  currentRoute.value = "home";
};
history.pushState({}, "");
</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
              class="text-weight-medium"
              flat
              color="white"
              label="ติดต่อเรา"
              @click="click()"
            />
          </div>
        </div>
      </q-toolbar>
    </q-header>

    <div
      class="bg-top"
      :style="$q.screen.gt.xs ? 'height: 65px;' : 'height: 65px;'"
    />
    <!-- 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: -150px;'
            : '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: 100px"
            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="40px" :name="`${menu.icon}`"/> -->
                    <q-avatar rounded size="60px">
                      <q-img :src="menu.img" />
                    </q-avatar>
                    <div class="col-12 q-pt-md text-center">
                      {{ 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="icon_1 col-xs-12 col-sm-4"
                  v-for="(menu, index) in mainmenu"
                  :key="index"
                >
                  <q-card
                    class="connn 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="40px" :name="`${menu.icon}`"/> -->
                    <q-avatar rounded size="60px">
                      <q-img :src="menu.img" />
                    </q-avatar>
                    <div class="col-12 q-pt-md text-center">
                      {{ 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 mainmaintenance"
                  :key="index"
                >
                  <q-card
                    class="q-pa-md row justify-center text-dark cursor-pointer cardmenu"
                    @click="clickmainte(menu.path)"
                    ><!-- router.push({ name: `${}`}) -->
                    <!--<q-icon class="col-12 items-center" size="40px" :name="`${menu.icon}`"/> -->
                    <q-avatar rounded size="60px">
                      <q-img :src="menu.img" />
                    </q-avatar>
                    <div class="col-12 q-pt-md text-center">
                      {{ 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-grey-5">
              อยู่ในระหว่างพัฒนาระบบ
            </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="icon_1 col-xs-12 col-sm-4"
                  v-for="(menu, index) in mainmenu1"
                  :key="index"
                >
                  <q-card
                    class="connn q-pa-md row justify-center text-grey-5 cursor-pointer cardmenu"
                    @click="clickMain(menu.path)"
                    ><!-- router.push({ name: `${}`}) -->
                    <!-- <q-icon class="col-12 items-center" size="40px" :name="`${menu.icon}`"/> -->
                    <q-avatar rounded size="60px">
                      <q-img :src="menu.img" />
                    </q-avatar>
                    <div class="col-12 q-pt-md text-center">
                      {{ menu.text }}
                    </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' &&
                        currentRoute != 'maintenance'
                      "
                    >
                      <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 ตามที่คุณต้องการ */
  box-shadow: 3px 3px 10px 1px rgba(4, 4, 4, 0.075) !important;
  background-color: #f0f2f5;
}

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

.bgHeader {
  background: #1e2234e5;
}

.icon_1 {
  color: #02a998;
}
</style>
