<template>
  <div id="main">

    <div class="flex items-center gap-1">
      <UButton @click="router.push(`/vendorinvoices/create/`)">+ Eingangsrechnung</UButton>

      <UInput
          v-model="searchString"
          placeholder="Suche..."
      />
    </div>



    <UTable
        :rows="filteredRows"
        :columns="itemColumns"
        @select="selectItem"
        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
    >
      <template #state-data="{row}">
        <span
          v-if="row.state === 'Entwurf'"
          class="text-cyan-500"
        >
          {{row.state}}
        </span>
        <span
          v-if="row.state === 'Bezahlt'"
          class="text-primary-500"
        >
          {{row.state}}
        </span>
      </template>
      <template #vendor-data="{row}">
        {{dataStore.vendors.find(vendor => vendor.id === row.vendor) ? dataStore.vendors.find(vendor => vendor.id === row.vendor).name : ''}}
      </template>
      <template #date-data="{row}">
        {{row.date ? dayjs(row.date).format("DD.MM.YY") : ''}}
      </template>
      <template #dueDate-data="{row}">
        {{row.dueDate ? dayjs(row.dueDate).format("DD.MM.YY") : ''}}
      </template>
      <template #amount-data="{row}">
        {{getRowAmount(row) === 0 ? '' : `${getRowAmount(row)} €`}}
      </template>
    </UTable>



  </div>
</template>

<script setup>
import * as dayjs from "dayjs";

definePageMeta({
  middleware: "auth"
})

const dataStore = useDataStore()
const router = useRouter()
const mode = ref("show")

const itemColumns = [
  {
    key: 'state',
    label: "Status.",
    sortable: true
  },
  {
    key: 'vendor',
    label: "Lieferant",
    sortable: true
  },
  {
    key: "reference",
    label: "Referenz",
    sortable: true
  },
  {
    key: "date",
    label: "Datum",
    sortable: true
  },
  {
    key: "dueDate",
    label: "Fällig:",
    sortable: true
  },
  {
    key: "amount",
    label: "Betrag",
    sortable: true
  },
]


const selectItem = (item) => {
  console.log(item)
  router.push(`/vendorinvoices/edit/${item.id} `)
}

const getRowAmount = (row) => {
  let amount = 0

  row.accounts.forEach(account => {
    amount += account.amountNet
    amount += account.amountTax
  })

  return amount
}


const searchString = ref('')

const filteredRows = computed(() => {
  if(!searchString.value) {
    return dataStore.vendorInvoices
  }

  return dataStore.vendorInvoices.filter(item => {
    return Object.values(item).some((value) => {
      return String(value).toLowerCase().includes(searchString.value.toLowerCase())
    })
  })
})
</script>

<style scoped>

</style>