<template>
    <div>
      <v-app>
         <v-main>
          <v-container>
            <v-card title="List Surat Kontrol" 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="reqDataLogAPI.Tanggal_awal"
                            label="Tanggal Awal"
                            type="date"
                            ></v-text-field>
                          </v-col>
                          <v-col cols="12" md="6">
                            <v-text-field
                            v-model="reqDataLogAPI.Tanggal_akhir"
                            label="Tanggal Akhir"
                            type="date"
                            ></v-text-field>
                          </v-col>
                        </v-row>
                        <v-row>
                          <v-col cols="12" md="6">
                            <v-autocomplete
                            v-model="reqDataLogAPI.Tipe_rawat"
                            label="Tipe Rawat"
                            :items="['RI', 'RJ']"
                            dense
                            />
                          </v-col>
                        </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="dataLogAPI" 
              :search="search">
              </v-data-table>
            </v-card>
          </v-container>
        </v-main>
      </v-app>
    </div>
  </template>
  <script setup>
  import { ref, reactive } from "vue";
  import { useTheme } from "vuetify";
  import { storeToRefs } from "pinia";
  import Swal from 'sweetalert2'
  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: 'date_created', title: 'Tanggal terbuat' },
    { key: 'User_agent', title: 'Dokter' },
    { key: 'URL', title: 'URL' },
    { key: 'IP', title: 'IP' },
    { key: 'Method', title: 'Method' },
    { key: 'Request_string', title: 'Request' },
    { key: 'Respon_string', title: 'Respon' },
    { key: 'Comment', title: 'Comment' },
  ];
    const reqDataLogAPI = reactive({
      Tipe_rawat : "RI",
      Tanggal_awal : date,
      Tanggal_akhir : date, 
    })
    const { dataLogAPI } = storeToRefs(useDataLogAPIGet());
    const { loadDataLogAPI } = useDataLogAPIGet();
    
    const get_data = async() => {
      console.log(reqDataLogAPI.Tanggal_awal)
      console.log(reqDataLogAPI.Tanggal_akhir)
      console.log("REQ",reqDataLogAPI)
      loadDataLogAPI(reqDataLogAPI);
      JSON.stringify(dataLogAPI.Request)
      JSON.stringify(dataLogAPI.Respon)
      console.log("DATA", dataLogAPI)
    }
  </script>