<template>
    <v-client-table :data="carData" :columns="carColumns" :options="carOptions"></v-client-table>
</template>

<script>
    import * as moment from "moment";
    export default {
        data: function () {
            return {
                carColumns:['invoice','year','make','model','stock','vin','optional','product','price',"created_at","updated_at"],
                carData: [],
                carOptions:{
                    dateFormat: "DD-MM-YY",
                    dateColumns: ['created_at'],
                    headings: {
                        invoice: 'Invoice',
                        year: 'Year',
                        make: 'Make',
                        model: 'Model',
                        stock: 'Stock',
                        vin: 'VIN',
                        optional: 'Optional',
                        product: 'Product',
                        price: 'Price',
                        created_at: 'Created',
                        updated_at: 'Updated',
                        edit: 'Edit',
                    },
                    templates: {
                        edit: function(row) {
                            return `<a href='#!/${row.id}/edit'><i class='glyphicon glyphicon-edit'></i></a>`
                        },

                    },
                },

            };
        },
        methods: {
            getsCars: function(){
                $.getJSON("/cars/get",function (data) {
                    data.forEach(car=>{
                        car.created_at = moment(car.created_at);
                        car.updated_at = moment(car.updated_at);
                    });
                    this.carData = data;
                }.bind(this));
            }
        },
        created: function(){
            this.getsCars();
            this.timer = setInterval(this.getsCars, 1000)
        },
    }
</script>