<script>

definePageMeta({
  title: 'Data Pasien',
  icon: 'mdi-account-injury-outline',
  drawerIndex: 0,
})
const randomData = ref(generateRandomDataPasien(10));

const headers = [
  { text: 'No RM' },
  { text: 'Nama' },
  { text: 'tanggal Lahir' },
  { text: 'Alamat' },
  { text: 'No KTP' },
  { text: 'No JKN' },
  { text: 'Kelamin' },
  { text: 'Aksi' },
  // { text: 'Aksi' },
];


const searchQuery = ref('');
const filteredData = computed(() => {
  if (searchQuery.value.length >= 3) {
    return randomData.value.filter(item =>
      item.norm.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      item.no_ktp.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      item.nama.toLowerCase().includes(searchQuery.value.toLowerCase())
    );
  }
  return randomData.value;
});

console.log(randomData.value)
console.log(randomData.value.length)
</script>
<template>
  <v-container>
    <v-card>
      <div class="py-4 px-3">
        <div class="d-flex justify-space-between mb-6">
          <h5 class="text-h5 ">Kunjungan Pasien</h5>
          <div class="w-sm-25">
            <v-text-field label="Cari" v-model="searchField" variant="outlined" density="compact" type="text"
              hide-details color="primary"></v-text-field>
          </div>
        </div>
        <v-row>
          <div class="d-flex flex-wrap">
            <!-- <v-col v-for="item in filteredData" :key="item.id" cols="12" md="4">
              <v-lazy :min-height="200" :options="{ 'threshold': 1 }" transition="fade-transition">
                <v-card>
                  <template v-slot:append>
                    <h3>{{ item.norm }}</h3>
                  </template>

<template v-slot:prepend>
                    <v-avatar size="50" class="rounded-md bg-lightsecondary">
                      <Icon icon="solar:user-circle-broken" class="text-secondary" height="36" />
                    </v-avatar>
                  </template>

<template v-slot:title>
                    <h4>{{ capitalizeEachWord(item.nama) }}</h4>
                  </template>

<template v-slot:subtitle>
                    <p>{{ item.no_ktp }}</p>
                  </template>

<template v-slot:text>
                    <p>{{ capitalizeEachWord(item.alamat) }}</p>
                  </template>

<template v-slot:actions>
                    <div class="d-flex justify-end">
                      <v-btn color="primary" @click="editItem(item.norm)">Ubah</v-btn>
                      <v-btn color="error" @click="deleteItem(item.norm)">Hapus</v-btn>

                    </div>
                  </template>
</v-card>
</v-lazy>
</v-col> -->
            <div v-for="(data, i) in filteredData" :key="i">
              <p>s</p>

            </div>
            <v-card class="mx-4">
              <template v-slot:prepend>
                left
              </template>
              <template v-slot:append>
                right
              </template>
            </v-card>
            <v-card>
              <template v-slot:prepend>
                left
              </template>
              <template v-slot:append>
                right
              </template>
            </v-card>
          </div>
        </v-row>
      </div>
    </v-card>
  </v-container>
</template>
