<script setup lang="ts">
import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
import { type Variants, Badge } from '~/components/pub/ui/badge'
import { cn, } from '~/lib/utils'
import type { ControlLetter } from '~/models/control-letter'
import * as DE from '~/components/pub/my-ui/doc-entry'

// #region Props & Emits
const props = defineProps<{
  instance: ControlLetter | null
}>()

const emit = defineEmits<{
  (e: 'click'): void
}>()

const dummy = [
  {
    id: 1,
    number: 1,
    name: 'Operasi',
    code: 'OP-001'
  }
]

// #endregion

// #region State & Computed
// #endregion

// Computed addresses from nested data
// #endregion

// #region Lifecycle Hooks
// #endregion

// #region Functions

// #endregion region

// #region Utilities & event handlers
function onClick() {
  emit('click')
}
// #endregion

// #region Watchers
// #endregion
</script>

<template>
  <article :class="cn('space-y-10',)">
    <div :class="cn('space-y-2',)">
      <h1>Dibuat oleh {{ `Dr. Agus` }} pada {{ `11 Agustus 2025, 20.00` }}</h1>
      <DetailRow label="Tanggal Laporan">{{ props.instance?.date ? new
        Date(props.instance?.date).toLocaleDateString('id-ID') : '-' }}</DetailRow>
    </div>
    <div :class="cn('space-y-2',)">
      <h1 class="font-semibold text-lg">Tim Pelaksanaan Operasi</h1>
      <DetailRow label="DPJP Bedah">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
      <DetailRow label="Operator">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
      <DetailRow label="Asisten Operator">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
      <DetailRow label="Instrumentir">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
      <DetailRow label="DPJP Anastesi">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
      <DetailRow label="Perawat Anastesi">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
      <DetailRow label="Tanggal Pembedahan">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
      <DetailRow label="Diagnosa Pra Bedah">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
      <DetailRow label="Perawat Pasca Bedah">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
    </div>

    <div :class="cn('space-y-2',)">
      <h1 class="font-semibold text-lg">Tindakan Operatif / Non Operatif Lain</h1>
      <div class="border border-gray-200 rounded-lg overflow-hidden">
        <Table>
          <TableHeader class="bg-gray-100">
            <TableRow>
              <TableHead class="w-14">No</TableHead>
              <TableHead class="">Prosedur</TableHead>
              <TableHead class="">Code</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            <TableRow v-for="(field, idx) in dummy" :key="idx">
              <TableCell class="">{{ idx + 1 }}</TableCell>
              <TableCell class="">{{ field.name }}</TableCell>
              <TableCell class="">{{ field.code }}</TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </div>
    </div>
    
    <div :class="cn('space-y-2',)">
      <h1 class="font-semibold text-lg">Data Pelaksanaan Operasi</h1>
      <DE.Block :col-count="2" :cell-flex="false">
        <div>
          <DetailRow label="Jenis Operasi">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
          <DetailRow label="Kode Biling">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
          <DetailRow label="Sitem Operasi">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
          <DetailRow label="Operasi Mulai">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
          <DetailRow label="Operasi Selesai">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
          <DetailRow label="Lama Operasi"><b>{{ 1 }}</b> Jam <b>{{ 1 }}</b> Menit</DetailRow>
          <DetailRow label="Pembiusan Mulai">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
          <DetailRow label="Pembiusan Selesai">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
          <DetailRow label="Lama Pembiusan"><b>{{ 1 }}</b> Jam <b>{{ 1 }}</b> Menit</DetailRow>
        </div>
        <div>
          <DetailRow label="Jenis Pembedahan">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
          <DetailRow label="Operasi ke">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
          <DetailRow label="Keterangan Lahir">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
          <DetailRow label="Ket Tempat Lahir">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
          <DetailRow label="Berat Badan">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
          <DetailRow label="Ket Saat Lahir">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
          <DetailRow label="Uraian Operasi">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
          <DetailRow label="Jumlah Pendarahan">{{ props.instance?.date ? props.instance?.date : '-' }} CC</DetailRow>
        </div>
        <div>
          <DetailRow label="PRC">{{ props.instance?.date ? props.instance?.date : '-' }} CC</DetailRow>
          <DetailRow label="FPP">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
          <DetailRow label="WB">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
          <DetailRow label="TC">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
          <DetailRow label="Merk">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
          <DetailRow label="Nama Implant">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
          <DetailRow label="Stiker/Nomor Register Implant">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
          <DetailRow label="Nama Pendamping Implant">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
        </div>
        <div>
          <DetailRow label-class="w-96" label="Specimen/Jaringan dikirim ke">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
          <DetailRow label="Keterangan Jaringan">
            <Badge :variant="`outline`">
              {{ `Example` }}
            </Badge>
          </DetailRow>
        </div>
      </DE.Block>
    </div>

    <div class="border-t-1 my-2 flex justify-end border-t-slate-300 py-2">
      <PubMyUiNavFooterBa @click="onClick" />
    </div>
  </article>
</template>

<style scoped></style>
