<template>
    <table class="table table-striped table-bordered">
        <colgroup>
            <col style="width: 70px;"> <col> <col> <col> <col> <col> <col>
        </colgroup>

        <thead>
            <tr>
                <th>Ид</th>
                <th>Название</th>
                <th>Кооментарий</th>
                <th>Десктоп</th>
                <th>Мобилы</th>
                <th>Включен</th>
                <th class="action-column">&nbsp;</th>
            </tr>
        </thead>

        <tbody>
            <banner-table-row :banner="banner" v-for="banner in banners"></banner-table-row>
        </tbody>
    </table>
</template>

<script>
import BannerTableRow from './BannerTableRow.vue'

export default {
    name: 'banner-table',
    components: {
        BannerTableRow,
    },
    created: function () {
        //this.loadBanners();
    },
    data: () => ({
        bannersUrl: '123',
        banners: [{
            id: 1,
            name: "test.banner",
            comment: "Тестовый баннер",
            code: "<div id=\"test\">Hello world</div>",
            start_at: null,
            end_at: null,
            desktop: true,
            mobile: true,
            enabled: true,
            updated_at: "2018-07-22 16:48:12",
            created_at: "2018-07-19 14:55:58",
            view_link: "/web/kobos/index.php?r=admin%2Fbanners%2Fmain%2Fview&id=1",
            update_link: "/web/kobos/index.php?r=admin%2Fbanners%2Fajax%2Fupdate&id=1",
            delete_link: "/web/kobos/index.php?r=admin%2Fbanners%2Fmain%2Fdelete&id=1"
        }, {
            id: 2,
            name: "test2.banener",
            comment: "Тестовый баннер номер два",
            code: "<div>test2</div>",
            start_at: null,
            end_at: null,
            desktop: false,
            mobile: true,
            enabled: true,
            updated_at: "2018-07-22 16:35:16",
            created_at: "2018-07-22 09:32:20",
            view_link: "/web/kobos/index.php?r=admin%2Fbanners%2Fmain%2Fview&id=2",
            update_link: "/web/kobos/index.php?r=admin%2Fbanners%2Fajax%2Fupdate&id=2",
            delete_link: "/web/kobos/index.php?r=admin%2Fbanners%2Fmain%2Fdelete&id=2"
        }],
    }),
    watch: {
    },
    methods: {
        showModal() {
            this.$modal.show('hello-world');
        },
        hideModal() {
            this.$modal.hide('hello-world');
        }
        /*loadBanners: function () {
            fetch(this.bannersUrl, {
                method: 'GET',
                credentials: 'same-origin'
            }).then((response) => {
                if (!response.ok) {
                    throw new Error(response.statusText);
                }

                return response;
            })
            .then(response => response.json())
            .then(response => this.banners = response)
            .catch(function(error) {
                toastr.error(error.message);
            });
        },*/
    },
}
</script>

<style>

</style>

----------------------------------------------------------------------------------------

<template>
    <tr>
        <td>{{banner.id}}</td>
        <td>
            <a :href="banner.update_link">{{banner.name}}</a>
        </td>
        <td>{{banner.comment}}</td>
        <td>
            <toggle-button v-model="banner.desktop" :labels="{checked: 'Yes', unchecked: 'No'}"></toggle-button>
        </td>
        <td>
            <toggle-button v-model="banner.mobile" :labels="{checked: 'Yes', unchecked: 'No'}"></toggle-button>
        </td>
        <td>
            <toggle-button v-model="banner.enabled" :labels="{checked: 'Yes', unchecked: 'No'}"></toggle-button>
        </td>
        <td>
            <a :href="banner.view_link" v-on:click.prevent="showModal" title="Просмотр" aria-label="Просмотр" data-pjax="0"><span class="glyphicon glyphicon-eye-open">V</span></a>
            <a :href="banner.update_link" title="Редактировать" aria-label="Редактировать" data-pjax="0"><span class="glyphicon glyphicon-pencil">E</span></a>
            <a :href="banner.delete_link" title="Удалить" aria-label="Удалить" data-pjax="0" data-confirm="Вы уверены, что хотите удалить этот элемент?" data-method="post"><span class="glyphicon glyphicon-trash">D</span></a>
        </td>
    </tr>
</template>

<script>

export default {
    props: ['banner'],
    watch: {
        banner: {
            handler: function(after, before) {
                /*let formData = new FormData();
                formData.append('desktop', +after.desktop); // convert bool to int;
                formData.append('mobile', +after.mobile);
                formData.append('enabled', +after.enabled);*/
console.log(after, before);
                /*fetch(before.update_link, {
                    method: 'POST',
                    body: formData,
                    credentials: 'same-origin'
                }).then((response) => {
                    if (!response.ok) {
                        throw new Error(response.statusText);
                    }

                    return response;
                })
                .then(response => response.json())
                .then(function (data) {
                    if (data.error !== undefined) {
                        throw new Error(data.error.message);
                    }

                    toastr.success(data.message);
                })
                .catch(function(error) {
                    toastr.error(error.message);
                });*/
            },
            deep: true
        },
    },
    methods: {
        showModal() {
            this.$modal.show({
                template: `
                    <div :min-width="200" :min-height="200">
                        <h1>This is created inline</h1>
                        <p>{{ text }}</p>
                        <br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123
                    </div>
                `,
                props: ['text']
            }, {
                text: 'This text is passed as a property'
            }, {
                width: '70%',
                height: 'auto',
                scrollable: true
            }, {
                'before-close': (event) => { console.log('this will be called before the modal closes'); }
            });
        },
        hideModal() {
            this.$modal.hide('hello-world');
        }
    },
}
</script>

<style>

</style>