<template>
  <div id="main">

    <div class="flex items-center gap-1">
      <UButton @click="router.push(`/incominginvoices/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 === 'Offen'"
          class="text-rose-500"
        >
          {{row.state}}
        </span>
        <span
          v-if="row.state === 'Abgeschlossen'"
          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}">
        <span v-if="row.date">{{row.date ? dayjs(row.date).format("DD.MM.YY") : ''}}</span>
      </template>
      <template #dueDate-data="{row}">
        <span :class="dayjs(row.dueDate).diff(dayjs()) <= 0 ? ['text-rose-500'] : '' ">{{row.dueDate ? dayjs(row.dueDate).format("DD.MM.YY") : ''}}</span>
      </template>
      <template #paid-data="{row}">
        <span v-if="row.paid" class="text-primary-500">Bezahlt</span>
        <span v-if="!row.paid" :class="dayjs(row.dueDate).diff(dayjs()) <= 0 ? ['text-rose-500'] : ['text-cyan-500'] ">Offen</span>
      </template>
      <template #amount-data="{row}">
        <div class="text-right font-bold">{{getRowAmount(row) === 0 ? '' : `${String(getRowAmount(row).toFixed(2)).replace('.',',')} €`}}</div>
      </template>
    </UTable>



  </div>
</template>

<script setup>
import 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: "paid",
    label: "Bezahlt:",
    sortable: true
  },
  {
    key: "dueDate",
    label: "Fällig:",
    sortable: true
  },
  {
    key: "amount",
    label: "Betrag",
    sortable: true
  },
]


const selectItem = (item) => {
  console.log(item)
  if(item.state === "Entwurf") {
    console.log("ENTWURF")
    router.push(`/incominginvoices/edit/${item.id} `)
  } else if(item.state === "Offen") {
    router.push(`/incominginvoices/show/${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.incomingInvoices
  }

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

<style scoped>

</style>