<script setup lang="ts">
import * as DE from '~/components/pub/my-ui/doc-entry';
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 { McuOrder } from '~/models/mcu-order';
import McuOrderItems from '~/components/app/mcu-order-item/list.vue';

interface Props {
  data: McuOrder[]
  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: McuOrder): 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>
  <template v-for="item, idx in data">
    <div :class="'text-sm 2xl:text-base font-semibold ' + (item.status_code == 'new' ? 'mb-2' : 'mb-2')">
      Order #{{ data.length - idx }} - {{ item.createdAt?.substring(0, 10) }} - {{ item.status_code }}
    </div>
    <DE.Block mode="preview" :col-count=7 class="!mb-3">
      <DE.Cell :col-span="3">
        <DE.Label :class="'font-semibold ' + (item.status_code == 'new' ? 'pt-2' : '')">DPJP</DE.Label>
        <DE.Field :class="item.status_code == 'new' ? 'pt-2' : ''">
          {{ item.doctor?.employee?.person?.name || '........' }}
        </DE.Field>
      </DE.Cell>
      <DE.Cell :col-span="3">
        <DE.Label :class="'font-semibold ' + (item.status_code == 'new' ? 'pt-2' : '')">PPDS</DE.Label>
        <DE.Field :class="item.status_code == 'new' ? 'pt-2' : ''">
          ...........
        </DE.Field>
      </DE.Cell>
      <div class="flex justify-end" >
        <Nav
          v-if="item.status_code == 'new'"
          :small-mode="true"
          :default-class="'flex gap-1'"
          @click="(type) => { navClick(type, item) }"
        />
      </div>
    </DE.Block>
    <McuOrderItems :data="item.items || []" @click="console.log('click')" class="!mb-5" />
  </template>
</template>
