<!--suppress JSAnnotator -->
<template>
<!-- Page, data-name contains page name which can be used in callbacks -->
        <div class="page " data-name="contact-edit"> <!-- page-with-subnavbar -->
        <!-- Top Navbar -->
            <div class="navbar">
                <div class="navbar-bg"></div>
                <div class="navbar-inner">
                    <div class="left">
                        <a href="#" class="link back">
                            <i class="icon icon-back"></i>
                        </a>
                    </div>
                    <div class="title sliding">{{IMEI}}</div>
                    <div class="right">
                        <!--<label for="submit-form-create-new-share" class="link icon-only">
                            <i class="f7-icons icon-header-apply"></i>
                        </label>-->
                    </div>
                </div>
            </div>

            <div class="bottom-section-wrapper bottom-section-button-wrapper bg-color-white">
                <div class="row">
                    <a @click="extendExpiryDate('{{Code}}')" href="#" class="col button button-fill color-green elevation-2 "><i class="f7-icons icon-header-refresh margin-right"></i> {{@global.LANGUAGE.SHARE_ASSETS_MSG023}}</a>
                </div>
            </div>

            <!-- Scrollable page content-->
            <form name="ShareNewAsset" class="page-content">
                <!--<input type="hidden" name="Code" value="{{Code}}">-->
                <input type="submit" id="submit-form-create-new-share" class="display-none" />

                <div class="list no-margin no-hairlines ">
                    <ul>
                        <li class="item-content item-input ">
                            <div class="item-media text-color-lightgray"><i class="f7-icons icon-number "></i></div>
                            <div class="item-inner">
                                <div class="item-title item-label">{{@global.LANGUAGE.SHARE_ASSETS_MSG007}}</div>
                                <div class="item-input-wrap ">
                                    <input type="text" name="Code" value="{{Code}}" maxlength="200" placeholder="{{@global.LANGUAGE.SHARE_ASSETS_MSG007}}" readonly>
                                </div>
                            </div>
                            <div @click="copyCode('{{Code}}')" class="link margin-right">
                                <i class="f7-icons icon-copy text-color-gray"></i>
                            </div>
                        </li>
                        <li class="item-content item-input ">
                            <div class="item-media text-color-lightgray"><i class="f7-icons icon-status-imei "></i></div>
                            <div class="item-inner">
                                <div class="item-title item-label">{{@global.LANGUAGE.ASSET_EDIT_MSG01}}</div>
                                <div class="item-input-wrap ">
                                    <input type="tel" name="IMEI" value="{{IMEI}}" maxlength="200" placeholder="{{@global.LANGUAGE.ASSET_EDIT_MSG01}}" readonly>
                                </div>
                            </div>
                        </li>
                        <li class="item-content item-input ">
                            <div class="item-media text-color-lightgray"><i class="f7-icons icon-asset-name "></i></div>
                            <div class="item-inner">
                                <div class="item-title item-label">{{@global.LANGUAGE.ASSET_EDIT_MSG03}}</div>
                                <div class="item-input-wrap ">
                                    <input type="text" name="Name" value="{{Name}}" maxlength="200" placeholder="{{@global.LANGUAGE.ASSET_EDIT_MSG03}}" readonly>
                                </div>
                            </div>
                        </li>

                        <li class="item-content item-input ">
                            <div class="item-media text-color-lightgray"><i class="f7-icons icon-status-date "></i></div>
                            <div class="item-inner">
                                <div class="item-title item-label">{{@global.LANGUAGE.SHARE_ASSETS_MSG008}}</div>
                                <div class="item-input-wrap ">
                                    <input type="text" name="Start" value="{{CreateTimeLocal}}" maxlength="200" placeholder="{{@global.LANGUAGE.SHARE_ASSETS_MSG008}}">
                                </div>
                            </div>
                        </li>
                        <li class="item-content item-input ">
                            <div class="item-media text-color-lightgray"><i class="f7-icons icon-other-remove "></i></div>
                            <div class="item-inner">
                                <div class="item-title item-label">{{@global.LANGUAGE.SHARE_ASSETS_MSG009}}</div>
                                <div class="item-input-wrap ">
                                    <input type="text" name="End" value="{{EndTimeLocal}}" maxlength="200" placeholder="{{@global.LANGUAGE.SHARE_ASSETS_MSG009}}">
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>

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


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

            let ret = {
                PageTitle: LANGUAGE.SHARE_ASSETS_MSG005,
            };

            return ret;
        },
        methods: {
            copyCode: function (code){
                let self = this;

                let isCopied = self.$app.methods.copyToClipboard(code)
                if(isCopied){
                    self.$app.methods.showToast(LANGUAGE.SHARE_ASSETS_MSG012);
                }
            },
            extendExpiryDate: function (code){
                var self = this;
                self.$app.dialog.prompt(LANGUAGE.SHARE_ASSETS_MSG024, LANGUAGE.SHARE_ASSETS_MSG023, function(value){
                    //console.log(value)
                    value = parseInt(value.trim())
                    if(!value){
                        self.$app.methods.customDialog({title: LANGUAGE.PROMPT_MSG100, text: LANGUAGE.SHARE_ASSETS_MSG025});
                        return
                    }
                    self.$app.preloader.show();
                    self.$app.request.post(API_URL.EDIT_ASSET_SHARE_CODE, {
                        MajorToken: self.$app.data.MajorToken,
                        //MinorToken: self.$app.data.MinorToken,
                        code: code,
                        days: value,
                    },
                      function (result){
                            self.$app.preloader.hide();
                          if(result.MajorCode === '000') {
                              self.$app.methods.customDialog({text: LANGUAGE.SHARE_ASSETS_MSG026})
                              leftView.router.back({force: true, ignoreCache: true});

                          }else{
                              self.$app.dialog.alert(LANGUAGE.PROMPT_MSG023 + `<br>MajorCode: ${result.MajorCode}<br>MinorCode: ${result.MinorCode}`);
                          }
                      },
                      function (err) {
                          console.log(err);
                          self.$app.dialog.alert(LANGUAGE.PROMPT_MSG023);
                      }, 'json');
                }, function (){
                    console.log('canceled')
                }, 30)
            },
        },

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

                let form = page.$el.find('[name = "ShareNewAsset"]');
                $$(form).on('submit', function(e){
                    e.preventDefault();


                    return false;
                });

            },
            pageAfterOut: function () {

            },

        }
    };
</script>