<template>
  <h1>蜘蛛</h1>
  <p>蜘蛛将不定期的查询网页。</p>

  <v-card class="mt-3">
    <v-list>
      <v-list-item
        v-for="item in spiders.Spiders"
        :key="item.Id"
      >


        <template v-slot:append="{ isActive }">
          <v-list-item-action end>
            <v-btn rounded="xl" @click.stop="console.log(isActive)">
              <v-icon>mdi-check</v-icon>
            </v-btn>
          </v-list-item-action>
        </template>

        <v-list-item-title>{{ item.Name }}</v-list-item-title>
      </v-list-item>
    </v-list>
  </v-card>

  <div class="text-center">
    <v-container>
      <v-row justify="center">
        <v-col cols="8">
          <v-container class="max-width">
            <v-pagination
              v-model="page"
              class="my-4"
              :length="spiders.Total"
              :disabled="loading"
              @update:model-value="load"
            ></v-pagination>
          </v-container>
        </v-col>
      </v-row>
    </v-container>
  </div>

</template>

<script setup>
import {theSpiderApi} from "@/plugins/api";



const page = ref(1);
const spiders = ref({});
const loading = ref(false);

const load = () => {


  theSpiderApi
    .apiSpidersGet({
      params: {
        page: page.value,
      },
    })
    .then((r) => {
      spiders.value = r.data;
      page.value = r.data.Page;
      console.log(r.data.spider);
    })
    .finally(() => {
      loading.value = false;

    });
};

load()

</script>
