<script setup lang="ts">
import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
import Header from '~/components/pub/my-ui/nav-header/prep.vue'
import PrescriptionItemListEntry from '~/components/app/prescription-item/list-entry.vue'

const data = ref([])

const refSearchNav: RefSearchNav = {
  onClick: () => {
    // open filter modal
  },
  onInput: (_val: string) => {
    // filter patient list
  },
  onClear: () => {
    // clear url param
  },
}

const isLoading = reactive<DataTableLoader>({
  isTableLoading: false,
})

const recId = ref<number>(0)
const recAction = ref<string>('')
const recItem = ref<any>(null)

const headerPrep: HeaderPrep = {
  title: 'Resep Obat',
  icon: 'i-lucide-panel-bottom',
  addNav: {
    label: 'Tambah',
    onClick: () => navigateTo('/tools-equipment-src/equipment/add'),
  },
}

provide('rec_id', recId)
provide('rec_action', recAction)
provide('rec_item', recItem)
provide('table_data_loader', isLoading)

onMounted(() => {
  getMaterialList()
})

async function getMaterialList() {
  isLoading.dataListLoading = true

  // const resp = await xfetch('/api/v1/material')
  // if (resp.success) {
  //   data.value = (resp.body as Record<string, any>).data
  // }

  isLoading.dataListLoading = false
}
</script>

<template>
  <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
  <AppPrescriptionList v-if="!isLoading.dataListLoading" />
  <AppPrescriptionEntry />
  <PrescriptionItemListEntry :data=[] />
  <div>
    <Button>
      Tambah
    </Button>
  </div>
</template>
