import axios from 'axios'
import { usePagination } from 'vue-request'
import { computed } from 'vue'

function queryAPI(params: { page?: number; limit?: number }) {
  return axios.get('https://REDACTED/@packages/getAll', { // https://REDACTED/@packages/getAll?page=1&limit=10
    params,
  })
}

const { data, current, totalPage, loading, pageSize } = usePagination(queryAPI, {
  pagination: {
    currentKey: 'page',
    pageSizeKey: 'limit',
    totalKey: 'data.all_packages.rowCount',
  },
})

const packages = computed(() => data.value?.data.all_packages || [])
</script>

<template>
  <!-- <pre>{{ current }}</pre> -->
  <pre :show="loading">Loading Status: {{ loading }}</pre>

  <div class="container mx-auto grid md:grid-cols-3 gap-3">
    <ul v-for="entry in packages" :key="entry.id">
      <div class="alert shadow-2xl border-x-4 border-info h-auto w-screen md:w-full flex flex-row items-center justify-start">
        <div class="avatar">
          <div class="w-16 rounded-full ring ring-info ring-offset-base-100 ring-offset-4">
            <img :src="entry.icon_path" loading="lazy">
          </div>
        </div>
        <div class="flex flex-col justify-start items-start pl-2 text-left grow">
          <span class="font-bold underline underline-offset-4">{{ entry.name }}</span>
          <span class="text-sm text-ellipsis overflow-hidden">{{ entry.control_desc }}</span>
          <span class="text-sm">Section: <span class="font-bold">{{ entry.section }}</span></span>
          <span class="text-sm">Version: <span class="font-bold">{{ entry.version }}</span></span>
        </div>
      </div>
    </ul>
  </div>
</template>