<template>
  <div>
    <v-app>
      <v-app-bar>
        <v-app-bar-title>Hello</v-app-bar-title>
        <v-spacer />
        <v-btn @click="toggleTheme">
          <v-icon>ph:sun</v-icon>
          toggle thema</v-btn>
      </v-app-bar>
      <v-main>
        <v-container>
          <v-card title="List Surat Kontrol" flat>
            <template v-slot:text>
              <v-text-field v-model="search" label="Search" prepend-inner-icon="mdi-magnify" variant="outlined" hide-details single-line></v-text-field>
            </template>

            <v-data-table :headers="headers" :items="subspesialis" F :search="search"></v-data-table>
          </v-card>
        </v-container>
        <v-container>
          <v-card title="List Surat Kontrol" flat>
            <template v-slot:text>
              <v-text-field v-model="search" label="Search" prepend-inner-icon="mdi-magnify" variant="outlined" hide-details single-line></v-text-field>
            </template>

            <v-data-table :headers="headers" :items="surkon.list_data" F :search="search"></v-data-table>
          </v-card>
        </v-container>
      </v-main>
    </v-app>
  </div>
</template>
<script setup>

import { ref } from "vue";
import { useTheme } from "vuetify";
import { storeToRefs } from "pinia";

const theme = useTheme();

function toggleTheme () {
  theme.global.name.value = theme.global.current.value.dark ? 'light' : 'myTheme';
}

// const itemsPerPage= 5;
const search = ref("");
const headers = [
  {
    align: 'start',
    key: 'name',
    sortable: false,
  },
  { key: 'Nomor_surat_kontrol', title: 'Nomor surat kontrol' },
  { key: 'Nomor_sep', title: 'Nomor sep' },
  { key: 'Tanggal_cetak_surat_kontrol', title: 'Tanggal Entry' },
  { key: 'Tanggal_rencana_kontrol', title: 'Tanggal Rencana Kontrol' },
  { key: 'No_rm', title: 'Nomor Rekam Medik' },
  { key: 'NamaDokter', title: 'Nama Dokter' },
];
const payload = ref({
    no_rm: "",
    no_sep: "",
    poliklinik: "",
    tanggal_awal: "2024-10-16",
    tanggal_akhir: "2024-10-30",
    offset: "0",
    limit: "10",
  });
  const { subspesialis } = storeToRefs(useSubspesialisStore());
  const { loadSubspesialis } = useSubspesialisStore();

  const { surkon } = storeToRefs(useSubspesialisStorePost());
  const { loadSurKon } = useSubspesialisStorePost();
  // Call loadSurKon when the page loads
  onMounted(() => {
    loadSubspesialis();
    loadSurKon(payload);
  });
</script>
