<script setup lang="ts">
import { ref } from 'vue'

/** importType*/
import type { QTableProps } from 'quasar'

const columns = defineModel<QTableProps['columns']>('columns', {
  required: true,
})

const rows = ref<Array<{ id: string; name: string }>>([
  {
    id: '',
    name: '',
  },
])

/** ตัวอย่างการใช้งาน */
/// <SkeletonTable v-if="isLoading" :columns="columns" />
</script>

<template>
  <q-table
    flat
    class="custom-table2"
    bordered
    :columns="columns"
    :rows="rows"
    row-key="id"
    hide-pagination
    :grid="$q.screen.gt.xs ? false : true"
  >
    <template v-slot:header="props">
      <q-tr :props="props">
        <q-th v-for="col in props.cols" :key="col.name" :props="props">
          <span class="text-weight-medium">{{ col.label }}</span>
        </q-th>
        <q-th auto-width> </q-th>
      </q-tr>
    </template>

    <template v-slot:body="props">
      <q-tr :props="props" class="cursor-pointer">
        <q-td v-for="col in props.cols" :key="col.name" :props="props">
          <div>
            <q-skeleton type="text" width="80px" />
          </div>
        </q-td>
      </q-tr>
    </template>

    <template v-slot:item="props">
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        <q-card bordered flat>
          <q-list dense>
            <q-item v-for="col in props.cols" :key="col.name">
              <q-item-section>
                <q-item-label caption>{{ col.label }}</q-item-label>
              </q-item-section>

              <q-item-section>
                <q-item-label class="text-dark text-weight-medium">
                  <q-skeleton type="text" />
                </q-item-label>
              </q-item-section>
            </q-item>
          </q-list>
        </q-card>
      </div>
    </template>
  </q-table>
</template>

<style scoped lang="scss">
.custom-table2 {
  .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;
  }

  .q-table td:nth-of-type(2) {
    z-index: 3 !important;
  }

  .q-table th:nth-of-type(2),
  .q-table td:nth-of-type(2) {
    position: sticky;
    left: 0;
    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;
  }
  .text-caption {
    text-align: left;
  }
}
.q-card-section-last {
  display: flex;
  justify-content: flex-end;
}
</style>
