<template>
    <div class="page" data-name="report-show-overview">
        <div class="navbar">
            <div class="navbar-inner">
                <div class="left"></div>
                <div class="title">{{PageTitle}}</div>  
                <div class="right">
                    <a href="#" class="link popup-close" data-popup=".popup-fullscreen-report">
                        <i class="f7-icons">close</i>                                           
                    </a>
                </div>                              
            </div>
        </div>                                    
        <div class="page-content bg-color-lightgray">

            <div class="display-flex justify-content-space-between">
                <div class="block">                                                 
                    <!-- <p class="text-color-black">
                        <i class="f7-icons icon-name text-color-gray vertical-middle margin-right"></i>
                        <span class="text-color-gray">${ LANGUAGE.REPORT_PANEL_MSG37 }:</span> 
                        ${ positionData.Name }
                    </p> -->
                    <!-- <p class="text-color-black">
                        <i class="f7-icons icon-calendar text-color-gray vertical-middle margin-right"></i>
                        <span class="text-color-gray">${ LANGUAGE.REPORT_PANEL_MSG110 }:</span> 
                        ${ tableTripDetailsArray[0].StartTimeLocal }
                    </p> -->
                    <p class="text-color-black">
                        <i class="f7-icons icon-calendar text-color-gray vertical-middle margin-right"></i>
                        <span class="text-color-gray">{{ @global.LANGUAGE.COM_MSG97 }}:</span> 
                        {{AdditionalReportInfo.TimePeriodText}}
                    </p>
                </div>
            </div>

            <table id="table-report" class="mdl-data-table " style="width:100%">
                <thead>
                    <tr>
                        {{#TableColNames}}
                            <th>{{DisplayName}} </th> 
                        {{/TableColNames}}
                    </tr>
                </thead>
                <tbody>     
                    
                    {{#ReportData}}
                        <tr data-item-index="{{@index}}" >      
                            {{#if AS_IMEI}}
                                <td >{{AS_IMEI}}</td>  
                            {{/if}} 
                            {{#if AS_NAME}}
                                <td >{{AS_NAME}}</td>  
                            {{/if}}
                            {{#if ACC2}}
                                <td class="text-align-center">{{ACC2}}</td>  
                            {{/if}}
                            {{#if ACC_TIMES}}
                                <td class="text-align-center">
                                    {{#js_if " this.ACC_TIMES != '0' "}}
                                        <a @click="getEventReport" href="#" class="link color-blue" data-event-class="2" data-event-type="1">{{ACC_TIMES}}</a>
                                    {{else}}
                                        {{ACC_TIMES}}
                                    {{/js_if}}
                                </td> 
                            {{/if}}
                            {{#if ACC_TIMESPAN}}
                                <td >{{ACC_TIMESPAN}}</td>  
                            {{/if}}
                            {{#if ACC_TOTAL_TIMESPAN}}
                                <td >{{ACC_TOTAL_TIMESPAN}}</td>  
                            {{/if}}
                            {{#if FUEL_CONSUMED}}
                                <td class="text-align-center">{{FUEL_CONSUMED}}</td>  
                            {{/if}}
                            {{#if MILEAGE}}
                                <td class="text-align-center">{{MILEAGE}}</td>  
                            {{/if}}
                            {{#if MOVE_TIMESPAN}}
                                <td >{{MOVE_TIMESPAN}}</td>  
                            {{/if}}   
                            {{#if STATIC_TIMES}}
                                <td class="text-align-center">
                                    {{#js_if " this.STATIC_TIMES != '0' "}}
                                        <a @click="getEventReport" href="#" class="link color-blue" data-event-class="4" data-event-type="0">{{STATIC_TIMES}}</a>
                                    {{else}}
                                        {{STATIC_TIMES}}
                                    {{/js_if}}
                                </td>                                
                            {{/if}}
                            {{#if STATIC_TIMESPAN}}
                                <td >{{STATIC_TIMESPAN}}</td>  
                            {{/if}}
                            {{#if TOTAL_MILEAGE}}
                                <td class="text-align-center">{{TOTAL_MILEAGE}}</td>  
                            {{/if}}
                            {{#if ALERTS}}
                                <td class="text-align-center">
                                    {{#js_if " this.ALERTS_COUNT != '0' "}}
                                        <a @click="getAlertReport" href="#" class="link color-blue">{{ALERTS_COUNT}}</a>
                                    {{else}}
                                        {{ALERTS_COUNT}}
                                    {{/js_if}}
                                </td>  
                            {{/if}}
                            {{#if POI_IN}}
                                <td class="text-align-center">
                                    {{#js_if " this.POI_IN_COUNT != '0' "}}
                                        <a @click="getAlertReport" href="#" class="link color-blue" data-alert-id="8">{{POI_IN_COUNT}}</a>
                                    {{else}}
                                        {{POI_IN_COUNT}}
                                    {{/js_if}}
                                </td>  
                            {{/if}}
                            {{#if POI_OUT}}
                                <td class="text-align-center">
                                    {{#js_if " this.POI_OUT_COUNT != '0' "}}
                                        <a @click="getAlertReport" href="#" class="link color-blue" data-alert-id="16">{{POI_OUT_COUNT}}</a>
                                    {{else}}
                                        {{POI_OUT_COUNT}}
                                    {{/js_if}}
                                </td>  
                            {{/if}}
                               
                        </tr>
                    {{/ReportData}} 
                      
                                      
                </tbody>
               
            </table>
        </div>
    </div>

</template>


                   
<script>
  // script must return component object
    return {
        data: function () {
            var self = this;   

            var ret = {};            

            var type = self.$route.query.type;
           
            //console.log(self);
            var pageTitle = Protocol.Helper.getReportTypeName(type);

            var reportData = self.$app.methods.getFromStorage('reportData');

            var tableColNames = Protocol.Helper.getTableOverviewRowNames(reportData[0]);
            var geofenceList = self.$app.methods.getFromStorage('geofenceList');

            for (var i = 0; i < reportData.length; i++) {
                if (reportData[i].AS_IMEI && POSINFOASSETLIST[reportData[i].AS_IMEI]) {
                    reportData[i].AS_ID = POSINFOASSETLIST[reportData[i].AS_IMEI].Id;
                }
                if (reportData[i].ALERTS) {
                    reportData[i].ALERTS_COUNT = self.$app.methods.getCountOfObjectvalues(reportData[i].ALERTS);                    
                }
                if (reportData[i].POI_IN) {
                    reportData[i].POI_IN_COUNT = self.$app.methods.getCountOfObjectvalues(reportData[i].POI_IN);                    
                }
                if (reportData[i].POI_OUT) {
                    reportData[i].POI_OUT_COUNT = self.$app.methods.getCountOfObjectvalues(reportData[i].POI_OUT);                    
                }                
            }
            console.log(reportData);
            if (!pageTitle) {
                pageTitle = LANGUAGE.REPORT_PANEL_MSG35;
            }
        
            ret = {
                Type: type,
                //DataTable: false,
                PageTitle: pageTitle,
                ReportData: reportData,
                TableColNames: tableColNames,

                AdditionalReportInfo: {
                    From: self.$route.query.from,
                    To: self.$route.query.to,
                    TimePeriodText: moment(self.$route.query.from, window.COM_TIMEFORMAT).add(self.$app.data.UTCOFFSET,'minutes').format('MMMM DD YYYY, HH:mm') + ' - ' + moment(self.$route.query.to, window.COM_TIMEFORMAT).add(self.$app.data.UTCOFFSET,'minutes').format('MMMM DD YYYY, HH:mm'),
                    GofenceList: geofenceList,
                },


                /*DynamicMapPopup: false,
                DynamicAssetsPopup: false,
                DynamicEventsPopup: false,
                //ReportMarkerGroup: false,
                ReportMarker: false,
                MapTrackReport: false,
                DATATABLEReportAssets: false,
                DATATABLEReportEvents: false,
                ChartInOffLot: false,     */           
               
            };

            return ret;
        },
        methods: {
            getEventReport: function(e){
                let self = this;

                let wrapper = $$(e.target).closest('[role="row"]');
                let index = wrapper.data('item-index');
                let assetReportData = self.ReportData[index];
               
                let userInfo = self.$app.methods.getFromStorage('userInfo');
               
                let data = {
                    MajorToken: userInfo.MajorToken,
                    MinorToken: userInfo.MinorToken,

                    DateFrom: self.AdditionalReportInfo.From,
                    DateTo: self.AdditionalReportInfo.To,
                    Imeis: assetReportData.AS_IMEI,
                    EventClass: $$(e.target).data('event-class'),
                    EventTypes: $$(e.target).data('event-type')                   
                };  

                
                //console.log(data);
                self.$app.preloader.show();
                self.$app.request.post(API_URL.GET_REPORT_EVENT, data, function (result, xhr, status) {
                    //console.log(result);
                    self.$app.preloader.hide();   
                    if (result.MajorCode == '000') {                        
                        if (result.Data && result.Data.length) {                            
                            self.showEventReport(result.Data, data.EventClass);
                        }else{
                            self.$app.methods.customDialog({title: assetReportData.AS_NAME, text: LANGUAGE.COM_MSG11});
                        }
                        
                    }else{
                        self.$app.dialog.alert('Cant get Event report'); 
                    }                 
                    
                },
                function (xhr, status) { 
                    self.$app.preloader.hide();
                    self.$app.dialog.alert('Error occured at Event report ');                
                },
                'json'); 
            },
            showEventReport: function(reportArray=[],eventClass){
                if (reportArray.length ) {
                    var self = this;

                    var modalTitle = reportArray[0].EVENT_AS_NAME;

                    if (self.DynamicAssetsPopup && !self.DynamicAssetsPopup.destroyed) {
                        self.DynamicAssetsPopup.close();
                    }

                    var tableRows = '';
                    if (reportArray.length > 0) {
                        for (var i = reportArray.length - 1; i >= 0; i--) { 
                            if (reportArray[i].EVENT_POS_BEGIN_TIME) {
                                reportArray[i].PositionTimeLocal = moment(reportArray[i].EVENT_POS_BEGIN_TIME,'YYYY-MM-DD HH:mm:ss').add(app.data.UTCOFFSET,'minutes').format('DD/MM/YYYY HH:mm:ss'); 
                            } 
                            reportArray[i].EventName = Protocol.Helper.getEventTypeName(eventClass, reportArray[i].EVENT_TYPE)

                            tableRows +=    `<tr data-item-index="${ i }" > 
                                                <td class="cursor-pointer text-color-red showMap"  ><i class="f7-icons icon-address"></i></td>
                                                <td>${ reportArray[i].PositionTimeLocal }</td>    
                                                <td>${ reportArray[i].EventName }</td>                                                                                       
                                                <td class="white-space-normall min-width-200">`;
                                            if (reportArray[i].EVENT_CONTENT && reportArray[i].EVENT_CONTENT != null) {
                            tableRows +=            reportArray[i].EVENT_CONTENT;
                                            }else{
                            tableRows +=            `<a href="#" class="link showAddress">${ LANGUAGE.REPORT_PANEL_MSG63 }</a>`;
                                            }                            
                            tableRows +=        `</td>                                                     
                                            </tr>`;
                        }
                    }

                    var content = `
                                    <div class="popup popup-panel-bigger popup-report-assets-table" >
                                        <div class="view">
                                            <div class="page">
                                                <div class="navbar">
                                                    <div class="navbar-inner">
                                                        <div class="left"></div>
                                                        <div class="title">${ modalTitle }</div>  
                                                        <div class="right">
                                                            <a href="#" class="link popup-close" data-popup=".popup-report-assets-table">
                                                                <i class="f7-icons">close</i>
                                                            </a>
                                                        </div>                              
                                                    </div>
                                                </div>                                    
                                                <div class="page-content bg-color-lightgray" >
                                                    <table id="table-report-assets" class="mdl-data-table tableReportAssets" style="width:100%">
                                                        <thead>
                                                            <tr>
                                                                <th> ${ LANGUAGE.REPORT_PANEL_MSG36} </th> <!-- Map  -->
                                                                <th> ${ LANGUAGE.REPORT_PANEL_MSG40} </th> <!-- Date, time  -->           
                                                                <th> ${ eventClass == '2' ? LANGUAGE.COM_MSG98 : LANGUAGE.COM_MSG99} </th> <!-- Event Name || Activity  -->                                                            
                                                                <th> ${ LANGUAGE.REPORT_PANEL_MSG41} </th> <!-- Address  -->
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                        ${ tableRows }
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    `

                    setTimeout(function(){                  
                        self.DynamicAssetsPopup = app.popup.create({
                            backdrop: true,
                            closeByBackdropClick: false,
                            animate: false,
                            content: content,
                                    
                                    on: {
                                        open: function (popup) { 
                                           
                                            self.DATATABLEReportAssets = $('#table-report-assets').DataTable({
                                                order: [[1, 'desc']],
                                                columnDefs: { targets: [ 0 ], orderable: false,  },
                                                lengthMenu: [5, 10, 25],
                                                pageLength: 5,
                                            });

                                            popup.$el.find('.tableReportAssets').on('click', '.showMap', function(e){                                           
                                                var wrapper2 = $$(e.target).closest('[role="row"]');
                                                var index2 = wrapper2.data('item-index');                                          

                                                self.showMapInModal({
                                                    PageTitle: modalTitle,
                                                    index: index2,
                                                    positionData: reportArray[index2],                                                    
                                                });
                                            });

                                            popup.$el.find('.tableReportAssets').on('click', '.showAddress', function(e){       
                                                var wrapper2 = $$(e.target).closest('[role="row"]');
                                                var index2 = wrapper2.data('item-index');
                                                var parent2 = $$(e.target).closest('td');

                                                self.showAddressInTable({
                                                    index: index2,
                                                    positionData: reportArray[index2],
                                                    parent: parent2,
                                                });
                                            });
                                            
                                        },                                     
                                        closed: function(popup){ 
                                            if (self.DATATABLEReportAssets ) {
                                                self.DATATABLEReportAssets.destroy();
                                            }                                                                               
                                            popup.$el.remove();
                                            popup.destroy();                                            
                                        },
                                    }
                        }).open();
                    }, 200);
                }
            },
            getAlertReport: function(e){
                let self = this;

                let wrapper = $$(e.target).closest('[role="row"]');
                let index = wrapper.data('item-index');
                let assetReportData = self.ReportData[index];
                let alertId = $$(e.target).data('alert-id');

                let userInfo = self.$app.methods.getFromStorage('userInfo');
                let alertList = self.$app.methods.getFromStorage('alertList');
                let data = {
                    MajorToken: userInfo.MajorToken,
                    MinorToken: userInfo.MinorToken,

                    DateFrom: self.AdditionalReportInfo.From,
                    DateTo: self.AdditionalReportInfo.To,
                    AsIds: assetReportData.AS_ID,
                    AlertIds: ''
                };  

                if (alertId) {
                    data.AlertIds = alertId;
                }else{
                    data.AlertIds = [];
                    if (alertList && alertList.length) {
                        for (let i = alertList.length - 1; i >= 0; i--) {
                            if (alertList[i].AlertId) {
                                data.AlertIds.push(alertList[i].AlertId);
                            }                            
                        }
                    }
                }
                //console.log(data);
                self.$app.preloader.show();
                self.$app.request.post(API_URL.GET_REPORT_BY_ALERT, data, function (result, xhr, status) {
                    //console.log(result);
                    self.$app.preloader.hide();
                    if (result.MajorCode == '000') {                        
                        if (result.Data && result.Data.length) {                            
                            self.showAlertReport(result.Data, data.AlertIds);
                        }else{
                            self.$app.methods.customDialog({title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.PROMPT_MSG055});
                        }
                        
                    }else{
                        self.$app.dialog.alert('Cant get Alert report'); 
                    }
                    
                },
                function (xhr, status) { 
                    self.$app.preloader.hide();
                    self.$app.dialog.alert('Error occured at Alert report ');                
                },
                'json'); 
            },
            showAlertReport: function(reportArray=[], alertId){ 
                if (reportArray.length ) {
                    var self = this;

                    /*var modalTitle = LANGUAGE.REPORT_PANEL_MSG55;
                    if (alertId && !Array.isArray(alertId)) {
                        modalTitle = Protocol.Helper.getAletTypeName(alertId);
                    }  */ 
                    var modalTitle = reportArray[0].AssetName;              

                    if (self.DynamicAssetsPopup && !self.DynamicAssetsPopup.destroyed) {
                        self.DynamicAssetsPopup.close();
                    }

                    var tableRows = '';
                    if (reportArray.length > 0) {
                        for (var i = reportArray.length - 1; i >= 0; i--) { 
                            if (reportArray[i].PositionTime) {
                                reportArray[i].PositionTimeLocal = moment(reportArray[i].PositionTime,'YYYY-MM-DD HH:mm:ss').add(app.data.UTCOFFSET,'minutes').format('DD/MM/YYYY HH:mm:ss'); 
                            } 
                            if (reportArray[i].AlertID) {
                                reportArray[i].AlertName = Protocol.Helper.getAletTypeName(reportArray[i].AlertID);
                            } 
                            if (reportArray[i].AlertCode && self.AdditionalReportInfo.GofenceList) {
                                if (reportArray[i].AlertID == 8 || reportArray[i].AlertID == 16) {
                                    reportArray[i].GeofenceName = self.AdditionalReportInfo.GofenceList[reportArray[i].AlertCode] ? self.AdditionalReportInfo.GofenceList[reportArray[i].AlertCode].Name : LANGUAGE.PROMPT_MSG0118;
                                }                                
                            }

                            tableRows +=    `<tr data-item-index="${ i }" > 
                                                <td class="cursor-pointer text-color-red showMap"  ><i class="f7-icons icon-address"></i></td>
                                                <td>${ reportArray[i].PositionTimeLocal }</td>    
                                                <td>${ reportArray[i].AlertName }</td>`;
                                            if (alertId == '8' || alertId == '16') {
                            tableRows +=        `<td>${ reportArray[i].GeofenceName ? reportArray[i].GeofenceName : LANGUAGE.PROMPT_MSG0118 }</td>`;
                                            }
                            tableRows +=        `<td class="white-space-normall min-width-200">
                                                    <a href="#" class="link showAddress">${ LANGUAGE.REPORT_PANEL_MSG63 }</a>
                                                </td>                                                     
                                            </tr>`;
                        }
                    }

                    var content = `
                                    <div class="popup popup-panel-bigger popup-report-assets-table" >
                                        <div class="view">
                                            <div class="page">
                                                <div class="navbar">
                                                    <div class="navbar-inner">
                                                        <div class="left"></div>
                                                        <div class="title">${ modalTitle }</div>  
                                                        <div class="right">
                                                            <a href="#" class="link popup-close" data-popup=".popup-report-assets-table">
                                                                <i class="f7-icons">close</i>
                                                            </a>
                                                        </div>                              
                                                    </div>
                                                </div>                                    
                                                <div class="page-content bg-color-lightgray" >
                                                    <table id="table-report-assets" class="mdl-data-table tableReportAssets" style="width:100%">
                                                        <thead>
                                                            <tr>
                                                                <th> ${ LANGUAGE.REPORT_PANEL_MSG36} </th> <!-- Map  -->
                                                                <th> ${ LANGUAGE.REPORT_PANEL_MSG40} </th> <!-- Date, time  --> 
                                                                <th> ${ LANGUAGE.REPORT_PANEL_MSG56} </th> <!-- Alert Name  -->`;
                                                            if (alertId == '8' || alertId == '16') {
                    content +=                                  `<th> ${ LANGUAGE.REPORT_PANEL_MSG84} </th> <!-- Geofence Name  --> `; 
                                                            }
                    content +=                                  `<th> ${ LANGUAGE.REPORT_PANEL_MSG41} </th> <!-- Address  -->
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                        ${ tableRows }
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    `

                    setTimeout(function(){                  
                        self.DynamicAssetsPopup = app.popup.create({
                            backdrop: true,
                            closeByBackdropClick: false,
                            animate: false,
                            content: content,
                                    
                                    on: {
                                        open: function (popup) { 
                                           
                                            self.DATATABLEReportAssets = $('#table-report-assets').DataTable({
                                                order: [[1, 'desc']],
                                                columnDefs: { targets: [ 0 ], orderable: false,  },
                                                lengthMenu: [5, 10, 25],
                                                pageLength: 5,
                                            });

                                            popup.$el.find('.tableReportAssets').on('click', '.showMap', function(e){                                           
                                                var wrapper2 = $$(e.target).closest('[role="row"]');
                                                var index2 = wrapper2.data('item-index');                                          

                                                self.showMapInModal({
                                                    PageTitle: modalTitle,
                                                    index: index2,
                                                    positionData: reportArray[index2],                                                    
                                                });
                                            });

                                            popup.$el.find('.tableReportAssets').on('click', '.showAddress', function(e){       
                                                var wrapper2 = $$(e.target).closest('[role="row"]');
                                                var index2 = wrapper2.data('item-index');
                                                var parent2 = $$(e.target).closest('td');

                                                self.showAddressInTable({
                                                    index: index2,
                                                    positionData: reportArray[index2],
                                                    parent: parent2,
                                                });
                                            });
                                            
                                        },                                     
                                        closed: function(popup){ 
                                            if (self.DATATABLEReportAssets ) {
                                                self.DATATABLEReportAssets.destroy();
                                            }                                                                               
                                            popup.$el.remove();
                                            popup.destroy();                                            
                                        },
                                    }
                        }).open();
                    }, 200);
                }
            },
            showMapInModal: function(params){
                var self = this;
                    
                    if (self.DynamicMapPopup && !self.DynamicMapPopup.destroyed) {
                        self.DynamicMapPopup.close();                       
                    }

                    setTimeout(function(){                  
                        self.DynamicMapPopup = app.popup.create({
                            backdrop: true,
                            closeByBackdropClick: false,
                            animate: false,
                            content: `
                                    <div class="popup popup-report-map" >
                                        <div class="view">
                                            <div class="page">
                                                <div class="navbar">
                                                    <div class="navbar-inner">
                                                        <div class="left"></div>
                                                        <div class="title">${ params.PageTitle }</div>  
                                                        <div class="right">
                                                            <a href="#" class="link popup-close" data-popup=".popup-report-map">
                                                                <i class="f7-icons">close</i>
                                                            </a>
                                                        </div>                              
                                                    </div>
                                                </div>                                    
                                                <div class="page-content bg-color-lightgray" >
                                                    <div id="mapReport" class="mapReport"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    `,
                                    on: {
                                        open: function (popup) { 
                                            var latLng = [
                                                params.positionData.Lat ? params.positionData.Lat : params.positionData.EVENT_POS_LAT,
                                                params.positionData.Lng ? params.positionData.Lng : params.positionData.EVENT_POS_LNG,
                                            ];
                                            self.MapTrackReport = Protocol.Helper.createMap({ target: 'mapReport', latLng: latLng, zoom: 14 });

                                            self.ReportMarker = L.marker(latLng, {icon: Protocol.MarkerIcon[2]});  
                                            //self.ReportMarker.bindTooltip(params.positionData.AssetName, {permanent: false, direction: 'right'});
                                            var markerData = self.getMarkerDataTable(params.positionData, params.index);
                                            self.ReportMarker.bindPopup(markerData,{ maxWidth:self.$app.data.MaxMapPopupWidth, closeButton: false})
                                                .on('popupopen', function (marker) {                                                      
                                                    if (params.positionData.CustomAddress) {
                                                        $$('body .popup-report-map #mapReport').find('[data-popupIdAddress="'+params.index+'"]').html(params.positionData.CustomAddress);
                                                    }else{
                                                        Protocol.Helper.getAddressByGeocoder(this.getLatLng(),function(address){
                                                            $$('body .popup-report-map #mapReport').find('[data-popupIdAddress="'+params.index+'"]').html(address); 
                                                            params.positionData.CustomAddress = address;                                                   
                                                        });
                                                    }                                                      
                                                });
                                            self.ReportMarker.addTo(self.MapTrackReport);                                               
                                        }, 
                                        closed: function(popup){ 
                                            self.MapTrackReport.removeLayer(self.ReportMarker);
                                            self.MapTrackReport.remove();                                           
                                            popup.$el.remove();
                                            popup.destroy();                                            
                                        },
                                    }
                        }).open();

                    }, 200);
            },
            showAddressInTable: function(params){
                var self = this;                
                
                if (!params.positionData.CustomAddress) {
                    params.parent.html('<p><span class="progressbar-infinite color-red"></span></p>');
                    var latLng = {
                        lat: params.positionData.Lat ? params.positionData.Lat : params.positionData.EVENT_POS_LAT,
                        lng: params.positionData.Lng ? params.positionData.Lng : params.positionData.EVENT_POS_LNG,
                    };
                    Protocol.Helper.getAddressByGeocoder(latLng, function(address){ 
                        params.positionData.CustomAddress = address;
                        params.parent.html(address);                                   
                    });
                }else{
                    params.parent.html(params.positionData.CustomAddress);
                }                
            },
            getMarkerDataTable: function(positionData, index){
                let self = this;
                //console.log(positionData);
                var markerData = `<table cellpadding="0" cellspacing="0" border="0" class="marker-data-table">`;
                if (positionData.AssetName) {
                    markerData +=   `<tr>
                                        <td class="marker-data-caption">${ LANGUAGE.REPORT_PANEL_MSG37 }</td>
                                        <td class="marker-data-value">${ positionData.AssetName }</td>
                                    </tr>`; 
                }
                if (positionData.Name) {
                    markerData +=   `<tr>
                                        <td class="marker-data-caption">${ LANGUAGE.REPORT_PANEL_MSG37 }</td>
                                        <td class="marker-data-value">${ positionData.Name }</td>
                                    </tr>`; 
                }
                if (positionData.EVENT_AS_NAME) {
                    markerData +=   `<tr>
                                        <td class="marker-data-caption">${ LANGUAGE.REPORT_PANEL_MSG37 }</td>
                                        <td class="marker-data-value">${ positionData.EVENT_AS_NAME }</td>
                                    </tr>`; 
                }

                if (positionData.PositionTimeLocal) {
                    markerData +=   `<tr>
                                        <td class="marker-data-caption">${ LANGUAGE.REPORT_PANEL_MSG40 }</td>
                                        <td class="marker-data-value">${ positionData.PositionTimeLocal }</td>
                                    </tr>`; 
                }
                if (positionData.IMEI) {
                    markerData +=   `<tr>
                                        <td class="marker-data-caption">${ LANGUAGE.REPORT_PANEL_MSG38 }</td>
                                        <td class="marker-data-value">${ positionData.IMEI }</td>
                                    </tr>`; 
                }
                if (positionData.EVENT_IMEI) {
                    markerData +=   `<tr>
                                        <td class="marker-data-caption">${ LANGUAGE.REPORT_PANEL_MSG38 }</td>
                                        <td class="marker-data-value">${ positionData.EVENT_IMEI }</td>
                                    </tr>`; 
                }

                if (positionData.EventName) {
                    markerData +=   `<tr>
                                        <td class="marker-data-caption">${ LANGUAGE.COM_MSG99 }</td>
                                        <td class="marker-data-value">${ positionData.EventName }</td>
                                    </tr>`; 
                } 

                if (positionData.AlertID == 512 || positionData.AlertID == 4 ) {
                    markerData +=   `<tr>
                                        <td class="marker-data-caption">${ LANGUAGE.REPORT_PANEL_MSG39 }</td>
                                        <td class="marker-data-value">${  positionData.Voltage ? positionData.Voltage : positionData.Battery  }</td>
                                    </tr>`; 
                }   
                if (positionData.AlertID == 8 || positionData.AlertID == 16 ) {
                    markerData +=   `<tr>
                                        <td class="marker-data-caption">${ LANGUAGE.REPORT_PANEL_MSG84 }</td>
                                        <td class="marker-data-value">${  positionData.GeofenceName  }</td>
                                    </tr>`; 
                }               
                
                markerData +=   `<tr>
                                    <td class="marker-data-caption">${ LANGUAGE.REPORT_PANEL_MSG41 }</td>
                                    <td class="marker-data-value marker-address" data-popupIdAddress="${ index }">${  positionData.CustomAddress ? positionData.CustomAddress : LANGUAGE.COM_MSG08 }</td>
                                </tr>
                            </table>`; 
                return markerData;
            },

        },
       
        on: {
            pageInit: function (e, page) { 
                var self = this; 
                if (self.Type) {  

                    /*let tableColumns = [];
                    
                    for (var i = 0; i < self.TableColNames.length; i++) {
                        tableColumns.push({
                            name: self.TableColNames[i].DisplayName,
                            data: self.TableColNames[i].Key
                        })                        
                    }*/

                    /*console.log(tableColumns);*/
                    DATATABLEReport = $('#table-report').DataTable({ 
                        dom: '<"mdl-grid"<"mdl-cell mdl-cell--12-col"B>><"mdl-grid"<"mdl-cell mdl-cell--6-col"l><"mdl-cell mdl-cell--6-col"f>><"mdl-grid dt-table"<"mdl-cell mdl-cell--12-col"rt>><"mdl-grid"<"mdl-cell mdl-cell--4-col"i><"mdl-cell mdl-cell--8-col"p>>',  
                        buttons: {
                            dom: {
                                container: {
                                    className: 'datatable-additional-buttons '
                                }
                            },
                            buttons: [
                                {
                                    extend: 'excelHtml5',
                                    text: '<i class="f7-icons icon-export-excel vertical-middle margin-right"></i>Excel',
                                    className: 'mdl-button mdl-button--raised bg-color-1 text-color-white'
                                }, 
                                {
                                    extend: 'pdfHtml5',
                                    text: '<i class="f7-icons icon-export-pdf vertical-middle margin-right"></i>PDF',
                                    className: 'mdl-button mdl-button--raised bg-color-2 text-color-white',
                                    orientation: 'landscape',
                                },
                                {
                                    extend: 'csvHtml5',
                                    text: '<i class="f7-icons icon-export-csv vertical-middle margin-right"></i>CSV',
                                    className: 'mdl-button mdl-button--raised bg-color-4 text-color-white',

                                },
                                {
                                    extend: 'print',
                                    text: '<i class="f7-icons icon-export-print vertical-middle margin-right"></i>Print',
                                    className: 'mdl-button mdl-button--raised bg-color-3 text-color-white',
                                    orientation: 'landscape',
                                }
                            ]                                                
                        },
                        order: [[1, 'asc']],
                        //columnDefs: [{ targets: [ 3, 4, 10 ], orderable: false,  }],
                        lengthMenu: [10, 25, 50, 100],
                        pageLength: 25,

                        /*data: self.ReportData,
                        columns: tableColumns*/
                    });
                }
                   
                              
                
            }, 
            pageAfterIn:function(){
                //var self = this;  
                //console.log('page in');
                
                
            }, 
            pageAfterOut: function () {
                // page has left the view
                console.log('here');
            },
            
        }
    };
</script>