<template>
  <q-table
    ref="table"
    flat
    bordered
    class="custom-header-table"
    v-bind="attrs"
    virtual-scroll
    :virtual-scroll-sticky-size-start="48"
    dense
    :pagination-label="paginationLabel"
    v-model:pagination="pagination"
    :rows-per-page-options="[10, 25, 50, 100]"
  >
    <template v-slot:pagination="scope">
      ทั้งหมด {{ attrs.rows.length }} รายการ
      <q-pagination
        v-model="pagination.page"
        active-color="primary"
        color="dark"
        :max="scope.pagesNumber"
        :max-pages="5"
        size="sm"
        boundary-links
        direction-links
      ></q-pagination>
    </template>

    <template v-for="(_, slot) in slots" v-slot:[slot]="scope">
      <slot :name="slot" v-bind="scope || {}" />
    </template>
  </q-table>
</template>
<script setup lang="ts">
import { ref, useAttrs, useSlots } from "vue";
const attrs = ref<any>(useAttrs());
const slots = ref<any>(useSlots());

const props = defineProps({
  paging: {
    type: Boolean,
    defualt: false,
  },
});

const pagination = ref({
  sortBy: "desc",
  descending: false,
  page: 1,
  rowsPerPage: 10,
});

const paginationLabel = (start: string, end: string, total: string) => {
  if (props.paging == true)
    return " " + start + " ถึง " + end + " จากจำนวน " + total + " รายการ";
  else return start + "-" + end + " ใน " + total;
};
</script>

<style lang="scss">
.icon-color {
  color: #4154b3;
}
.custom-header-table {
  height: auto;
  .q-table tr:nth-child(odd) td {
    background: white;
  }
  .q-table tr:nth-child(even) td {
    background: #f8f8f8;
  }

  .q-table thead tr {
    background: #ecebeb;
  }

  .q-table thead tr th {
    position: sticky;
    z-index: 1;
  }
  /* this will be the loading indicator */
  .q-table thead tr:last-child th {
    /* height of all previous header rows */
    top: 48px;
  }
  .q-table thead tr:first-child th {
    top: 0;
  }
}
</style>
