<template>
    <div>
      <v-app>
         <v-main>
          <v-container>
            <v-card title="List Kunjungan Pasien" elevation="2" flat class="mx-auto my-8">
              <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="2">
                            <v-text-field
                            v-model="reqtanggalkunjungan.tanggalawal"
                            label="Tanggal Awal"
                            type="date"
                            ></v-text-field>
                          </v-col>
                          <v-col cols="12" md="2">
                        
                              <VueDatePicker v-model="reqtanggalkunjungan.tanggalakhir"  :enable-time-picker="false"  label="Tanggal Akhir"/>
                            
                          </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" width="500px"></v-text-field>
            </v-row>
              </template>
              <v-data-table 
              :headers="headers" 
              :items="dataKunjunganPasien" 
              :search="search">
              </v-data-table>
            </v-card>
          </v-container>
        </v-main>
      </v-app>
            </div>
          
            
</template>
<script setup>
import VueDatePicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css'

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-17",
      tanggalakhir : date, 
    })
    
    
    const { dataKunjunganPasien } = storeToRefs(useDataKunjunganPasien());
    const { loadDataKunjunganPasien } = useDataKunjunganPasien();
    
    const get_data = async() => {
      console.log(reqtanggalkunjungan)
      loadDataKunjunganPasien(reqtanggalkunjungan);
      console.log("DATA", dataKunjunganPasien)
   
    }

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

  


</script>
