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

                    <div class="subnavbar">
                        <form data-search-container=".customerList" 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="/customer/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 customerList media-list virtual-list no-hairlines no-chevron searchbar-found ">
                  <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.Name[0]}}
                                </div>

                            </div>
                            <div class="item-inner">
											<div class="item-title-row">
												<div class="item-title weight-500 text-color-black text-transform-uppercase">
                                                    <div class="item-header text-transform-capitalize" title="{{ @global.LANGUAGE.USER_SETTINGS_MSG15 }}">{{ this.userRole  }}</div><!--CTypeValue-->
                                                    {{this.Name}}
                                                </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 class="divider"></div>
                                            <div class="item-text">
                                                <div class="row no-gutter">
                                                    {{#if this.LoginName}}<div class="col-100 white-space-no-wrap" title="{{ this.FirstName }} {{ this.SubName }}">
                                                        <i class="f7-icons size-16 icon-profile-name asset_list_icon text-color-lightgray vertical-middle"></i>
                                                        <span class="size-14 vertical-middle">{{ this.LoginName }}</span>
                                                    </div>
													{{/if}}
                                                    {{#if this.Email}}<div class="col-100 white-space-no-wrap" title="{{ this.EMail }}">
                                                        <i class="f7-icons size-16 icon-email asset_list_icon text-color-lightgray vertical-middle"></i>
                                                        <span class="size-14 vertical-middle">{{ this.Email }}</span>
                                                    </div>{{/if}}
													<!--<div class="col-100 white-space-no-wrap" title="{{ lotsNames }}">
                                                        <i class="f7-icons size-16 icon-admin-groups asset_list_icon text-color-lightgray vertical-middle"></i>
                                                        <span class="size-14 vertical-middle">{{ lotsNames }}</span>
                                                    </div>-->
												</div>
                                            </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');

				//self.methods.setInStorage({ name: 'customerInfo', data: {} });
                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="/customer/' + code + '/" data-view=".view-left" class="item-link list-button popover-close "> ' + LANGUAGE.CONTACT_LIST_MSG01 + '</a>'+
                                                '<a href="/customer/' + code + '/" data-view=".view-left" class="item-link list-button popover-close "> ' + 'View info' + '</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.CUSTOMER_USER_DELETE, data, function (result, xhr, status) {

                                
                                if (result && result.MajorCode == '000') {
                                	self.getCustomerList(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 CUSTOMER_USER_DELETE');
                            },
                            'json');
                        }
                    );

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


                self.$app.request.get(API_URL.GET_CUSTOMER_LIST + '?MajorToken=00000000-0000-0000-0000-000000000000&MinorToken=00000000-0000-0000-0000-000000000000&rows=500&page=1&sort=Name&order=asc&q=&PCode='+MajorToken+'&CustomerType=&QA=', function (result, xhr, status) {
                    self.$app.preloader.hide();
                  
                    if (result && result.rows.length) {
                        self.$app.methods.setInStorage({name:'customerList', data:result.rows });
                        var customerList = result.rows;//self.$app.methods.sortCustomerList(result);
						newCustomerList = customerList.map(item => {
						  var el = Object.assign({}, item);
						  el.userRole = el.CTypeValue //Protocol.Helper.getUserTypeByNumber(el?.RoleType)?.Name
						  
						  return el;
						});
						
                        self.$setState({
		                    Users: customerList,
                            DataLoaded: true,
		                });
                    }

                },
                function (xhr, status) {
                    self.$app.preloader.hide();
                    self.$app.dialog.alert('Error occured at Get Customer 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.getCustomerList(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 customerList = self.$app.methods.getFromStorage('customerList');
                //customerList = [];//self.$app.methods.sortCustomerList(customerList);
				/*newCustomerList = customerList.map(item => {
				  var el = Object.assign({}, item);
				  el.userRole = Protocol.Helper.getUserTypeByNumber(el?.RoleType)?.Name
				  
				  return el;
				});
				let userRole = item.CTypeValue//Protocol.Helper.getUserTypeByNumber(item.RoleType);
                self.$setState({
                    Users: newCustomerList
                });*/
            },
        }
    };
</script>