<!--suppress JSAnnotator -->
<template>
<!-- Page, data-name contains page name which can be used in callbacks -->
        <div class="page " data-name="asset-activation"> <!-- 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>

            <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_MSG16}}</label>
                </div>
            </div>

            <!-- Scrollable page content-->
            <form name="assetActivation" 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}}">
                <input type="hidden" name="DeviceTypeCode" value="">
                <input type="submit" id="submit-form" class="display-none" />
                <div class="list margin-top-0">
                    <ul>
                        <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_EDIT_MSG01}}</div>
                                    <div class="item-after">{{IMEI}}</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_EDIT_MSG02}}</div>
                                    <div class="item-after">{{PRDTName}}</div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <a class="item-link smart-select smart-select-init custom-smart-select {{#unless SolutionTypes}}disabled{{/unless}}" data-open-in="popover" data-close-on-select="true" >
                                <select name="SolutionType" required>
                                    {{#SolutionTypes}}
                                        {{#js_if "this.Code != 'Boat_watch'"}}
                                        <option value="{{Code}}" >{{Name}}</option>   <!-- {{#js_if '@root.SolutionTypeDefault == this.Code '}} selected {{/js_if}} -->
                                        {{/js_if}}
                                    {{/SolutionTypes}}
                                </select>
                                <div class="item-content item-input">
                                    <div class="item-media text-color-lightgray">
                                        <!-- <i class="f7-icons icon-service-plan"></i>   -->
                                    </div>
                                    <div class="item-inner">
                                        <div class="item-title item-label">{{@global.LANGUAGE.ASSET_ACTIVATION_MSG01}}</div>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a class="item-link smart-select smart-select-init custom-smart-select {{#unless ServicePlans}}disabled{{/unless}}" data-open-in="popover" data-close-on-select="true">
                                <select name="ServicePlan" required>
                                    {{#ServicePlans}}
                                    <option value="{{Code}}" >{{Name}}</option>
                                    {{/ServicePlans}}
                                </select>
                                <div class="item-content item-input">
                                    <div class="item-media text-color-lightgray">
                                        <i class="f7-icons icon-service-plan"></i>
                                    </div>
                                    <div class="item-inner">
                                        <div class="item-title item-label">{{@global.LANGUAGE.ASSET_ACTIVATION_MSG00}}</div>
                                    </div>
                                </div>
                            </a>
                        </li>

                    </ul>
                </div>
                <!-- <div class="block">
                    <div class="row">
                        <button type="submit" class="col button button-fill color-green elevation-2">{{@global.LANGUAGE.COM_MSG16}}</button>
                    </div>
                </div> -->





            </form>
        </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];
                    //console.log(asset);
                    if (asset) {
                        ret = asset;
                        //ret.ActivationDetails = false;
                        ret.ServicePlans = false;
                        //ret.ServicePlanDefault = false;
                        ret.SolutionTypes = false;
                        //ret.SolutionTypeDefault = false;
                    }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');
            }
            //console.log(ret);
            return ret;
        },
        methods: {
            getDeviceTypeCode: function(data){
                var self = this;

                /*var data = {
                    imei: imei
                };*/

                app.preloader.show();
                self.$app.request.post(API_URL.GET_ACTIVATION_VERIFY, data, function (result, xhr, status) {
                    app.preloader.hide();
                    console.log(result);
                    if (result && result.Data && result.Data.DEVICETYPE) {
                        $$('input[name="DeviceTypeCode"]').val(result.Data.DEVICETYPE);

                        self.getActivationAdditionalData({ProductCode: result.Data.DEVICETYPE, IMEI: data.IMEI, DealerToken: data.DealerToken});

                    }else{
                        self.$app.dialog.alert('Something wrong');
                    }

                },
                function (xhr, status) {
                    app.preloader.hide();
                    self.$app.dialog.alert('Error occured');
                },
                'json');
            },
            getActivationAdditionalData: function(params){
                var self = this;
                console.log(params);
                app.preloader.show();
                self.$app.request.post(API_URL.GET_ACTIVATION_SSP, params, function (result, xhr, status) {
                    app.preloader.hide();

                    //console.log(result);
                    if (result.MajorCode == '000') {
                        if (result.Data && result.Data.ServiceProfiles && result.Data.ServiceProfiles.length && result.Data.Solutions && result.Data.Solutions.length) {

                            if (params.ProductCode && params.SolutionCode) {
                                self.$setState({
                                    //ActivationDetails: true,
                                    ServicePlans: result.Data.ServiceProfiles,
                                });
                                $$('[name="ServicePlan"]').change();
                            }else if(params.ProductCode){
                                 self.$setState({
                                    //SolutionTypeDefault: self.getDefaultSolution(result.Data.ServiceProfiles[0].Code),
                                    SolutionTypes: result.Data.Solutions,
                                });
                                $$('[name="SolutionType"]').change();

                            }
                        }else{
                            self.$app.dialog.alert('There is no Service Plans for this IMEI');
                        }
                    }else{
                        self.$app.dialog.alert('Something wrong');
                    }
                },
                function (xhr, status) {
                    self.$app.preloader.hide();
                    self.$app.dialog.alert('Error occured');
                },
                'json');
            },

        },

        on: {
            pageInit: function (e, page) {
                var self = this;
                var userInfo = self.$app.methods.getFromStorage('userInfo');

                var servicePlanEl = page.$el.find('select[name = "ServicePlan"]');
                var solutionTypeEl = page.$el.find('select[name = "SolutionType"]');
                var form = page.$el.find('[name = "assetActivation"]');

                self.getDeviceTypeCode({IMEI: self.IMEI, DealerToken: userInfo.MajorToken});

                $$(solutionTypeEl).on('change', function(){
                    self.getActivationAdditionalData({
                        SolutionCode: this.value,
                        ProductCode: $$('input[name="DeviceTypeCode"]').val(),
                        IMEI: $$('input[name="IMEI"]').val(),
                        DealerToken: userInfo.MajorToken,
                    });
                });

                $$(form).on('submit', function(e){
                    e.preventDefault();

                    var data = {
                        ServiceProfile: $$(servicePlanEl).val(),
                        SolutionType: $$(solutionTypeEl).val(),
                        DealerToken: userInfo.MajorToken,
                        DealerName: userInfo.UserInfo.CustomerName,
                        imei: self.IMEI,
                    };
                    if(self.$app.data.AppDetails.activationAutosuspend){
                        data.AutoSuspend = true
                    }

					self.$app.request.get(API_URL.GET_WEBSITES + '?Imei=' + $$('input[name="IMEI"]').val(), function (result, xhr, status) {						
						if (result.MajorCode == '000') {
							if (result.Data && result.Data[0].AURL && result.Data[0].AURL.length) {
								console.log('aurl: ', result.Data[0]);
								//reactivation.php?DealerToken=${this.MajorToken}&imei=${assetData.IMEI}&SolutionType=&DealerType=${userInfo.CustomerInfo.Type}`;
            
								var href = result.Data[0].AURL+'?'+app.utils.serializeObject(data) +'';
								window.open(href,'_blank');
								leftView.router.back();
								return false;
							}
						}else{
							self.$app.dialog.alert('Something wrong');
						}
					},
					function (xhr, status) {
						self.$app.preloader.hide();
						self.$app.dialog.alert('Error occured');
					},
					'json');

                    //var href = API_URL.ACTIVATION+'?'+app.utils.serializeObject(data);
                    //window.open(href,'_blank');

                });

            },


        }
    };
</script>