Vue.component('AddressTickets', {
    template: `
      <div>
        <tt-card class="mb-4">
          <h3 class="text-center mb-3">Tickets</h3>
          <div class="table-responsive">
            <table class="table table-striped table-hover table-sm">
              <thead class="thead-light">
              <tr>
                <th>Kundennummer</th>
                <th>Erstellt am</th>
                <th>Betreff</th>
                <th>Letztes Update</th>
                <th>Aktion</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="ticket in tickets" :key="ticket.id">
                <td>{{ ticket.customField7 }}</td>
                <td>{{ formatDate(ticket.createdAt) }}</td>
                <td>{{ ticket.subject }}</td>
                <td>{{ formatDate(ticket.updatedAt) }}</td>
                <td><a :href="getTicketUrl(ticket)" class="btn btn-primary btn-sm" target="_blank"><i
                    class="fas fa-external-link-alt mr-1"></i>Anzeigen</a></td>
              </tr>
              </tbody>
            </table>
          </div>
        </tt-card>

        <tt-card>
          <h3 class="text-center mb-3">Lieferscheine</h3>
          <div class="table-responsive">
            <table class="table table-striped table-hover table-sm">
              <thead class="thead-light">
              <tr>
                <th>Art der Arbeit</th>
                <th>Lieferadresse</th>
                <th>Erstellt von</th>
                <th>Erstellt am</th>
                <th>Aktion</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="note in shippingNotes" :key="note.id">
                <td>{{ note.note }}</td>
                <td>
                  {{ note.deliveryAddressName }}<span v-if="note.deliveryAddressEMail"> ({{ note.deliveryAddressEMail }}
                  )</span><br>
                  {{ note.deliveryAddressLine }}<br>
                  {{ note.deliveryAddressPLZ }}, {{ note.deliveryAddressCity }}
                </td>
                <td>{{ note.createdByName }}</td>
                <td>{{ formatUnix(note.create) }}</td>
                <td><a :href="getShippingNoteUrl(note)" class="btn btn-primary btn-sm" target="_blank"><i
                    class="fas fa-file-alt mr-1"></i>Anzeigen</a></td>
              </tr>
              </tbody>
            </table>
          </div>
        </tt-card>
      </div>
    `,
    data() {
        return {window: window};
    },
    computed: {
        tickets() {
            return (this.window.TT_CONFIG?.TICKETS || []).map(t => ({
                id: t.id,
                customField7: t.customField7,
                createdAt: t.createdAt,
                subject: t.subject,
                updatedAt: t.updatedAt,
                activitiesHref: t._links?.activities?.href
            }));
        },
        shippingNotes() {
            return [...(this.window.TT_CONFIG?.SHIPPING_NOTES || [])].sort((a, b) => a.create - b.create);
        }
    },
    methods: {
        formatDate(d) {
            return this.window.moment(d).format('DD.MM.YYYY HH:mm');
        },
        formatUnix(ts) {
            return this.window.moment.unix(ts).format('DD.MM.YYYY HH:mm');
        },
        getTicketUrl(t) {
            return `https://project.xinon.at${t.activitiesHref.replace('api/v3', 'projects/storungen-and-support').replace('activities', 'activity')}`;
        },
        getShippingNoteUrl(n) {
            return `${this.window.TT_CONFIG.BASE_PATH}/WarehouseShippingNote/createPDF?id=${n.id}`;
        }
    }
});