<template>
  <div id="main">
    <div id="left">

      <router-link to="/vendorinvoices/edit"><UButton>+ Lieferantenrechnung</UButton></router-link>



      <a v-for="item in dataStore.getVendorInvoiceList" @click="selectItem(item)">
        <UCard class="listItem">
          <UBadge>{{item.id}}</UBadge> {{item.date}}
        </UCard>
      </a>



    </div>
    <div id="right">

      <UCard v-if="selectedItem.id">
        <template #header>
          <UBadge>{{selectedItem.id}}</UBadge> {{selectedItem.name}}
        </template>
        <UTable :rows="selectedItem.lineItems"></UTable>
        {{selectedItem}}


      </UCard>
    </div>
  </div>
</template>

<script setup>

import {useDataStore} from "../../store/data";
import {storeToRefs} from "pinia"


const showCreateProject = ref(false)
const showCreateCustomer = ref(false)
const projectData = ref({})


const dataStore = useDataStore()

const {projects} = storeToRefs(dataStore)
const {addCustomer} = dataStore
const {addProject} = dataStore
let selectedItem = ref({})

const selectItem = (item) => {
  selectedItem.value = item
  console.log(item)
}

</script>

<style scoped>
#main {
  display: flex;
  flex-direction: row;
}
#left {
  width: 25vw;
}

#right {
  width: 60vw;
  padding-left: 3vw;
}


</style>