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

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 data = {
  noRm: 'RM21123',
  nama: 'Ahmad Sutanto',
  alamat: 'Jl Jaksa Agung Suprapto No. 12, Jakarta',
  tanggalKunjungan: '23 April 2024',
  klinik: 'Bedah',
  tanggalLahir: '23 April 1990 (25 Tahun)',
  jenisKelamin: 'Laki-laki',
  jenisPembayaran: 'JKN',
  noBilling: '223332',
  dpjp: 'dr. Syaifullah, Sp.OT(K)',
}
</script>

<template>
  <div class="w-full">
    <div class="mb-4">
      <Button
        class="flex items-center gap-2 rounded-full border border-orange-400 bg-orange-50 px-3 py-1 text-sm font-medium text-orange-600 hover:bg-orange-100"
      >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
        </svg>
        Kembali ke Daftar Kunjungan
      </Button>
    </div>

    <AppEncounterQuickInfo :data="data" />

    <AppEncounterProcess :initial-active-tab="activeTab" @change-tab="activeTab = $event" />
  </div>
</template>
