<!--suppress JSAnnotator -->
<template>
<!-- Page, data-name contains page name which can be used in callbacks -->
        <div class="page " data-name="interval-reminder"> <!-- 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">{{PageTitle}}</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="Form" class="page-content ">

                {{#if ShowForm}}
                    <input type="hidden" name="Code" value="{{Code}}">
                    <input type="submit" id="submit-form" class="display-none" />

                    {{#if Code}}
                    <div key="keyIntervalDetailsBlock" class="list no-hairlines margin-top-0">
	                    <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.COM_MSG85}}</div>
	                                    <div class="item-after">{{CreateDate}}</div>
	                                </div>
	                            </div>
	                        </li>
	                        <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.COM_MSG86}}</div>
	                                    <div class="item-after">{{UpdateDate}}</div>
	                                </div>
	                            </div>
	                        </li>
	                    </ul>
	                </div>
	                {{/if}}


                    <div class="list  {{#unless Code}}margin-top-0{{/unless}}">
                        <ul>
                            <li>
                                <div class="item-content item-input">
                                    <div class="item-media text-color-lightgray">
                                        <i class="f7-icons icon-imei"></i>
                                    </div>
                                    <div class="item-inner">
                                        <div class="item-title item-label">{{@global.LANGUAGE.INTERVAL_REMINDERS_MSG06}}</div>
                                        <div class="item-input-wrap">
                                            <input type="text" name="Name" placeholder="{{@global.LANGUAGE.INTERVAL_REMINDERS_MSG06}}" value="{{Name}}" maxlength="200" required validate>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            {{#unless isDealer}}
                            <li key="assetList-key" >
                                <a class="item-link smart-select smart-select-init custom-smart-select smartSelectAssets" data-open-in="popup" data-searchbar="true" data-searchbar-placeholder="{{@global.LANGUAGE.COM_MSG02}}" data-append-searchbar-not-found="{{@global.LANGUAGE.PROMPT_MSG008}}" data-page-title = "{{@global.LANGUAGE.ASSET_GROUPS_MSG08}}">
                                    <select name="Assets" multiple required validate >
                                        {{#AssetList}}
                                            <option value="{{Id}}" {{#if Selected}} selected {{/if}}>{{Name}}</option>
                                        {{/AssetList}}
                                    </select>
                                    <div class="item-content item-input">
                                        <div class="item-media text-color-lightgray">
                                            <i class="f7-icons icon-name"></i>
                                        </div>
                                        <div class="item-inner">
                                            <div class="item-title item-label">{{@global.LANGUAGE.ASSET_GROUPS_MSG09}}</div>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            {{/unless}}
                            <li>
                                <a class="item-link smart-select smart-select-init custom-smart-select smartSelectServiceTypes" data-open-in="popover" data-close-on-select="true">
                                    <select name="ServiceType" required validate>
                                        {{#ServerTypeList}}
                                            <option value="{{Value}}" {{#if Selected}} selected {{/if}}>{{Name}}</option>
                                        {{/ServerTypeList}}
                                    </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.INTERVAL_REMINDERS_MSG07}}</div>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            {{#if ServiceTypeCustom}}
                                <li key="keyInclusionInput">
                                    <div class="item-content item-input">
                                        <div class="item-media text-color-lightgray">

                                        </div>
                                        <div class="item-inner">
                                            <div class="item-title item-label">{{@global.LANGUAGE.INTERVAL_REMINDERS_MSG08}}</div>
                                            <div class="item-input-wrap">
                                                <input type="text" name="Inclusion" placeholder="{{@global.LANGUAGE.INTERVAL_REMINDERS_MSG08}}" value="{{Inclusion}}" maxlength="200"  >
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            {{else}}
                                <li key="keyInclusionSelect">
                                    <a class="item-link smart-select smart-select-init custom-smart-select smartSelectInlusions" data-open-in="popup" data-searchbar="true" data-searchbar-placeholder="{{@global.LANGUAGE.COM_MSG02}}" data-append-searchbar-not-found="{{@global.LANGUAGE.PROMPT_MSG008}}" data-page-title = "{{@global.LANGUAGE.INTERVAL_REMINDERS_MSG16}}">
                                        <select name="Inclusion" multiple >
                                            {{#InclusionList}}
                                                <option value="{{Value}}" {{#if Selected}} selected {{/if}}>{{Name}}</option>
                                            {{/InclusionList}}
                                        </select>
                                        <div class="item-content item-input">
                                            <div class="item-media text-color-lightgray">

                                            </div>
                                            <div class="item-inner">
                                                <div class="item-title item-label">{{@global.LANGUAGE.INTERVAL_REMINDERS_MSG08}}</div>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                            {{/if}}

                            <li>
                                <a class="item-link smart-select smart-select-init custom-smart-select smartSelectIntervalTypes " data-open-in="popover" data-close-on-select="true">
                                    <select name="IntervalType" required validate>
                                        {{#IntervalTypeList}}
                                            <option value="{{Value}}" {{#if Selected}} selected {{/if}}>{{Name}}</option>
                                        {{/IntervalTypeList}}
                                    </select>
                                    <div class="item-content item-input">
                                        <div class="item-media text-color-lightgray">

                                        </div>
                                        <div class="item-inner">
                                            <div class="item-title item-label">{{@global.LANGUAGE.INTERVAL_REMINDERS_MSG09}}</div>
                                        </div>
                                    </div>
                                </a>
                            </li>

                            {{#if ShowDatepickers}}
                                <li key="keyIntervalValueDatepicker">
                                    <div class="item-content item-input dateIntervalValueWrapper" >
                                        <div class="item-media text-color-lightgray">
                                            <i class="f7-icons icon-calendar"></i>
                                        </div>
                                        <div class="item-inner">
                                            <div class="item-title item-label">{{@global.LANGUAGE.INTERVAL_REMINDERS_MSG10}}</div>
                                            <div class="item-input-wrap">
                                                <input type="text" name="IntervalValue" placeholder="{{@global.LANGUAGE.INTERVAL_REMINDERS_MSG10}}" value="{{IntervalValueDate}}" maxlength="200" readonly required validate>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li key="keyEarlyWarningValueDatepicker">
                                    <div class="item-content item-input dateEarlyWarningValueWrapper" >
                                        <div class="item-media text-color-lightgray">
                                            <i class="f7-icons icon-calendar"></i>
                                        </div>
                                        <div class="item-inner">
                                            <div class="item-title item-label">{{@global.LANGUAGE.INTERVAL_REMINDERS_MSG12}}</div>
                                            <div class="item-input-wrap">
                                                <input type="text" name="EarlyWarningValue" placeholder="{{@global.LANGUAGE.INTERVAL_REMINDERS_MSG12}}" value="{{EarlyWarningValueDate}}" maxlength="200" readonly>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            {{else}}
                            	<li key="keyIntervalValueDetails">
                                    <a class="item-link smart-select smart-select-init custom-smart-select smartSelectIntervalValueDetails " data-open-in="popover" data-close-on-select="true">
                                        <select name="IntervalValueUnit" required validate>
                                            {{#UnitList}}
                                                <option value="{{Value}}" {{#if Selected}} selected {{/if}}>{{Name}}</option>
                                            {{/UnitList}}
                                        </select>
                                        <div class="item-content item-input">
                                            <div class="item-media text-color-lightgray">

                                            </div>
                                            <div class="item-inner">
                                                <div class="item-title item-label">{{@global.LANGUAGE.INTERVAL_REMINDERS_MSG11}}</div>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li key="keyIntervalValue">
                                    <div class="item-content item-input">
                                        <div class="item-media text-color-lightgray">

                                        </div>
                                        <div class="item-inner">
                                            <div class="item-title item-label">
                                                {{@global.LANGUAGE.INTERVAL_REMINDERS_MSG10}}
                                                {{#js_if " this.IntervalType == '2' "}}
                                                    ({{@global.LANGUAGE.COM_MSG52}})
                                                {{/js_if}}
                                                {{#js_if " this.IntervalType == '1' "}}
                                                    ({{@global.LANGUAGE.COM_MSG92}})
                                                {{/js_if}}

                                            </div>
                                            <div class="item-input-wrap">
                                                <input type="tel" name="IntervalValue" placeholder="{{@global.LANGUAGE.INTERVAL_REMINDERS_MSG10}}" value="{{IntervalValue}}" maxlength="6" pattern="[0-9]*" data-error-message="{{@global.LANGUAGE.PROMPT_MSG024}}" required validate>
                                            </div>
                                        </div>
                                    </div>
                                </li>

                                <li key="keyEarlyWarningValue">
                                    <div class="item-content item-input">
                                        <div class="item-media text-color-lightgray">

                                        </div>
                                        <div class="item-inner">
                                            <div class="item-title item-label">
                                                {{@global.LANGUAGE.INTERVAL_REMINDERS_MSG12}}
                                                {{#js_if " this.IntervalType == '4' "}}
                                                    ({{@global.LANGUAGE.COM_MSG53}})
                                                {{/js_if}}
                                                {{#js_if " this.IntervalType == '2' "}}
                                                    ({{@global.LANGUAGE.COM_MSG52}})
                                                {{/js_if}}
                                                {{#js_if " this.IntervalType == '1' "}}
                                                    ({{@global.LANGUAGE.COM_MSG92}})
                                                {{/js_if}}
                                            </div>
                                            <div class="item-input-wrap">
                                                <input type="tel" name="EarlyWarningValue" placeholder="{{@global.LANGUAGE.INTERVAL_REMINDERS_MSG12}}" value="{{EarlyWarningValue}}" maxlength="6" pattern="[0-9]*" data-error-message="{{@global.LANGUAGE.PROMPT_MSG024}}"  >
                                            </div>
                                        </div>
                                    </div>
                                </li>

                            {{/if}}

                            {{#unless isDealer}}
                            <li >
                                <a class="item-link smart-select smart-select-init custom-smart-select smartSelectContacts" data-open-in="popup" data-searchbar="true" data-searchbar-placeholder="{{@global.LANGUAGE.COM_MSG02}}" data-append-searchbar-not-found="{{@global.LANGUAGE.PROMPT_MSG008}}" data-page-title = "{{@global.LANGUAGE.COM_MSG84}}">
                                    <select name="ContactList" multiple  >
                                        {{#ContactList}}
                                            <option value="{{Code}}" {{#if Selected}} selected {{/if}}>{{Email}}</option>
                                        {{/ContactList}}
                                    </select>
                                    <div class="item-content item-input">
                                        <div class="item-media text-color-lightgray">
                                           	<i class="f7-icons icon-email"></i>
                                        </div>
                                        <div class="item-inner">
                                            <div class="item-title item-label">{{@global.LANGUAGE.INTERVAL_REMINDERS_MSG13}}</div>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            {{/unless}}
                            <li>
                                <div class="item-content item-input">
                                    <div class="item-media text-color-lightgray">

                                    </div>
                                    <div class="item-inner">
                                        <div class="item-title item-label">{{@global.LANGUAGE.INTERVAL_REMINDERS_MSG14}}</div>
                                        <div class="item-input-wrap">
                                            <textarea name="Remark" id="" placeholder="{{@global.LANGUAGE.INTERVAL_REMINDERS_MSG14}}" maxlength="500" >{{Remark}}</textarea>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            {{#unless isDealer}}
                            <li class="item-content">
                                <div class="item-media text-color-lightgray">
                                    <i class="f7-icons icon-active"></i>
                                </div>
                                <div class="item-inner">
                                    <div class="item-title">{{@global.LANGUAGE.INTERVAL_REMINDERS_MSG15}}</div>
                                    <div class="item-after">
                                        <label class="toggle toggle-init">
                                            <input type="checkbox" name="ActiveState" {{#js_if "this.Status == 1"}}checked="checked"{{/js_if}}>
                                            <span class="toggle-icon"></span>
                                        </label>
                                    </div>
                                </div>
                            </li>
                            {{/unless}}



                        </ul>
                    </div>
                {{else}}
                    <div key="VirtualListPreloader" class="block block-strong text-align-center">
                        <div class="preloader color-red"></div>
                    </div>
                {{/if}}

            </form>

        </div>
    </template>


<script>
  // script must return component object
    return {
        data: function () {
            var self = this;
            var ret = {
            	PageTitle:  self.$route.query.code ? LANGUAGE.INTERVAL_REMINDERS_MSG05 : LANGUAGE.INTERVAL_REMINDERS_MSG04,
            	ShowForm: false,
            	ShowDatepickers: false,
            	IntervalValueDatePicker: false,
            	EarlyWarningValueDatePicker: false,
            	DatepickerFormat: 'DD/MM/YYYY',

                isDealer: self.$app.data.CustomerType === 2 || self.$app.data.CustomerType === 6,
            };

            //console.log(ret);

            return ret;
        },
        methods: {
            getPageParameters: function(data){
                let self = this;
                self.$app.preloader.show();
                self.$app.request.post(API_URL.GET_SERVICE_INTERVAL_PARAMS, data, function (result={}, xhr, status) {
                    self.$app.utils.nextFrame(()=>{
                        self.$app.preloader.hide();
                    });
                    console.log(result);
                    if (result.MajorCode == '000') {
                        if (result.Data.AssetList && result.Data.AssetList.length) {
                            result.Data.AssetList.sort(function(a,b){
                                if(a.Name < b.Name) return -1;
                                if(a.Name > b.Name) return 1;
                                return 0;
                            });
                        }
                        if (result.Data.IntervalTypeList && result.Data.IntervalTypeList.length) {
                            result.Data.IntervalTypeList.sort(function(a,b){
                                if(a.Name < b.Name) return -1;
                                if(a.Name > b.Name) return 1;
                                return 0;
                            });
                        }
                        if (result.Data.ContactList && result.Data.ContactList.length) {
                            result.Data.ContactList.sort(function(a,b){
                                if(a.Email < b.Email) return -1;
                                if(a.Email > b.Email) return 1;
                                return 0;
                            });
                        }
                        if (result.Data.ServerTypeList && result.Data.ServerTypeList.length) {
                            for (var i = result.Data.ServerTypeList.length - 1; i >= 0; i--) {
                                result.Data.ServerTypeList[i].Name = self.$app.methods.capitalize(result.Data.ServerTypeList[i].Name);
                            }
                        }

                        //check if it editing existing inteval, get data of this interval,
                        //else if new interval show page parameters
                        if (self.$route.query.code) {
                            self.getIntervalModel({
                                Data: {
                                    ...data,
                                    Code: self.$route.query.code
                                },
                                PageParameters: result.Data
                            });
                        }else{
                            self.$setState({
                                ...result.Data,
                                ShowForm: true,
                            });
                            self.$app.utils.nextFrame(()=>{
                                self.$el.find('[name="ServiceType"]').change(); //trigger to set inclusion list in select
                                self.$el.find('[name="IntervalType"]').change(); //trigger to set interval value details in select
                            });
                        }
                    }else {
                        self.$app.dialog.alert(LANGUAGE.COM_MSG36);
                    }

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

            getIntervalModel: function(params) {
                let self = this;

                let presetParams = {};
                self.$app.preloader.show();
                self.$app.request.post(API_URL.GET_SERVICE_INTERVAL_MODEL, params.Data, function (result={}, xhr, status) {
                    self.$app.utils.nextFrame(()=>{
                        self.$app.preloader.hide();
                    });
                    console.log(result);
                    if (result.MajorCode == '000') {
                        //set selected Service Type
                        if (params.PageParameters.ServerTypeList && params.PageParameters.ServerTypeList.length && result.Data.ServiceIntervalInfo.ServiceType) {
                            if(params.PageParameters.ServerTypeList.findIndex(el => el.Value == result.Data.ServiceIntervalInfo.ServiceType) !== -1){
                                params.PageParameters.ServerTypeList[params.PageParameters.ServerTypeList.findIndex(el => el.Value == result.Data.ServiceIntervalInfo.ServiceType)].Selected = true;
                            }
                        }
                        //set selected Interval Type
                        if (params.PageParameters.IntervalTypeList && params.PageParameters.IntervalTypeList.length && result.Data.ServiceIntervalInfo.IntervalType) {
                            if(params.PageParameters.IntervalTypeList.findIndex(el => el.Value == result.Data.ServiceIntervalInfo.IntervalType) !== -1){
                                params.PageParameters.IntervalTypeList[params.PageParameters.IntervalTypeList.findIndex(el => el.Value == result.Data.ServiceIntervalInfo.IntervalType)].Selected = true;
                            }
                        }
                        //set selected assets
                        if (result.Data.SelectedAssetIdList && result.Data.SelectedAssetIdList.length) {
                            for (var i = result.Data.SelectedAssetIdList.length - 1; i >= 0; i--) {
                                if(params.PageParameters.AssetList.findIndex(el => el.Id == result.Data.SelectedAssetIdList[i]) !== -1){
                                    params.PageParameters.AssetList[params.PageParameters.AssetList.findIndex(el => el.Id == result.Data.SelectedAssetIdList[i])].Selected = true;
                                }
                            }
                        }
                        //set selected contacts
                        if (result.Data.SelectedContactList && result.Data.SelectedContactList.length) {
                            for (var i = result.Data.SelectedContactList.length - 1; i >= 0; i--) {
                                if(params.PageParameters.ContactList.findIndex(el => el.Code == result.Data.SelectedContactList[i]) !== -1){
                                    params.PageParameters.ContactList[params.PageParameters.ContactList.findIndex(el => el.Code == result.Data.SelectedContactList[i])].Selected = true;
                                }
                            }
                        }
                        if (result.Data.ServiceIntervalInfo.Inclusion) {
                            //remove ',' from beggining and the end of string
                            result.Data.ServiceIntervalInfo.Inclusion[0] == ',' ? result.Data.ServiceIntervalInfo.Inclusion = result.Data.ServiceIntervalInfo.Inclusion.slice(1) : '';
                            result.Data.ServiceIntervalInfo.Inclusion[result.Data.ServiceIntervalInfo.Inclusion.length - 1] == ',' ? result.Data.ServiceIntervalInfo.Inclusion = result.Data.ServiceIntervalInfo.Inclusion.slice(0, -1) : '';
                        }
                        //set selected inclusions list
                        if (result.Data.ServiceIntervalInfo && result.Data.ServiceIntervalInfo.Inclusion && result.Data.ServiceIntervalInfo.ServiceType != '5') {
                            let inlusionsIdArr = result.Data.ServiceIntervalInfo.Inclusion.split(',');
                            if (inlusionsIdArr && inlusionsIdArr.length && result.Data.ServiceIntervalInfo.ServiceType) {
                                for (var i = inlusionsIdArr.length - 1; i >= 0; i--) {
                                    if (inlusionsIdArr[i]) {
                                        //get service list
                                        let serviceTypeList = params.PageParameters.ServerTypeList[params.PageParameters.ServerTypeList.findIndex(el => el.Value == result.Data.ServiceIntervalInfo.ServiceType)];
                                        if (serviceTypeList && !self.$app.methods.isObjEmpty(serviceTypeList)) {
                                            //get inclusion list
                                            serviceTypeList.InclusionList[serviceTypeList.InclusionList.findIndex(el => el.Value == inlusionsIdArr[i])].Selected = true;
                                        }
                                    }
                                }
                            }
                        }
                        //set selected Interval Value Unit
                        if (result.Data.ServiceIntervalInfo && result.Data.ServiceIntervalInfo.IntervalType && result.Data.ServiceIntervalInfo.IntervalType != '3' && result.Data.ServiceIntervalInfo.IntervalValueUnit) {
                        	let selectedIntervalObj = params.PageParameters.IntervalTypeList[params.PageParameters.IntervalTypeList.findIndex(el => el.Value == result.Data.ServiceIntervalInfo.IntervalType)];
                        	selectedIntervalObj.UnitList[selectedIntervalObj.UnitList.findIndex(el => el.Value == result.Data.ServiceIntervalInfo.IntervalValueUnit)].Selected = true;
                        }

                        if (result.Data.ServiceIntervalInfo.CreateDate) {
                            result.Data.ServiceIntervalInfo.CreateDate = moment(result.Data.ServiceIntervalInfo.CreateDate,window.COM_TIMEFORMAT).add(app.data.UTCOFFSET,'minutes').format(window.COM_TIMEFORMAT);
                        }
                        if (result.Data.ServiceIntervalInfo.UpdateDate) {
                            result.Data.ServiceIntervalInfo.UpdateDate = moment(result.Data.ServiceIntervalInfo.UpdateDate,window.COM_TIMEFORMAT).add(app.data.UTCOFFSET,'minutes').format(window.COM_TIMEFORMAT);
                        }

                        presetParams = {
                        	...params.PageParameters,
                            ...result.Data.ServiceIntervalInfo,
                            ShowForm: true,
                            ServiceTypeCustom: result.Data.ServiceIntervalInfo.ServiceType == '5'
                        }

                        if (result.Data.ServiceIntervalInfo.IntervalType == '3') {
                        	presetParams.IntervalValueDate = result.Data.ServiceIntervalInfo.IntervalValue;
                        	presetParams.IntervalValue = '';
                        	presetParams.EarlyWarningValueDate = result.Data.ServiceIntervalInfo.EarlyWarningValue;
                        	presetParams.EarlyWarningValue = '';
                        }

                        self.$setState(presetParams);

                        self.$app.utils.nextFrame(()=>{
                            self.setInclusionList(presetParams.ServiceType);
                            self.$el.find('[name="Inclusion"]').change();  //trigger to set selected inclusions select

                            self.setIntervalValueUnit(presetParams.IntervalType);
                            self.$el.find('[name="IntervalValueUnit"]').change();  //trigger to set selected ValueUnit in select
                        });

                    }else {
                        self.$app.dialog.alert(LANGUAGE.COM_MSG36);
                    }

                },
                function (xhr, status) {
                    self.$app.utils.nextFrame(()=>{
                        self.$app.preloader.hide();
                        self.$app.dialog.alert('Error occured at Get Interval Model');
                    });
                },
                'json');
            },
            setInclusionList: function(serviceType = '') {
            	let self = this;
            	if (serviceType) {
            		let service = self.$app.methods.findObjectByKey(self.ServerTypeList, 'Value', serviceType);
	                self.$setState({
	                    ServiceTypeCustom: serviceType == '5',
	                    InclusionList: service.InclusionList
	                });
            	}
            },
            setIntervalValueUnit: function(intervalType = '') {
            	let self = this;
            	if (intervalType) {
            		let unitList = false;
                    if (intervalType != '3') {
                        unitList = self.IntervalTypeList[self.IntervalTypeList.findIndex(el => el.Value == intervalType)].UnitList;
                    }
                    //console.log(intervalType);
                    self.$setState({
                        IntervalType: intervalType,
                        ShowDatepickers: intervalType == '3',
                        UnitList: unitList ? unitList : []
                    });

                    if (intervalType == '3') {
                        self.IntervalValueDatePicker = new MaterialDatetimePicker({
                            el: self.$el.find('input[name = "IntervalValue"]')[0],
                            format: self.DatepickerFormat,
                        });
                        self.EarlyWarningValueDatePicker = new MaterialDatetimePicker({
                            el: self.$el.find('input[name = "EarlyWarningValue"]')[0],
                            format: self.DatepickerFormat,
                        });
                    }
            	}
            },

            saveIntervalReminder: function(data, url){
                var self = this;

                self.$app.preloader.show();
                self.$app.request.post(url, data, function (result={}, xhr, status) {
                    self.$app.utils.nextFrame(()=>{
                        self.$app.preloader.hide();
                    });
                    console.log(result);
                    if (result.MajorCode == '000') {
                        //leftView.router.back();
                        leftView.router.back('/interval-reminders-list/',{force: true});

                    }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(LANGUAGE.COM_MSG36);
                    }
                },
                function (xhr, status) {
                    self.$app.utils.nextFrame(()=>{
                        self.$app.preloader.hide();
                        self.$app.dialog.alert('Error occured at Save Interval Reminder');
                    });
                },
                'json');
            },

        },

        on: {
            pageInit: function (e, page) {
                let self = this;
                let formEl = page.$el.find('form[name="Form"]');
                let IntervalValueDateEl = page.$el.find('input[name = "IntervalValue"]');
                let EarlyWarningValueDateEl = page.$el.find('input[name = "EarlyWarningValue"]');
                let userInfo = self.$app.methods.getFromStorage('userInfo');

                self.getPageParameters({
                    MajorToken: userInfo.MajorToken,
                    MinorToken: userInfo.MinorToken,
                });

                self.IntervalValueDatePicker = new MaterialDatetimePicker({
                    el: IntervalValueDateEl[0],
                    format: self.DatepickerFormat,
                    openedBy: 'click',
                });
                self.EarlyWarningValueDatePicker = new MaterialDatetimePicker({
                    el: EarlyWarningValueDateEl[0],
                    format: self.DatepickerFormat,
                    openedBy: 'click',
                });

                page.$el.on('click', '.dateIntervalValueWrapper', function(){
                	if (self.IntervalValueDatePicker) {
                		self.IntervalValueDatePicker.open();
                	}
                });
                page.$el.on('click', '.dateEarlyWarningValueWrapper', function(){
                	if (self.EarlyWarningValueDatePicker) {
                		self.EarlyWarningValueDatePicker.open();
                	}
                });

                page.$el.on('change', '[name="IntervalType"]', function(e){
                	self.setIntervalValueUnit(e.target.value);
                	if (e.target.value != '3') {
                		self.$el.find('[name="IntervalValueUnit"]').val('').change();  //trigger to set selected ValueUnit select and clear prev selected value
                	}
                });

                page.$el.on('change', '[name="ServiceType"]', function(e){
                    self.setInclusionList(e.target.value);
                    self.$el.find('[name="Inclusion"]').val('').change();  //trigger to set selected inclusions select and clear prev selected value
                });

                formEl.on('submit', function(e){
                    e.preventDefault();
                    //let userInfo = self.$app.methods.getFromStorage('userInfo');
                    let url = API_URL.SERVICE_INTERVAL_ADD;
                    let intervalUnit = page.$el.find('[name="IntervalValueUnit"]').val();
                    let intervalValue = page.$el.find('[name="IntervalValue"]').val();

                    if (self.ShowDatepickers && !intervalValue) {
                    	self.$app.methods.customDialog({title: self.PageTitle, text: LANGUAGE.PROMPT_MSG091});
                    	return;
                    }

                    let data = {
                        MajorToken: userInfo.MajorToken,
                        MinorToken: userInfo.MinorToken,

                        Name: page.$el.find('input[name="Name"]').val(),
                        ServiceType: page.$el.find('[name="ServiceType"]').val(),
                        Inclusion: self.ServiceTypeCustom ? page.$el.find('[name="Inclusion"]').val() : page.$el.find('[name="Inclusion"]').val().toString(),
                        IntervalType: page.$el.find('[name="IntervalType"]').val(),
                        IntervalValue: intervalValue,
                        EarlyWarningValue: page.$el.find('[name="EarlyWarningValue"]').val(),
                        IntervalUnit: intervalUnit ? intervalUnit : 0,
                        Remark: page.$el.find('[name="Remark"]').val(),
                        Status: 1,
                        //Status: page.$el.find('[name="ActiveState"]').is(":checked") ? 1 : 0,
                        //AssetIds: page.$el.find('[name="Assets"]').val(),
                        //ContactCodes: page.$el.find('[name="ContactList"]').val(),
                    }
                    if(!self.isDealer){
                        data.AssetIds = page.$el.find('[name="Assets"]').val();
                        data.ContactCodes = page.$el.find('[name="ContactList"]').val();
                        data.Status = page.$el.find('[name="ActiveState"]').is(":checked") ? 1 : 0;
                    }

                    if (self.$route.query.code) {
                        url = API_URL.SERVICE_INTERVAL_EDIT;

                        data.Code = page.$el.find('input[name="Code"]').val();
                    }

                    self.saveIntervalReminder(data, url);

                   // console.log(data);

                    return false;
                });



            },
            pageAfterOut: function (e, page) {

            },

        }
    };
</script>