<script setup lang="ts">
import * as DE from '~/components/pub/my-ui/doc-entry';
import type { Encounter } from '~/models/encounter';

const props = defineProps<{
  data: Encounter
}>()

let address = ''
if (props.data.patient.person.addresses) {
  address = props.data.patient.person.addresses.map(a => a.address).join(', ')
}

let dpjp = '';
if (props.data.responsible_doctor) {
  const dp = props.data.responsible_doctor.employee.person
  dpjp = `${dp.frontTitle} ${dp.name} ${dp.endTitle}`
} else if (props.data.appointment_doctor) {
  dpjp = props.data.appointment_doctor.employee.person.name
}

</script>

<template>
  <div class="w-full rounded-md border bg-white dark:bg-neutral-950 p-4 shadow-sm">
    <!-- Data Pasien -->
    <h2 class="mb-2 md:text-base 2xl:text-lg font-semibold">{{ data.patient.person.name }} - {{ data.patient.number }}</h2>

    <div class="grid grid-cols-3" >
      <div>
        <DE.Block mode="preview" labelSize="large">
          <DE.Cell>
            <DE.Label class="font-semibold">No. RM</DE.Label>
            <DE.Field>
              {{ data.patient.person.birthDate?.substring(0, 10) }}
            </DE.Field>
          </DE.Cell>
          <DE.Cell>
            <DE.Label class="font-semibold">Jenis Kelamin</DE.Label>
            <DE.Field>
              {{ data.patient.person.gender_code }}
            </DE.Field>
          </DE.Cell>
          <DE.Cell>
            <DE.Label class="font-semibold">Alamat</DE.Label>
            <DE.Field>
              <div v-html="address"></div>
            </DE.Field>
          </DE.Cell>
        </DE.Block>
      </div>
      <div>
        <DE.Block mode="preview" labelSize="large">
          <DE.Cell>
            <DE.Label class="font-semibold">Tgl. Kunjungan</DE.Label>
            <DE.Field>
              {{ data.visitDate.substring(0, 10) }}
            </DE.Field>
          </DE.Cell>
          <DE.Cell>
            <DE.Label class="font-semibold">Klinik</DE.Label>
            <DE.Field>
              {{ data.unit?.name }}
            </DE.Field>
          </DE.Cell>
          <DE.Cell>
            <DE.Label class="font-semibold">DPJP</DE.Label>
            <DE.Field>
              {{ dpjp }}
            </DE.Field>
          </DE.Cell>
        </DE.Block>
      </div>
      <div>
        <DE.Block mode="preview" labelSize="large">
          <DE.Cell>
            <DE.Label position="dynamic" class="!text-base 2xl:!text-lg font-semibold">Billing</DE.Label>
            <DE.Field class="text-base 2xl:text-lg">
              Rp. 000.000
              <!-- {{ data }} -->
            </DE.Field>
          </DE.Cell>
        </DE.Block>
      </div>
    </div>
  </div>
</template>
