<script setup lang="ts">
import { useQuasar } from 'quasar'
import { onMounted, ref } from 'vue'
// import keycloak from '@/plugins/keycloak'
import { useRoute } from 'vue-router'
import { menuList, options, notiList } from '../interface/main/index'
import keycloak from '@/plugins/keycloak'
import { useCounterMixin } from '@/stores/mixin'
import http from '@/plugins/http'
import config from '@/app.config'

const route = useRoute()
const $q = useQuasar()
const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
const { statusCandidate } = mixin
const miniState = ref<boolean>(false)
const active = ref<number>(0)
const drawerL = ref<boolean>(false)
const fullname = ref<string>('')
const notiTrigger = ref<boolean>(false)
const loader = ref<boolean>(false)
const status = ref<string>('register')
const examId = ref<string>(route.params.id.toString())
const positionId = ref<string>(route.params.positionId.toString())

onMounted(async () => {
  await fetchStatus()
})

const toggleBtnLeft = () => {
  if (window.innerWidth < 1024) {
    drawerL.value = !drawerL.value
  } else {
    miniState.value = !miniState.value
  }
}

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

/**
 * logout keycloak
 * confirm ก่อนออกจากระบบ
 */
const doLogout = () => {
  $q.dialog({
    title: 'ยืนยันการออกจากระบบ',
    message: `ต้องการออกจากระบบใช้หรือไม่?`,
    cancel: 'ยกเลิก',
    ok: 'ยืนยัน',
    persistent: true
  }).onOk(() => {
    keycloak.logout()
  })
}

const fetchStatus = async () => {
  loader.value = true
  await http
    .get(config.API.candidateStatus(examId.value, positionId.value))
    .then((res) => {
      const data = res.data.result
      status.value = data
    })
    .catch(() => {})
    .finally(() => {
      loader.value = false
    })
}

const getFontColor = (val: string) => {
  switch (val) {
    case 'register':
      return 'text-blue'
    case 'checkRegister':
      return 'text-orange'
    case 'payment':
      return 'text-blue'
    case 'rejectRegister':
      return 'text-red-12'
    case 'checkPayment':
      return 'text-orange'
    case 'rejectPayment':
      return 'text-red-12'
    case 'checkSeat':
      return 'text-blue'
    case 'checkPoint':
      return 'text-blue'
    case 'done':
      return 'text-green'
    case 'waiver':
      return 'text-orange'
    default:
      return '-'
  }
}

/**
 * ดิงชื่อผู้ใช้งานจาก keycloak
 */
// if (keycloak.tokenParsed != null) {
//   fullname.value = keycloak.tokenParsed.name
// }
</script>

<!-- โครงเว็บ -->
<template>
  <!-- แบบเก่า design แรก -->
  <!-- <q-layout view="lHh Lpr lff"> -->
  <!-- ปรับให้กับหน้า รายละเอียดรายการสอบทั้งหมด  -->
  <q-layout view="lHh LpR lff" class="bgColor text-dark">
    <!-- header -->
    <q-header flat class="bg-white text-white row justify-center header" height-hint="7">
      <q-toolbar style="padding: 0% 2%" class="col-xs-12 col-sm-11 col-md-11 col-lg-10">
        <q-toolbar-title shrink class="row items-center no-wrap">
          <q-btn flat class="bg-white" dense round>
            <q-avatar size="35px">
              <img src="../assets/logo.png" />
            </q-avatar>
          </q-btn>
          <div class="row q-ml-md text-dark" v-if="$q.screen.gt.xs">
            <div class="col-12 textline1">ระบบทรัพยากรบุคคล</div>
            <div class="text-caption textline2">กรุงเทพมหานคร</div>
          </div>
        </q-toolbar-title>
        <q-space />
        <!-- <q-badge flat color="blue" class="q-mr-md text-bold">
          {{ statusCandidate(status) }}
        </q-badge> -->
        <div class="q-mr-md text-bold" :class="getFontColor(status)">
          {{ statusCandidate(status) }}&nbsp;&nbsp;
        </div>
        <q-btn
          v-if="$q.screen.gt.xs"
          class="bg-amber-1 text-amber-9"
          icon="mdi-logout-variant"
          size="12px"
          label="ออกจากระบบ"
          flat
          v-close-popup
          @click="doLogout"
        />
        <q-btn
          v-else
          class="bg-amber-1 text-amber-9"
          icon="mdi-logout-variant"
          flat
          v-close-popup
          @click="doLogout"
        />
      </q-toolbar>
    </q-header>
    <!-- end header -->
    <q-page-container class="row justify-center">
      <q-page style="padding: 1.5% 2%" class="col-xs-12 col-sm-11 col-md-11 col-lg-10">
        <router-view :key="$route.fullPath" />
      </q-page>
    </q-page-container>
  </q-layout>
</template>

<style>
.bgColor {
  /* background-image: url("../assets/bg.png");
	background-size: cover;
	background-size: 100%; */
  background: #f6f9fa;
}

.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);
}
.q-card--bordered {
  border: 1px solid #92b4c847;
  box-shadow: none !important;
}
.q-stepper {
  box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261);
}
.q-menu {
  box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
}

.toptitle {
  font-size: 1.2rem;
  font-weight: bold;
}

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

.q-field--outlined .q-field__control:before,
.q-field .q-field__control:before {
  border-color: #c8d3db;
}
.q-field--outlined .q-icon {
  color: #7474747f;
}
/* custom scrollbar */
::-webkit-scrollbar {
  width: 20px;
  height: 20px;
}

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

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

::-webkit-scrollbar-thumb:hover {
  background-color: #a8bbbf;
}

.header {
  border-bottom: 1px solid #92b4c847;
  height: 50px;
}
.textline1 {
  font-size: 0.9rem;
  line-height: 1.2rem !important;
  font-weight: 500;
}
.textline2 {
  line-height: 1rem !important;
  font-weight: 400;
  color: #96a9ad;
}
</style>
