<!--suppress JSAnnotator -->
<template>
<!-- Page, data-name contains page name which can be used in callbacks -->
        <div class="page " data-name="contact-list"> <!-- 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">{{#if @global.IS_MARINE}} {{@global.LANGUAGE.CONTACT_LIST_MSG06}} {{else}} {{@global.LANGUAGE.CONTACT_LIST_MSG00}} {{/if}}</div>
                    <div class="right">
                        <!-- <a href="#" class="link">
                                                 <i class="f7-icons icon-notification"></i>
                                             </a>    -->
                    </div>

                    <div class="subnavbar">
                        <form data-search-container=".contactList" data-search-item="li" data-search-in=".item-title" class="searchbar searchbar-init">
                              <div class="searchbar-inner">
                                    <div class="searchbar-input-wrap">
                                          <input type="search" placeholder="{{@global.LANGUAGE.COM_MSG02}}">
                                          <i class="searchbar-icon"></i>
                                          <span class="input-clear-button"></span>
                                    </div>
                                    <span class="searchbar-disable-button">{{@global.LANGUAGE.COM_MSG03}}</span>
                              </div>
                        </form>
                    </div>

                </div>
            </div>

            <div class="bottom-section-wrapper bottom-section-button-wrapper bg-color-white">
                <div class="row">
                    <a href="/contact-edit/000000/" data-view=".view-left" class="col link button button-fill color-green elevation-2" >{{@global.LANGUAGE.COM_MSG37}}</a>
                </div>
            </div>

            <!-- Scrollable page content-->
            <div class="page-content">
                <div class="searchbar-backdrop"></div>

                <div class="block searchbar-not-found">
                    <div class="block-inner">{{@global.LANGUAGE.PROMPT_MSG008}}</div>
                </div>

                <div class="list no-margin no-hairlines contactList">
                  <ul>
                    {{#each Users}}
                    <li data-code="{{this.Code}}">
                        <div class="item-content" >
                            <div class="item-media">
                                <div class="user-icon text-align-center text-color-white {{#if @global.DEALER_BG_COLOR_CLASS}} {{@global.DEALER_BG_COLOR_CLASS}} {{else}} bg-color-red {{/if}} display-flex align-items-center justify-content-center text-transform-uppercase">
                                    {{this.FirstName[0]}} {{this.SubName[0]}}
                                </div>

                            </div>
                            <div class="item-inner">
                                <div class="item-title">
                                    {{this.FullName}}
                                </div>
                                <div class="item-after">
                                    <a href="#" @click="userRightMenuOpen" class="link ripple-color-red  bigger-touch-area  userMenu"><i class="f7-icons icon-menu-asset size-18"></i></a>
                                </div>
                            </div>
                        </div>
                    </li>
                    {{else}}
                    <li>
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-title">
                                    {{@global.LANGUAGE.PROMPT_MSG042}}
                                </div>

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


                    {{/each}}

                  </ul>
                </div>

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


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

            var ret = {
                Users: [],
            };

            return ret;
        },
        methods: {
            userRightMenuOpen: function(e){
                var self = this;

                var code = $$(e.target).closest('li').data('code');

                var popover = self.$app.popover.create({
                    backdrop: false,
                    closeByOutsideClick: true,
                    targetEl: e.target,
                    content:    '<div class="popover menu-popover" >' +
                                    '<div class="popover-inner">' +
                                        '<div class="list rightMenuList">' +
                                            '<ul>' +
                                                '<a href="/contact-edit/' + code + '/" data-view=".view-left" class="item-link list-button popover-close "> ' + LANGUAGE.CONTACT_LIST_MSG01 + '</a>'+
                                                '<a href="#" class="item-link list-button popover-close text-color-red ripple-color-red deleteUser" data-code="' + code + '">' + LANGUAGE.CONTACT_LIST_MSG02 + '</a>'+

                                            '</ul>' +
                                        '</div> ' +
                                    '</div>' +
                                '</div>',
                    on: {
                            open: function (popover) {
                                var buttonDelete = popover.$el.find('.deleteUser');
                                buttonDelete.on('click', function(){
                                    self.deleteUser($$(this).data('code'));
                                });
                            },
                            closed: function(popover){
                                popover.$el.remove();
                                popover.destroy();
                            }
                        }
                }).open();
            },
            deleteUser:function(code){
                var self = this;
                if (code) {
                    var user = self.Users.find(obj => obj.Code == code);

                    var text = LANGUAGE.PROMPT_MSG052 +' '+ user.FullName +'.'+' '+LANGUAGE.PROMPT_MSG022;
                    self.$app.dialog.confirm(text,
                        function(){

                            var data = {
                            	MajorToken: self.$app.methods.getFromStorage('userInfo').MajorToken,
                                MinorToken: user.Code,
                            };

                            self.$app.preloader.show();
                            self.$app.request.get(API_URL.CONTACT_USER_DELETE, data, function (result, xhr, status) {

                                
                                if (result && result.MajorCode == '000') {
                                	self.getContactList(data.MajorToken);
                                	self.$app.methods.customNotification({ title: user.FullName, text: LANGUAGE.PROMPT_MSG053 });
                                }else{
                                    self.$app.dialog.alert('Something wrong');
                                    self.$app.preloader.hide();
                                }

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

                }
            },
            getContactList: function(MajorToken){
                var self = this;

                self.$app.request.post(API_URL.GET_CONTACT_USERS_LIST, {MajorToken}, function (result, xhr, status) {
                    self.$app.preloader.hide();
                  
                    if (result && result.length) {
                        self.$app.methods.setInStorage({name:'contactList', data:result });
                        var contactList = self.$app.methods.sortContactList(result);

                        self.$setState({
		                    Users: contactList,
                            DataLoaded: true,
		                });
                    }

                },
                function (xhr, status) {
                    self.$app.preloader.hide();
                    self.$app.dialog.alert('Error occured at Get Contact List ');
                },
                'json');
            },
            /*sortList: function(list){
            	var self = this;

            	if (list && list.length) {
            	 	for (var i = list.length - 1; i >= 0; i--) {
            	 		list[i].FullName = list[i].FirstName + ' ' + list[i].SubName;
            	 		list[i].FullName.trim();
            	 	}
            	 	list.sort(function(a,b){
	                    if(a.FullName.toLowerCase() < b.FullName.toLowerCase()) return -1;
	                    if(a.FullName.toLowerCase() > b.FullName.toLowerCase()) return 1;
	                    return 0;
	                });
            	}
            	return list;
            }*/

        },

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

                self.getContactList(self.$app.data.MajorToken);

            },
            pageAfterOut: function () {
                /*var toggleAll = self.$app.toggle.get('.toggle-all-alarm');
                console.log(toggleAll);*/
            },
            pageBeforeIn: function(e, page){
                var self = this;
                var contactList = self.$app.methods.getFromStorage('contactList');
                contactList = self.$app.methods.sortContactList(contactList);

                self.$setState({
                    Users: contactList
                });
            },
        }
    };
</script>