<template>
    <div>
      <v-app>
         <v-main>
          <v-container>
            <v-card title="List Kunjungan Pasien" flat>
              <template v-slot:text>
                <v-row>
                  <v-col>
                    <div class="border-thin">
                      <VForm 
                      @submit.prevent="get_data">
                      <v-container >
                        <v-row>
                          <v-col cols="12" md="6">
                            <v-text-field
                            v-model="reqtanggalkunjungan.tanggalawal"
                            label="Tanggal Awal"
                            type="date"
                            ></v-text-field>
                          </v-col>
                          <v-col cols="12" md="6">
                            <v-text-field
                            v-model="reqtanggalkunjungan.tanggalakhir"
                            label="Tanggal Akhir"
                            type="date"
                            ></v-text-field>
                          </v-col>
                        </v-row>
                        <v-row>
                          
                        </v-row>
                        <VBtn class="mb-5"
                        variant="tonal"
                        type="submit">
                        C A R I
                      </VBtn>
        
                    </v-container>
                  </VForm>
                </div>
              </v-col>
            </v-row>
            <v-row>
              <v-text-field v-model="search" label="Search" prepend-inner-icon="mdi-magnify" variant="outlined" hide-details single-line class="rounded elevation-1"></v-text-field>
            </v-row>
              <!-- </template>
              <template> -->
              </template>
              <v-data-table :headers="headers"  :items="dataKunjunganPasien" :search="search" hide-default-header>

                <template v-slot:body="{items}">
                    <tr>
                        <th>Tanggal Masuk</th>
                        <th>Jam Masuk</th>
                        <th>No Rm</th>
                        <th>Nama</th>
                        <th>Umur</th>
                        <th>Jenis Kelamin</th>
                        <th> Ruang </th>
                        <th> DPJP </th>
                    </tr>

                     <tr v-for="(item,index) in items" :key="index">
                        <td v-if="index===0 || item.tanggalmasukkunjungan !== items[index-1].tanggalmasukkunjungan"> {{ item.tanggalmasukkunjungan }} </td>
                        <td v-else></td>
                        <td>{{ item.jammasukkunjungan }}</td>
                        <td>{{ item.nomr }}</td>
                        <td>{{ item.namalengkap }}</td>
                        <td>{{ item.umur }} Tahun</td>
                        <td>{{ item.jeniskelamin }}</td>
                        <td> {{ item.namaruang }} </td>
                        <td>{{ item.namalengkapdokter }}</td>
                     </tr>
                </template>


              </v-data-table>
            </v-card>
          </v-container>
        </v-main>
      </v-app>
            </div>
          
            
</template>
<script setup>

const search = ref("");
  const today = new Date();
  const date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
  console.log("DATE : ", date)
  const headers = [
  {
    align: 'start',
    key: 'name',
    sortable: false,
  },
  { key: 'tanggalmasukkunjungan', title: 'Tanggal Masuk' },
  { key: 'jammasukkunjungan', title: 'Jam Masuk' },
  { key: 'nomr', title: 'Nomer Rekam Medik' },
  { key: 'namalengkap', title: 'Nama' },
  { key: 'umur', title: 'Umur' },
  { key: 'jeniskelamin', title: 'Jenis Kelamin' },
  { key: 'namaruang', title: 'Ruang' },
  { key: 'namalengkapdokter', title: 'Dpjp' },
];
    const reqtanggalkunjungan = reactive({
      tanggalawal : "2024-12-16",
      tanggalakhir : date, 
    })
    const { dataKunjunganPasien } = storeToRefs(useDataKunjunganPasien());
    const { loadDataKunjunganPasien } = useDataKunjunganPasien();
    
    const get_data = async() => {
      
      loadDataKunjunganPasien(reqtanggalkunjungan);
      console.log("DATA", dataKunjunganPasien)
    }

    onMounted(() => {
  
      loadDataKunjunganPasien(reqtanggalkunjungan);
      ("DATA", dataKunjunganPasien)
  });

  


</script>
