<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch, onBeforeMount } from "vue";
import { storeToRefs } from "pinia";
import { useQuasar } from "quasar";
import { usekeycloakPosition } from "@/stores/keycloakPosition";

import { useRoute } from "vue-router";
import config from "@/app.config";
import http from "@/plugins/http";
import {
  logout,
  tokenParsed,
  getCookie,
  redirectToLandingPage,
  logoutSSO,
} from "@/plugins/auth";
import checkPermission from "@/plugins/checkPermission";
import { useCounterMixin } from "@/stores/mixin";
import { useDataStore } from "@/stores/data";
import avatar from "@/assets/avatar_user.jpg";

import type {
  ScrollType,
  notiType,
  optionType,
} from "../interface/request/main/main";
import { menuList } from "../interface/request/main/main";

// landing page config url
const configParam = {
  landingPageUrl: import.meta.env.VITE_URL_LANDING,
};

const $q = useQuasar();
const store = useDataStore();
const keycloakPositionStore = usekeycloakPosition();
const route = useRoute();
const { loader } = storeToRefs(store);
const { changeTab } = store;
const {
  showLoader,
  hideLoader,
  dialogRemove,
  success,
  messageError,
  date2Thai,
  dialogConfirm,
} = useCounterMixin();

const fullname = ref<string>(""); // ชื่อผู้ใช้งาน
const link = ref<string>("");
const miniState = ref<boolean>(false); // ย่อเมนูหลัก
const drawerR = ref<boolean>(false); //ปุ่มย่อขวา
const rightActive = ref<boolean>(false); // แสดงแถบด้านขวา
const resize = ref<number>(0);
const active = ref<number>(0);
const drawerL = ref<boolean>(false);
const role = ref<string[]>([]);
const reles = ref<any[]>([]);
const notiTrigger = ref<boolean>(false);

const notiList = ref<notiType[]>([]);
const options = ref<optionType[]>([
  {
    icon: "mdi-account-cog",
    label: "ผู้ดูแลระบบ",
    value: "op1",
    color: "primary",
  },
  {
    icon: "mdi-account-group",
    label: "เจ้าหน้าที่",
    value: "op2",
    color: "blue",
  },
  {
    icon: "mdi-account-circle",
    label: "บุคคล",
    value: "op3",
    color: "indigo",
  },
]);

/**
 * fetch จำนวนของกาแจ้งเตือน
 */
async function fetchmsgNoread() {
  await http
    .get(config.API.msgNoread())
    .then((res) => {
      totalNoti.value = res.data.result;
    })
    .catch((err) => {
      messageError($q, err);
    });
}

const statusLoad = ref<boolean>(false); // สถานการโหลด

/**
 * fetch ข้อมูลรายการแจ้งเตือน
 * ุ ถ้า type === 'DEL' notiList = [] แล้วจำโหลดข่อมูลรายการใหม่
 * แต่ถ่าไม่ notiList จะ เพิ่มข้อมูลรายการไปเรื่อยๆ
 *
 * @param index รายการแจ้งเตือน
 * @param type ประเภทรายการโหลด โหลดหลัง Delete, โหลดปกติ
 */
async function getDataNotification(index: number, type: string) {
  const thaiOptions: Intl.DateTimeFormatOptions = {
    hour: "2-digit",
    minute: "2-digit",
  };
  await http
    .get(config.API.msgNotificate + `?page=${index}&pageSize=${15}`)
    .then((res) => {
      const response = res.data.result.data;
      totalInbox.value = res.data.result.total;
      let list: notiType[] = [];
      if (type === "DEL") {
        notiList.value = [];
      }
      response &&
        response.map((e: any) => {
          list.push({
            id: e.id,
            sender:
              e.createdFullName == "" || e.createdFullName == null
                ? "เจ้าหน้าที่"[0]
                : e.createdFullName[0],
            body: e.body ?? "",
            timereceive: `${date2Thai(e.receiveDate)} ${new Date(
              e.receiveDate,
            ).toLocaleTimeString("th-TH", thaiOptions)} น.`,
            isOpen: e.isOpen,
          });
        });
      notiList.value.push(...list);
      statusLoad.value = totalInbox.value === 0 ? true : false;
    })
    .catch((e) => {
      messageError($q, e);
    });
}

/**
 * toggleBtnRight ปุ่มย่อ ขยาย drawer ขวา
 */
function toggleBtnRight() {
  drawerR.value = !drawerR.value;
}

/**
 * toggleBtnLeft ปุ่มย่อ ขยาย drawer ซ้าย เมื่อหน้าจอ ย่อถึงขนาด 1024 px
 * ปกติเป็นการย่อโดยใช้ Ministate
 */
function toggleBtnLeft() {
  if (window.innerWidth < 1024) {
    drawerL.value = !drawerL.value;
  } else {
    miniState.value = !miniState.value;
  }
}

/**
 * Event onScroll นำ ตำแหน่ง top ที่ scroll
 * ใช้ function updateScroll
 */
function onScroll(scroll: ScrollType) {
  const { position } = scroll;
  updateScroll(position);
}

/**
 * updateScroll เป็น function active แทปด้านขวา
 */
function updateScroll(position: number) {
  // เมื่อ position เป็น undifind ให้ position เป็น ตำแหน่ง top ที่ scroll
  if (position === void 0) {
    position = document.documentElement.scrollTop || document.body.scrollTop;
  }
  let last;

  /**
   * ถ้า last ไม่เท่ากับ undifind
   * ใช้ เซ็ท active ให้เป็นแทปสีฟ้า
   * และใช้ scrollIntoView ย้ายตำแหน่ง activeโดยการเลื่อนไปหา
   */
  if (last !== void 0) {
    changeTab(last);
    const tocEl = document.getElementById("tab--" + last);
    if (tocEl) {
      tocEl.scrollIntoView({ block: "nearest" });
    }
  }
}

/**
 * ให้แสดง แทปด้านขวา เมื่อเข้าหน้า รายละเอียดทะเบียนประวัติ และ rightActive เท่ากับ true
 */
function activeBtn() {
  return route.name == "registryDetail" && rightActive.value;
}

/**
 * @param e event ของ resize
 * @param setSCroll เช็คว่ามาจาก event หรือป่าว
 * set state resize = ความกว้างหน้าเว็ป
 * เมื่อความกว้าง น้อยกว่า 1024( เท่ากับ น้อยกว่า 1023) ให้ rightActive เป็น true แต่ถ้า rightActive true อยู่แล้วไม่ต้อง set
 * เมื่อความกว้าง มากกว่าหรือเท่ากับ 1024 และเมื่อ rightActive เป็น true
 * และ drawerR เป็น true ให้ rightActive เป็น true ถ้า drawerR เป็น false  ให้ rightActive เป็น false
 * rightActive = true ; แสดงปุ่ม drawer ด้าน ขวา
 * rightActive = false; ไม่แสดงปุ่ม drawer ด้าน ขวา
 */
function myEventHandler(e: any, setSCroll: boolean) {
  if (setSCroll) {
    resize.value = e.target.innerWidth;
  } else {
    resize.value = window.innerWidth;
  }
  if (resize.value < 1024) {
    if (!rightActive.value) {
      rightActive.value = true;
    }
  } else {
    if (rightActive.value) {
      if (drawerR.value) {
        rightActive.value = true;
      } else {
        rightActive.value = false;
      }
    }
  }
}

/**
 * ตรวจสอบ path นั้นๆ ว่ายังอยู่ที่ path นั้น แม้จะเป็น path ที่มี child แท็ปก็ยังจะ active อยู่เช่น
 * ปกติ path จะ active เมื่อ path นั้นมีค่า ตรงตัวมันเช่น /main
 * แต่จะไม่ active เมื่อ path นั้น มี child path  /main/อื่นๆ
 * @param path string
 */
function activeMenu(path: string) {
  const bool = route.name === path;
  return bool;
}

/**
 * logout keycloak
 * confirm ก่อนออกจากระบบ
 */
function doLogout() {
  dialogConfirm(
    $q,
    async () => {
      await http.post(config.API.keycloakLogSSO, { text: "ออกจากระบบ" });
      await logoutSSO();
    },
    "ยืนยันการออกจากระบบ",
    "ต้องการออกจากระบบใช่หรือไม่?",
  );
}

/**
 * ยืนยีนการลบรายการข้อความแจ้งเตือน
 *
 * @param id ข้อความแจ้งเตือน
 * @param index ตำแหน่งของข้อมูล
 */
async function clickDelete(id: string, index: number) {
  dialogRemove($q, async () => {
    showLoader();
    await http
      .delete(config.API.msgId(id))
      .then(async () => {
        notiList.value.length === 7 && (await getDataNotification(1, "DEL"));
        notiList.value.splice(index, 1);
        totalInbox.value--;
        await success($q, "ลบข้อมูลสำเร็จ");
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

const totalInbox = ref<number>(0); //จำนวนของรายการแจ้งเตือน
const totalNoti = ref<number>(0); //จำนวนของการแจ้งเตือน
const page = ref<number>(0); // หน้า

/**
 * ฟังก์ชัน onLoad ทำงานเมื่อโหลดข้อมูลเพิ่มเติมในรายการแจ้งเตือน
 *
 * @param index - ของรายการที่กำลังโหลด
 * @param done - ฟังก์ชันที่เรียกเมื่อการโหลดเสร็จสิ้น
 */
function onLoad(index: any, done: Function) {
  if (
    notiList.value.length < totalInbox.value ||
    (notiList.value.length === 0 && totalInbox.value === 0)
  ) {
    page.value++;
    setTimeout(async () => {
      await getDataNotification(page.value, "NOMAL");
      done();
    }, 1500);
  }
}

/**
 *
 * ใช้เพื่อสร้างและเปิดหน้าต่างคู่มือการใช้งาน
 * ถ้า config.generatePopupPath() ส่งคืน URL ที่เป็นฐาน, จะทำการเปิดหน้าต่างใหม่ด้วยเส้นทางและ query string ที่สร้างขึ้น
 * ถ้าไม่มีเส้นทางที่จะใช้ จะพิมพ์ข้อความลงใน console เพื่อแจ้งว่าไม่มีคู่มือสำหรับหน้านี้
 */
function handleButtonClick() {
  const currentPath = route.name;
  const queryParams = { role: "admin" }; // Replace with your query parameters
  const queryString = new URLSearchParams(queryParams).toString();
  const findRole = role.value.includes("SUPER_ADMIN");
  // Assuming config.generatePopupPath() returns a base URL
  const popupBasePath = config.generatePopupPath(findRole);

  if (popupBasePath) {
    const popupPath = `${popupBasePath}?${queryString}`;
    window.open(popupPath, "_blank"); // Opens in a new tab/window
  } else {
    console.log("No manual available for this page:", currentPath);
  }
}

// landing page redirect
const landingPageUrl = ref<string>(configParam.landingPageUrl);

/** ฟังก์ชันเรียกข้อมูลผู้ใช่งาน*/
async function fetchKeycloakPosition() {
  const checkRole =
    role.value.includes("SUPER_ADMIN") || role.value.includes("ADMIN");
  if (!checkRole) return;

  await http
    .get(config.API.keycloakPosition())
    .then(async (res) => {
      const data = await res.data.result;
      keycloakPositionStore.setDataPosition(data);

      //เช็คว่ามีรูปไหม ถ้ามีรูปเรียกข้อมูลรูป
      if (data && data.avatarName) {
        await getImg(data.profileId, data.avatarName);
      } else {
        profileImg.value = avatar;
      }
    })
    .catch((err) => {
      messageError($q, err);
    });
}

const profileImg = ref<string>(avatar);
async function getImg(id: string, pathName: string) {
  await http
    .get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, pathName))
    .then((res) => {
      profileImg.value = res.data.downloadUrl;
    });
}

/**
 * ฟังก์ชัน watch การเปลี่ยนแปลงของค่า notiTrigger
 * เมื่อค่า notiTrigger เปลี่ยนเป็น false,
 * ฟังก์ชันนี้จะทำการอัปเดตรายการแจ้งเตือนทั้งหมดให้เป็นสถานะ "เปิดอ่านแล้ว"
 * จากนั้นจะเรียกฟังก์ชัน fetchmsgNoread เพื่อดึงข้อมูลข้อความที่ยังไม่ได้อ่าน
 */
watch(
  () => notiTrigger.value,
  () => {
    if (!notiTrigger.value) {
      const updatedNotifications = notiList.value.map((item) => ({
        ...item,
        isOpen: true,
      }));
      notiList.value = updatedNotifications;
      fetchmsgNoread();
    }
  },
);

const isSsoToken = ref<boolean>(false);

/**
 * ฮุกนี้จะถูกเรียกก่อนที่คอมโพเนนต์จะถูก onMounted
 * กำหนดบทบาทและชื่อผู้ใช้งานจาก Keycloak
 */
onBeforeMount(async () => {
  reles.value = await tokenParsed();

  //  ดิงชื่อผู้ใช้งานจาก keycloak
  const tokenParsedData: any = await tokenParsed();
  const SSO_TOKEN = await getCookie("SSO");
  isSsoToken.value = SSO_TOKEN === "y" ? true : false;
  if (tokenParsedData != null) {
    fullname.value = tokenParsedData.name;
    role.value = tokenParsedData.role;
  }
});

/**
 * เมื่อเริ่มต้นโปรแกรมให้ฟัง event resize และ function myEventHandler
 * set function myEventHandler เพราะ state ยังไม่เซ็ท , state เซ็ทเมื่อ หน้าจอเริ่ม ขยับหน้าจอ
 * เริ่มเข้ามา state rightActive เป็น state ที่โชว์ ปุ่มขวา
 * ยังจับ boolean ผิด จึงต้อง set
 */
onMounted(async () => {
  fetchKeycloakPosition();
  await fetchmsgNoread();
  myEventHandler(null, false);
  window.addEventListener("resize", (e: any) => {
    myEventHandler(e, true);
  });
});

/**
 * เมื่อออกจากโปรแกรม ให้ ยกเลิกการฟัง event resize
 */
onUnmounted(() => {
  window.removeEventListener("resize", (e: any) => {
    myEventHandler(e, true);
  });
});
</script>

<!-- โครงเว็บ -->
<template>
  <!-- แบบเก่า design แรก -->
  <!-- <q-layout view="lHh Lpr lff"> -->
  <!-- ปรับให้กับหน้า รายละเอียดทะเบียนประวัติ  -->
  <q-layout view="lHh LpR lff" @scroll="onScroll">
    <!-- header -->
    <q-header flat class="bg-grey-2 text-dark" height-hint="7">
      <q-toolbar style="padding: 0 2%">
        <q-btn
          size="13px"
          class="bg-grey-3"
          flat
          dense
          round
          @click="toggleBtnLeft"
          aria-label="Menu"
        >
          <q-icon
            :name="miniState == false ? 'mdi-backburger' : 'mdi-menu-open'"
            size="20px"
            color="grey-7"
          />
        </q-btn>

        <q-space />

        <!-- Search -->
        <!-- <q-input  dense rounded standout v-model="text" placeholder="ค้นหา">
						<template v-slot:prepend>
							<q-icon name="mdi-magnify" size="20px" color="grey-7" />
						</template>
</q-input> -->
        <!-- <q-btn class="bg-grey-3" flat dense round>
          <q-icon name="mdi-magnify" size="20px" color="grey-7" />
        </q-btn>
        -->
        <q-btn
          round
          dense
          flat
          size="13px"
          class="bg-grey-3"
          :color="totalNoti === 0 ? 'grey-6' : 'grey-8'"
          @click="handleButtonClick()"
          style="margin-right: 10px"
        >
          <q-icon name="mdi-book-open-variant" size="18px" color="grey-7" />
          <q-tooltip>คู่มือ</q-tooltip>
        </q-btn>

        <!-- Notification -->
        <q-btn
          round
          dense
          flat
          size="13px"
          class="bg-grey-3"
          :color="totalNoti === 0 ? 'grey-6' : 'grey-8'"
        >
          <q-icon name="mdi-bell" size="18px" color="grey-7" />
          <q-badge
            rounded
            color="negative"
            text-color="white"
            floating
            v-if="totalNoti !== 0"
            >{{ totalNoti }}</q-badge
          >
          <q-menu
            v-model="notiTrigger"
            :offset="[0, 8]"
            style="width: 480px; height: 60vh"
          >
            <div class="q-px-md q-py-sm row col-12 items-center">
              <div class="text-subtitle1 text-weight-medium">การแจ้งเตือน</div>
              <q-space />
              <div class="text-grey-5" style="font-size: 12px">
                ทั้งหมด {{ totalInbox }} ข้อความ
              </div>
            </div>

            <q-infinite-scroll
              @load="onLoad"
              :offset="250"
              v-if="statusLoad === false"
            >
              <div
                v-for="(n, index) in notiList"
                :key="index"
                class="caption q-pa-xs"
              >
                <q-item
                  v-ripple
                  :class="
                    !n.isOpen ? 'mytry q-py-xs my-menu-link' : 'mytry q-py-xs'
                  "
                  dense
                >
                  <q-item-section avatar top style="min-width: 40px">
                    <q-avatar color="primary" size="22px" text-color="white">
                      <span class="text-weight-medium text-uppercase">{{
                        n.body[0]
                      }}</span>
                    </q-avatar>
                  </q-item-section>
                  <q-item-section>
                    <q-item-label caption class="text-black">{{
                      n.body
                    }}</q-item-label>
                    <q-item-label
                      caption
                      class="row items-center text-grey-7"
                      >{{ n.timereceive }}</q-item-label
                    >
                  </q-item-section>
                  <q-btn
                    size="sm"
                    unelevated
                    dense
                    icon="mdi-close"
                    class="mybtn q-mx-xs"
                    @click="clickDelete(n.id, index)"
                  ></q-btn>
                </q-item>
              </div>

              <q-separator color="grey-2" />

              <template
                v-slot:loading
                v-if="
                  notiList.length < totalInbox ||
                  (notiList.length === 0 && totalInbox === 0)
                "
              >
                <div class="row justify-center q-my-md">
                  <q-spinner-dots color="primary" size="40px" />
                </div>
              </template>
            </q-infinite-scroll>
            <div class="q-pa-md" v-else>
              <q-banner rounded class="bg-amber-1 text-center">
                <div class="text-yellow-10">
                  <q-icon
                    name="mdi-alert-box"
                    class="q-mx-xs"
                    size="sm"
                    color="yellow-10"
                  />
                  ไม่มีข้อมูล
                </div>
              </q-banner>
            </div>
          </q-menu>
        </q-btn>
        <div class="row items-center no-wrap">
          <q-btn-dropdown size="md" dropdown-color="grey" flat>
            <template v-slot:label>
              <q-item v-close-popup class="q-pa-none">
                <q-item-section :avatar="$q.screen.gt.xs">
                  <q-avatar color="grey-3">
                    <q-img :src="profileImg" />
                    <!-- <q-icon
                      v-else
                      name="mdi-account"
                      size="22px"
                      color="grey-7"
                    /> -->
                  </q-avatar>
                </q-item-section>
                <q-item-section class="text-left gt-xs">
                  <q-item-label class="text-caption text-weight-medium">{{
                    fullname
                  }}</q-item-label>
                  <!-- <q-item-label caption>เจ้าหน้าที่ ก.ก.</q-item-label> -->
                </q-item-section>
              </q-item>
            </template>
            <div
              class="row justify-center"
              style="border-top: solid 3px #1bb19b !important; width: 273.797px"
            >
              <div class="column items-center col-12 q-py-md" color="grey-3">
                <q-avatar size="72px" color="grey-4">
                  <q-img :src="profileImg" />
                  <!-- <q-icon v-else name="mdi-account" color="grey-7" /> -->
                </q-avatar>
                <div class="text-subtitle2 q-mt-md q-mb-xs text-center">
                  {{ fullname }}
                </div>
                <!-- <div id="#logout">
                  <q-btn
                    color="primary"
                    label="ออกจากระบบ"
                    push
                    size="sm"
                    v-close-popup
                    @click="doLogout"
                  />
                </div> -->
              </div>

              <div class="column col-12">
                <q-separator />
                <div class="column q-py-sm justify-center">
                  <!-- <div class="text-overline text-grey q-px-md q-pt-sm">
                    เลือกโหมด
                  </div> -->
                  <!-- <q-option-group v-model="group" :options="options" color="primary"/> -->
                  <q-list dense>
                    <q-item
                      clickable
                      @click="redirectToLandingPage"
                      v-if="isSsoToken"
                    >
                      <q-item-section avatar>
                        <q-avatar
                          color="blue"
                          text-color="white"
                          icon="home"
                          size="20px"
                          font-size="12px"
                        />
                      </q-item-section>
                      <q-item-section class="q-py-sm">
                        Landing Page
                      </q-item-section>
                    </q-item>
                  </q-list>

                  <q-list dense>
                    <q-item clickable @click="doLogout">
                      <q-item-section avatar>
                        <q-avatar
                          color="red"
                          text-color="white"
                          icon="logout"
                          size="20px"
                          font-size="12px"
                        />
                      </q-item-section>
                      <q-item-section class="q-py-sm">
                        ออกจากระบบ
                      </q-item-section>
                    </q-item>
                  </q-list>
                </div>
              </div>
            </div>
          </q-btn-dropdown>
        </div>
        <q-btn
          size="13px"
          class="bg-blue-1"
          v-if="activeBtn()"
          flat
          dense
          round
          @click="toggleBtnRight"
          aria-label="Menu"
        >
          <q-icon name="mdi-menu" class="rotate-180" size="20px" color="blue" />
        </q-btn>
      </q-toolbar>
    </q-header>
    <!-- end header -->

    <!-- drawer -->
    <q-drawer
      side="left"
      class="text-white"
      style="background: #273238"
      v-model="drawerL"
      show-if-above
      :width="260"
      :breakpoint="1023"
      :mini="miniState"
    >
      <!--  ส่วนของเมนู mini -->
      <template v-slot:mini>
        <q-scroll-area class="fit mini-slot cursor-pointer">
          <q-toolbar class="q-py-md">
            <q-img
              src="@/assets/logo.png"
              spinner-color="white"
              style="height: 32px; max-width: 32px"
            />
          </q-toolbar>
          <q-separator color="grey-9" />
          <!-- เมนูย่อย ตอนย่อ -->
          <q-list padding>
            <div v-for="(menuItem, index) in menuList" :key="index">
              <!-- v-if="role.includes(menuItem.role)" -->
              <div>
                <q-item
                  clickable
                  v-ripple
                  :active="link === menuItem.label"
                  @click="link = menuItem.label"
                  active-class="text-primary menuActiveMini text-weight-medium"
                  v-if="
                    menuItem.key == 2 ||
                    menuItem.key == 0 ||
                    menuItem.key == 8 ||
                    menuItem.key == 9 ||
                    menuItem.key == 10 ||
                    menuItem.key == 11 ||
                    menuItem.key == 12 ||
                    menuItem.key == 13 ||
                    menuItem.key == 14 ||
                    menuItem.key == 15 ||
                    menuItem.key == 16
                  "
                >
                  <div class="row items-center no-wrap">
                    <q-icon :name="menuItem.icon" size="20px" class="q-ml-md" />
                    <q-icon
                      name="mdi-dots-vertical"
                      size="13px"
                      color="grey-6"
                    />
                  </div>
                  <q-tooltip
                    anchor="center right"
                    self="center left"
                    :offset="[10, 10]"
                  >
                    {{ menuItem.label }}
                  </q-tooltip>
                  <q-menu
                    anchor="top right"
                    self="top left"
                    :offset="[5, 0]"
                    style="background: #273238; z-index: 9000"
                  >
                    <q-list class="text-white q-py-sm">
                      <div
                        v-for="(subMenu, i) in menuItem.children"
                        :key="i"
                        :to="{ name: `${subMenu.path}` }"
                      >
                        <!-- เมนูย่อย 2 ชั้น -->
                        <div
                          v-if="
                            menuItem.key == 2 ||
                            menuItem.key == 12 ||
                            menuItem.key == 13
                          "
                        >
                          <q-item
                            dense
                            clickable
                            v-if="
                              subMenu.key !== 2.0 &&
                              subMenu.key !== 7.1 &&
                              subMenu.key !== 12.0 &&
                              subMenu.key !== 13.0
                            "
                          >
                            <q-item-section
                              >{{ subMenu.label }}
                            </q-item-section>
                            <q-item-section side>
                              <q-icon name="keyboard_arrow_right" />
                            </q-item-section>

                            <q-menu
                              anchor="top end"
                              self="top start"
                              :offset="[5, 0]"
                              style="background: #273238; z-index: 9000"
                            >
                              <q-list class="text-white q-py-sm">
                                <q-item
                                  v-for="subMenu2 in subMenu.children"
                                  :key="subMenu2.label"
                                  :to="{ name: `${subMenu2.path}` }"
                                  dense
                                  class="q-pl-md text-body2"
                                  active-class="text-primary active-item text-weight-medium"
                                  clickable
                                >
                                  <q-item-section>
                                    <q-item-label>{{
                                      subMenu2.label
                                    }}</q-item-label>
                                  </q-item-section>
                                </q-item>
                              </q-list>
                            </q-menu>
                          </q-item>

                          <q-item
                            v-else
                            dense
                            class="q-pl-md q-pr-xl text-body2"
                            active-class="text-primary active-item text-weight-medium"
                            clickable
                            :to="{ name: `${subMenu.path}` }"
                          >
                            <q-item-section>
                              <q-item-label>{{ subMenu.label }}</q-item-label>
                            </q-item-section>
                          </q-item>
                        </div>
                        <!-- เมนูย่อย 1 ชั้น -->
                        <div v-else>
                          <q-item
                            dense
                            class="q-pl-md q-pr-xl text-body2"
                            active-class="text-primary active-item text-weight-medium"
                            clickable
                            :to="{ name: `${subMenu.path}` }"
                          >
                            <q-item-section>
                              <q-item-label>{{ subMenu.label }}</q-item-label>
                            </q-item-section>
                          </q-item>
                        </div>
                      </div>
                    </q-list>
                  </q-menu>
                </q-item>
                <q-item
                  clickable
                  v-ripple
                  :to="{ name: `${menuItem.path}` }"
                  :active="link === menuItem.label"
                  @click="link = menuItem.label"
                  active-class="text-primary menuActiveMini"
                  v-else
                >
                  <q-item-section avatar>
                    <q-avatar size="md" font-size="20px">
                      <q-icon :name="menuItem.icon" />
                    </q-avatar>
                  </q-item-section>
                  <q-tooltip
                    anchor="center right"
                    self="center left"
                    :offset="[10, 10]"
                  >
                    {{ menuItem.label }}
                  </q-tooltip>
                </q-item>
              </div>
            </div>
          </q-list>
        </q-scroll-area>
      </template>
      <!--  จบส่วนของเมนู mini -->

      <!-- ส่วนของเมนู -->
      <q-scroll-area class="fit">
        <q-toolbar class="q-py-md">
          <q-toolbar-title shrink class="row items-center no-wrap">
            <q-img
              src="@/assets/logo.png"
              spinner-color="white"
              style="height: 40px; max-width: 40px"
            />
            <div class="row q-ml-sm">
              <div
                style="color: #ffffff; letter-spacing: 1px"
                class="text-body2 text-weight-bolder"
              >
                ระบบ<span class="text-primary">บริหารทรัพยากรบุคคล</span>
              </div>
              <div class="text-caption text-white">ของกรุงเทพมหานคร</div>
            </div>
          </q-toolbar-title>
        </q-toolbar>

        <q-separator inset color="grey-9" />
        <q-list padding>
          <div v-for="(menuItem, index) in menuList" :key="index">
            <!-- เมนูย่อย -->
            <div v-if="checkPermission(menuItem.role, reles)">
              <q-expansion-item
                group="somegroup"
                class="menuSub"
                expand-icon="mdi-chevron-down"
                expanded-icon="mdi-chevron-up"
                v-if="
                  menuItem.key == 2 ||
                  menuItem.key == 0 ||
                  menuItem.key == 8 ||
                  menuItem.key == 9 ||
                  menuItem.key == 10 ||
                  menuItem.key == 11 ||
                  menuItem.key == 12 ||
                  menuItem.key == 13 ||
                  menuItem.key == 14 ||
                  menuItem.key == 15 ||
                  menuItem.key == 16
                "
              >
                <template v-slot:header>
                  <q-item-section avatar>
                    <q-avatar
                      :icon="menuItem.icon"
                      size="md"
                      font-size="20px"
                    />
                  </q-item-section>
                  <q-item-section>{{ menuItem.label }}</q-item-section>
                </template>

                <!-- เมนูย่อย 2 ชั้น (สรรหา) -->
                <div
                  v-if="
                    menuItem.key == 2 ||
                    menuItem.key == 12 ||
                    menuItem.key == 13
                  "
                >
                  <div v-for="(subMenu, i) in menuItem.children" :key="i">
                    <q-expansion-item
                      switch-toggle-side
                      dense-toggle
                      :label="subMenu.label"
                      v-if="
                        subMenu.key !== 2.0 &&
                        subMenu.key !== 12.0 &&
                        subMenu.key !== 13.0
                      "
                      class="expan2"
                      dense
                    >
                      <q-item
                        dense
                        class="menuSubHover"
                        active-class="text-primary active-item text-weight-bold menuSubAct"
                        clickable
                        v-for="subMenu2 in subMenu.children"
                        :key="subMenu2.key"
                        :to="{ name: `${subMenu2.path}` }"
                      >
                        <q-item-section>
                          <q-item-label class="font-400 subLabel">
                            {{ subMenu2.label }}
                          </q-item-label>
                        </q-item-section>
                      </q-item>
                    </q-expansion-item>

                    <q-item
                      v-else-if="checkPermission(subMenu.role, reles)"
                      dense
                      class="menuSubHover"
                      active-class="text-primary active-item text-weight-bold menuSubAct"
                      clickable
                      :to="{ name: `${subMenu.path}` }"
                    >
                      <q-item-section>
                        <q-item-label>{{ subMenu.label }} </q-item-label>
                      </q-item-section>
                    </q-item>
                  </div>
                </div>
                <!-- เมนูย่อย 1 ชั้น -->
                <q-item
                  v-else
                  dense
                  class="menuSubHover"
                  active-class="text-primary active-item text-weight-bold menuSubAct"
                  clickable
                  v-for="(subMenu, j) in menuItem.children"
                  :key="j"
                  :to="{ name: `${subMenu.path}` }"
                >
                  <q-item-section>
                    <q-item-label class="font-400">{{
                      subMenu.label
                    }}</q-item-label>
                  </q-item-section>
                </q-item>
              </q-expansion-item>

              <!-- เมนูปกติ -->
              <q-item
                class="text-weight-medium menu"
                :active="activeMenu(menuItem.path)"
                active-class="text-primary active-item text-weight-bold menuActive"
                :to="{ name: `${menuItem.path}` }"
                clickable
                v-ripple
                dense
                exact
                v-else
              >
                <q-item-section avatar>
                  <q-avatar size="md" font-size="20px">
                    <q-icon
                      :name="
                        menuItem.key === active
                          ? menuItem.activeIcon
                          : menuItem.icon
                      "
                    />
                  </q-avatar>
                </q-item-section>

                <q-item-section>
                  <q-item-label>{{ menuItem.label }}</q-item-label>
                </q-item-section>
              </q-item>
            </div>
          </div>
        </q-list>
      </q-scroll-area>
    </q-drawer>

    <q-page-container class="bg-grey-2">
      <q-page style="padding: 0 2%">
        <router-view :key="$route.fullPath" />
      </q-page>
    </q-page-container>
    <full-loader :visibility="loader" />
  </q-layout>
</template>

<style>
.my-menu-link {
  background: #ebf9f7 !important;
  border-radius: 5px;
  border: 1px solid #1bb19ab8;
  color: #1bb19ab8 !important;
}

.menuSub .q-item__section--avatar,
.menu .q-item__section--avatar {
  min-width: 0px;
}

.menu {
  padding-bottom: 5px;
  padding-top: 5px;
  border-radius: 0 100px 100px 0;
  margin-right: 2%;
}

.menuActive {
  background: #212a2f;
  border-radius: 0 100px 100px 0;
  margin-right: 2%;
}

.menuActiveMini {
  background: #212a2f;
}

.menuSub .q-item {
  border-radius: 0 100px 100px 0;
  margin-right: 2%;
  font-weight: 500;
}

.expan2 .q-item {
  padding-left: 10%;
}

.subLabel {
  white-space: nowrap;
  width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.font-400 {
  font-weight: 400;
}

.expan2 .menuSubHover {
  padding-left: 30%;
  border-radius: 20px;
}

.menuSubHover {
  padding-left: 25%;
  border-radius: 20px;
}

.menuSub .q-expansion-item__content {
  background: #212a2f;
  padding: 5px 0px;
  margin-bottom: 5px;
}

.tabNative {
  color: grey;
  padding-left: 8%;
  border-radius: 100px 0px 0px 100px;
}

.tabActive {
  padding-left: 8%;
  background: #e4f2ff;
  border-radius: 100px 0px 0px 100px;
}

.q-card {
  box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261) !important;
}

.q-card--bordered {
  border: 1px solid #ededed;
  box-shadow: none !important;
}

.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%;
}

.q-field--outlined .q-field__control {
  border-radius: 5px;
}

.q-field--outlined .q-field__control:before {
  border-color: #c8d3db;
}

.btnManu {
  min-height: 48px;
  border-radius: 0px 100px 100px 0px;
}

/* .q-field--outlined .q-icon {
  color: #7474747f;
}
 */
.q-card__actions .q-btn--rectangle {
  padding: 0 14px !important;
}

/* custom scrollbar */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #d6dee1;
  border-radius: 20px;
  border: 3px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #a8bbbf;
}
</style>
