<template>
<!-- Page, data-name contains page name which can be used in callbacks -->
        <div class="page " data-name="asset-tracking-interval"> <!-- 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">{{@global.LANGUAGE.ASSET_LIST_MSG04}}</div>
                    <div class="right">
                        <!-- <a href="#" class="link">
                                                 <i class="f7-icons icon-notification"></i>
                                             </a>    -->                     
                    </div>
                    
                </div>
            </div>   

			{{#if isShown}}
            <div class="bottom-section-wrapper bottom-section-button-wrapper bg-color-white">
                <div class="row">
                    <button class="col button button-fill color-green elevation-2 upgradeNowButton {{#unless TrackingInterval.PayPlanCode}}disabled{{/unless}}" data-paylink="{{TrackingInterval.PayLink}}" data-payplancode="{{TrackingInterval.PayPlanCode}}">{{@global.LANGUAGE.COM_MSG17}}</button>   
                </div>
            </div>
			{{/if}}      
        
            <!-- Scrollable page content-->
            <div class="page-content">                
                {{#if isShown}}
				{{else}}<div class="block-title text-color-darkgray">{{@global.LANGUAGE.ASSET_LIST_MSG04}}</div>
				
				<div class="block">
                    <p>{{@global.LANGUAGE.PROMPT_MSG013}}</p>
                </div>
				{{/if}}
                <div class="list ">
                    <ul>
                        <li>
                            <div class="item-content three-rows">
                                <!-- <div class="item-media text-color-lightgray">
                                    <i class="f7-icons icon-name"></i>
                                </div> -->
                                <div class="item-inner">
                                    <div class="item-title">{{@global.LANGUAGE.ASSET_TRACKING_INTERVAL_MSG00}}</div>
                                    <div class="item-after">{{Name}}</div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <!-- <div class="item-media text-color-lightgray">
                                    <i class="f7-icons icon-imei"></i>
                                </div> -->
                                <div class="item-inner">
                                    <div class="item-title">{{@global.LANGUAGE.ASSET_TRACKING_INTERVAL_MSG01}}</div>
                                    <div class="item-after">{{IMEI}}</div>
                                </div>
                            </div>
                        </li>   
                        {{#if SolutionType}}  
                        <li>
                            <div class="item-content">
                                <!-- <div class="item-media text-color-lightgray">
                                   
                                </div> -->
                                <div class="item-inner">
                                    <div class="item-title">{{@global.LANGUAGE.ASSET_TRACKING_INTERVAL_MSG18}}</div>
                                    <div class="item-after">{{SolutionType}}</div>
                                </div>
                            </div>
                        </li>  
                        {{/if}} 
                        {{#if TagName}}  
                        <li>
                            <div class="item-content">
                                <!-- <div class="item-media text-color-lightgray">
                                   
                                </div> -->
                                <div class="item-inner">
                                    <div class="item-title">{{@global.LANGUAGE.ASSET_TRACKING_INTERVAL_MSG15}}</div>
                                    <div class="item-after">{{TagName}}</div>
                                </div>
                            </div>
                        </li>  
                        {{/if}}    
                        {{#if Describe1}}
                        <li>
                            <div class="item-content">
                                <!-- <div class="item-media text-color-lightgray">
                                    
                                </div> -->
                                <div class="item-inner">
                                    <div class="item-title">{{@global.LANGUAGE.ASSET_TRACKING_INTERVAL_MSG16}}</div>
                                    <div class="item-after">{{Describe1}}</div>
                                </div>
                            </div>
                        </li>
                        {{/if}}      
                        {{#if Describe2}}
                        <li>
                            <div class="item-content">
                                <!-- <div class="item-media text-color-lightgray">
                                    
                                </div> -->
                                <div class="item-inner">
                                    <div class="item-title">{{@global.LANGUAGE.ASSET_TRACKING_INTERVAL_MSG17}}</div>
                                    <div class="item-after">{{Describe2}}</div>
                                </div>
                            </div>
                        </li> 
                        {{/if}}                   
                    </ul>
                </div>
			{{#if isShown}}
                <div class="list no-hairlines no-hairlines-between no-margin list-block-radio">
                    <ul class="row no-gutter">
                        <li class="col-50">
                            <label class="item-radio item-content">
                                <input type="radio" name="tracking-period" value="1" checked />
                                <i class="icon icon-radio"></i>
                                <div class="item-inner">
                                    <div class="item-title">{{@global.LANGUAGE.ASSET_TRACKING_INTERVAL_MSG13}}</div>
                                </div>
                            </label>
                        </li>
                        <li class="col-50">
                            <label class="item-radio item-content">
                                <input type="radio" name="tracking-period" value="2"/>
                                <i class="icon icon-radio"></i>
                                <div class="item-inner">
                                    <div class="item-title">{{@global.LANGUAGE.ASSET_TRACKING_INTERVAL_MSG14}}</div>
                                </div>
                            </label>
                        </li>                    
                    </ul>
                </div>
                
			<div class="card card-tracking-interval elevation-6">
                    <div class="card-content card-content-padding  text-color-white text-align-center bg-color-red">
                        <p class="margin-bottom-8">{{@global.LANGUAGE.ASSET_TRACKING_INTERVAL_MSG06}} <span class="trackingInterval">{{TrackingInterval.IntervalDisplayed}}</span></p>
                        <div class="card-content-divider"></div>
                        <p class="size-16 margin-top-8">$ <span class="trackingCost">{{TrackingInterval.Cost}}</span></p>
                    </div>                                    
                </div>
                <div class="block no-margin overflow-hidde">
                    <div class="range-slider range-slider-tracking-interval">
                        <input type="range" name="rangeInput" min="0" max="4" value="0" step="1">
                    </div>
                </div>
                <div class="block bottom-indicator-list margin-top-0">
                    <ul class="row no-gutter color-gray size-12">
                        <li class="bottom-indicator col-20 text-align-left {{#js_if 'this.TrackingInterval.Value == 0'}}text-color-red{{/js_if}} ">
                            <i class="icon-ti-dot icon-name-img"></i><div class="text">1/12{{@global.LANGUAGE.ASSET_TRACKING_INTERVAL_MSG05}}</div>
                        </li>
                        <li class="bottom-indicator col-10 text-align-center {{#js_if 'this.TrackingInterval.Value == 1'}}text-color-red{{/js_if}} ">
                            <i class="icon-ti-dot icon-name-img"></i><div class="text">1/6{{@global.LANGUAGE.ASSET_TRACKING_INTERVAL_MSG05}}</div>
                        </li>
                        <li class="bottom-indicator col-35 text-align-center {{#js_if 'this.TrackingInterval.Value == 2'}}text-color-red{{/js_if}} ">
                            <i class="icon-ti-dot icon-name-img"></i><div class="text">1/1{{@global.LANGUAGE.ASSET_TRACKING_INTERVAL_MSG05}}</div>
                        </li>
                        <li class="bottom-indicator col-10 text-align-center {{#js_if 'this.TrackingInterval.Value == 3'}}text-color-red{{/js_if}} ">
                            <i class="icon-ti-dot icon-name-img"></i><div class="text">1/30{{@global.LANGUAGE.ASSET_TRACKING_INTERVAL_MSG04}}</div>
                        </li>
                        <li class="bottom-indicator col-20 text-align-right {{#js_if 'this.TrackingInterval.Value == 4'}}text-color-red{{/js_if}} ">
                            <i class="icon-ti-dot icon-name-img"></i><div class="text">1/1{{@global.LANGUAGE.ASSET_TRACKING_INTERVAL_MSG04}}</div>
                        </li>
                    </ul>
                </div>{{/if}}
                    
                <!-- <div class="block">
                    <div class="row">
                        <button class="col button button-fill color-green elevation-2 upgradeNowButton {{#unless TrackingInterval.PayPlanCode}}disabled{{/unless}}" data-paylink="{{TrackingInterval.PayLink}}" data-payplancode="{{TrackingInterval.PayPlanCode}}">{{@global.LANGUAGE.COM_MSG17}}</button>
                    </div>
                </div> -->
            </div>
        </div>
</template>

<style>
    .list-block-radio{

    }
    .md .list-block-radio label.item-radio>.icon-radio{
        margin-right: 16px;
    }
    .theme-dealer .card-tracking-interval{
        overflow: hidden;
        margin: 16px;
    }
    .bottom-indicator-list{

    }
        .bottom-indicator-list ul{
            list-style: none;
            padding: 0;
            margin: 0;
        }
            .bottom-indicator-list ul li:first-child .text{
                transform: none;
                position: initial;
                left: initial;
            }
            .bottom-indicator-list ul li:last-child .text{
                transform: none;
                position: initial;
                left: initial;
            }
            .bottom-indicator{
                position: relative;
            }
                .text{
                    left: 50%;
                    transform: translateX(-50%);
                    position: absolute;
                }
            .icon-ti-dot {
                font-size: 6px;
                padding: 0 4px;
            }
</style>
<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 ignore = false;
                    //console.log(asset);
					if(asset.SolutionType.toLowerCase().indexOf('track') >= 0 || asset.SolutionType.toLowerCase().indexOf('life') >= 0){
						ignore = true;
					}
                    if (asset) {                        
                        var countryCode = self.$app.methods.getFromStorage('userInfo').UserInfo.CountryCode; 
                        var trackingIntervalDetails = self.$app.methods.getTrackingIntervalDetailByCountyCode(countryCode); 
                       
                        ret = {
                            Name: asset.Name,
                            IMEI: asset.IMEI,
                            SolutionType: asset.SolutionType,
                            TagName: asset.TagName,
                            Describe1: asset.Describe1,
                            Describe2: asset.Describe2,
							isShown: !ignore,
                            TrackingInterval: trackingIntervalDetails,
                        };                        
                    }else{
                        console.log('There is no asset with such imei');
                    }
                }else{
                    console.log('There is no imei param');
                }
            }else{
                console.log('There is no params');
            }

            return ret;
        },
        methods: {
            updateTrackingHint: function(params){       
                var self = this;
                
                self.$setState({
                    TrackingInterval: {
                        Value: params.value,
                        Cost: Protocol.TrackingInterval[params.value][params.trackingPeriod][params.countryCode].cost,
                        PayLink: Protocol.TrackingInterval[params.value][params.trackingPeriod][params.countryCode].button+'&on0=imei&os0='+self.IMEI+'&on1=dn&os1='+self.$app.data.AppDetails.code+'&on2=appname&os2='+self.$app.data.AppDetails.name,
                        PayPlanCode: Protocol.TrackingInterval[params.value][params.trackingPeriod][params.countryCode].payPlanCode,
                        IntervalDisplayed: Protocol.TrackingInterval[params.value].intervalDisplayed,
                    }
                });
            },
        },
        on: {
            pageInit: function (e, page) { 
                var self = this;
                var rangeEl = page.$el.find('.range-slider-tracking-interval');
                var trackingPeriodEl = page.$el.find('input[name="tracking-period"]'); 
                var upgradeNowButtonEl = page.$el.find('.upgradeNowButton');
                var range = app.range.create({
                    el: rangeEl,                    
                    on: {
                        change: function (e, val) {                      
                            trackingIntervalParams.value = val;
                            trackingIntervalParams.trackingPeriod = page.$el.find('[name="tracking-period"]:checked').val();

                            self.updateTrackingHint(trackingIntervalParams);
                        }
                    }
                });

                var trackingIntervalParams = {};
                var countryCode = self.$app.methods.getFromStorage('userInfo').UserInfo.CountryCode; 
                switch (countryCode){
                    case 'AUS':
                        trackingIntervalParams.countryCode = countryCode;
                        break;
                    default:
                        trackingIntervalParams.countryCode = 'OTHER';
                }

                trackingPeriodEl.on('change', function(){      
                    trackingIntervalParams.value = range.getValue();
                    trackingIntervalParams.trackingPeriod = page.$el.find('[name="tracking-period"]:checked').val();
         
                    self.updateTrackingHint(trackingIntervalParams);
                }); 

                $$(upgradeNowButtonEl).on('click', function(){
                    var paylink = $$(this).data('paylink');

                    var data = {
                        imei: self.IMEI,
                        payPalnCode: $$(this).data('payplancode'),
                    };
  

                    self.$app.dialog.progress();
                    self.$app.request.get(API_URL.PREUPGRADE, data, function (result, xhr, status) {                         
                        console.log(result);
                        self.$app.dialog.close();
                        if (result && result.MajorCode == '000') {
                            
                            window.open(paylink,'_blank');
                                
                            setTimeout(function(){
                                self.$app.dialog.create({   
                                    title: '<div class="custom-modal-logo-wrapper"><img class="custom-modal-logo" src="resources/images/logo-modal.png" alt=""/></div>',             
                                    text: LANGUAGE.PROMPT_MSG030, //LANGUAGE.PROMPT_MSG017
                                    buttons: [
                                        {
                                            text: LANGUAGE.COM_MSG13,
                                            onClick: function() {  
                                                self.$app.dialog.alert(LANGUAGE.PROMPT_MSG032);   
                                                leftView.router.back();
                                            }
                                        },
                                        {
                                            text: LANGUAGE.COM_MSG14,                                                    
                                        },
                                    ]
                                }).open();
                            }, 3000);
                            
                                     
                        }else{
                            self.$app.dialog.alert(LANGUAGE.PROMPT_MSG034);                
                        }                        
                    },
                    function (xhr, status) {            
                        self.$app.dialog.close();
                        self.$app.dialog.alert('Error occured at Check Tracking Intarval feature');                
                    },
                    'json');  
                       
                });
            },
            pageBeforeRemove: function(e, page){
                app.range.destroy('.range-slider-tracking-interval');
            },
        }
    };
</script>