<script setup lang="ts">
const props = defineProps<{
  preview: any
}>()
</script>

<template>
  <div class="p-1 text-sm">
    <div class="mb-4 flex gap-3">
      <span class="w-40 font-semibold">Jam Tanggal</span>
      <span>: {{ '-' }}</span>
    </div>

    <hr class="my-4" />

    <h2 class="mb-3 font-semibold">A. Data Subyektif</h2>

    <div class="space-y-3">
      <div class="flex">
        <span class="w-40 font-medium">Keluhan Pasien</span>
        <span>: {{ preview?.['pri-complain'] || '-' }}</span>
      </div>

      <div>
        <div class="flex">
          <span class="w-40 font-medium">Riwayat Alergi dan Reaksi</span>
          <span>:</span>
        </div>

        <div class="mt-1 space-y-1 pl-10">
          <div class="flex">
            <span class="w-28">a. Obat</span>
            <span>: {{ preview?.['med-type'] || '-' }}</span>
            <span class="ml-6 w-20">Sebutkan</span>
            <span>: {{ preview?.['med-name'] || '-' }}</span>
            <span class="ml-6 w-16">Reaksi</span>
            <span>: {{ preview?.['med-reaction'] || '-' }}</span>
          </div>

          <div class="flex">
            <span class="w-28">b. Makanan</span>
            <span>: {{ preview?.['food-type'] || '-' }}</span>
            <span class="ml-6 w-20">Sebutkan</span>
            <span>: {{ preview?.['food-name'] || '-' }}</span>
            <span class="ml-6 w-16">Reaksi</span>
            <span>: {{ preview?.['food-reaction'] || '-' }}</span>
          </div>

          <div class="flex">
            <span class="w-28">c. Lain-lain</span>
            <span>: {{ preview?.['other-type'] || '-' }}</span>
            <span class="ml-6 w-20">Sebutkan</span>
            <span>: {{ preview?.['other-name'] || '-' }}</span>
            <span class="ml-6 w-16">Reaksi</span>
            <span>: {{ preview?.['other-reaction'] || '-' }}</span>
          </div>
        </div>
      </div>

      <div class="flex">
        <span class="w-40 font-medium">Kajian Nyeri</span>
        <span>: {{ preview?.['pain-asst'] || '-' }}</span>
      </div>

      <div class="flex">
        <span class="w-40">Skala Nyeri</span>
        <span>: {{ preview?.['pain-scale'] || '-' }}</span>
      </div>
      <div class="flex">
        <span class="w-40">Waktu Nyeri</span>
        <span>: {{ preview?.['pain-time'] || '-' }}</span>
      </div>
      <div class="flex">
        <span class="w-40">Durasi Nyeri</span>
        <span>: {{ preview?.['pain-duration'] || '-' }}</span>
      </div>
      <div class="flex">
        <span class="w-40">Frekwensi Nyeri</span>
        <span>: {{ preview?.['pain-freq'] || '-' }}</span>
      </div>
      <div class="flex">
        <span class="w-40">Lokasi</span>
        <span>: {{ preview?.['pain-loc'] || '-' }}</span>
      </div>

      <div class="flex">
        <span class="w-40 font-medium">Skrining Nutrisi</span>
        <span>: {{ preview?.['nut-screening'] || '-' }}</span>
      </div>

      <div class="flex">
        <span class="w-40 font-medium">Kajian psiko-sosio-kultural-spiritual</span>
        <span>: {{ preview?.['spiritual-asst'] || '-' }}</span>
      </div>
    </div>

    <hr class="my-4" />

    <h2 class="mb-3 font-semibold">B. Data Obyektif</h2>

    <div class="space-y-3">
      <div class="flex">
        <span class="w-40 font-medium">Keadaan Umum</span>
        <span>: {{ preview?.['general-condition'] || '-' }}</span>
      </div>

      <div class="flex">
        <span class="w-40 font-medium">Pemeriksaan Penunjang</span>
        <span>: {{ preview?.['support-exam'] || '-' }}</span>
      </div>

      <div class="flex">
        <span class="w-40 font-medium">Risiko Jatuh</span>
        <span>: {{ preview?.['risk-fall'] || '-' }}</span>
      </div>

      <div class="flex">
        <span class="w-40 font-medium">Pemakaian Gelang Risiko Jatuh</span>
        <span>: {{ preview?.['bracelet'] || '-' }}</span>
      </div>

      <div class="flex">
        <span class="w-40 font-medium">Pasang Gelang Alergi</span>
        <span>: {{ preview?.['bracelet-alg'] || '-' }}</span>
      </div>
    </div>
  </div>
</template>
