Vue.component('AddressTickets', {
    template: `
                <tt-card>
                  <div class="table-responsive">
                    <table class="table table-striped table-hover">
                      <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 parsedTickets" :key="ticket.id">
                        <td>{{ ticket.customField7 }}</td>
                        <td>{{ formatDate(ticket.createdAt) }}</td>
                        <td>{{ ticket.subject }}</td>
                        <td>{{ formatDate(ticket.updatedAt) }}</td>
                        <td>
                          <a :href="'https://project.xinon.at' + ticket.activitiesHref.replace('api/v3', 'projects/storungen-and-support').replace('activities', 'activity')" class="btn btn-primary btn-sm" target="_blank">
                            <i class="fas fa-external-link-alt mr-1"></i>
                            Ticket anzeigen
                          </a>
                        </td>
                      </tr>
                      </tbody>
                    </table>
                  </div>
                </tt-card>
              `,
    data() {
        return {
            window: window,
        }
    },
    computed: {
        parsedTickets() {
            return this.window.TT_CONFIG.TICKETS.map(ticket => ({
                id: ticket.id,
                customField7: ticket.customField7,
                createdAt: ticket.createdAt,
                subject: ticket.subject,
                updatedAt: ticket.updatedAt,
                activitiesHref: ticket._links.activities.href
            }));
        }
    },
    methods: {
        formatDate(dateString) {
            return this.window.moment(dateString).format('DD.MM.YYYY HH:mm');
        }
    }
});