<script lang="ts" setup>
// Components
import { LucidePen } from 'lucide-vue-next';
import * as DE from '~/components/pub/my-ui/doc-entry'
import Input from '~/components/pub/ui/input/Input.vue';
import type { Encounter } from '~/models/encounter'

interface Props {
  encounter: Encounter
  canUpdate?: boolean
  isLoading?: boolean
}
const props = defineProps<Props>()
const doctor = computed(() => {
  return props.encounter.responsible_doctor?.employee?.person?.name ?? '-belum dipilih-'
})
const adm = ref('-belum dipilih-')

const emit = defineEmits<{
  edit: []
}>()
</script>

<template>
  <DE.Block :cell-flex="false">
    <DE.Cell>
      <DE.Label class="font-semibold">Waktu Masuk</DE.Label>
      <DE.Field>
        <div class="py-2 border-b border-b-slate-300">{{ encounter?.registeredAt?.substring(0, 15).replace('T', ' ') || '-' }}</div>
      </DE.Field>
    </DE.Cell>
    <DE.Cell>
      <DE.Label class="font-semibold">PJ Berkas</DE.Label>
      <DE.Field>
        <div class="py-2 border-b border-b-slate-300">{{ encounter.adm_employee?.person?.name || '-' }}</div>
      </DE.Field>
    </DE.Cell>
    <DE.Cell>
      <DE.Label class="font-semibold">Perawat</DE.Label>
      <DE.Field>
        <div class="py-2 border-b border-b-slate-300">{{ encounter.responsible_nurse?.employee?.person?.name || '-' }}</div>
      </DE.Field>
    </DE.Cell>
    <DE.Cell>
      <DE.Label class="font-semibold">Dokter</DE.Label>
      <DE.Field>
        <div class="py-2 border-b border-b-slate-300">{{ doctor }}</div>
      </DE.Field>
    </DE.Cell>
  </DE.Block>
  <div v-if="canUpdate" class="text-center">
    <Button @click="() => emit('edit')">
      <LucidePen />
      Edit
    </Button>
  </div>
</template>

<style>

</style>
