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

                <input type="hidden" name="Code" value="{{Code}}">

                <input type="submit" id="submit-form" class="display-none" />
                <div class="list margin-top-0 ">
                    <ul>
                        <li>
                            <div class="item-content item-input">
                                <div class="item-media text-color-lightgray">
                                    <i class="f7-icons icon-profile-name"></i>
                                </div>
                                <div class="item-inner">
                                    <div class="item-title item-label">{{@global.LANGUAGE.USERS_LIST_MSG05}}</div>
                                    <div class="item-input-wrap">
                                        <input type="text" name="AccountName" placeholder="{{@global.LANGUAGE.USERS_LIST_MSG05}}" value="{{AccountName}}" maxlength="200" required validate >
                                    </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.USERS_LIST_MSG06}}</div>
                                    <div class="item-input-wrap">
                                        <input type="text" name="FirstName" placeholder="{{@global.LANGUAGE.USERS_LIST_MSG06}}" value="{{FirstName}}" maxlength="200" required validate>
                                    </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.USERS_LIST_MSG07}}</div>
                                    <div class="item-input-wrap">
                                        <input type="text" name="SubName" placeholder="{{@global.LANGUAGE.USERS_LIST_MSG07}}" value="{{SubName}}" maxlength="200" required validate>
                                    </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.USERS_LIST_MSG08}}</div>
                                    <div class="item-input-wrap">
                                        <input type="text" name="LoginName" placeholder="{{@global.LANGUAGE.USERS_LIST_MSG08}}" value="{{LoginName}}" maxlength="200" required validate>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <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.USERS_LIST_MSG12}}</div>
                                    <div class="item-input-wrap">
                                        <input type="email" name="Email" placeholder="{{@global.LANGUAGE.USERS_LIST_MSG12}}" value="{{EMail}}" maxlength="200" required validate>
                                    </div>
                                </div>
                            </div>
                        </li>
                        {{#js_if "!this.Code"}}
                        <li>
                            <div class="item-content item-input">
                                <div class="item-media text-color-lightgray">
                                    <i class="f7-icons icon-password"></i>
                                </div>
                                <div class="item-inner">
                                    <div class="item-title item-label">{{@global.LANGUAGE.USERS_LIST_MSG09}}</div>
                                    <div class="item-input-wrap">
                                        <input type="password" name="Password" class="padding-right-36" placeholder="{{@global.LANGUAGE.USERS_LIST_MSG09}}" value="{{Password}}" maxlength="200" minlength="6"  >
                                        <span class="password-toggle text-color-gray"><i class="f7-icons icon-view-all "></i></span>
                                    </div>
                                </div>
                            </div>
                        </li>
                        {{/js_if}}
                        <li>
                            <div class="item-content item-input">
                                <div class="item-media text-color-lightgray">
                                    <i class="f7-icons icon-mobile"></i>
                                </div>
                                <div class="item-inner">
                                    <div class="item-title item-label">{{@global.LANGUAGE.USERS_LIST_MSG10}}</div>
                                    <div class="item-input-wrap">
                                        <input type="tel" name="Mobile" placeholder="{{@global.LANGUAGE.USERS_LIST_MSG10}}" value="{{Mobile}}" maxlength="200" pattern="[0-9]*" data-error-message="{{@global.LANGUAGE.PROMPT_MSG080}}"   >
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content item-input">
                                <div class="item-media text-color-lightgray">
                                    <i class="f7-icons icon-telephone"></i>
                                </div>
                                <div class="item-inner">
                                    <div class="item-title item-label">{{@global.LANGUAGE.USERS_LIST_MSG11}}</div>
                                    <div class="item-input-wrap">
                                        <input type="tel" name="Phone" placeholder="{{@global.LANGUAGE.USERS_LIST_MSG11}}" value="{{Phone}}" maxlength="200"  >
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <a class="item-link smart-select smart-select-init custom-smart-select custom-smart-select-type " data-open-in="popover" data-close-on-select="true">
                                <select name="RoleType" required validate>
                                    {{#RoleTypesList}}
                                        <option value="{{Value}}" {{#if Selected}} selected {{/if}}>{{Name}}</option>
                                    {{/RoleTypesList}}
                                </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.USER_SETTINGS_MSG15}}</div>
                                    </div>
                                </div>
                            </a>
                        </li>

                        <li class="{{#if NoGroups}} tooltip-init {{/if}}" data-tooltip="{{@global.LANGUAGE.PROMPT_MSG057}}<br>{{@global.LANGUAGE.PROMPT_MSG058}}">
                            <a class="item-link smart-select smart-select-init custom-smart-select {{#if NoGroups}} disabled  {{/if}}" 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_MSG54}}" >
                                <select name="GroupCode" multiple>
                                    {{#GroupList}}
                                        {{#js_if "this.Code != '000000'"}}
                                            <option value="{{Code}}" {{#if GroupSelected}} selected {{/if}}>{{Name}}</option>
                                        {{/js_if}}
                                    {{/GroupList}}

                                </select>
                                <div class="item-content item-input">
                                    <div class="item-media text-color-lightgray">
                                        <i class="f7-icons icon-admin-groups"></i>
                                    </div>
                                    <div class="item-inner">
                                        <div class="item-title item-label">{{@global.LANGUAGE.USERS_LIST_MSG13}}</div>

                                    </div>
                                </div>
                            </a>
                        </li>


                    </ul>
                </div>

            </form>

        </div>
    </template>

<!-- USERS_LIST_MSG13": "Lots(Groups)", -->
<script>
  // script must return component object
    return {
        data: function () {
            var self = this;
            var ret = {};
            var groupList = self.$app.methods.getFromStorage('groupList');
            var userInfo = self.$app.methods.getFromStorage('userInfo');

            if (self.$route.query.code) {
                let userList = self.$app.methods.getFromStorage('usersList');
                if (userList && userList.length) {
                    console.log(self.$route.query.code)
                    let user = self.$app.methods.findObjectByKey(userList, 'Code', self.$route.query.code);
                    ret = user ? user : {};
                }
            }
            if (!self.$route.query.code){
                ret.AccountName = userInfo.UserInfo.CustomerName;
            }

            ret.NoGroups = false;
            if (groupList && groupList.length) {
                if (groupList.length == 1) {
                    ret.NoGroups = true;
                }else{
                    if (self.$route.query.code && ret.Lots) {
                        let selectedCodesArr = ret.Lots.split(',');
                        for (var i = selectedCodesArr.length - 1; i >= 0; i--) {
                            let found = groupList.findIndex(x => x.Code == selectedCodesArr[i]);
                            if (found != -1) {
                                groupList[found].GroupSelected = true;
                            }
                        }
                    }
                }
                ret.GroupList = groupList;
            }

            ret.PageTitle =  self.$route.query.code ? LANGUAGE.USERS_LIST_MSG16 : LANGUAGE.USERS_LIST_MSG15;

            var roleTypesList = Protocol.Helper.getUserTypesArray();

            if (self.$route.query.code && ret.RoleType) {
            	let roleIndex =  roleTypesList.findIndex(x => x.Value == ret.RoleType);
            	if (roleIndex != -1) {
            		roleTypesList[roleIndex].Selected = true;
            	}
            }
            ret.RoleTypesList = roleTypesList;
               console.log(ret);

            return ret;
        },
        methods: {

            saveUser: 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('/users/',{force: true});

                    }else if(result.MajorCode == '100' && result.MinorCode == '1002'){
                        if (result.Data && result.Data == 'EMAIL_ALREADY_EXIST') {
                            self.$app.dialog.alert(LANGUAGE.PROMPT_MSG043);
                        }else if(result.Data && result.Data == 'LOGIN_NAME_EXIST'){
                            self.$app.dialog.alert(LANGUAGE.PROMPT_MSG081);
                        } 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 User details');
                    });
                },
                'json');
            },

        },

        on: {
            pageInit: function (e, page) {
                let self = this;
                let formEl = page.$el.find('form[name="UserForm"]');

                formEl.on('submit', function(e){
                    e.preventDefault();
                    let userInfo = self.$app.methods.getFromStorage('userInfo');
                    let url = API_URL.USER_ADD;
                    let mobile = page.$el.find('input[name="Mobile"]').val();
                    let data = {
                        MajorToken: self.$app.methods.getFromStorage('userInfo').MajorToken,

                        FirstName: page.$el.find('input[name="FirstName"]').val(),
                        SubName: page.$el.find('input[name="SubName"]').val(),
                        Email: page.$el.find('input[name="Email"]').val(),
                        Mobile: mobile ? mobile : '1111111111',
                        Phone: page.$el.find('input[name="Phone"]').val(),

                        LoginName: page.$el.find('input[name="LoginName"]').val(),
                        AccountName: page.$el.find('input[name="AccountName"]').val(),
                        RoleType: page.$el.find('[name="RoleType"]').val(),
                        Lots: page.$el.find('[name="GroupCode"]').val().toString(),
                    };

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

                        data.Code = page.$el.find('input[name="Code"]').val();
                    }else{
                        let password = page.$el.find('input[name="Password"]').val();
                        data.Password = password ? password : '888888';

                        data.LogoUrl = self.$app.data.AppDetails.loginUrl + self.$app.data.AppDetails.logoLetterSrc;
                        data.LoginUrl = self.$app.data.AppDetails.loginUrl;
                        data.SupportUrl = self.$app.data.AppDetails.supportPageUrl;
                    }

                    self.saveUser(data, url);

                    console.log(data);

                    return false;
                });



            },
            pageAfterOut: function (e, page) {

            },

        }
    };
</script>