<script setup lang="ts">
import * as Table from '~/components/pub/ui/table'
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
import Nav from '~/components/pub/my-ui/nav-footer/ca-ed-su.vue'

import type { Prescription } from '~/models/prescription';

interface Props {
  data: Prescription[]
  paginationMeta: PaginationMeta
}
const props = defineProps<Props>()

const emit = defineEmits<{
  cancel: [data: any]
  edit: [data: any],
  submit: [data: any]
}>()

function navClick(type: 'cancel' | 'edit' | 'submit', data: Prescription): void {
  if (type === 'cancel') {
    emit('cancel', data)
  } else if (type === 'edit') {
    emit('edit', data)
  } else if (type === 'submit') {
    emit('submit', data)
  }
}
</script>

<template>
  <div v-if="data.length == 0" class="p-10 text-center">
    <div class="mb-4 xl:mb-5">Belum Ada Data</div>
  </div>
  <Table.Table>
    <Table.TableHeader>
      <Table.TableRow>
        <Table.TableHead class="w-28">Tgl Order</Table.TableHead>
        <Table.TableHead>DPJP</Table.TableHead>
        <Table.TableHead>PPDS</Table.TableHead>
        <Table.TableHead>Jenis Obat</Table.TableHead>
        <Table.TableHead class="text-center">Status</Table.TableHead>
        <Table.TableHead class="w-20"></Table.TableHead>
      </Table.TableRow>
    </Table.TableHeader>
    <Table.TableBody>
      <Table.TableRow v-for="item, idx in data">
        <Table.TableCell>
          {{ item.issuedAt?.substring(0, 10) || item.createdAt?.substring(0, 10) }}
        </Table.TableCell>
        <Table.TableCell>
          {{ item.doctor?.employee?.person?.name || '-' }}
        </Table.TableCell>
        <Table.TableCell>
        </Table.TableCell>
        <Table.TableCell>
          <div>
            Racikan: {{ item.items.filter(function(element){ return element.isMix}).length }}
          </div>
          <div>
            Non Racikan: {{ item.items.filter(function(element){ return !element.isMix}).length }}
          </div>
        </Table.TableCell>
        <Table.TableCell class="text-center">
          {{ item.status_code }}
        </Table.TableCell>
        <Table.TableCell class="text-end">
          <Nav
            v-if="item.status_code == 'new'"
            :small-mode="true"
            :default-class="'flex gap-1'"
            @click="(type) => { navClick(type, item) }"
          />
        </Table.TableCell>
      </Table.TableRow>
    </Table.TableBody>
  </Table.Table>
  <template v-for="item, idx in data">
  </template>
</template>
