<template>
    <div class="git-div-container">
        <!--PLACE DESIGN HTML HERE-->
        <div class="disp-style-row" style="height: 100%">
            <Paginator :dataValue="testdata" 
                :dispCols="displayedCols" 
                :srchFields="['name']"
                :colHeaders="[
                    {
                        header: 'name'
                    },
                    {
                        header: 'address'
                    }]" 
                :actions="actions">
            </Paginator>
        </div>
    </div>
</template>
<script>
    export default{
        data() {
            return {
                //DATA HERE
                testdata: [],
                customRow: [
                    {
                        colname: 'name',
                        type: 'REG', //TYPES. REG: NORMAL COLUMN, PIC: WITH CLICKABLE PHOTO THUMBNAIL, DOC: WITH DOCUMENT VIEWING
                        style: "background-color: #B3E5FC",
                        click: (rowdata) => {
                            alert(rowdata.contact_person);
                        }
                    },
                    {
                        colname: 'address',
                        style: "background-color: #F9FBE7"
                    }
                ],
                // actions:  {
                //     class: "disp-style-row",
                //     data: [
                //         {
                //             title: "click me",
                //             class: "git-btn-fa-fit git-btn-success",
                //             FAicon: "fa-solid fa-message",
                //             click: (row) => { alert(JSON.stringify(row.name)); }
                //         },
                //         {
                //             class: "git-btn-fa-fit git-btn-warn",
                //             FAicon: "fa-solid fa-x",
                //             click: (row) => { alert(JSON.stringify(row)); }
                //         },
                //         {
                //             title: "click me",
                //             class: "git-btn-fa-fit git-btn-success",
                //             FAicon: "fa-solid fa-message",
                //             click: (row) => { alert(JSON.stringify(row.name)); }
                //         },
                //         {
                //             class: "git-btn-fa-fit git-btn-warn",
                //             FAicon: "fa-solid fa-x",
                //             click: (row) => { alert(JSON.stringify(row)); }
                //         }
                //     ]
                // },
                actions:  {
                    data: [
                        {
                            title: "click me",
                            class: "git-btn-fa-fit git-btn-success",
                            FAicon: "fa-solid fa-message",
                            click: (row) => { alert(JSON.stringify(row.name)); }
                        },
                        {
                            class: "git-btn-fa-fit git-btn-warn",
                            FAicon: "fa-solid fa-x",
                            click: (row) => { alert(JSON.stringify(row)); }
                        },
                        {
                            title: "click me",
                            class: "git-btn-fa-fit git-btn-success",
                            FAicon: "fa-solid fa-message",
                            click: (row) => { alert(JSON.stringify(row.name)); }
                        },
                        {
                            class: "git-btn-fa-fit git-btn-warn",
                            FAicon: "fa-solid fa-x",
                            click: (row) => { alert(JSON.stringify(row)); }
                        }
                    ]
                },
                displayedCols: ["name", "address"]
            }
        },
        mounted() {
            this.loadData();
        },
        methods: {
            loadData() {
                this.$loading(true);
                $("body").css({ 'cursor': 'wait' });
                
                this._vueGETfromParam(
                    'lcp_locator',
                    'fetch_locators',
                    { },
                    res => {
                        this.testdata = res;
                        this.$loading(false);
                        $("body").css({ 'cursor': 'default' });
                    }
                );
            }
        }
    }
</script>
<style lang="css" scoped>
</style>    