<template>
    <q-table :rows="rows" :columns="columns" row-key="id" :filter="props.filter" :loading="loading"
    :pagination="pagination" selection="single" v-model:selected="selected"></q-table>
    
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { api } from 'boot/axios';
const props = defineProps<{filter:string}>()
const columns = [
  { name: 'id', label: 'ID', field: 'id', align: 'left', sortable: true },
  { name: 'lastName', label: '氏名', field: 'lastName', align: 'left', sortable: true },
  { name: 'firstName', label: '苗字', field: 'firstName', align: 'left', sortable: true },
  { name: 'email', label: '電子メール', field: 'email', align: 'left', sortable: true },
];

const pagination = ref({ sortBy: 'id', descending: true, rowsPerPage: 10 });
const rows = ref([]);
const loading = ref(false);
const selected = ref([]);
defineExpose({
  selected
})
const getUsers = async (filter = () => true) => {
  loading.value = true;
  const result = await api.get('api/v1/users');
  rows.value = result.data.data.map((item) => {
    return { id: item.id, firstName: item.first_name, lastName: item.last_name, email: item.email, isSuperuser: item.is_superuser, isActive: item.is_active }
  }).filter(filter);
  loading.value = false;
}

onMounted(async () => {
  await getUsers();
})
</script>
