<!--suppress JSAnnotator -->
<template>
<!-- Page, data-name contains page name which can be used in callbacks -->
        <div class="page " data-name="asset-transfer"> <!-- page-with-subnavbar -->
        	<!-- <form action="" name="AssetEditForm"> -->

        <!-- 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">Asset Transfer</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="AssetEditForm" class="page-content">

                <input type="hidden" name="Id" value="{{Id}}">
                <input type="hidden" name="IMEI" value="{{IMEI}}">
                <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 {{#if @global.IS_MARINE}}icon-boat{{else}}icon-name{{/if}}"></i>
                                </div>
                                <div class="item-inner">
                                    <div class="item-title">{{@global.LANGUAGE.ASSET_EDIT_MSG03}}</div>
                                    <div class="item-after">{{Name}}</div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>

                <div class="block-title">{{@global.LANGUAGE.ASSET_EDIT_MSG12}}</div>
                <div class="list ">
                    <ul>

                        <li class="{{#if NoContacts}} tooltip-init {{/if}}" data-tooltip="{{@global.LANGUAGE.PROMPT_MSG0125}}<br>{{@global.LANGUAGE.PROMPT_MSG0126}}">
                            <a class="item-link smart-select smart-select-init custom-smart-select {{#if NoContacts}} disabled  {{/if}}" data-open-in="popup" data-searchbar="true" data-close-on-select="true"  >
                                <select name="DriverCode" >
                                    {{#ContactList}}
                                    <option
                                      value="{{Code}}"
                                      data-display-as="{{FirstName}} {{SubName}}"
                                      {{#if Selected}} selected {{/if}}
                                    >{{FirstName}} {{SubName}}{{#if Number}}({{Number}}){{/if}}</option>
                                    {{/ContactList}}

                                </select>
                                <div class="item-content item-input">
                                    <div class="item-media text-color-lightgray">
                                        <i class="f7-icons icon-driver"></i>
                                    </div>
                                    <div class="item-inner">
                                        <div class="item-title item-label">
                                            {{#if @global.IS_MARINE}}
                                            {{@global.LANGUAGE.ASSET_EDIT_MSG24}}
                                            {{else}}
                                            {{@global.LANGUAGE.ASSET_EDIT_MSG23}}
                                            {{/if}}
                                        </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_MSG06}}</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];


                    var contactList = self.$app.methods.getFromStorage('contactList');
                    contactList = self.$app.methods.sortContactList(contactList);
                    contactList.unshift({
                        Code: '000000',
                        Number: LANGUAGE.COM_MSG128,
                        FirstName: LANGUAGE.ASSET_LIST_MSG13
                    })

                    if (asset) {

                        asset.NoContacts = false;
                        asset.ContactList = contactList;
                        if (asset.ContactList.length == 1) {
                            asset.NoContacts = true;
                        }

                        if(!asset.DriverCode){
                            asset.DriverCode = '000000'
                            contactList[0].selected = true
                        }else{
                            let index = contactList.findIndex((item) =>  item.Code === asset.DriverCode)
                            contactList[ index === -1 ? 0 : index ].Selected = true
                        }
                        ret = asset;
                    }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: {
            saveAssetDetails: function(data){
                var self = this;

                self.$app.preloader.show();
                self.$app.request.get(API_URL.EDIT_DEVICE, data, function (result, xhr, status) {
                    self.$app.preloader.hide();
                    console.log(result);
                    if (result.MajorCode === '000') {
                        self.$app.methods.setAssetList({device: data});
                        //self.$app.methods.setAssetList({devices: [{IMEI: data.IMEI, Props: data}]});

                        //TargetAsset.Img = '';
                        self.$app.methods.initGroupAssetList();
                        if(self.$app.data.BottomWidgetAssetImei === self.IMEI){
                            self.$app.emit('bottomWidgetShowAssetDetails', self.IMEI)
                        }
                        leftView.router.back();

                    }else if(result.MajorCode === '100' && result.MinorCode === '1003'){
                        self.$app.methods.customDialog({title: LANGUAGE.PROMPT_MSG050, text: LANGUAGE.PROMPT_MSG051});
                    }else{
                        self.$app.dialog.alert('Something wrong');
                    }

                },
                function (xhr, status) {
                    self.$app.preloader.hide();
                    self.$app.dialog.alert('Error occured at Save Asset details');
                },
                'json');
            },

        },

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

                var form = page.$el.find('[name = "AssetEditForm"]');


                form.on('submit', function(e){
                    e.preventDefault();
                    var userInfo = self.$app.methods.getFromStorage('userInfo');
                    var data = {
                        MinorToken: userInfo.MinorToken,
                        MajorToken: userInfo.MajorToken,
                        Code: page.$el.find('input[name="Id"]').val(),
                        IMEI: page.$el.find('input[name="IMEI"]').val(),
                        name: self.Name,
                        registration: self.Registration,
                        stockNumber: self.StockNumber,
                        tag: self.TagName,
                        speedUnit: self.Unit,
                        initMileage: self.InitMileage,
                        initAccHours: self.InitAcconHours,
                        attr1: self.Describe1,
                        attr2: self.Describe2,
                        attr3: self.Describe3,
                        attr4: self.Describe4,
                        /*MaxSpeed: self.Registration,
                        BusinessExpense: self.Registration,
                        FuelEconomy: self.Registration,
                        EngineCapacity: self.Registration,
                        OffroadTaxCredit: self.Registration,
                        AssetType: self.Registration,*/
                        DriverCode: page.$el.find('[name="DriverCode"]').val(),
                    };
                    if(data.DriverCode === '000000'){
                        data.DriverCode = ''
                    }


                   // console.log(data);
                    self.saveAssetDetails(data);

                    return false;
                });
            },

        }
    };
</script>