<template>
  <div>{{ documents }}</div>
  <div v-if="loading">
    <v-row justify="center">
      <v-col cols="12" md="4" xl="2">
        <v-skeleton-loader
          class="mx-auto border mt-3"
          max-width="300"
          type="image, article"
        ></v-skeleton-loader>
        <v-skeleton-loader
          class="mx-auto border mt-3"
          max-width="300"
          type="image, article"
        ></v-skeleton-loader>
      </v-col>

      <v-col cols="12" md="4" xl="2">
        <v-skeleton-loader
          class="mx-auto border mt-3"
          max-width="300"
          type="image, article"
        ></v-skeleton-loader>
        <v-skeleton-loader
          class="mx-auto border mt-3"
          max-width="300"
          type="image, article"
        ></v-skeleton-loader>
      </v-col>
      <v-col cols="12" md="4" xl="2">
        <v-skeleton-loader
          class="mx-auto border mt-3"
          max-width="300"
          type="image, article"
        ></v-skeleton-loader>
        <v-skeleton-loader
          class="mx-auto border mt-3"
          max-width="300"
          type="image, article"
        ></v-skeleton-loader>
      </v-col>
      <v-col cols="12" md="4" xl="2">
        <v-skeleton-loader
          class="mx-auto border mt-3"
          max-width="300"
          type="image, article"
        ></v-skeleton-loader>
        <v-skeleton-loader
          class="mx-auto border mt-3"
          max-width="300"
          type="image, article"
        ></v-skeleton-loader>
      </v-col>
    </v-row>
  </div>
  <div v-if="documents.Total == 0">
    <v-alert text="看样子你还没有创建任何文档。"></v-alert>
  </div>

  <v-btn class="mt-3" @click="goto_create_document">创建</v-btn>

</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(page.value, libraryId)
    .then((r) => {
      documents.value = r.data;
    })
    .finally(() => {
      loading.value = false;
    });
}

load();
console.log(libraryId);


function goto_create_document() {
  router.push({
    name: "library.documents.create",
    params: {
      LibraryId: libraryId
    }
  })
}

</script>
