<template>
  <q-table :rows="users" :filter="filter" dense :columns="columns" row-key="id" :loading="loading" :pagination="pagination">
    <template v-slot:top>
      <div class="h6 text-weight-bold">{{props.title}}</div>
      <q-space />
      <q-input borderless dense filled debounce="300" v-model="filter" placeholder="検索">
        <template v-slot:append>
          <q-icon name="search" />
        </template>
      </q-input>
    </template>

    <template v-for="col in columns" :key="col.name" v-slot:[`body-cell-${col.name}`]="props">
      <slot :name="`body-cell-${col.name}`" :row="props.row" :column="props.col">
        <!-- 默认内容 -->
        <q-td v-if="col.name !== 'actions'" :props="props" >
          <span>{{ props.row[col.name] }}</span>
        </q-td>
        <!-- actions -->
        <q-td v-else auto-width :props="props">
          <slot name="actions" :row="props.row"></slot>
        </q-td>
      </slot>
    </template>
  </q-table>
</template>
<script setup lang="ts">
import { ref, PropType } from 'vue';
import { IUserDisplay } from '../../types/UserTypes';

const props = defineProps({
  users: {
    type: Array as PropType<IUserDisplay[]>,
    required: true,
  },
  loading: {
    type: Boolean,
    default: false,
  },
  title: String
});

const columns = [
  { name: 'id', label: 'ID', field: 'id', align: 'left', sortable: true },
  { name: 'fullName', label: '名前', field: 'fullName', align: 'left', sortable: true },
  { name: 'email', label: '電子メール', field: 'email', align: 'left', sortable: true },
  { name: 'role', label: '', field: 'role', align: 'left', sortable: false },
  { name: 'actions', label: '', field: 'actions', sortable: false },
];

const filter = ref('');
const pagination = ref({ rowsPerPage: 10 });
</script>