<!--suppress JSAnnotator -->
<template>
<!-- Page, data-name contains page name which can be used in callbacks -->
        <div class="page " data-name="asset-remote-control"> <!-- 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">{{Name}}</div>
                    <div class="right">
                        <!-- <a href="#" class="link">
                                                 <i class="f7-icons icon-notification"></i>
                                             </a>    -->                     
                    </div>
                    
                </div>
            </div>          
        
            <!-- Scrollable page content-->
            <div class="page-content">
                <div class="block-title text-color-darkgray">{{@global.LANGUAGE.ASSET_LIST_MSG06}}</div>
                <div class="block">
                    <p>{{@global.LANGUAGE.PROMPT_MSG018}}</p>
                </div>                
                
                

                <input type="hidden" name="IMEI" value="{{IMEI}}">
               <!--  <div class="block-title">{{@global.LANGUAGE.ASSET_REMOTE_CONTROL_MSG03}}</div> -->
                <div class="list">
                    <ul>                    
                        <li class="item-content">
                            <div class="item-media {{#if Geolock}} text-color-green {{else}} text-color-lightgray {{/if}}">
                                <i class="f7-icons icon-geolock"></i>
                            </div>
                            <div class="item-inner">
                                <div class="item-title">{{@global.LANGUAGE.ASSET_REMOTE_CONTROL_MSG00}}</div>
                                <div class="item-after">
                                    <label class="toggle toggle-Geolock">
                                        <input type="checkbox" name="Geolock" {{#if Geolock}} checked {{/if}}>
                                        <span class="toggle-icon"></span>
                                    </label>
                                </div>
                            </div>
                        </li>     
                        <li class="item-content">
                            <div class="item-media {{#if Immobilise}} text-color-red {{else}} text-color-lightgray {{/if}}">
                                <i class="f7-icons icon-immobilisation"></i>
                            </div>
                            <div class="item-inner">
                                <div class="item-title">{{@global.LANGUAGE.ASSET_REMOTE_CONTROL_MSG01}}</div>
                                <div class="item-after">
                                    <label class="toggle toggle-Immobilise">
                                        <input type="checkbox" name="Immobilise" {{#if Immobilise}} checked {{/if}}>
                                        <span class="toggle-icon"></span>
                                    </label>
                                </div>
                            </div>
                        </li>  
                        <li class="item-content">
                            <div class="item-media {{#if LockDoor}} text-color-red {{else}} text-color-lightgray {{/if}}">
                                <i class="f7-icons icon-doorlock"></i>
                            </div>
                            <div class="item-inner">
                                <div class="item-title">{{@global.LANGUAGE.ASSET_REMOTE_CONTROL_MSG02}}</div>
                                <div class="item-after">
                                    <label class="toggle toggle-LockDoor">
                                        <input type="checkbox" name="LockDoor" {{#if LockDoor}} checked {{/if}}>
                                        <span class="toggle-icon"></span>
                                    </label>
                                </div>
                            </div>
                        </li>                    
                    
                    
                    </ul>
                </div>
                
            </div>
        </div>
</template>


<script>
  // script must return component object
    return {
        data: function () {
            var self = this;
            var ret = {};            
            //app.methods.storageSetupTime();
            if (self.$route.params) {
                if (self.$route.params.imei) {
                    var assetList = self.$app.methods.getFromStorage('assetList');
                    var asset = assetList[self.$route.params.imei];

                    //var asset = POSINFOASSETLIST[self.$route.params.imei];                    
                    if (asset) { 
                        var assetFeaturesStatus = Protocol.Helper.getAssetStateInfo(POSINFOASSETLIST[asset.IMEI]);
                        //console.log(assetFeaturesStatus);

                        if (assetFeaturesStatus && assetFeaturesStatus.stats) {
                            ret = {
                                Name: asset.Name,
                                IMEI: asset.IMEI,
                                AssetId: asset.Id,
                                Geolock: assetFeaturesStatus.geolock.value,
                                Immobilise: assetFeaturesStatus.immob.value,
                                LockDoor: assetFeaturesStatus.lockdoor.value,
                            };     
                        }else{
                            ret = {
                                Name: asset.Name,
                                IMEI: asset.IMEI,
                                AssetId: asset.Id,                               
                            };    
                            console.log('There is no asset posInfo');
                        }                 
                    }else{
                        console.log('There is no position infofor such imei');
                    }
                }else{
                    console.log('There is no imei param');
                }
            }else{
                console.log('There is no params');
            }
            //console.log(ret);
            return ret;
        },
        methods: {
            changeState: function (params){
                var self = this;
                if (params && params.id) {        
                    var userInfo = self.$app.methods.getFromStorage('userInfo');
                    var url = API_URL.SET_GEOLOCK;
                    if (params.name == 'Immobilise') {
                        url = API_URL.SET_IMMOBILISATION;               
                    }else if(params.name == 'LockDoor'){
                        url = API_URL.SET_DOORLOCK;     
                    }
                    
                    var data = {
                        MajorToken: userInfo.MajorToken,
                        MinorToken: userInfo.MinorToken,
                        code: params.id,
                    };
                    if (params.name == 'LockDoor') {                        
                        data.state = params.state ? 'lock' : 'unlock';
                    }else{                        
                        data.state = params.state ? 'on' : 'off';                        
                    }

                    self.$app.preloader.show();
                    self.$app.request.get(url, data, function (result, xhr, status) { 
                        self.$app.preloader.hide();                        
                        console.log(result);
                        if (result && result.MajorCode == '000') {
                            self.$app.methods.setStatusNewState({
                                asset: params.imei,                        
                                forAlarm: params.name,
                                state: params.state
                            }); 
                            self.$setState({ [params.name]: params.state });  
                            self.$app.methods.checkBalance();
                            
                        }else if(result && result.MajorCode == '200' && result.MinorCode == '1003'){
                        	params.state = !params.state;
                            self.changeSwitcherState(params);
                            self.$app.methods.customDialog({title: LANGUAGE.PROMPT_MSG050, text: LANGUAGE.PROMPT_MSG051}); 
                            
                        }else if(result && result.MajorCode == '100' && result.MinorCode == '1003'){
                        	params.state = !params.state;
                            self.changeSwitcherState(params);
                            self.$app.methods.customDialog({title: LANGUAGE.PROMPT_MSG050, text: LANGUAGE.PROMPT_MSG051}); 

                        }else if(result && result.MajorCode == '100' && result.MinorCode == '0000'){
                        	params.state = !params.state;
                            self.changeSwitcherState(params);
                            self.$app.methods.customDialog({title: params.imei, text: LANGUAGE.PROMPT_MSG033}); 

                        }else{                            
                            params.state = !params.state;   
                            self.changeSwitcherState(params);
                            self.$app.dialog.alert('Something wrong');                                           
                        }                           
                        
                    },
                    function (xhr, status) {            
                        self.$app.preloader.hide();                        
                        self.$app.dialog.alert('Error occured at Save Asset details');                
                    },
                    'json');                        
                                  
                }
            },
            changeSwitcherState: function(params){  
            	var self = this;
			    if (params.name) {
			        var input = self.$el.find('input[name='+params.name+']');			        
			        if (input && input.length) {
			            input.prop('checked', params.state);                  
			        }
			    }
			}
          
        },
       
        on: {
            pageInit: function (e, page) { 
                var self = this;
                var geolockEl = page.$el.find('input[name = "Geolock"]');
                var immobiliseEl = page.$el.find('input[name = "Immobilise"]');
                var doorlockEl = page.$el.find('input[name = "LockDoor"]'); 
                                
                //var state = false;
                $$(geolockEl).on('change', function(){
                	self.changeState({id: self.AssetId, imei: self.IMEI, state: this.checked, name: this.attributes.name.value});  
                });
                $$(immobiliseEl).on('change', function(){
                    if (POSINFOASSETLIST[self.IMEI]) {
                        if ((parseInt(POSINFOASSETLIST[self.IMEI]._FIELD_INT2) & 1) > 0) { // check if asset support immobilise feature
                            self.changeState({id: self.AssetId, imei: self.IMEI, state: this.checked, name: this.attributes.name.value}); 
                        } else{
                            self.changeSwitcherState({state: !this.checked, name: this.attributes.name.value});       
                            self.$app.methods.customDialog({title: POSINFOASSETLIST[self.IMEI].Name, text: LANGUAGE.PROMPT_MSG033});
                        } 
                    }else{
                        self.changeState({id: self.AssetId, imei: self.IMEI, state: this.checked, name: this.attributes.name.value}); 
                    }                    	
                });
                $$(doorlockEl).on('change', function(){
                    if (POSINFOASSETLIST[self.IMEI]) {
                        self.changeState({id: self.AssetId, imei: self.IMEI, state: this.checked, name: this.attributes.name.value}); 
                    }else{
                        if ((parseInt(POSINFOASSETLIST[self.IMEI]._FIELD_INT2) & 512) > 0) { // check if asset support immobilise feature
                            self.changeState({id: self.AssetId, imei: self.IMEI, state: this.checked, name: this.attributes.name.value}); 
                        } else{
                            self.changeSwitcherState({state: !this.checked, name: this.attributes.name.value});       
                            self.$app.methods.customDialog({title: POSINFOASSETLIST[self.IMEI].Name, text: LANGUAGE.PROMPT_MSG033});
                        } 
                    }                    	
                });
                
            },   
            pageAfterOut: function () {
                /*var toggleAll = self.$app.toggle.get('.toggle-all-alarm');
                console.log(toggleAll);*/
            },  

        }
    };
</script>