<!--suppress JSAnnotator -->
<template>
	<div class="page" data-name="report-show">
        <div class="navbar">
            <div class="navbar-inner">
                <div class="left"></div>
                <div class="title">{{PageTitle}} - {{AdditionalReportInfo.TimePeriodText}}</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="row no-gap overflow-hidden">
                <div class="col-100 tablet-70  ">
                    <div class="card elevation-3 elevation-hover-4 elevation-transition min-height-360">
                        <div class="card-header bg-color-darkgray text-color-white">
                            {{@global.LANGUAGE.REPORT_PANEL_MSG72}}
                        </div>
                        <div class="card-content  card-content-padding">
                            <div class="row">
                                <div class="col text-align-center">
                                    <div
                                        class="gauge gauge-init"
                                        data-type="circle"
                                        data-value="{{AdditionalReportInfo.Graphs.Graph.GraphVal}}"
                                        data-value-text="{{AdditionalReportInfo.ActualActivationCount}}"
                                        data-value-text-color="#4dc08e"
                                        data-border-color="#4dc08e"
                                        data-label-text="{{@global.LANGUAGE.COM_MSG68}}"
                                        data-label-text-color="#4dc08e"
                                        data-label-font-weight="400"
                                        data-label-font-size="12"
                                        data-border-width="30"
                                    ></div>
                                    <h6 class="tooltip-init" data-tooltip="{{AdditionalReportInfo.Graphs.Graph.NameDescr}}">{{AdditionalReportInfo.Graphs.Graph.Name}}</h6>

                                </div>

                                <div class="col text-align-center">
                                    <div
                                        class="gauge gauge-init"
                                        data-type="circle"
                                        data-value="{{AdditionalReportInfo.Graphs.Graph1.GraphVal}}"
                                        data-value-text="{{ReportData.ActivationNum1}}"
                                        data-value-text-color="#f96868"
                                        data-border-color="#f96868"
                                        data-label-text="{{@global.LANGUAGE.COM_MSG68}}"
                                        data-label-text-color="#f96868"
                                        data-label-font-weight="400"
                                        data-label-font-size="12"
                                        data-border-width="30"
                                    ></div>
                                    <h6 class="tooltip-init" data-tooltip="{{AdditionalReportInfo.Graphs.Graph1.NameDescr}}">{{AdditionalReportInfo.Graphs.Graph1.Name}}</h6>
                                </div>
                                <div class="col text-align-center">
                                    <div
                                        class="gauge gauge-init"
                                        data-type="circle"
                                        data-value="{{AdditionalReportInfo.Graphs.Graph2.GraphVal}}"
                                        data-value-text="{{ReportData.ActivationNum2}}"
                                        data-value-text-color="#f9b256"
                                        data-border-color="#f9b256"
                                        data-label-text="{{@global.LANGUAGE.COM_MSG68}}"
                                        data-label-text-color="#f9b256"
                                        data-label-font-weight="400"
                                        data-label-font-size="12"
                                        data-border-width="30"
                                    ></div>
                                    <h6 class="tooltip-init" data-tooltip="{{AdditionalReportInfo.Graphs.Graph2.NameDescr}}">{{AdditionalReportInfo.Graphs.Graph2.Name}}</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-100 tablet-30  ">
                    <div class="card elevation-3 elevation-hover-4 elevation-transition min-height-360">
                        <div class="card-header bg-color-darkgray text-color-white">
                            {{@global.LANGUAGE.REPORT_PANEL_MSG73}} {{AdditionalReportInfo.TimePeriodText}} - {{AdditionalReportInfo.ActualActivationCount}}
                        </div>
                        <div class="card-content card-content-padding">
                            <div class="list no-margin">
                                <ul>
                                    {{#AdditionalReportInfo.ShortSolutionStats}}
                                    	{{#if Count}}
    		                                <li>
    		                                    <div class="item-content">
    		                                        <div class="item-media text-color-lightblue">
    		                                            <i class="f7-icons {{Icon}}"></i>
    		                                        </div>
    		                                        <div class="item-inner">
    		                                            <div class="item-title">
    		                                                {{ Name }}
    		                                            </div>
    		                                            <div class="item-after">
    		                                                {{ Count }}
    		                                            </div>
    		                                        </div>
    		                                    </div>
    		                                </li>  
                                    	{{/if}}
                                    {{/AdditionalReportInfo.ShortSolutionStats}}                              
                                </ul>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="row no-gap">
                <div class="col-100">
                    <div class="card elevation-6 elevation-hover-9 elevation-transition">
                        <div class="card-header bg-color-darkgray text-color-white">
                            {{@global.LANGUAGE.REPORT_PANEL_MSG74}} {{AdditionalReportInfo.TimePeriodText}}
                        </div>
                        <div class="card-content table-no-padding">
                            <table id="table-report-device-sold" class="mdl-data-table " style="width:100%">
                                <thead>
                                    <tr>                                    
                                        <th> {{@global.LANGUAGE.REPORT_PANEL_MSG45}} </th> <!-- Activation Date -->
                                        <th> {{@global.LANGUAGE.REPORT_PANEL_MSG37}} </th> <!-- Asset Name -->
                                        <th> {{@global.LANGUAGE.REPORT_PANEL_MSG38}} </th> <!-- IMEI  -->
                                        <th> {{@global.LANGUAGE.REPORT_PANEL_MSG46}} </th> <!-- Solution -->
                                        <th> {{@global.LANGUAGE.REPORT_PANEL_MSG47}} </th> <!-- ServiceProfile -->
                                        <th> {{@global.LANGUAGE.REPORT_PANEL_MSG48}} </th> <!-- AssetType  -->
                                        <th> {{@global.LANGUAGE.REPORT_PANEL_MSG49}} </th> <!-- Client Email  -->
                                        <th> {{@global.LANGUAGE.REPORT_PANEL_MSG50}} </th> <!-- Phone  -->
                                        <th> {{@global.LANGUAGE.REPORT_PANEL_MSG51}} </th> <!-- First Name  -->
                                        <th> {{@global.LANGUAGE.REPORT_PANEL_MSG52}} </th> <!-- Last Name  -->
                                    </tr>
                                </thead>
                                <tbody> 
                                        {{#ReportData.Datails}}
                                            <tr data-item-index="{{@index}}" >
                                                <td>{{ActivationDate}}</td>
                                                <td>{{AssetName}}</td>
                                                <td>{{IMEI}}</td>  
                                                <td>{{Solution}}</td>
                                                <td>{{ServiceProfile}}</td>
                                                <td>{{AssetType}}</td>
                                                <td>{{Email}}</td>
                                                <td>{{Mobile}}</td>
                                                <td>{{FirstName}}</td>
                                                <td>{{SubName}}</td>                           
                                            </tr>
                                        {{/ReportData.Datails}} 
                                                      
                                </tbody>                            
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
       

</template>

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

            var ret = {};            

            var type = self.$route.query.type;
            let timePeriodText = self.$route.query.timePeriodText;
            //let timePeriod = self.$route.query.timePeriod;

            let pageTitle = Protocol.Helper.getReportTypeName(type);
            let reportData = self.$app.methods.getFromStorage('reportData');
            let actualActivationCount = reportData.Datails.length;
            //let maxActivationNumber = Math.max(actualActivationCount, reportData.ActivationNum1, reportData.ActivationNum2);
            let summActivations = actualActivationCount + reportData.ActivationNum1 + reportData.ActivationNum2;
            let graphNames = Protocol.Helper.getTimePeriodNames(self.$route.query.timePeriod);
            if(!self.$route.query.timePeriod){
                graphNames.Name = timePeriodText;
                graphNames.DescrName = timePeriodText;
            }
            let shortSolutionStats = [
            	{
            		Name: LANGUAGE.PROMPT_MSG067,
                    Count: 0,
                    Icon: Protocol.Helper.getSolutionTypeIcon('none'),
            	}
            ];

            for (let i = reportData.Datails.length - 1; i >= 0; i--) {
                if (reportData.Datails[i].Solution) {
                    let index = shortSolutionStats.findIndex(x => x.Name == reportData.Datails[i].Solution);
                    if (index == -1) {
                        shortSolutionStats.push({
                            Name: reportData.Datails[i].Solution,
                            Count: 1,
                            Icon: Protocol.Helper.getSolutionTypeIcon(reportData.Datails[i].Solution),
                        });
                    }else{
                        shortSolutionStats[index].Count++; 
                    }
                }else{
                	shortSolutionStats[0].Count++;
                }                
            }

            //sorting from highest Count value to the lowest
            shortSolutionStats.sort((a,b) => (a.Count < b.Count) ? 1 : ((b.Count < a.Count) ? -1 : 0));

            if (!pageTitle) {
                pageTitle = LANGUAGE.REPORT_PANEL_MSG35;
            }
        
            ret = {
                Type: type,    
                PageTitle: pageTitle,
                ReportData: reportData,
                AdditionalReportInfo: {
                    TimePeriodText: timePeriodText,
                    ActualActivationCount: actualActivationCount,
                    ShortSolutionStats: shortSolutionStats,
                    Graphs: {
                    	Graph: {
                    		Name: graphNames.Name,
                    		NameDescr: graphNames.DescrName,
                    		GraphVal: actualActivationCount ? actualActivationCount / summActivations : 0,
                    	},
                    	Graph1: {
                    		Name: graphNames.Name1,
                    		NameDescr: graphNames.DescrName1,
                    		GraphVal: reportData.ActivationNum1 ? reportData.ActivationNum1 / summActivations : 0,
                    	},
                    	Graph2: {
                    		Name: graphNames.Name2,
                    		NameDescr: graphNames.DescrName2,
                    		GraphVal: reportData.ActivationNum2 ? reportData.ActivationNum2 / summActivations : 0,
                    	},
                    },
                    /*GraphVal: actualActivationCount / maxActivationNumber,
                    GraphVal1: reportData.ActivationNum1 / maxActivationNumber,
                    GraphVal2: reportData.ActivationNum2 / maxActivationNumber,
                    GraphName: graphNames.Name,
                    GraphName1: graphNames.Name1,
                    GraphName2: graphNames.Name2,*/
                },
              
            };
            //console.log(ret);

            return ret;
        },
        methods: {            
           
        },
       
        on: {
            pageInit: function (e, page) { 
                var self = this; 
                if (self.Type) {
                    //console.log('here');                   

                    var columnDefs = [];
                    var order = [[0, 'desc']];
                   
                    DATATABLEReport = $('#table-report-device-sold').DataTable({
                        columnDefs: columnDefs,
                        order: order,
                        lengthMenu: [5, 10, 25],
                        pageLength: 5,
                        scrollX: true,
                    });
                }
                   
                              
                
            },             
            
        }
    };
</script>