<script setup lang="ts">
import { computed, ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

// Components
import EncounterPatientInfo from '~/components/app/encounter/patient-info.vue'

// Models
import { genEncounter } from '~/models/encounter'

// Handlers
import { getEncounterData } from '~/handlers/encounter-process.handler'

const route = useRoute()
const router = useRouter()

const id = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
const data = ref<any>(genEncounter())
const isShowPatient = computed(() => data.value && data.value?.patient?.person)

async function getData() {
  data.value = await getEncounterData(id)
}

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

function handleClick(type: string) {
  if (type === 'draft') {
    router.back()
  }
}
</script>

<template>
  <div class="w-full">
    <div class="mb-4">
      <PubMyUiNavContentBa label="Kembali ke Daftar Kunjungan" @click="handleClick" />
    </div>
    <EncounterPatientInfo v-if="isShowPatient" :data="data" />
  </div>
</template>
