<template>
  <v-app>
    <v-main>
      <v-simple-table>
        <template v-slot:default>
          <thead>
            <tr>
              <th class="text-left">ID</th>
              <th class="text-left">CreatedAt</th>
              <th class="text-left">UpdatedAt</th>
              <th class="text-left">DeletedAt</th>
              <th class="text-left">Ip</th>
              <th class="text-left">Url</th>
              <th class="text-left">Stream</th>
              <th class="text-left">APIModel</th>
              <th class="text-left">ResponseCode</th>
              <th class="text-left">duration</th>
              <th class="text-left">ResponseData</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in desserts" :key="index">
              <td>{{ item.ID }}</td>
              <td>{{ item.CreatedAt }}</td>
              <td>{{ item.UpdatedAt }}</td>
              <td>{{ item.DeletedAt }}</td>
              <td>{{ item.Ip }}</td>
              <td>{{ item.Url }}</td>
              <td>{{ item.Stream }}</td>
              <td>{{ item.APIModel }}</td>
              <td>{{ item.ResponseCode }}</td>
              <td>{{ item.duration }}</td>
              <td>{{ item.ResponseData }}</td>
            </tr>
          </tbody>
        </template>
      </v-simple-table>
      <div class="text-center">
        <v-pagination v-model="page" :length="length"></v-pagination>
      </div>
    </v-main>
  </v-app>
</template>

<script>
// TODO 调整
import axios from "axios";
export default {
  name: "App",

  components: {},

  data: () => ({
    page: 0,
    //每页大小，vuetify的pagination组件没找到修改这个的功能
    pageSize: 10,
    length: 0,
    desserts: [],
  }),
  watch: {
    page: function () {
      this.fetchData(); // 切换页数时，重新发送请求获取数据
    },
  },
  methods: {
    fetchData: function () {
      axios
        .get(
          `http://ai.frombyte.com:3002/requests/api?page=${this.page}&size=${this.pageSize}`
        )
        .then((response) => {
          this.desserts = response.data.data;
          this.length = response.data.pagination.totalPages;
          console.log(this.desserts, this.length);
        })
        .catch((error) => {
          console.error("Error fetching data:", error);
        });
    },
  },
  mounted() {
    // Use Axios to make a GET request to fetch data
    this.fetchData();
  },
};
</script>
