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

import { getDetail } from '~/services/encounter.service'

import type { Encounter } from '~/models/encounter'

// Components
import CompTab from '~/components/pub/my-ui/comp-tab/comp-tab.vue'
import type { TabItem } from '~/components/pub/my-ui/comp-tab/type'

import Status from '~/components/app/encounter/status.vue'
import AssesmentFunctionList from '~/components/content/assesment-function/list.vue'
import EarlyMedicalAssesmentList from '~/components/content/soapi/entry.vue'
// import AssesmentFunctionList from '~/components/content/assesment-function/list.vue'
import PrescriptionList from '~/components/content/prescription/list.vue'
import EarlyMedicalRehabList from '~/components/content/soapi/entry.vue'
import Consultation from '~/components/content/consultation/list.vue'

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

// activeTab selalu sinkron dengan query param
const activeTab = computed({
  get: () => (route.query?.tab && typeof route.query.tab === 'string' ? route.query.tab : 'status'),
  set: (val: string) => {
    router.replace({ path: route.path, query: { tab: val } })
  },
})

const id = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
const dataRes = await getDetail(id, { includes: 'patient,patient-person,patient-person-addresses,unit,Appointment_Doctor,Appointment_Doctor-employee,Appointment_Doctor-employee-person'})
const dataResBody = dataRes.body ?? null
const data = dataResBody?.data ?? null

const tabs: TabItem[] = [
  { value: 'status', label: 'Status Masuk/Keluar', component: Status, props: { encounter: data } },
  { value: 'early-medical-assessment', label: 'Pengkajian Awal Medis', component: EarlyMedicalAssesmentList },
  {
    value: 'rehab-medical-assessment',
    label: 'Pengkajian Awal Medis Rehabilitasi Medis',
    component: EarlyMedicalRehabList,
  },
  { value: 'function-assessment', label: 'Asesmen Fungsi', component: AssesmentFunctionList },
  { value: 'therapy-protocol', label: 'Protokol Terapi' },
  { value: 'education-assessment', label: 'Asesmen Kebutuhan Edukasi' },
  { value: 'consent', label: 'General Consent' },
  { value: 'patient-note', label: 'CPRJ' },
  { value: 'prescription', label: 'Order Obat', component: PrescriptionList },
  { value: 'device', label: 'Order Alkes' },
  { value: 'mcu-radiology', label: 'Order Radiologi' },
  { value: 'mcu-lab-pc', label: 'Order Lab PK' },
  { value: 'mcu-lab-micro', label: 'Order Lab Mikro' },
  { value: 'mcu-lab-pa', label: 'Order Lab PA' },
  { value: 'medical-action', label: 'Order Ruang Tindakan' },
  { value: 'mcu-result', label: 'Hasil Penunjang' },
  { value: 'consultation', label: 'Konsultasi', component: Consultation, props: { encounter: data } },
  { value: 'resume', label: 'Resume' },
  { value: 'control', label: 'Surat Kontrol' },
  { value: 'screening', label: 'Skrinning MPP' },
  { value: 'supporting-document', label: 'Upload Dokumen Pendukung' },
]
</script>

<template>
  <div class="w-full">
    <div class="mb-4">
      <PubMyUiNavContentBa label="Kembali ke Daftar Kunjungan" />
    </div>
    <AppEncounterQuickInfo :data="data" />
    <CompTab
      :data="tabs"
      :initial-active-tab="activeTab"
      @change-tab="activeTab = $event"
    />
  </div>
</template>
