<script setup lang="ts">
// Types & Consts
import type { Permission } from '~/models/role'
import { permissions } from '~/const/page-permission/ambulatory'

// Helpers
import { usePageChecker } from '~/lib/page-checker'

// Pubs
import Error from '~/components/pub/my-ui/error/error.vue'

// Apps
import Content from '~/components/content/encounter/process.vue'

const { getRouteTitle, getPageAccess, hasCreateAccess, hasReadAccess, hasUpdateAccess, hasDeleteAccess } = usePageChecker()

definePageMeta({
  middleware: ['rbac'],
  roles: ['emp|doc', 'emp|nur', 'emp|miw', 'emp|nut', 'emp|lab', 'emp|pha', 'emp|thr'],
  title: 'Proses Kunjungan',
  contentFrame: 'cf-full-width',
  contentPadding: 'p-0',
  contentUseCard: false,
})

useHead({
  title: () => `${getRouteTitle()}`,
})

// Preps role checking
const route = useRoute()
const menu = computed(() => route.query.menu as string | undefined)
const accessKey = computed(() => `/ambulatory/encounter/[id]/process` + (menu.value ? `?menu=${menu.value}` : ''))
const roleAccess: Record<string, Permission[]> = permissions[accessKey.value] || {}
const hasAccess = getPageAccess(roleAccess, 'read') || true
const canCreate = hasCreateAccess(roleAccess)
const canRead = hasReadAccess(roleAccess)
const canUpdate = hasUpdateAccess(roleAccess)
const canDelete = hasDeleteAccess(roleAccess)
</script>

<template>
  <!--
  {{ accessKey }}
  {{ roleAccess }}
  {{ hasAccess }}
  {{ canUpdate }}
   -->
  <div v-if="hasAccess">
    <Content
      class-code="ambulatory"
      :can-create="canCreate"
      :can-read="canRead"
      :can-update="canUpdate"
      :can-delete="canDelete"
    />
  </div>
  <Error v-else :status-code="403" />
</template>
