<script setup lang="ts">
import Dialog from '~/components/pub/my-ui/modal/dialog.vue'

const props = defineProps<{
  id: number
  formType: string
}>()

const isOpen = ref(false)
const data = ref([])
const isLoading = reactive<DataTableLoader>({
  isTableLoading: false,
})

async function getPatientList() {
  isLoading.isTableLoading = true
  const resp = await xfetch('/api/v1/patient')
  if (resp.success) {
    data.value = (resp.body as Record<string, any>).data
  }
  isLoading.isTableLoading = false
}

onMounted(() => {
  getPatientList()
})

function onClick(e: 'search' | 'add') {
  console.log('click', e)
  if (e === 'search') {
    isOpen.value = true
  } else if (e === 'add') {
    navigateTo('/client/patient/add')
  }
}

provide('table_data_loader', isLoading)
</script>

<template>
  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
    <Icon name="i-lucide-user" class="me-2" />
    <span class="font-semibold">{{ props.formType }}</span> Kunjungan
  </div>
  <AppEncounterEntryForm @click="onClick" />
  <AppSepSmallEntry v-if="props.id" />

  <Dialog v-model:open="isOpen" title="Cari Pasien" size="xl" prevent-outside>
    <AppPatientPicker :data="data" />
  </Dialog>
</template>
