﻿<template>
  <v-container class="mt-10 bg-gray-100 py-10 rounded-lg shadow-lg border border-fuchsia-500 mb-15">
    <div class="flex justify-center text-6xl mb-4 font-sans font-weight-bold">Portefeuille</div>
    <div class="flex justify-between mb-4">
      <div class="text-left">
        <span class="font-bold">Montant Total : </span>
      </div>
      <div class="text-center">
        <span class="font-bold">Nombre total de transactions : </span>
      </div>
    </div>
    <v-data-table 
        :headers="headers"
        :items="transactions"
        class="elevation-1 text-black"
        :items-per-page="5"
        show-group-by
    >   
    </v-data-table>    
  </v-container>
  
  
  
</template>

<script async setup>
import { onBeforeMount, ref } from 'vue';
import {useClient} from "@/plugins/api.js";
import MyUserModel from "@/models/myUserModel.js";
const client = useClient();

const total = ref(false);
const drawer = ref(false);
const currentUserName = ref("INVITÉ");
let currentUser = null;

onBeforeMount(async () => {
  try {
    const myUser = await client.get("/api/GetMyUser");
    const currentUserModel = MyUserModel.createFromApiResult(myUser.data);
    currentUser = currentUserModel;
    currentUserName.value = currentUserModel.firstName + " " + currentUserModel.lastName
    
  } catch(error) {
    console.log("User not logged")
  }
})

function logout(){
  localStorage.removeItem('jwt');
  window.location.reload();
}

</script>

<style scoped>
</style>
