<script setup lang="ts">
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
import type { Prescription } from '~/models/prescription'

import * as DE from '~/components/pub/my-ui/doc-entry';
import PrescriptionItemList from '~/components/app/prescription-item/list-entry.vue';

interface Props {
  data: Prescription[]
  isLoading: boolean
  paginationMeta?: PaginationMeta
}

defineProps<Props>()
</script>

<template>
  <div v-if="isLoading" class="p-10 text-center">
    Memuat data..
  </div>
  <div v-else-if="data && data.length == 0" class="p-10 text-center">
    <div class="mb-4 xl:mb-5">Belum Ada Data</div>
    <!-- <div>
      <Button>
        <Icon name="i-lucide-plus" class="me-2 align-middle" />
        Tambah Order
      </Button>
    </div> -->
  </div>
  <div v-else v-for="(item, idx) in data">
    <Separator class="my-5" />
    <div class="md:grid md:grid-cols-2 font-semibold">
      <div>
        <DE.Block mode="preview">
          <DE.Cell>
            <DE.Label>Order #{{ data.length - idx }}</DE.Label>
            <DE.Field>
              2025-01-01
            </DE.Field>
          </DE.Cell>
          <DE.Cell>
            <DE.Label>Status</DE.Label>
            <DE.Field>
                {{ item.status_code }}
            </DE.Field>
          </DE.Cell>
        </DE.Block>
      </div>
      <div>
        <DE.Block mode="preview">
          <DE.Cell>
            <DE.Label>DPJP</DE.Label>
            <DE.Field>
                {{ item.doctor?.employee?.person.name }} 
            </DE.Field>
          </DE.Cell>
          <DE.Cell>
            <DE.Label>PPDS</DE.Label>
            <DE.Field>
                {{ item.specialistIntern?.person.name }}
            </DE.Field>
          </DE.Cell>
        </DE.Block>
      </div>
    </div>
    <PrescriptionItemList :data="item.items || []" />
  </div>
</template>


<!-- <Separator class="my-4 xl:my-5" />
<AppPrescriptionEntry />
<div class="flex content-center mb-3">
  <div class="me-auto pt-2">
    <div class="font-semibold md:text-sm xl:text-base">Daftar Obat</div>
  </div>
  <div>
    <Button @click="addMedicine" class="me-2">
      <Icon name="i-lucide-plus" />
      Tambah Non Racikan
    </Button>
    <Button @click="addMedicineMix">
      <Icon name="i-lucide-plus" />
      Tambah Racikan
    </Button>
  </div>
</div>
<PrescriptionItemListEntry :data=[] /> -->
