<template>
  <div>{{ documents }}</div>
  <div>
    <v-row >
      <v-col cols="6" md="4">
        <v-skeleton-loader
          class="mx-auto border"
          max-width="300"
          type="image, article"
        ></v-skeleton-loader>
      </v-col>

      <v-col cols="6" md="4">
        <v-skeleton-loader
          class="mx-auto border"
          max-width="300"
          type="image, article"
        ></v-skeleton-loader>
      </v-col>
      <v-col cols="6" md="4">
        <v-skeleton-loader
          class="mx-auto border"
          max-width="300"
          type="image, article"
        ></v-skeleton-loader>
      </v-col>
    </v-row>
  </div>
</template>

<script setup>
import { document } from "@/plugins/api";
import router from "@/router";
import { ref } from "vue";

const libraryId = router.currentRoute.value.params.LibraryId;
const page = ref(1);
const documents = ref([]);
const loading = ref(false);

function load() {
  loading.value = true;

  document
    .libraryLibraryIdDocumentsGet(libraryId, page.value)
    .then((r) => {
      documents.value = r.data;
    })
    .finally(() => {
      loading.value = false;
    });
}

load();
console.log(libraryId);
</script>
