
<!--suppress JSAnnotator -->
<template>
<!-- Page, data-name contains page name which can be used in callbacks -->
		<div class="page " data-name="transfer-assets"> <!-- page-with-subnavbar -->
		<!-- Top Navbar -->
			<div class="navbar">
				<div class="navbar-inner">
					<div class="left">
						<a href="#" class="link back">
							<i class="icon icon-back"></i>
						</a>
					</div>
					<div class="title sliding">Assets List</div>
					<div class="right">
						<!-- <a href="#" class="link">
												 <i class="f7-icons icon-notification"></i>
											 </a>    -->
					</div>

				</div>
			</div>

			<div class="bottom-section-wrapper bottom-section-button-wrapper bg-color-white">
				<div class="row">
					<label for="submit-form" class="col button button-fill color-green elevation-2" tabindex="0" >{{@global.LANGUAGE.COM_MSG06}}</label>
				</div>
			</div>

			<!-- Scrollable page content-->
			<form name="AssetDriverForm" class="page-content">
				<!--<input type="hidden" name="IMEI" value="{{IMEI}}">-->
				<input type="submit" id="submit-form" class="display-none" />
				<div class="block-title text-color-darkgray">Sub Customer List</div>
				<div class="block">
					<p>{{@global.LANGUAGE.PROMPT_MSG0147}}</p>
				</div>

				 

				{{#if ShowDriverList}}
					<div key="DriverList" class="list no-hairline-bottom">
						<ul>
						 
							
							<!-- <li class="item-content">
							  	<div class="item-inner">
									<div class="item-title text-transform-uppercase">{{TurnOnAll.title}}</div>
									<div class="item-after">
								  		<label class="toggle toggle-all-driver">
											<input type="checkbox" name="checkbox-driver-all" {{#if TurnOnAll.state}}checked="checked"{{/if}}>
											<span class="toggle-icon"></span>
								  		</label>
									</div>
							  	</div>
							</li> -->

							{{#each Drivers}}
								<!--<li>
									<label class="item-checkbox item-content">
										<input type="radio" name="checkbox-driver" value="{{this.Code}}"/>
										<i class="icon icon-radio"></i>
										<div class="item-inner">
											<div class="item-title">{{this.FullName}}</div>
										</div>
									</label>
								</li>-->
								<li>
								  <label class="item-radio item-content">
									  <input type="radio" name="customers-radio" value="{{this.Code}}" />
									  <i class="icon icon-radio"></i>
									  <div class="item-inner">
										  <div class="item-title">{{this.FullName}}</div>
									  </div>
								  </label>
							  </li>
							{{/each}}
						</ul>
					</div>
					
					
				 
					
					 


					 
				{{else}}
					<div key="DriverListPreloader" class="block block-strong text-align-center">
						<div class="preloader color-red"></div>
					</div>
				{{/if}}

			</form>
		</div>
</template>


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

			let assetList = self.$app.methods.getFromStorage('assetList');
			let IMEI = decodeURIComponent(self.$route.params.imei);
	 
			let IMEIs =   IMEI.split(',')

			let contactList = self.$app.methods.getFromStorage('customerList');
            contactList = self.$app.methods.sortCustomerList(contactList);
			console.log('778',contactList)

		 

			let ret = {
			 
				ShowDriverList: false,
				Drivers: [],
			 
				ToggleAllDrivers: false,
		 
				TurnOnAll: {
					state: false,
					title: 'Select all drivers / Unselect all',  
				},
			 
			 
				IMEIs: IMEIs,
				IMEI: IMEI,
			 

			 
                ContactList: contactList,
                NoContacts: contactList.length <= 1,
			};
 			//console.log(ret);
			return ret;
		},
		methods: {
		 
		 
			initToggleAllDrivers: function(){
				let self = this;
				let checkboxes = self.$el.find('[name = "checkbox-driver"]');
		 
				self.ToggleAllDrivers = app.toggle.create({
					el: self.$el.find('.toggle-all-driver'),
					on: {
						change: function () {
							for (var i = checkboxes.length - 1; i >= 0; i--) {
								checkboxes[i].checked = this.checked;
							 
							}

						}
					}
				});
	 
				// if (alarmOptions === 0) {
				// 	if (!self.ToggleAllDrivers.checked) {
				// 		self.ToggleAllDrivers.toggle();
				// 	}
				// }
				
			 
			 
				
			},
			 
			saveDriverIds: function(data, url){
				var self = this;




				self.$app.dialog.progress();
				self.$app.request.post(url, data, function (result, xhr, status) {
					//console.log(result);
					
					if (result.MajorCode == '000') {
						self.$app.dialog.alert('Assets transfered');

						if (result.MinorCode == '1006') {

 						}else{
						
						 
					 
						}
					}else{
					self.$app.dialog.alert('Something wrong');
						// self.$app.methods.customNotification({
						// 	hold: 5000,
						// 	title: LANGUAGE.COM_MSG16
						// });
						// self.$app.methods.checkBalance();
					}
					self.$app.utils.nextFrame(() => {
						self.$app.dialog.close();
					});

				},
				function (xhr, status) {
					self.$app.utils.nextFrame(() => {
						self.$app.dialog.close();
					});

					self.$app.dialog.alert('Error occured at Transfer Assets');
				},
				'json');
			},
			getContactList: function(MajorToken){
                var self = this;

                self.$app.request.get(API_URL.GET_CUSTOMER_LIST + '?MajorToken=00000000-0000-0000-0000-000000000000&MinorToken=00000000-0000-0000-0000-000000000000&rows=500&page=1&sort=Name&order=asc&q=&PCode='+self.$app.data.MajorToken+'&CustomerType=&QA=', function (result, xhr, status) {
				    self.$app.preloader.hide();
                  
                    if (result && result.rows.length) {
                        self.$app.methods.setInStorage({name:'customerList', data:result.rows });
                        var contactList = self.$app.methods.sortCustomerList(result.rows);
						
						var drivers = contactList;//.filter(item => item.Number !== '' && item.Number !== null)
						console.log('drivers',drivers)
					 
                        self.$setState({
		                    Drivers: drivers,
                            ShowDriverList: true,
		                });
                    }

                },
                function (xhr, status) {
                    self.$app.preloader.hide();
                    self.$app.dialog.alert('Error occured at Get Contact List ');
                },
                'json');
				self.$app.utils.nextFrame(() => {
                     self.initToggleAllDrivers();
                });
            },
		 
		},

		on: {
			pageInit: function (e, page) {
				var self = this;


			 

			
				
				self.getContactList(self.$app.data.MajorToken);

				var form = page.$el.find('[name = "AssetDriverForm"]');
				
				
                form.on('submit', function(e){
                    e.preventDefault();
					let selectedSub = page.$el.find('[name="customers-radio"]:checked').val();
					let iButtons = []
			 
			 
			 
					/*let j = 0;
					for (let i = 0;  i < checkboxes.length; i++) {
				
						if (checkboxes[i].checked) {
						 
							if($$(checkboxes[i]).data('family') == undefined || $$(checkboxes[i]).data('check') == undefined || checkboxes[i].value == undefined){
								self.$app.dialog.alert('Incorrect format of ibutton tags');
								return
							}
							j++;
							iButtons.push(
								{
									index : j,
									Code : checkboxes[i].value.toString().padStart(12, '0'),
									CheckId :   $$(checkboxes[i]).data('check').toString().padStart(2, '0'),
									FamilyId :   $$(checkboxes[i]).data('family').toString().padStart(2, '0')
								}
							)
							
							
								  
						}
					}*/
            
					
 
			       
					
                    let url = API_URL.TRANSFER_ASSETS + '?MajorToken=00000000-0000-0000-0000-000000000000&MinorToken=00000000-0000-0000-0000-000000000000';
                    let data = {
                        //IMEIs: self.IMEIs,
						MajorToken: '00000000-0000-0000-0000-000000000000',//self.$app.data.MajorToken,
						MinorToken: '00000000-0000-0000-0000-000000000000',//self.$app.data.MinorToken,
						CustomerCode: selectedSub,
						IMEIs: self.IMEI,
					  }
					  
                   console.log('d',data)
                 
					
				 
					
			/*		self.$app.dialog.progress();
			 
					self.$app.dialog.alert('Assets transfered');
					self.$app.utils.nextFrame(() => {
						self.$app.dialog.close();
					});
               */
                    


                   self.saveDriverIds(data, url);

                    return false;
                })
				
			 
				

		  

		 

				


			},
			pageBeforeRemove: function () {
				let self = this;

				// if (self.ToggleAllDrivers) {
				// 	app.toggle.destroy(self.ToggleAllDrivers);
				// }

			 


		 
			},

		}
	};
</script>