<template>
	<div class="page" data-name="report-show">
		<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 ">
			{{#js_if "@root.Type == '3' "}}
			<div class="col-100 tablet-100  ">
				<div class="card dashboard-card-type1 elevation-3 elevation-hover-4 elevation-transition">
					<div class="card-header bg-color-darkgray text-color-white">
						Voltage
					</div>
					<div class="card-content">
						<div id="chart-GVoltage"></div>
					</div>
				</div>
			</div>
			{{/if}}
			{{#if AdditionalReportInfo.TimePeriodText}}
			<div class="block no-margin-bottom">
				<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>
			{{/if}}
			<table id="table-report" class="mdl-data-table " style="width:100%">
				<thead>
					<tr>
						<!-- LOW BATTERY -->
						{{#js_if "@root.Type == '1' "}}
						<th class="no-export"> {{@global.LANGUAGE.REPORT_PANEL_MSG36}} </th> <!-- Map  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG37}} </th> <!-- Asset Name  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG38}} </th> <!-- IMEI  -->
						{{#if TypeDealer}}
						<th> {{@global.LANGUAGE.DASHBOARD_PANEL_MSG34}} </th> <!-- Stock Number  -->
						{{/if}}
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG39}} </th> <!-- Voltage(V)  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG40}} </th> <!-- Date, time  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG41}} </th> <!-- Address  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG140}} </th> <!-- Make  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG141}} </th> <!-- Model  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG142}} </th> <!-- Color  -->
						{{/js_if}}

						<!-- ALARMS -->
						{{#js_if " @root.Type == '9' "}}
						<th class="no-export"> {{@global.LANGUAGE.REPORT_PANEL_MSG36}} </th> <!-- Map  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG56}} </th> <!-- Alert Name  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG37}} </th> <!-- Asset Name  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG38}} </th> <!-- IMEI  -->
						{{#if TypeDealer}}
						<th> {{@global.LANGUAGE.DASHBOARD_PANEL_MSG34}} </th> <!-- Stock Number  -->
						{{/if}}
						<th align="center"> {{@global.LANGUAGE.REPORT_PANEL_MSG39}} </th> <!-- Voltage(V)  -->
						<th align="center"> {{@global.LANGUAGE.REPORT_PANEL_MSG40}} </th> <!-- Date, time  --> 
						 <th align="center"> {{@global.LANGUAGE.REPORT_PANEL_MSG222}}</th><!--Ignition State  -->
						<th align="center"> {{@global.LANGUAGE.REPORT_PANEL_MSG223}}</th><!-- Speed --> 
						<th align="center"> {{@global.LANGUAGE.REPORT_PANEL_MSG236}} </th> <!-- Hrs/24  -->
						<th align="center"> {{@global.LANGUAGE.REPORT_PANEL_MSG237}} </th> <!-- Hrs/Cont  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG41}} </th> <!-- Address  -->
						<th align="center"> {{@global.LANGUAGE.REPORT_PANEL_MSG140}} </th> <!-- Make  -->
						<th align="center"> {{@global.LANGUAGE.REPORT_PANEL_MSG141}} </th> <!-- Model  -->
						<th align="center"> {{@global.LANGUAGE.REPORT_PANEL_MSG142}} </th> <!-- Color  -->
						{{/js_if}}

						<!-- BATTERY DISCONNECT  -->
						{{#js_if "@root.Type == '4' "}}
						<th class="no-export"> {{@global.LANGUAGE.REPORT_PANEL_MSG36}} </th> <!-- Map  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG56}} </th> <!-- Alert Name  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG37}} </th> <!-- Asset Name  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG38}} </th> <!-- IMEI  -->
						{{#if TypeDealer}}
						<th> {{@global.LANGUAGE.DASHBOARD_PANEL_MSG34}} </th> <!-- Stock Number  -->
						{{/if}}
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG40}} </th> <!-- Date, time  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG41}} </th> <!-- Address  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG140}} </th> <!-- Make  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG141}} </th> <!-- Model  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG142}} </th> <!-- Color  -->
						{{/js_if}}

						<!-- NOT REPORTING  -->
						{{#js_if "@root.Type == '3' "}}
						<th class="no-export"> {{@global.LANGUAGE.REPORT_PANEL_MSG36}} </th> <!-- Map  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG37}} </th> <!-- Asset Name  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG38}} </th> <!-- IMEI  -->
						{{#if TypeDealer}}
						<th> {{@global.LANGUAGE.DASHBOARD_PANEL_MSG34}} </th> <!-- Stock Number  -->
						{{/if}}
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG39}} </th> <!-- Voltage(V)  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG42}} </th> <!-- Last Position Date, time  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG43}} </th> <!-- Last Position Address  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG140}} </th> <!-- Make  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG141}} </th> <!-- Model  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG142}} </th> <!-- Color  -->
						{{/js_if}}

						<!-- DEVICE SOLD  -->
						{{#js_if "@root.Type == '5' "}}
						<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 -->
						{{/js_if}}

						<!-- IN LOT && OFF LOT  -->
						{{#js_if "@root.Type == '6' || @root.Type == '7' "}}
						{{#js_if " @root.SplitBy == '2' "}}
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG54}} </th> <!-- Group Name  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG60}} </th> <!-- Total Assigned Assets  -->
						{{#js_if " @root.Type == '6' "}}
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG61}} </th> <!-- In Lot Assets  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG67}} </th> <!-- In Lot Details  -->
						{{else}}
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG62}} </th> <!-- Off Lot Assets  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG68}} </th> <!-- Off Lot Details  -->
						{{/js_if}}

						{{else}}
						<th class="no-export"> {{@global.LANGUAGE.REPORT_PANEL_MSG36}} </th> <!-- Map  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG54}} </th> <!-- Group Name  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG37}} </th> <!-- Asset Name  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG38}} </th> <!-- IMEI  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG41}} </th> <!-- Address  -->
						{{/js_if}}
						{{/js_if}}

						<!-- LOT OVERVIEW -->
						{{#js_if " @root.Type == '10' "}}
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG54}} </th> <!-- Group Name  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG60}} </th> <!-- Total Assigned Assets  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG61}} </th> <!-- In Lot Assets  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG67}} </th> <!-- In Lot Details  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG62}} </th> <!-- Off Lot Assets  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG68}} </th> <!-- Off Lot Details  -->
						{{/js_if}}

						<!-- DRIVE OFF -->
						{{#js_if " @root.Type == '8' "}}
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG54}} </th> <!-- Group Name  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG37}} </th> <!-- Asset Name  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG38}} </th> <!-- IMEI  -->
						{{/js_if}}

						<!-- Missing Stock nummber -->
						{{#js_if " @root.Type == '21' || @root.Type == '22' "}}
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG37}} </th> <!-- Asset Name  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG38}} </th> <!-- IMEI  -->
						<th> {{@global.LANGUAGE.ASSET_LIST_MSG22}} </th> <!-- Stock number  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG54}} </th> <!-- Group Name  -->
						<th> {{@global.LANGUAGE.ASSET_LIST_MSG24}} </th> <!-- make  -->
						<th> {{@global.LANGUAGE.ASSET_LIST_MSG23}} </th> <!-- model  -->
						<th> {{@global.LANGUAGE.ASSET_LIST_MSG26}} </th> <!-- color  -->
						<th> {{@global.LANGUAGE.ASSET_LIST_MSG25}} </th> <!-- year  -->
						{{/js_if}}

						<!-- Installed -->
						{{#js_if "@root.Type == '23' "}}
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG187}} </th> <!-- Installation Date  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG37}} </th> <!-- Asset Name  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG38}} </th> <!-- IMEI  -->
						<th> {{@global.LANGUAGE.ASSET_LIST_MSG22}} </th> <!-- Stock number  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG54}} </th> <!-- Group Name  -->
						<th> {{@global.LANGUAGE.ASSET_LIST_MSG24}} </th> <!-- make  -->
						<th> {{@global.LANGUAGE.ASSET_LIST_MSG23}} </th> <!-- model  -->
						<th> {{@global.LANGUAGE.ASSET_LIST_MSG26}} </th> <!-- color  -->
						<th> {{@global.LANGUAGE.ASSET_LIST_MSG25}} </th> <!-- year  -->
						{{/js_if}}

						<!-- In Inventory -->
						{{#js_if "@root.Type == '24' "}}
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG37}} </th> <!-- Asset Name  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG38}} </th> <!-- IMEI  -->
						<th> {{@global.LANGUAGE.ASSET_LIST_MSG22}} </th> <!-- Stock number  -->
						{{/js_if}}

						<!-- Installed from server log -->
						{{#js_if "@root.Type == '25' "}}
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG187}} </th> <!-- Installation Date  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG37}} </th> <!-- Asset Name  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG38}} </th> <!-- IMEI  -->
						<th> {{@global.LANGUAGE.ASSET_LIST_MSG22}} </th> <!-- Stock number  -->
						<th> {{@global.LANGUAGE.ASSET_EDIT_MSG21}} </th> <!-- VIN number  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG54}} </th> <!-- Group Name  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG48}} </th> <!-- Asset Type  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG191}} </th> <!-- Asset Condition  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG192}} </th> <!-- Installer Name  -->
						{{/js_if}}

						<!-- Deactivated from server log -->
						{{#js_if "@root.Type == '26' "}}
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG196}} </th> <!-- Time of Deactivation  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG37}} </th> <!-- Asset Name  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG38}} </th> <!-- IMEI  -->
						<th> {{@global.LANGUAGE.ASSET_LIST_MSG22}} </th> <!-- Stock number  -->
						<th> {{@global.LANGUAGE.ASSET_EDIT_MSG21}} </th> <!-- VIN number  -->

						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG48}} </th> <!-- Asset Type  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG191}} </th> <!-- Asset Condition  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG195}} </th> <!-- Installer Name  -->
						{{/js_if}}

						<!-- Deactivated -->
						{{#js_if "@root.Type == '27' "}}
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG196}} </th> <!-- Installation Date  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG37}} </th> <!-- Asset Name  -->
						<th> {{@global.LANGUAGE.REPORT_PANEL_MSG38}} </th> <!-- IMEI  -->
						<th> {{@global.LANGUAGE.ASSET_LIST_MSG22}} </th> <!-- Stock number  -->
						<th> {{@global.LANGUAGE.ASSET_LIST_MSG24}} </th> <!-- make  -->
						<th> {{@global.LANGUAGE.ASSET_LIST_MSG23}} </th> <!-- model  -->
						<th> {{@global.LANGUAGE.ASSET_LIST_MSG26}} </th> <!-- color  -->
						<th> {{@global.LANGUAGE.ASSET_LIST_MSG25}} </th> <!-- year  -->
						{{/js_if}}

					</tr>
				</thead>
				<tbody>

					<!-- LOW BATTERY -->
					{{#js_if "@root.Type == '1' "}}
					{{#ReportData}}
					<tr data-item-index="{{@index}}">
						<td @click="showMap" class=" cursor-pointer text-color-red"><i class="f7-icons icon-address"></i></td>
						<td>{{Name}}</td>
						<td>{{IMEI}}</td>
						{{#js_if "@root.TypeDealer "}}
						<td>{{StockNumber}}</td>
						{{/js_if}}
						<td>{{Battery}}</td>
						<td>{{DateTime}}</td>
						<!-- <td class="white-space-normall">{{Address}}</td> -->
						<td class="white-space-normall show-address  min-width-200">
							{{#if CustomAddress}}
							{{CustomAddress}}
							{{else}}
							<a @click="getAddressInTable" href="#" class="link">{{@global.LANGUAGE.REPORT_PANEL_MSG63}}</a>
							{{/if}}
						</td>
						<td>{{Make}}</td>
						<td>{{Model}}</td>
						<td>{{Color}}</td>
					</tr>
					{{/ReportData}}
					{{/js_if}}

					<!-- ALARMS -->
					{{#js_if " @root.Type == '9' "}}
					{{#ReportData}}
					<tr data-item-index="{{@index}}">
						<td @click="showMap" class=" cursor-pointer text-color-red"><i class="f7-icons icon-address"></i></td>
						<td>{{AlertName}}</td>
						<td>{{AssetName}}</td>
						<td>{{IMEI}}</td>
						{{#js_if "@root.TypeDealer "}}
						<td>{{StockNumber}}</td>
						{{/js_if}}
						<td align="center">{{Voltage}}</td>
						<td align="center" data-order="{{PositionTimeUnix}}">{{PositionTimeLocal}}</td>
						{{#js_if " this.Acc"}}
						<td align="center">On</td>
						{{else}}
						<td align="center">Off</td>
						{{/js_if}} 
						<td align="center">{{Speed}}</td>
						<td align="center">{{Hrs24}}</td>
						<td align="center">{{HrsCont}}</td>
						<!-- <td class="white-space-normall">{{Address}}</td> -->
						<td class="white-space-normall show-address min-width-200">
							<a @click="getAddressInTable" href="#" class=" link">{{@global.LANGUAGE.REPORT_PANEL_MSG63}}</a>
						</td>
						<td align="center">{{Make}}</td>
						<td align="center">{{Model}}</td>
						<td align="center">{{Color}}</td>
					</tr>
					{{/ReportData}}
					{{/js_if}}

					<!-- BATTERY DISCONNECT  -->
					{{#js_if "@root.Type == '4' "}}
					{{#ReportData}}
					<tr data-item-index="{{@index}}">
						<td @click="showMap" class=" cursor-pointer text-color-red"><i class="f7-icons icon-address"></i></td>
						<td>{{AlertName}}</td>
						<td>{{AssetName}}</td>
						<td>{{IMEI}}</td>
						{{#js_if "@root.TypeDealer "}}
						<td>{{StockNumber}}</td>
						{{/js_if}}
						<td data-order="{{PositionTimeUnix}}">{{PositionTimeLocal}}</td>
						<!-- <td class="white-space-normall">{{Address}}</td> -->
						<td class="white-space-normall show-address  min-width-200">
							<a @click="getAddressInTable" href="#" class="link">{{@global.LANGUAGE.REPORT_PANEL_MSG63}}</a>
						</td>
						<td>{{Make}}</td>
						<td>{{Model}}</td>
						<td>{{Color}}</td>
					</tr>
					{{/ReportData}}
					{{/js_if}}

					<!-- NOT REPORTING  -->
					{{#js_if "@root.Type == '3' "}}
					{{#ReportData}}
					<tr data-item-index="{{@index}}">
						<td @click="showMap" class=" cursor-pointer text-color-red"><i class="f7-icons icon-address"></i></td>
						<td>{{AssetName}}</td>
						<td>{{IMEI}}</td>
						{{#js_if "@root.TypeDealer "}}
						<td>{{StockNumber}}</td>
						{{/js_if}}
						<td>{{Voltage}}</td>
						<td data-order="{{PositionTimeUnix}}">{{PositionTimeLocal}}</td>
						<!-- <td class="white-space-normall">{{Address}}</td> -->
						<td class="white-space-normall show-address min-width-200">
							<a @click="getAddressInTable" href="#" class="  link">{{@global.LANGUAGE.REPORT_PANEL_MSG63}}</a>
						</td>
						<td>{{Make}}</td>
						<td>{{Model}}</td>
						<td>{{Color}}</td>
					</tr>
					{{/ReportData}}
					{{/js_if}}

					<!-- DEVICE SOLD  -->
					{{#js_if "@root.Type == '5' "}}
					{{#ReportData}}
					<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}}
					{{/js_if}}

					<!-- IN LOT && OFF LOT -->
					{{#js_if "@root.Type == '6' || @root.Type == '7' "}}

					{{#js_if " @root.SplitBy == '2' "}}
					<!-- Will by displayed by Group -->
					<!-- {{#ReportData}}
	                                                    <tr data-item-index="{{@index}}" >
	                                                        <td><i class="f7-icons icon-admin-groups text-color-gray vertical-middle margin-right"></i> {{GroupName}}</td>
	                                                        <td class="text-align-center">{{TotalAsset}}</td>
	                                                        {{#js_if " @root.Type == '6' "}}
	                                                        <td class="text-align-center">{{InArrayCount}}</td>
	                                                        <td><a @click="getModalWithAssets" href="#" data-type="in"  class='button button-fill button-small elevation-2 button-table color-green {{#js_if " this.InArrayCount == 0 "}} disabled {{/js_if}}'><i class="f7-icons icon-show-assets vertical-middle margin-right"></i>{{@global.LANGUAGE.REPORT_PANEL_MSG64}}</a></td>
	                                                        {{else}}
	                                                        <td class="text-align-center">{{OutArrayCount}}</td>
	                                                        <td><a @click="getModalWithAssets" href="#" data-type="out" class='button button-fill button-small elevation-2 button-table color-red {{#js_if " this.OutArrayCount == 0 "}} disabled {{/js_if}}' ><i class="f7-icons icon-show-assets vertical-middle margin-right"></i>{{@global.LANGUAGE.REPORT_PANEL_MSG64}}</a></td>
	                                                        {{/js_if}}
	                                                    </tr>
	                                                 {{/ReportData}} -->

					{{#js_if " @root.Type == '6' "}}
					{{#ReportData}}
					{{#js_if " this.InArrayCount != 0 "}}
					<tr data-item-index="{{@index}}">
						<td><i class="f7-icons icon-admin-groups text-color-gray vertical-middle margin-right"></i> {{GroupName}}
						</td>
						<td class="text-align-center">{{TotalAsset}}</td>
						<td class="text-align-center">{{InArrayCount}}</td>
						<td><a @click="getModalWithAssets" href="#" data-type="in"
								class='button button-fill button-small elevation-2 button-table color-green {{#js_if " this.InArrayCount == 0 "}} disabled {{/js_if}}'><i
									class="f7-icons icon-show-assets vertical-middle margin-right"></i>{{@global.LANGUAGE.REPORT_PANEL_MSG64}}</a>
						</td>
					</tr>
					{{/js_if}}
					{{/ReportData}}
					{{else}}
					{{#ReportData}}
					{{#js_if " this.OutArrayCount != 0 "}}
					<tr data-item-index="{{@index}}">
						<td><i class="f7-icons icon-admin-groups text-color-gray vertical-middle margin-right"></i> {{GroupName}}
						</td>
						<td class="text-align-center">{{TotalAsset}}</td>
						<td class="text-align-center">{{OutArrayCount}}</td>
						<td><a @click="getModalWithAssets" href="#" data-type="out"
								class='button button-fill button-small elevation-2 button-table color-red {{#js_if " this.OutArrayCount == 0 "}} disabled {{/js_if}}'><i
									class="f7-icons icon-show-assets vertical-middle margin-right"></i>{{@global.LANGUAGE.REPORT_PANEL_MSG64}}</a>
						</td>
					</tr>
					{{/js_if}}
					{{/ReportData}}
					{{/js_if}}
					{{else}}
					<!-- Will by displayed each asset -->
					{{#ReportData}}
					<tr data-item-index="{{@index}}">
						<td @click="showMap" class=" cursor-pointer text-color-red"><i class="f7-icons icon-address"></i></td>
						<td>{{GroupName}}</td>
						<td>{{AssetName}}</td>
						<td>{{IMEI}}</td>
						<td class="white-space-normall show-address min-width-200">
							<a @click="getAddressInTable" href="#" class=" link">{{@global.LANGUAGE.REPORT_PANEL_MSG63}}</a>
						</td>
					</tr>
					{{/ReportData}}
					{{/js_if}}
					{{/js_if}}

					<!-- LOT OVERVIEW -->
					{{#js_if " @root.Type == '10' "}}
					{{#ReportData}}
					<tr data-item-index="{{@index}}">
						<td><i class="f7-icons icon-admin-groups text-color-gray vertical-middle margin-right"></i> {{GroupName}}
						</td>
						<td class="text-align-center">{{TotalAsset}}</td>
						<td class="text-align-center">{{InArrayCount}}</td>
						<td><a @click="getModalWithAssets" href="#" data-type="in"
								class='button button-fill button-small elevation-2 button-table color-green {{#js_if " this.InArrayCount == 0 "}} disabled {{/js_if}}'><i
									class="f7-icons icon-show-assets vertical-middle margin-right"></i>{{@global.LANGUAGE.REPORT_PANEL_MSG64}}</a>
						</td>
						<td class="text-align-center">{{OutArrayCount}}</td>
						<td><a @click="getModalWithAssets" href="#" data-type="out"
								class='button button-fill button-small elevation-2 button-table color-red {{#js_if " this.OutArrayCount == 0 "}} disabled {{/js_if}}'><i
									class="f7-icons icon-show-assets vertical-middle margin-right"></i>{{@global.LANGUAGE.REPORT_PANEL_MSG64}}</a>
						</td>
					</tr>
					{{/ReportData}}
					{{/js_if}}

					<!-- DRIVE OFF -->
					{{#js_if " @root.Type == '8' "}}
					{{#ReportData}}
					<tr data-item-index="{{@index}}">
						<td>{{GroupName}}</td>
						<td>{{AssetName}}</td>
						<td>{{IMEI}}</td>
					</tr>
					{{/ReportData}}
					{{/js_if}}

					{{#js_if " @root.Type == '21' || @root.Type == '22' "}}
					{{#ReportData}}
					<tr data-item-index="{{@index}}">
						<td>{{Name}}</td>
						<td>{{IMEI}}</td>
						<td>{{StockNumber}}</td>
						<td>{{GroupName}}</td>
						<td>{{Make}}</td>
						<td>{{Model}}</td>
						<td>{{Color}}</td>
						<td>{{Year}}</td>
					</tr>
					{{/ReportData}}
					{{/js_if}}

					<!-- Installed  -->
					{{#js_if " @root.Type == '23' "}}
					{{#ReportData}}
					<tr data-item-index="{{@index}}">
						<td data-order="{{ActivationTimeUnix}}">{{ActivationTimeLocal}}</td>
						<td>{{Name}}</td>
						<td>{{IMEI}}</td>
						<td>{{StockNumber}}</td>
						<td>{{GroupName}}</td>
						<td>{{Make}}</td>
						<td>{{Model}}</td>
						<td>{{Color}}</td>
						<td>{{Year}}</td>
					</tr>
					{{/ReportData}}
					{{/js_if}}

					{{#js_if " @root.Type == '24' "}}
					{{#ReportData}}
					<tr data-item-index="{{@index}}">
						<td>{{Name}}</td>
						<td>{{IMEI}}</td>
						<td>{{StockNumber}}</td>
					</tr>
					{{/ReportData}}
					{{/js_if}}
					<!-- Installed from server log-->
					{{#js_if " @root.Type == '25' "}}
					{{#ReportData}}
					<tr data-item-index="{{@index}}">
						<td data-order="{{ActivationTimeUnix}}">{{ActivationTimeLocal}}</td>
						<td>{{NAME}}</td>
						<td>{{IMEI}}</td>
						<td>{{STOCKNUMBER}}</td>
						<td>{{VIN_NUMBER}}</td>
						<td>{{GROUP_NAME}}</td>
						<td>{{ASSET_TYPE}}</td>
						<td>{{ACTIVE_CONDITION}}</td>
						<td>{{SALER_NAME}}</td>
					</tr>
					{{/ReportData}}
					{{/js_if}}
					<!-- Deactivated Devices from server log-->
					{{#js_if " @root.Type == '26' "}}
					{{#ReportData}}
					<tr data-item-index="{{@index}}">
						<td data-order="{{ActivationTimeUnix}}">{{ActivationTimeLocal}}</td>
						<td>{{NAME}}</td>
						<td>{{IMEI}}</td>
						<td>{{STOCKNUMBER}}</td>
						<td>{{VIN_NUMBER}}</td>
						<!--<td>{{GROUP_NAME}}</td>-->
						<td>{{ASSET_TYPE}}</td>
						<td>{{ACTIVE_CONDITION}}</td>
						<td>{{SALER_NAME}}</td>
					</tr>
					{{/ReportData}}
					{{/js_if}}

					<!-- Deactivated Devices -->
					{{#js_if "@root.Type == '27' "}}
					{{#ReportData}}
					<tr data-item-index="{{@index}}">
						<td data-order="{{ActivationTimeUnix}}">{{ActivationTimeLocal}}</td>
						<td>{{Name}}</td>
						<td>{{IMEI}}</td>
						<td>{{StockNumber}}</td>
						<td>{{Make}}</td>
						<td>{{Model}}</td>
						<td>{{Color}}</td>
						<td>{{Year}}</td>
					</tr>
					{{/ReportData}}
					{{/js_if}}
				</tbody>
				<!-- <tfoot>
	                <tr>
	                    <th>Name </th>
	                    <th>Position</th>
	                    <th>Office</th>
	                    <th>Age</th>
	                    <th>Start date</th>
	                    <th>Salary</th>
	                </tr>
	            </tfoot> -->
			</table>
		</div>
	</div>

</template>

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

			var ret = {};
			var type = self.$route.query.type;
			var splitBy = self.$route.query.splitby;
			//var unit = self.$route.query.unit; 
			//console.log(unit)
			
			var pageTitle = Protocol.Helper.getReportTypeName(type);
			var userInfo = self.$app.methods.getFromStorage('userInfo');

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

		 

			if (type && reportData && reportData.length) {

				switch (type) {
					case '21': case '22':
						break;

					case '23': case '27':
						for (let i = reportData.length - 1; i >= 0; i--) {
							//converting time into local UTC
							if (reportData[i].ActivationTime) {
								reportData[i].ActivationTimeLocal = moment(reportData[i].ActivationTime, window.COM_TIMEFORMAT).utc().add(userInfo.UserInfo.TimeZone, 'hours').format('YYYY-MM-DD HH:mm:ss');/*.format(window.COM_TIMEFORMAT3);*/
								reportData[i].ActivationTimeUnix = moment(reportData[i].ActivationTime, window.COM_TIMEFORMAT).unix();
							}
						}
						break;
					case '25': case '26':
						for (let i = reportData.length - 1; i >= 0; i--) {
							if (reportData[i].ACTIVE_TIME) {
								reportData[i].ActivationTimeLocal = moment(reportData[i].ACTIVE_TIME, window.COM_TIMEFORMAT).utc().add(userInfo.UserInfo.TimeZone, 'hours').format('YYYY-MM-DD HH:mm:ss');/*.format(window.COM_TIMEFORMAT3);*/
								reportData[i].ActivationTimeUnix = moment(reportData[i].ACTIVE_TIME, window.COM_TIMEFORMAT).unix();
							}
							if (!reportData[i].ACTIVE_CONDITION || reportData[i].ACTIVE_CONDITION === '0') {
								reportData[i].ACTIVE_CONDITION = LANGUAGE.COM_MSG103;
							}
						}
						break;

					default:
						for (let i = reportData.length - 1; i >= 0; i--) {
							//converting time into local UTC
							if (reportData[i].PositionTime) {
								reportData[i].PositionTimeLocal = moment(reportData[i].PositionTime, window.COM_TIMEFORMAT).utc().add(userInfo.UserInfo.TimeZone, 'hours').format('YYYY-MM-DD HH:mm:ss');/*.format(window.COM_TIMEFORMAT3); app.data.UTCOFFSET, 'minutes'*/
								reportData[i].PositionTimeUnix = moment(reportData[i].PositionTime, window.COM_TIMEFORMAT).unix();
							}
							if (reportData[i].AlertID) {
								reportData[i].AlertName = Protocol.Helper.getAletTypeName(reportData[i].AlertID);
							}
							if (reportData[i].IMEI && POSINFOASSETLIST[reportData[i].IMEI]) {
								reportData[i].StockNumber = POSINFOASSETLIST[reportData[i].IMEI].StockNumber;
								reportData[i].Make = POSINFOASSETLIST[reportData[i].IMEI].Describe1;
								reportData[i].Model = POSINFOASSETLIST[reportData[i].IMEI].Describe2;
								reportData[i].Color = POSINFOASSETLIST[reportData[i].IMEI].Describe3;
							}
						}
				}
				  
			}

			if (!pageTitle) {
				pageTitle = LANGUAGE.REPORT_PANEL_MSG35;
			}
			//console.log(self.$route.query)
			ret = {
				Type: type,
				TypeDealer: self.$app.data.CustomerType === Protocol.CustomerTypes.Agent || self.$app.data.CustomerType === Protocol.CustomerTypes.Dealer,
				DataTable: false,
				PageTitle: pageTitle,
				ReportData: reportData,
				SplitBy: splitBy ? splitBy : '',
				AdditionalReportInfo: {
					TimePeriodText: self.$route.query.timePeriodText ? self.$route.query.timePeriodText : ''
				},
				ChartsArr: [],
				DynamicMapPopup: false,
				DynamicAssetsPopup: false,
				//ReportMarkerGroup: false,
				ReportMarker: false,
				MapTrackReport: false,
				DATATABLEReportAssets: false,
				DATATABLEReport: false,

			};

			return ret;
		},
		methods: {
			buildGraphics: function (graphicSlist = []) {
				var self = this;
				console.log('graphicSlist', graphicSlist)
				if (graphicSlist.length) {
					for (var i = graphicSlist.length - 1; i >= 0; i--) {


						var values = ['data'];
						var categories = [];
						for (var j = 0; j < graphicSlist[i].columns.length; j++) {
							categories.push(graphicSlist[i].columns[j][1]);
							values.push(graphicSlist[i].columns[j][0]);
						}


						self.ChartsArr.push(c3.generate({
							bindto: graphicSlist[i].bindto,
							color: {
								pattern: self.$app.data.ChartCustomization.colors
							},
							data: {
								columns: [
									values
								],
								type: 'bar',
								labels: false
							},
							bar: {
								width: {
									ratio: 0.5 // this makes bar width 50% of length between ticks
								}
							},
							axis: {
								x: {
									show: false,
									type: 'category',
									categories: categories
								},
								y: {
									show: true,
									label: {
										text: graphicSlist[i].name,
										position: 'outer-middle',

									},
									culling: {
										max: 100,
									},
								}
							},
							legend: {
								show: false
							}
						}));

					}
				}

			},
			showMap: function (e) {
				var self = this;
				var wrapper = $$(e.target).closest('[role="row"]');
				var index = wrapper.data('item-index');
				var positionData = self.ReportData[index];

				if (!positionData.Lat || !positionData.Lng) {
					self.$app.methods.customNotification({
						title: positionData.AssetName ? positionData.AssetName : positionData.IMEI,
						text: LANGUAGE.PROMPT_MSG031
					});
				} else {

					self.showMapInModal({
						PageTitle: positionData.AlertName ? positionData.AlertName : self.PageTitle,
						index: index,
						positionData: positionData,
						fromGroup: false,
					});
				}

			},
			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) {
								self.MapTrackReport = Protocol.Helper.createMap({ target: 'mapReport', latLng: [params.positionData.Lat, params.positionData.Lng], zoom: 14 });

								self.ReportMarker = L.marker([params.positionData.Lat, params.positionData.Lng], { 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.fromGroup) {
											if (params.fenceType == 'out') {
												if (self.ReportData[params.fromGroupIndex].OutArray[params.index].CustomAddress) {
													$$('body .popup-report-map #mapReport').find('[data-popupIdAddress="' + params.index + '"]').html(self.ReportData[params.fromGroupIndex].OutArray[params.index].CustomAddress);
												} else {
													Protocol.Helper.getAddressByGeocoder(this.getLatLng(), function (address) {
														$$('body .popup-report-map #mapReport').find('[data-popupIdAddress="' + params.index + '"]').html(address);
														self.ReportData[params.fromGroupIndex].OutArray[params.index].CustomAddress = address;
													});
												}
											} else {
												if (self.ReportData[params.fromGroupIndex].InArray[params.index].CustomAddress) {
													$$('body .popup-report-map #mapReport').find('[data-popupIdAddress="' + params.index + '"]').html(self.ReportData[params.fromGroupIndex].InArray[params.index].CustomAddress);
												} else {
													Protocol.Helper.getAddressByGeocoder(this.getLatLng(), function (address) {
														$$('body .popup-report-map #mapReport').find('[data-popupIdAddress="' + params.index + '"]').html(address);
														self.ReportData[params.fromGroupIndex].InArray[params.index].CustomAddress = address;
													});
												}
											}
										} else {
											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);
													self.ReportData[params.index].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);
			},
			getModalWithAssets: function (e) {
				var self = this;
				var wrapper = $$(e.target).closest('[role="row"]');
				var fenceType = $$(e.target).closest('a').data('type');
				var index = wrapper.data('item-index');
				var positionData = self.ReportData[index];
				var groupName = positionData.GroupName;
				var tableAssetArray = fenceType == 'out' ? positionData.OutArray : positionData.InArray;
				var modalTitle = fenceType == 'out' ? LANGUAGE.REPORT_PANEL_MSG05 : LANGUAGE.REPORT_PANEL_MSG06;

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

				var tableRows = '';

				if (tableAssetArray.length > 0) {
					for (var i = tableAssetArray.length - 1; i >= 0; i--) {
						tableRows += `<tr data-item-index="${i}" >
									    	<td class="cursor-pointer text-color-red showMap"  ><i class="f7-icons icon-address"></i></td>
									        <td>${tableAssetArray[i].Name}</td>
									        <td>${tableAssetArray[i].IMEI}</td>
									        <td class="white-space-normall min-width-200">
									            <a href="#" class="link showAddress">${LANGUAGE.REPORT_PANEL_MSG63}</a>
									        </td>
									    </tr>`;
					}
				}

				setTimeout(function () {
					self.DynamicAssetsPopup = app.popup.create({
						backdrop: true,
						closeByBackdropClick: false,
						animate: false,
						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_MSG37} </th> <!-- Asset Name  -->
	                       									<th> ${LANGUAGE.REPORT_PANEL_MSG38} </th> <!-- IMEI  -->
	                       									<th> ${LANGUAGE.REPORT_PANEL_MSG41} </th> <!-- Address  -->
	                       								</tr>
	                       							</thead>
	                       							<tbody>
	                       							${tableRows}
	                       							</tbody>
	                       						</table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                `,
						on: {
							open: function (popup) {

								self.DATATABLEReportAssets = $('#table-report-assets').DataTable({
									order: [[1, 'asc']],
									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 + ' - ' + tableAssetArray[index2].Name,
										index: index2,
										positionData: tableAssetArray[index2],
										fromGroup: true,
										fromGroupIndex: index,
										fenceType: fenceType,
									});
								});

								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: tableAssetArray[index2],
										fromGroup: true,
										fromGroupIndex: index,
										fenceType: fenceType,
										parent: parent2,
									});
								});

							},
							closed: function (popup) {
								if (self.DATATABLEReportAssets) {
									self.DATATABLEReportAssets.destroy();
								}
								popup.$el.remove();
								popup.destroy();
							},
						}
					}).open();
				}, 200);


			},
			getAddressInTable: function (e) {
				var self = this;
				var wrapper = $$(e.target).closest('[role="row"]');
				var parent = $$(e.target).closest('td');
				var index = wrapper.data('item-index');
				var positionData = self.ReportData[index];
 
				

				if (!positionData.Lat || !positionData.Lng) {
					self.$app.methods.customNotification({
						title: positionData.AssetName ? positionData.AssetName : positionData.IMEI,
						text: LANGUAGE.PROMPT_MSG031
					});
				} else {
					self.showAddressInTable({
						parent: parent,
						index: index,
						positionData: positionData
					});

				}

			},
			showAddressInTable: function (params) {
				var self = this;
				 
				if (params.fromGroup) {
					if (params.fenceType == 'out') {
						if (self.ReportData[params.fromGroupIndex].OutArray[params.index].CustomAddress) {
							params.parent.html(self.ReportData[params.fromGroupIndex].OutArray[params.index].CustomAddress);
						} else {
							params.parent.html('<p><span class="progressbar-infinite color-red"></span></p>');
							Protocol.Helper.getAddressByGeocoder({ lat: params.positionData.Lat, lng: params.positionData.Lng }, function (address) {
								params.parent.html(address);
								self.ReportData[params.fromGroupIndex].OutArray[params.index].CustomAddress = address;
							});
						}
					} else {
						if (self.ReportData[params.fromGroupIndex].InArray[params.index].CustomAddress) {
							params.parent.html(self.ReportData[params.fromGroupIndex].InArray[params.index].CustomAddress);
						} else {
							params.parent.html('<p><span class="progressbar-infinite color-red"></span></p>');
							Protocol.Helper.getAddressByGeocoder({ lat: params.positionData.Lat, lng: params.positionData.Lng }, function (address) {
								params.parent.html(address);
								self.ReportData[params.fromGroupIndex].InArray[params.index].CustomAddress = address;
							});
						}
					}

				} else {
					if (!params.positionData.CustomAddress) {
						params.parent.html('<p><span class="progressbar-infinite color-red"></span></p>');
						Protocol.Helper.getAddressByGeocoder({ lat: params.positionData.Lat, lng: params.positionData.Lng }, function (address) {
							self.ReportData[params.index].CustomAddress = address;
							params.parent.html(address);
						});
					} else {
						params.parent.html(params.positionData.CustomAddress);
					}
				}
			},
			getMarkerDataTable: function (positionData, index) {
				let self = this;

				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.PositionTimeLocal) {
					markerData += `<tr>
                                        <td class="marker-data-caption">${LANGUAGE.REPORT_PANEL_MSG40}</td>
                                        <td class="marker-data-value">${positionData.PositionTimeLocal}</td>
                                    </tr>`;
				}
				markerData += `<tr>
                                    <td class="marker-data-caption">${LANGUAGE.REPORT_PANEL_MSG38}</td>
                                    <td class="marker-data-value">${positionData.IMEI}</td>
                                </tr>`;

				if (self.Type == '1' || self.Type == '3') {
					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>`;
				}

				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;
			},
			getDTExportColumnsIndx: function (table) {
				let allColumns = table.find('thead th');
				let indexes = [];
				for (var i = 0; i < allColumns.length; i++) {
					if (!$$(allColumns[i]).hasClass('no-export')) {
						indexes.push(i);
					}
				}
				return indexes;
			},
			getAllAddresses: function (lat, lng) {
				return new Promise((resolve) => {
					Protocol.Helper.getAddressByGeocoder({ lat: lat, lng: lng }, function (address) {
						resolve(address);
					});			 
				});

			},
		},

		on: {
			pageInit: function (e, page) {

				var self = this;

				 

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


				if (self.Type) {
					var columnDefs = [
						{ targets: [0], orderable: false, }
					];
					var order = [[5, 'asc']]; //order by timestamp

					switch (self.Type) {
						case '1':
							order = [[1, 'asc']];
							break;
						case '5': case '8': case '10':
							order = [[0, 'asc']];
							break;
						case '6': case '7':
							if (self.SplitBy) {
								columnDefs = [];
								order = [[0, 'asc']];
							}
							break;
						case '21': case '22': case '23': case '24': case '25': case '26': case '27':
							columnDefs = [];
							order = [[0, 'desc']];
							break;
					}
					let dtExportColumnIndxs = self.getDTExportColumnsIndx(page.$el.find('table'));
					DATATABLEReport = $('#table-report').DataTable({
						columnDefs: columnDefs,
						order: order,
						dom: '<"mdl-grid"<"mdl-cell mdl-cell--12-col margin-top-0 margin-bottom-0"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: [
								{
									text: LANGUAGE.COM_MSG105,
									className: 'mdl-button mdl-button--raised bg-color-darkgray text-color-white',
									action: function () {
										this.disable();
									 self.$app.progressbar.show();
										let latlngArr = [];
										for (var i = 0; i < self.ReportData.length; i++) {
											latlngArr.push(['' +self.ReportData[i].Lat, '' +self.ReportData[i].Lng]);										 
										}
										// let promiseAddress = new Promise(function(resolve, reject) {
										// 	self.getAllAddresses(latlngArr, resolve, reject);
										// 	//console.log(data)
										// });	
										const promises = [];
       
										for (var i = 0; i < latlngArr.length; i++) {
											promises.push(self.getAllAddresses(latlngArr[i][0], latlngArr[i][1]));
										}		
										
										
										Promise.all(promises)
										.then(values => {										 
											self.$app.progressbar.hide();									 
											DATATABLEReport.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
											if (values[rowIdx]) {
												var data = this.data();
												//console.log(data)
												data[11] = values[rowIdx];
													this.data(data);
													self.ReportData[rowIdx].CustomAddress = values[rowIdx];
											}
											} );
										})
										.catch((error) => {
											return error
										})



									

									 
									 
									 

											// self.ReportData.forEach(function(item, i) {
											// 	if (!self.ReportData[i].CustomAddres) {
											// 		var parent =	document.querySelector('tr[data-item-index="'+ i +'"]') 
											// 		var child = parent.querySelector('.show-address');
											// 		Protocol.Helper.getAddressByGeocoder({ lat: item.Lat, lng: item.Lng }, function (address) {									 														
											// 			$$(child).html(address);
											// 			self.ReportData[i].CustomAddress = address;
											// 		});
											// 	} else {
											// 		$$(child).html(self.ReportData[i].CustomAddres);
											// 	}
									   
											
											// });
											self.$app.progressbar.hide();
									}
								},
								{
									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',
									title: self.PageTitle,
									exportOptions: {
										columns: dtExportColumnIndxs
									}
								},
								{
									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',
									title: self.PageTitle,
									exportOptions: {
										columns: dtExportColumnIndxs
									},
									orientation: 'landscape',
									customize: function (doc) {
										var now = new Date();
										//var jsDate = now.getDate()+'/'+(now.getMonth()+1)+'/'+now.getFullYear();
										var jsDate = ('0' + now.getDate()).slice(-2) + '/' + ('0' + (now.getMonth() + 1)).slice(-2) + '/' + now.getFullYear();

										doc.pageMargins = [20, 60, 20, 30];
										// Set the font size fot the entire document
										doc.defaultStyle.fontSize = 7;
										// Set the fontsize for the table header
										doc.styles.tableHeader.fontSize = 7;
										// Create a header object with 3 columns
										// Left side: Logo
										// Middle: brandname
										// Right side: A document title

										doc['header'] = (function () {
											return {
												columns: [

													/*{
														alignment: 'left',
														italics: true,
														text: messageTopLeft,
														fontSize: 9,
														margin: [10,0]
													},*/
													// {
													// 	image: self.$app.data.AppDetails.logoBase64,
													// 	alignment: 'center',
													// 	width: 120
													// },
													/*{
														alignment: 'right',
														fontSize: 9,
														text: messageTopRight
													}*/
												],
												margin: 20
											}
										});
										// Create a footer object with 2 columns
										// Left side: report creation date
										// Right side: current page and total pages
										doc['footer'] = (function (page, pages) {
											return {
												columns: [
													{
														alignment: 'left',
														text: [LANGUAGE.COM_MSG106 + ': ', { text: jsDate.toString() }]
													},
													{
														alignment: 'right',
														text: [LANGUAGE.COM_MSG107 + ' ', { text: page.toString() }, ' ' + LANGUAGE.COM_MSG108 + ' ', { text: pages.toString() }]
													}
												],
												margin: 20
											}
										});
									}
								},
								{
									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',
									title: self.PageTitle,
									exportOptions: {
										columns: dtExportColumnIndxs
									}
								},
								{
									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',
									title: self.PageTitle,
									orientation: 'landscape',
									exportOptions: {
										columns: dtExportColumnIndxs
									}
								}
							]
						},
					});
				
				}

				let graphicsColumns = {
					Voltage: [],
				};
				//console.log(self.ReportData)
				for (var i = self.ReportData.length - 1; i >= 0; i--) {
					//console.log('self.ReportData[]',self.ReportData[i])
					 graphicsColumns.Voltage.push([self.ReportData[i].Voltage, self.ReportData[i].AssetName]);
				}

				self.buildGraphics([
					{
						name: LANGUAGE.REPORT_PANEL_MSG96 + ' (' + LANGUAGE.COM_MSG82 + ')',
						bindto: '#chart-GVoltage',
						columns: graphicsColumns.Voltage
					},
				 
				]);

			},
			pageAfterIn: function () {
				//var self = this;
				//console.log('page in');


			},
			pageAfterOut: function () {
				// page has left the view
				console.log('here');
			},

		}
	};
</script>