<script setup lang="ts">
import { ref } from 'vue';
import { Icon } from '@iconify/vue';
import { RevenueProjectsData } from '@/data/dashboard/dashboardData';
import { selectUser } from '~/data/user/userData';
import { storeToRefs } from 'pinia';

const {Users} = storeToRefs(selectUser());
const {loadUserSelect} = selectUser();

onMounted(()=> {
    loadUserSelect();
    console.log(Users);
})

</script>
<template>
    <v-card elevation="10" class="revenue-products">
        <v-card-item class="pb-4">
            <div class="d-flex ga-3 align-center justify-space-between">
                <v-card-title class="text-h5">Revenue by Product</v-card-title>
            </div>
            <div class="mt-4">
                <v-table class="revenue-table">
                    <template v-slot:default>
                        <thead>
                            <tr>
                                <th class="text-body-1">No</th>
                                <th class="text-body-1">Nama</th>
                                <th class="text-body-1">Umur</th>
                                <th class="text-body-1">Alamat</th>
                                <th class="text-body-1">Jenis Kelamin</th>
                                <th class="text-body-1">Agama</th>
                                <th class="text-body-1">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item,i) in Users" :key="item.ID" class="month-item">
                                <td>
                                    <p> {{ i + 1 }}</p>
                                </td>
                                <td>
                                    <p> {{ item.Name }}</p>
                                </td>
                                <td>
                                    <p> {{ item.Age }}</p>
                                </td>
                                <td>
                                    <p> {{ item.Address }}</p>
                                </td>
                                <td>
                                    <p> {{ item.Gender }}</p>
                                </td>
                                <td>
                                    <p> {{ item.Religion }}</p>
                                </td>
                                <td></td>
                            </tr>
                        </tbody>
                    </template>
                </v-table>
            </div>
        </v-card-item>
    </v-card>
</template>
