<template>
    <div>      
        <div class="row">
            <div class="col-md-12">
                <div class="float-right">
                    <span class="listGrid-switch-icon" 
                        :class="{ active: currentView=='list'}" 
                        @click="switchToListView">
                        <icon name="list" scale="1.5"></icon>                   
                    </span>
                    <span class="listGrid-switch-icon" 
                        :class="{ active: currentView=='grid'}" 
                        @click="switchToGridView">
                        <icon name="table" scale="1.5"></icon>
                    </span>	
                </div>			
            </div>
        </div>
        <br />
        <template defaultView='currentView'>
            <template v-if="currentView=='list'">
                <template v-if="listType=='table'">
                     <appup-table 
                        :fieldsTable=fieldsTable 
                        :items=items 
                        :sortBy=sortBy 
                        :sortDesc=sortDesc 
                        :url=url
                        :id=id
                        />
                </template>
                <template v-if="listType=='datatable'">
                  <appup-datatable
                    :id=id 
                    :freeze=freeze
                    :url=url
                    :columns=columns
                />
                </template>
            </template>
            <template v-if="currentView=='grid'">
                <appup-grid
                    :id=id
                    :url=url
                    label="first_name"
                    description="address"
                    reference="email"
                    />  
            </template>
        </template>
    </div>
</template>
<script>
/**
* Appup ListGrid
*/
export default {
    name: 'appup-listgrid',
    components: { 
    
        },
    props: {
        /**
         * id of the element
         */
        id: {
            type: String,
            required: false,
        },
        
        /**
         * Default type is list view or grid view
         */
        defaultView: {
            type: String,
            required: false, 
            default: ''             
        },
        /**
         * Type of the table is data table or basic table data
         */
            listType: {
            type: String,
            required: false,
            default:''
        },

        /**
         * Fetch data with url
         */
        url: {
            type: String,
            required: false,
            default: ''
        },         
        /**
        * label for grid item in header
        */
        label: {
            type: String,
            required: false
        },
        /**
        * Description for Grid item
        */
        description: {
            type: String,
            required: false
        },
        /**
        * Reference for grid item
        */
        reference: {
            type: String,
            required: false
        },
        /**
        * Message to be displayed in the alert
        */
        items: {
            type: Array,
            required: false
        },

        /**
        * Customize the table columns headings
        */
        fieldsTable: {
            required: false
        },
        /**
        * Sort by key
        */
        sortBy: {
            required: false
        },
        /**
        * Config sort
        *
        * `true` -> Descending
        * `false` -> Ascending
        */
        sortDesc: {
            required: false
        },
        /**
        * Setup columns table
        * `label, type, field, width`
        */
        columns: {
            type: Array,
            required: false
        },
        /**
        * Setup freeze columns
        */
        freeze: {
            type: String,
            required: false
        }
    },
    data: function() {
        return {	
            currentView: this.defaultView
        }
    },
    computed: {
        
    },
    mounted() {
    },
    methods: {
        switchToListView: function()
        {
            this.currentView = 'list';
        },
        switchToGridView: function()
        {
            this.currentView = 'grid';
        }
    }        
}
</script>