<template>
    <div>
        <EditFormBox
                v-bind:form-type="formType"
                v-bind:cancel-callback="hideEditForm"
                v-bind:table-row="tableRow"
                v-if="isFormShown"
        />
        <table id="vueTable">
            <thead>
                <tr>
                    <th v-for="header in tableData.headers">
                        {{ header }}
                    </th>
                    <th></th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(row) in tableData.content">
                    <td>{{ row[0] }}</td>
                    <td v-for="(column) in row.slice(1)">
                        {{ column }}
                    </td>
                    <td>
                        <button @click="showEditForm(`${row[0]}`)">&#9998</button>
                    </td>
                    <td>
                        <button @click="showEditForm(`${row[0]}`)">&#10006</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    import EditFormBox from "./EditFormBox.vue";
    import axios from 'axios';

    export default {
        name: "Table",
        props: ['tableData'],
        components: {EditFormBox},

        data() {
            return {
                formType: null,
                isFormShown: false,
                tableRow: null
            }
        },

        methods: {
            showEditForm(serviceId) {
                this.requestRowById(serviceId)
                    .then(response => {
                        this.tableRow = response.data;
                        this.formType = 'update';
                        this.isFormShown = true;
                    });
            },

            hideEditForm() {
                this.formType = null;
                this.isFormShown = false;
            },

            requestRowById(serviceId) {
                return axios.request({
                    url: '/api/get/',
                    method: 'post',
                    headers: {'Content-Type': 'application/json'},
                    data: JSON.stringify({'type': 'single_id', 'service_id': serviceId})
                })
            }
        }
    }
</script>

<style scoped>
    table {
        border-spacing: 0;
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    }

    th {
        background-color: #6c7ae0;
        padding: 7px 15px;
        font-size: 19px;
        color: white;
    }

    td {
        padding: 6px;
        color: #505050;
    }

    tbody > tr:hover, tbody > tr:nth-child(2n):hover {
        background-color: rgba(0, 0, 0, 0.1);
    }

    tbody > tr:nth-child(2n) {
        background-color: #f8f6ff;
    }
</style>