<!--suppress JSAnnotator -->
<template>
<!-- Page, data-name contains page name which can be used in callbacks -->
        <div class="page " data-name="alarm-account-settings"> <!-- 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.ACCOUNT_ALARM_SETTINGS_MSG00}}</div>
                    <div class="right">

                    </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="AlarmSettingsForm" class="page-content ">
                <input type="hidden" name="Code" value="{{Code}}">
                <input type="submit" id="submit-form" class="display-none" />

                <div class="block">
                    <p>{{@global.LANGUAGE.ACCOUNT_ALARM_SETTINGS_MSG05}}</p>
                </div>
                <div class="list ">
                    <ul>
                        <li>
                            <div class="item-content item-input">
                                <div class="item-media text-color-lightgray">
                                    <i class="f7-icons icon-admin-alarms"></i>
                                </div>
                                <div class="item-inner">
                                    <div class="item-title item-label">{{@global.LANGUAGE.ACCOUNT_ALARM_SETTINGS_MSG01}}</div>
                                    <div class="item-input-wrap">
                                        <input type="text" name="Input1High" placeholder="{{@global.LANGUAGE.ACCOUNT_ALARM_SETTINGS_MSG01}}" value="{{Input1}}" maxlength="200" >
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content item-input">
                                <div class="item-media text-color-lightgray">
                                    <!-- <i class="f7-icons icon-admin-geofences"></i> -->
                                </div>
                                <div class="item-inner">
                                    <div class="item-title item-label">{{@global.LANGUAGE.ACCOUNT_ALARM_SETTINGS_MSG02}}</div>
                                    <div class="item-input-wrap">
                                        <input type="text" name="Input1Low" placeholder="{{@global.LANGUAGE.ACCOUNT_ALARM_SETTINGS_MSG02}}" value="{{Input1Low}}" maxlength="200" >
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content item-input">
                                <div class="item-media text-color-lightgray">
                                    <!--<i class="f7-icons icon-admin-alarms"></i>-->
                                </div>
                                <div class="item-inner">
                                    <div class="item-title item-label">{{@global.LANGUAGE.ACCOUNT_ALARM_SETTINGS_MSG03}}</div>
                                    <div class="item-input-wrap">
                                        <input type="text" name="Input2" placeholder="{{@global.LANGUAGE.ACCOUNT_ALARM_SETTINGS_MSG03}}" value="{{Input2}}" maxlength="200" >
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content item-input">
                                <div class="item-media text-color-lightgray">
                                    <!-- <i class="f7-icons icon-admin-geofences"></i> -->
                                </div>
                                <div class="item-inner">
                                    <div class="item-title item-label">{{@global.LANGUAGE.ACCOUNT_ALARM_SETTINGS_MSG04}}</div>
                                    <div class="item-input-wrap">
                                        <input type="text" name="Input2Low" placeholder="{{@global.LANGUAGE.ACCOUNT_ALARM_SETTINGS_MSG04}}" value="{{Input2Low}}" maxlength="200" >
                                    </div>
                                </div>
                            </div>
                        </li>

                    </ul>
                </div>

            </form>

        </div>
    </template>


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

            var userAlarmSettings = self.$app.methods.getFromStorage('userAlarmSettings');
            var ret = {
                //TempLow: -10,
                //TempHigh: 5,
            };
            if (!self.$app.methods.isObjEmpty(userAlarmSettings)){
                ret = userAlarmSettings
            }


            return ret;
        },
        methods: {

            save: function(data){
                var self = this;

                self.$app.preloader.show();
                self.$app.request.post(API_URL.SET_USER_ALARMSETTINGS, data, function (result={}, xhr, status) {
                    self.$app.utils.nextFrame(()=>{
                        self.$app.preloader.hide();
                    });
                    console.log(result);
                    if (result.MajorCode == '000') {
                        //leftView.router.back();
                        self.$app.methods.setInStorage({name:'userAlarmSettings', data: result.Data });
                        self.$app.emit('accountAlarmsNameChanged', result.Data)
                        leftView.router.back();

                    }else if(result.MajorCode == '100' && result.MinorCode == '1002'){
                        self.$app.dialog.alert(LANGUAGE.PROMPT_MSG0127 + `<br>MajorCode: ${result.MajorCode}<br>MinorCode: ${result.MinorCode}<br>${result.data.Data}`);
                    }

                },
                function (xhr, status) {
                    self.$app.utils.nextFrame(()=>{
                        self.$app.preloader.hide();
                        self.$app.dialog.alert('Error occured');
                    });
                },
                'json');
            },

        },

        on: {
            pageInit: function (e, page) {
                var self = this;
                var settingsForm = page.$pageEl.find('[name = "AlarmSettingsForm"]');
                /*var fridgeTemperatureFilter = page.$pageEl.find('.temperature-filter');

                fridgeTemperatureFilter.on('range:change', function (e, range) {
                    self.$setState({
                        TempLow: range[0],
                        TempHigh: range[1]
                    })
                });*/

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

                    var data = {
                        MajorToken: self.$app.data.MajorToken,
                        MinorToken: self.$app.data.MinorToken,
                        //TempLow: self.TempLow,
                        //TempHigh: self.TempHigh,
                        //BatteryLow: page.$el.find('input[name="BatteryLow"]').val(),
                        Input1: page.$el.find('input[name="Input1High"]').val(),
                        Input1Low: page.$el.find('input[name="Input1Low"]').val(),
                        Input2: page.$el.find('input[name="Input2"]').val(),
                        Input2Low: page.$el.find('input[name="Input2Low"]').val(),

                        //Input2: page.$el.find('input[name="Input2"]').val(),
                        //ACCOn: page.$el.find('input[name="ACCOn"]').val(),
                        //ACCOff: page.$el.find('input[name="ACCOff"]').val()
                    };
                    // console.log(data);
                    self.save(data);

                    return false;
                });


            },
            pageAfterOut: function (e, page) {

            },

        }
    };
</script>