import VueSelect from '/Components/Common/VueSelect.js?v=3.9'
import InputSearch from '/Components/Common/InputSearch.js?v=3.9'
import InputTextArea from "/Components/Common/InputTextArea.js?v=3.9"
import SearchPanel from '/Components/Common/SearchPanelWrapper.js?v=3.9'
import OperationsPanel from '/Components/Common/OperationsPanelWrapper.js?v=3.9'
import Pager from '/Components/Common/Pager.js?v=3.9'
import NoRecords from '/Components/Common/NoRecords.js?v=3.9'
import ModalPopUp from '/Components/Common/ModalPopUp.js?v=3.9'
import { getLabelText } from '/Components/Common/utils.js?v=3.9'
import Loading from "/Components/Common/Loading.js?v=3.9"

export default {
    props: {
        //tabIndex: { type: String, required: true },
        readOnly: { type: Boolean, required: true },
        permenantDeleteCustomer: { type: Boolean, required: true },
        showCustomerNumber: { type: Boolean, required: true },
        showImportResellers: { type: Boolean, required: true },
        showOperations: { type: Boolean, required: true },
        showDeleteOption: { type: Boolean, required: true },
        isKeyCloakEnabled: { type: Boolean, required: true },
        subscriptionBasedReseller: { type: Boolean, required: true },
        isComissionbasedResellerEnabled: { type: Boolean, required: true },
        isSubscriptionbasedResellerEnabled: { type: Boolean, required: true },
        showWHMCS: { type: Boolean, required: true },
        sortPreference: { type: Object, required: true },
        isEgyptBenyaTechPlatform: { type: Boolean, required: true }
    },
    components: {
        SearchPanel,
        OperationsPanel,
        VueSelect,
        InputSearch,
        InputTextArea,
        ModalPopUp,
        NoRecords,
        Pager,
        Loading
    },
    data() {
        return {
            isLoading: true,
            searchContainerDivClass: "col-md-3 col-sm-6 col-xs-12",
            totalRecords: 0,
            records: [],
            resellertypes: {},
            search: {
                clientId: '',
                name: '',
                email: '',
                companyName: '',
                status: 'GN0000261',
                phone: '',
                address: '',
                address2: '',
                notes: '',
                card4Digit: '',
                WHMCSId: '',
                selectedResellerType: '-1',
                city: '',
                zipPostalCode: '',
                showDeleted: false,

                pageIndex: 1,
                pageSize: gridPageSize,
                sortExpression: 'CustomerID',
                sortDir: 'Asc',
                updateSorting: false
            },
            showClearButton: false,
            deletedOnlyResults: false,

            //***** START: Modal Popup *******
            showModal: false,
            reasonRequired: false,
            cbActionRequired: false,
            reason: '',
            cbAction: false,
            modalTitle: '',
            modalBody: '',
            parentContext: {},  //params to execute callback method related to current operation
            //***** END: Modal Popup *******
        }
    },
    methods: {
        inputSearchChangeHandler: function (obj) {
            this.search[obj.fieldName] = obj.searchValue;
            this.showClearButton = obj.submit;

            if (obj.submit == true)
                this.doSearch();
        },
        getLabelText,
        handleGlobalSearch: function () {
            var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
            var searchQueryType = '';
            var searchQueryValue = '';

            for (var i = 0; i < hashes.length; i++) {
                var hash = hashes[i].split('=');
                if (hash[0].toLowerCase() == 'op') {
                    searchQueryType = hash[1];
                }
                else if (hash[0].toLowerCase() == 'val') {
                    searchQueryValue = decodeURI(hash[1]);
                }
            }

            if (searchQueryType != '' && searchQueryValue != '') {
                if (searchQueryType == 'R1')
                    this.search.clientId = searchQueryValue;
                else if (searchQueryType == 'R2')
                    this.search.name = searchQueryValue;
                else if (searchQueryType == 'R3')
                    this.search.email = searchQueryValue;
                else if (searchQueryType == 'R4')
                    this.search.companyName = searchQueryValue;
                else if (searchQueryType == 'R5')
                    this.search.address = searchQueryValue;
                else if (searchQueryType == 'R6')
                    this.search.address2 = searchQueryValue;
                else if (searchQueryType == 'R7')
                    this.search.phone = searchQueryValue;
                else if (searchQueryType == 'R8')
                    this.search.card4Digit = searchQueryValue;
                else if (searchQueryType == 'R9')
                    this.search.notes = searchQueryValue;
                else if (searchQueryType == 'R10')
                    this.search.city = searchQueryValue;
                else if (searchQueryType == 'R11')
                    this.search.zipPostalCode = searchQueryValue;
            }
        },
        sortBy: function (exp) {

            if (this.search.sortExpression != exp) {
                this.search.sortExpression = exp;
                this.search.sortDir = "Asc";
            }
            else
                this.search.sortDir = this.search.sortDir == "Asc" ? "Desc" : "Asc";

            this.search.updateSorting = true;
            this.doSearch();
        },
        resellerTypeChangeHandler: function (obj) {
            this.search.selectedResellerType = obj.selectedValue;
        },
        listRecords: async function () {

            var vm = this;
            vm.isLoading = true;
            let postRequest = { ...fetchPost };
            postRequest.body = JSON.stringify(vm.search);

            await fetch("/PCC/Reseller/List.aspx/GetResellersList", postRequest)
                .then(response => response.json()).then((data) => {

                    vm.search.updateSorting = false;
                    vm.records = JSON.parse(data.d);
                    if (vm.records.length > 0)
                        vm.totalRecords = vm.records[0].Counter;
                });
            vm.isLoading = false;
            //setTimeout(function () {
            AdminBSBThemeChanges();
            //}, 100);

        },
        pagerChangeHandler: function (o) {
            this.search.pageIndex = o.pageIndex;
            this.search.pageSize = o.pageSize;
            this.doSearch();
        },
        listResellerTypes: async function () {

            var vm = this;

            await fetch("/PCC/Reseller/List.aspx/GetResellerTypes", fetchGet)
                .then(response => response.json()).then((data) => {

                    vm.resellertypes = JSON.parse(data.d);
                    this.search.selectedResellerType = this.resellertypes.initialValue;

                });

        },
        doClearSearch: async function () {

            this.search.clientId = '';
            this.search.name = '';
            this.search.email = '';
            this.search.companyName = '';
            this.search.status = 'GN0000261';
            this.search.phone = '';
            this.search.address = '';
            this.search.address2 = '';
            this.search.notes = '';
            this.search.card4Digit = '';
            this.search.WHMCSId = '';
            this.search.selectedResellerType = this.resellertypes.initialValue;
            this.search.city = '';
            this.search.zipPostalCode = '';
            this.search.showDeleted = false;
            this.deletedOnlyResults = false;

            this.search.pageIndex = 1;

            updateSelectInterface();    //Required to update SOL control in case of html select.
            this.doSearch();

        },
        doSearch: function () {

            clearAllMsgs();
            var vm = this;
            this.listRecords().catch(function (e) {
                vm.records = [];
                vm.totalRecords = 0;
                vm.isLoading = false;
                displayErrorMsg(e);
            });

            this.deletedOnlyResults = this.search.showDeleted;
        },
        loginToPlesk: function (e) {
            // Get the value of the disabled attribute
            const disabledValue = e.target.getAttribute('disabled');

            if (disabledValue === 'true' || disabledValue === true)
                return false;

            let cId = e.target.dataset.id;

            let postRequest = { ...fetchPost };
            var param = {
                'CustomerId': cId
            };

            postRequest.body = JSON.stringify(param);

            fetch("/PCC/Reseller/List.aspx/LoginToPlesk", postRequest)
                .then(response => response.json()).then((data) => {

                    if (data.d.ResponseCode == "RedirectURL")
                        window.location.href = data.d.Value;

                }).catch(function (e) {
                    displayErrorMsg(e);
                });
        },
        mpModelEventHandler: function (obj) {

            if (obj.submit == true) {

                if (this.reasonRequired && this.reason == '') {
                    //$('#txtreason').parent().addClass('validation-failed');
                    //$('#txtreason').focus();

                    alert(this.getLabelText('ReasonIsRequired'));
                    this.showModal = true;
                    $('#' + obj.id).modal('show');

                    return;
                }

                if (obj.parentContext.op == "remove")
                    this.removeCustomer(obj);
                else if (obj.parentContext.op == "resume" || obj.parentContext.op == "suspend")
                    this.suspendResumeCustomer(obj);
            }

            this.clearPopUpControls();
            this.showModal = false;
        },
        clearPopUpControls: function () {
            this.reason = '';
            this.cbAction = false;
            this.modalTitle = '';
            this.modalBody = '';
        },
        confirmActionSuspendResume: function (e) {

            // Get the value of the disabled attribute
            const disabledValue = e.target.getAttribute('disabled');

            if (disabledValue === 'true' || disabledValue === true)
                return false;

            //CustomerId, OwnerId, Name, SubsCount, UserCount
            let cId = e.target.dataset.id;
            let CustomerIsSuspend = e.target.dataset.status;

            this.showModal = true;
            this.parentContext = { cId: cId, op: (CustomerIsSuspend ? "resume" : "suspend") };
            this.reasonRequired = true;

            if (this.parentContext.op == "suspend") { //Resume case
                this.cbActionRequired = true;
            }

            this.modalTitle = this.getLabelText('SMI0280');
            this.modalBody = '';
        },
        suspendResumeCustomer: function (obj) {

            let postRequest = { ...fetchPost };
            var param = {
                'CustomerId': obj.parentContext.cId,
                'Comments': this.reason,
                'IsSuspendRequest': (obj.parentContext.op == "suspend" ? true : false),
                'chbxSuspendCustomersTo': this.cbAction
            };

            postRequest.body = JSON.stringify(param);

            fetch("/PCC/Reseller/List.aspx/SuspendResumeReseller", postRequest)
                .then(response => response.json()).then((data) => {

                    if (data.d == true || data.d == 'true') {
                        this.doSearch();
                        displaySuccessMsg(this.getLabelText('EGN0000011'));
                    }

                }).catch(function (e) {
                    displayErrorMsg(e);
                });
        },
        confirmActionRemovePermenant: function (e) {

            // Get the value of the disabled attribute
            const disabledValue = e.target.getAttribute('disabled');

            if (disabledValue === 'true' || disabledValue === true)
                return false;

            //CustomerId, OwnerId, Name, SubsCount, UserCount
            let cId = e.target.dataset.id;
            let oId = e.target.dataset.ownerid;
            let Name = e.target.dataset.name;

            this.parentContext = { cId: cId, oId: oId, op: "remove" };

            if (confirm(this.getLabelText('SPT002037')))
                this.removeCustomerPermenant(this.parentContext);

        },
        removeCustomerPermenant: function (obj) {

            let postRequest = { ...fetchPost };
            var param = {
                'CustomerId': obj.cId,
                'OwnerId': obj.oId
            };

            postRequest.body = JSON.stringify(param);

            fetch("/PCC/Reseller/List.aspx/RemoveCustomerPermenantly", postRequest)
                .then(response => response.json()).then((data) => {

                    //if (data.d == 'true') {
                    this.doSearch();
                    displaySuccessMsg(this.getLabelText('EGN0000011'));
                    //}

                }).catch(function (e) {
                    displayErrorMsg(e);
                });
        },
        confirmActionRemove: function (e) {

            // Get the value of the disabled attribute
            const disabledValue = e.target.getAttribute('disabled');

            if (disabledValue === 'true' || disabledValue === true)
                return false;

            //CustomerId, OwnerId, Name, SubsCount, UserCount
            let cId = e.target.dataset.id;
            let oId = e.target.dataset.ownerid;
            let Name = e.target.dataset.name;
            let SubsCount = e.target.dataset.subscount;
            let UserCount = e.target.dataset.usercount;

            this.parentContext = { cId: cId, oId: oId, op: "remove" };

            if (confirm(this.getLabelText('String999').replace("reseller", "reseller " + Name).replace("$SubscriptionsCount$", SubsCount).replace("$CustomersCount$", UserCount)))
                this.removeCustomer(this.parentContext);

        },
        removeCustomer: function (obj) {

            let postRequest = { ...fetchPost };
            var param = {
                'CustomerId': obj.cId,
                'OwnerId': obj.oId
            };

            postRequest.body = JSON.stringify(param);

            fetch("/PCC/Reseller/List.aspx/RemoveCustomer", postRequest)
                .then(response => response.json()).then((data) => {

                    //if (data.d == 'true') {
                    this.doSearch();
                    displaySuccessMsg(this.getLabelText('EGN0000011'));
                    //}

                }).catch(function (e) {
                    displayErrorMsg(e);
                });
        }
    },
    created: async function () {

        this.search.sortDir = this.sortPreference.SortDirection;
        this.search.sortExpression = this.sortPreference.SortExpression;

        var vm = this;

        await this.listResellerTypes().then(async () => { vm.handleGlobalSearch(); await vm.listRecords(); }).catch(function (e) {
            vm.records = [];
            vm.totalRecords = 0;
            vm.isLoading = false;
            displayErrorMsg(e);
        });
    },
    template: `

        <div class="col-xs-12">
            <div class="card">
                <div class="body">
                    <div class="row">

                        <ModalPopUp v-if="showModal" :parentContext="parentContext" :modalTitle="modalTitle" @onYes="mpModelEventHandler" @onNo="mpModelEventHandler"
                            :yesButtonText="getLabelText('strYes')" :noButtonText="getLabelText('strNo')">

                            <div class="row" v-if="modalBody != ''">
                                <div class="col-12">
                                    <div class="word-break">{{ modalBody }}</div>
                                </div><br/>
                            </div>

                            <div class="row" v-if="cbActionRequired">
                                <div class="col-sm-3 col-xs-12 row-label">
                                    <label>{{ getLabelText('strSuspendCustomerAccountsToo') + ':' }}</label>
                                </div>
                                <div class="col-sm-9 col-xs-12">
                                    <div class="form-group">
                                        <input type="checkbox" v-model="cbAction" />
                                    </div>
                                </div><br/>
                            </div>

                            <div class="row" v-if="reasonRequired">
                                <div class="col-sm-3 col-xs-12 row-label">
                                    <label>{{ getLabelText('GN0000805') + ':' }}</label>
                                </div>
                                <div class="col-sm-8 col-xs-12">
                                    <InputTextArea id="txtreason" v-model:fieldValue="reason" fieldRows="5" />
                                </div>
                            </div>

                        </ModalPopUp>

                        <OperationsPanel v-if="!readOnly">
                            <a v-bind:href="'/RCC/Clients/ServiceSubscription.aspx?IR=1&AR=1'" target="_blank" v-if="(isComissionbasedResellerEnabled || isSubscriptionbasedResellerEnabled) && !isEgyptBenyaTechPlatform" class="btn btn-primary waves-effect btnAction">{{ getLabelText('String306') }}</a>
                            <a v-bind:href="'/PCC/Reseller/BulkSubscribe.aspx'" v-bind:class="[{'disabled':(records.length <= 0)}, 'btn btn-primary waves-effect']">{{ getLabelText('BulkSubscribe') }}</a>
                            <a v-bind:href="'/PCC/Reseller/ImportResellers.aspx'" target="_blank" v-if="showImportResellers  && !isEgyptBenyaTechPlatform" class="btn btn-primary waves-effect btnAction" >{{ getLabelText('StrImportResellers') }}</a>
                        </OperationsPanel>

                        <SearchPanel id='reseller-list' :showClearButton='showClearButton' @onSearch='doSearch' @onClear='doClearSearch'>

                            <div :class="searchContainerDivClass">
                                <div class="form-group form-float">
                                    <select v-model="search.status" class="vue-select">
                                        <option value="GN0000261">{{ getLabelText('SelectStatus') }}</option>
                                        <option value="GN0000222">{{ getLabelText('GN0000222') }}</option>
                                        <option value="GN0000345">{{ getLabelText('GN0000345') }}</option>
                                        <option value="GN0000349">{{ getLabelText('GN0000349') }}</option>
                                        <option value="String383">{{ getLabelText('String383') }}</option>
                                    </select>
                                </div>
                            </div>

                            <div :class="searchContainerDivClass" v-if="resellertypes.show">
                                <div class="form-group form-float">
                                    <VueSelect :options="resellertypes.items" :selectedValue="this.search.selectedResellerType" @selectchange="resellerTypeChangeHandler" />
                                </div>
                            </div>

                            <InputSearch :searchValue="search.clientId" fieldName="clientId" fieldDataType="Number" :fieldLabel="getLabelText('GN0000678')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                            <InputSearch :searchValue="search.name" fieldName="name" :fieldLabel="getLabelText('GN000170')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                            <InputSearch :searchValue="search.email" fieldName="email" :fieldLabel="getLabelText('GN0000652')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                            <InputSearch :searchValue="search.companyName" fieldName="companyName" :fieldLabel="getLabelText('GN00001077')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                            <InputSearch :searchValue="search.WHMCSId" fieldName="WHMCSId" fieldDataType="Number" v-if="showWHMCS" :fieldLabel="getLabelText('USM0159')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                            <InputSearch :searchValue="search.address" fieldName="address" :fieldLabel="getLabelText('GN00001493')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                            <InputSearch :searchValue="search.address2" fieldName="address2" :fieldLabel="getLabelText('strAddress2')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                            <InputSearch :searchValue="search.phone" fieldName="phone" :fieldLabel="getLabelText('GN00012')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                            <InputSearch :searchValue="search.city" fieldName="city" :fieldLabel="getLabelText('GN0000880')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                            <InputSearch :searchValue="search.zipPostalCode" fieldName="zipPostalCode" :fieldLabel="getLabelText('GN00001522')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                            <InputSearch :searchValue="search.card4Digit" fieldName="card4Digit" fieldDataType="Number" :fieldLabel="getLabelText('String126')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                            <InputSearch :searchValue="search.notes" fieldName="notes" :fieldLabel="getLabelText('GN00001336')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />

                            <div :class="searchContainerDivClass" v-if="!permenantDeleteCustomer">
                                <label for="showDeleted" class="checkbox-inline">
                                    <input type="checkbox" id="showDeleted" v-model="search.showDeleted" />{{getLabelText('ShowDeleted')}}
                                </label>
                            </div>
                        </SearchPanel>
                        <div class="col-xs-12" v-if="isLoading">
                            <Loading/>
                        </div>
                        <div class="col-xs-12" v-else>
                            <table class="table table-bordered table-striped table-hover" v-if="records.length > 0">
                                <tbody>
                                    <tr>
                                        <th class="col-xs-1">{{ getLabelText('String385') }}</th>
                                        <th class="col-xs-1 hidden-xs"><a href="#" @click.prevent="sortBy('CustomerID')">{{ getLabelText('GN0000678') }}</a></th>
                                        <th class="col-xs-1" v-if="showCustomerNumber"><a href="#" @click.prevent="sortBy('CustomerNumber')">{{ getLabelText('GN000924') }}</a></th>
                                        <th class="col-xs-1" v-if="showWHMCS">{{ getLabelText('USM0159') }}</th>
                                        <th class="col-xs-3"><a href="#" @click.prevent="sortBy('Name')">{{ getLabelText('GN000170') }}</a></th>
                                        <th class="col-xs-2"><a href="#" @click.prevent="sortBy('CustCompanyName')">{{ getLabelText('GN00001077') }}</a></th>
                                        <th class="col-xs-1"><a href="#" @click.prevent="sortBy('UserCount')">{{ getLabelText('SM200001') }}</a></th>
                                        <th class="col-xs-2" v-if="resellertypes.show">{{ getLabelText('GN0000673') }}</th>
                                        <th class="col-xs-1 align-center" v-if="!readOnly">{{ getLabelText('GN0000360') }}</th>
                                    </tr>
                                    <tr v-for="customer in records">
                                        <td v-if="!customer.StillCustomer && customer.DeleteJobExists">{{ getLabelText('String383') }}</td>
                                        <td v-else-if="!customer.StillCustomer && !customer.DeleteJobExists">{{ getLabelText('GN0000302') }}</td>
                                        <td v-else-if="customer.StillCustomer && customer.IsSuspend">{{ getLabelText('GN0000345') }}</td>
                                        <td v-else-if="customer.StillCustomer && customer.IsFraud">{{ getLabelText('GN0000349') }}</td>
                                        <td v-else>{{ getLabelText('GN0000222') }}</td>

                                        <td class="hidden-xs"><a v-bind:href="'/RCC/Clients/ClientDetail.aspx?RD=1&CID='+customer.CustomerId+'&Src=C'">{{customer.CustomerId}} </a></td>
                                        <td v-if="showCustomerNumber"><a v-bind:href="'/RCC/Clients/ClientDetail.aspx?RD=1&CID='+customer.CustomerId+'&Src=C'">{{customer.CustomerNumber}}</a></td>
                                        <td v-if="showWHMCS">{{customer.WHMCS_UserId}} </td>
                                        <td>{{customer.Name}} </td>
                                        <td>{{customer.CustCompanyName}} </td>
                                        <td>{{customer.UserCount}} </td>
                                        <td v-if="resellertypes.show">{{customer.ResellerLabel}} </td>
                                        <td class="align-center" v-if="!readOnly">
                                            <ul class="option-menu Div_OpsRow">
                                                <li class="dropdown">
                                                    <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                                        <i class="material-icons">menu</i>
                                                    </a>
                                                    <ul class="dropdown-menu pull-right" id="UL_OptionMenu" v-show="!deletedOnlyResults">
                                                        <li v-if="!isKeyCloakEnabled">
                                                            <a v-bind:href="'/PCC/Reseller/List.aspx?AL=' + customer.CustomerId" v-bind:class="[{'disabled':(!customer.StillCustomer || customer.IsSuspend || customer.IsFraud ? true : null)}, 'btnAction waves-effect waves-block']">{{ getLabelText('GN0001248') }}</a></li>
                                                        <li v-if="customer.StillCustomer && !customer.IsSuspend && !customer.IsFraud && customer.PleskInfo != ''">
                                                            <a @click="loginToPlesk" :data-id="customer.CustomerId" class="btnAction waves-effect waves-block">{{ getLabelText('LoginPlesk') }}</a>
                                                        </li>
                                                        <li v-if="customer.StillCustomer && !customer.IsSuspend && !customer.IsFraud && customer.PleskInfo != ''">
                                                            <a v-bind:href="'/RCC/Clients/ResetPleskPassword.aspx?Mode=1&CID=' + customer.CustomerId" class="btnAction waves-effect waves-block">{{ getLabelText('ChangePleskPassword') }}</a></li>
                                                        <li v-if="customer.ResellerType && subscriptionBasedReseller">
                                                            <a v-bind:href="'/RCC/Clients/ServiceSubscription.aspx?Sub=1&CID=' + customer.CustomerId + '&AR=1'" v-bind:class="[{'disabled':(!customer.StillCustomer || customer.IsSuspend || customer.IsFraud ? true : null)}, 'btnAction waves-effect waves-block']">{{ getLabelText('String277') }}</a></li>
                                                        <li>
                                                            <a v-bind:href="'/RCC/Clients/ServiceSubscription.aspx?Sub=1&CID=' + customer.CustomerId" v-bind:class="[{'disabled':(!customer.StillCustomer || customer.IsSuspend || customer.IsFraud ? true : null)}, 'btnAction waves-effect waves-block']" >{{ getLabelText('String276') }}</a></li>
                                                        <li>
                                                            <a v-if="customer.IsSuspend" @click="confirmActionSuspendResume" :data-id="customer.CustomerId" :data-status="customer.IsSuspend" v-bind:class="[{'disabled':(!customer.StillCustomer ? true : null)}, 'btnAction waves-effect waves-block']" >{{ getLabelText('GN0000807') }}</a>
                                                            <a v-else @click="confirmActionSuspendResume" :data-id="customer.CustomerId" :data-status="customer.IsSuspend"  v-bind:class="[{'disabled':(!customer.StillCustomer ? true : null)}, 'btnAction waves-effect waves-block']" >{{ getLabelText('DGN1110276') }}</a>
                                                        </li>
                                                        <li v-if="showDeleteOption">
                                                            <a @click="confirmActionRemove" :data-id="customer.CustomerId" :data-ownerid="customer.OwnerId"
                                                                :data-name="customer.Name" :data-subscount="customer.SubsCount" :data-usercount="customer.UserCount"
                                                                v-bind:class="[{'disabled':(!customer.StillCustomer ? true : null)}, 'btnAction waves-effect waves-block']">{{ getLabelText('GN0000377') }}</a>
                                                        </li>
                                                        
                                                    </ul>
                                                    <ul class="dropdown-menu pull-right" id="UL_OptionMenuDeletedUsers" v-if="deletedOnlyResults">
                                                        <li>
                                                            <a ID="Lbtn_PermenantDelete" @click="confirmActionRemovePermenant" :data-id="customer.CustomerId" :data-ownerid="customer.OwnerId"
                                                                :data-name="customer.Name" class="btnAction">{{ getLabelText('strPermenantDelete') }}</a>
                                                        </li>
                                                    </ul>
                                                    
                                                </li>
                                            </ul>

                                        </td>
                                    </tr>

                                    <Pager :totalRecords="totalRecords" :pageSize="this.search.pageSize" :currentPage="this.search.pageIndex" @pagerChange="pagerChangeHandler" />
                                </tbody>
                            </table>
                            <NoRecords v-else />
                        </div>
                    </div>
                </div>
            </div>
        </div>
`
}
