<template>
    <div>
        <h2>{{ $t('admin.contacts.title') }}</h2>
        <table>
            <thead>
                <tr>
                    <th>{{ $t('admin.contacts.date') }}</th>
                    <th>{{ $t('admin.contacts.from') }}</th>
                    <th>{{ $t('admin.contacts.actions') }}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="contact in contacts">
                    <td>{{ formatDateTimeLong(contact.createdAt) }}</td>
                    <td>{{ contact.email }}</td>
                    <td>
                        <button @click="openRequest(contact)">{{ $t('admin.contacts.open') }}</button>
                        <button @click="finishRequest(contact)">{{ $t('admin.contacts.finished') }}</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
import apiClient from '@/utils/axios.js';
import { formatDateTimeLong } from '@/utils/datetime.js';

export default {
    name: 'AdminContactsView',
    data() {
        return {
            contacts: []
        }
    },
    mounted() {
        this.getContacts()
    },
    methods: {
        formatDateTimeLong,
        async getContacts() {
            try {
                const openContactRequests = await apiClient.get('/api/admin/opencontacts');
                this.contacts = openContactRequests.data;
            } catch (error) {
                this.$root.$refs.errorDialog.open(`tr:error.${error.response.data.error}`);
            }
        },
        async openRequest(contact) {
            this.$root.$refs.answerContactDialog.open(contact);
        },
        async finishRequest(contact) {
            await apiClient.get('/api/admin/opencontacts/finish/${contact.id}');
        }
    }
}
</script>