<script setup>
const props = defineProps({
  data: {
    type: Object,
    required: true
  },
  modeShow: {
    type: Boolean,
    required: true,
  }
})

const emit = defineEmits(["accept", "deny", "fix", "reopen"])
</script>

<template>
<span id="invoice_details_header">
    <table>
        <tr>
            <td>Name:</td>
            <td v-if="modeShow">{{props.data.contactName}}</td>
            <td v-else style="width: 300px;">{{props.data.contactName}}</td>

            <td v-if="modeShow" style="width: 250px;">Kostenstelle</td>
            <td v-else style="width: 300px;">Kostensatelle (ursprünglich)</td>

            <td>{{props.data.costUnitName}}</td>
            <td
                rowspan="4"
                style="vertical-align: top;
                    padding-top: 15px;
                    padding-right: 25px;
                    text-align: right;"
            >
              <input type="button"
                  v-if="props.data.status === 'new' && modeShow"
                  @click="emit('reject')"
                  class="deny-button"
                value="Abrechnung zurückziehen" />

                <input type="button"
                v-if="props.data.status === 'denied' && modeShow"
                @click="emit('delete')"
                class="deny-button"
                   value="Abrechnung Endgültig löschen" />
            </td>
      </tr>

      <!-- Rest der Tabelle bleibt unverändert -->
      <tr>
        <td>E-Mail:</td>
        <td>{{props.data.contactEmail}}</td>
        <td>
          Abrechnungsnummer
          <label v-if="!modeShow"> (ursprünglich)</label>:
        </td>

        <td>{{props.data.invoiceNumber}}</td>
      </tr>

        <tr>
        <td>Telefon:</td>
        <td>{{props.data.contactPhone}}</td>
            <td>
          Abrechnungstyp
          <label v-if="!modeShow"> (Ursprünglich)</label>:
        </td>
        <td>{{props.data.invoiceType}}</td>
      </tr>

      <tr>
        <td>Kontoinhaber*in:</td>
        <td>{{props.data.accountOwner}}</td>
        <td>Gesamtbetrag
          <label v-if="!modeShow"> (Ursprünglich)</label>:
        </td>
        <td><strong>{{props.data.amount}}</strong></td>
      </tr>
      <tr>
        <td>IBAN:</td>
        <td>{{props.data.accountIban}}</td>
        <td>Buchungsinformationen:</td>
          <td v-if="props.data.donation">Als Spende gebucht</td>
          <td v-else-if="props.data.alreadyPaid">Beleg ohne Auszahlung</td>
          <td v-else>Klassische Auszahlung</td>
      </tr>
      <tr>
        <td>Status:</td>
        <td>{{props.data.readableStatus}}</td>
        <td>Anmerkungen:</td>
        <td>
          <span v-if="props.data.status === 'denied'">
            {{props.data.deniedReason}}
          </span>
          <span v-else>{{props.data.comment}}</span>
        </td>
      </tr>
    </table>
  </span>
</template>

<style scoped>

</style>
