<script setup lang="ts">
import type { DataTableLoader } from '~/components/pub/base/data-table/type'
import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
import Header from '~/components/pub/custom-ui/nav-header/prep.vue'

interface SepData {
  tgl_sep: string
  no_sep: string
  pelayanan: string
  jalur: string
  no_rm: string
  nama_pasien: string
  no_kartu_bpjs: string
  no_surat_kontrol: string
  tgl_surat_kontrol: string
  klinik_tujuan: string
  dpjp: string
  diagnosis_awal: string
}

const data = ref<SepData[]>([])

// contoh data dummy
const rows = [
  {
    tgl_sep: '12 Agustus 2025',
    no_sep: 'SP23311224',
    pelayanan: 'Rawat Jalan',
    jalur: 'Kontrol',
    no_rm: 'RM23311224',
    nama_pasien: 'Ahmad Baidowi',
    no_kartu_bpjs: '334423231214',
    no_surat_kontrol: 'SK22334442',
    tgl_surat_kontrol: '13 Agustus 2024',
    klinik_tujuan: 'Penyakit dalam',
    dpjp: 'dr. Andi Prasetyo, Sp.PD-KHOM',
    diagnosis_awal: 'C34.9 - Karsinoma Paru',
  },
  {
    tgl_sep: '12 Agustus 2025',
    no_sep: 'SP23311224',
    pelayanan: 'Rawat Jalan',
    jalur: 'Kontrol',
    no_rm: 'RM001234',
    nama_pasien: 'Kenzie',
    no_kartu_bpjs: '12301234',
    no_surat_kontrol: '123456',
    tgl_surat_kontrol: '10 Agustus 2024',
    klinik_tujuan: 'Penyakit dalam',
    dpjp: 'Dr. Andreas Sutaji',
    diagnosis_awal: 'Bronchitis',
  },
  {
    tgl_sep: '11 Agustus 2025',
    no_sep: 'SP23455667',
    pelayanan: 'Rawat Jalan',
    jalur: 'Kontrol',
    no_rm: 'RM001009',
    nama_pasien: 'Abraham Sulaiman',
    no_kartu_bpjs: '334235',
    no_surat_kontrol: '123334',
    tgl_surat_kontrol: '11 Agustus 2024',
    klinik_tujuan: 'Penyakit dalam',
    dpjp: 'Dr. Andreas Sutaji',
    diagnosis_awal: 'Paru-paru basah',
  },
]

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: 'Daftar SEP Prosedur',
  icon: 'i-lucide-panel-bottom',
  addNav: {
    label: 'Tambah',
    onClick: () => {},
  },
}

async function getSepList() {
  isLoading.dataListLoading = true
  data.value = [...rows];
  isLoading.dataListLoading = false
}

onMounted(() => {
  getSepList()
})

provide('rec_id', recId)
provide('rec_action', recAction)
provide('rec_item', recItem)
provide('table_data_loader', isLoading)
</script>

<template>
  <div class="rounded-md border p-4">
    <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
    <div class="rounded-md border p-4">
      <AppSepList v-if="!isLoading.dataListLoading" :data="data" />
    </div>
  </div>
</template>
