<template>
    <!-- <v-container> -->
        <div class="ld-select-receivers-wrapper">
            <!-- <v-row no-gutters v-if="label">
                <span class="font-weight-bold">{{ label }}:</span>
            </v-row> -->
        <v-col cols="12">
        <v-row class="no-gutters">
            <v-col>
            <vue-multiselect
                v-if="selectedReceivers"
                id="multiselect-id"
                ref="multiselect"
                v-model="selectedReceivers"
                :class="{ 'multiselect--extended': !isRestrictedToIds, 'multiselect--mobile-select': isMobile }"
                style="padding: 0"
                label="name"
                track-by="name"
                :placeholder="myPlaceholder"
                open-direction="bottom"
                select-label=""
                :options="receivers"
                :multiple="multiselect"
                :loading="loading"
                :searchable="true"
                :internal-search="isRestrictedToIds"
                :clear-on-select="true"
                :options-limit="300"
                :max-height="250"
                :show-no-results="true"
                :hide-selected="true"
                :show-no-options="false"
                :disabled="readonly"
                :allowEmpty="!lastLocked"
                v-on="bindOn"
                @select="receiverSelected"
                @remove="receiverRemoved"
                @input="receiverInputHandler"
                @open="onOpen"
            >
                <template slot="clear" slot-scope="props">
                <div
                    v-if="selectedReceivers.length"
                    class="multiselect-clear"
                    @mousedown.prevent.stop="clearAll(props.search)"
                />
                </template>
                <!-------------->
                <!-- Chips -->
                <!-------------->
                <template slot="tag" slot-scope="props">
                <template v-if="isGroupUsers(props)">
                    <v-tooltip bottom close-delay="3000">
                    <template v-slot:activator="{ on }">
                        <v-chip
                        v-on="on"
                        small
                        :close="canRemove"
                        color="primary_light"
                        class="v-chip--select-multi white--text"
                        @click:close="receiverRemoved(props.option)"
                        >
                        <v-icon class="user-icon mr-1">
                            {{ tagIcon(props.option) }}
                        </v-icon>
                        <span :class="{ mobileChipContent: isMobile }">
                            {{ props.option.displayName }}
                        </span>
                        </v-chip>
                    </template>
                    <div>
                        <span v-html="getNamesByGroupId(props.option.id)"></span>
                    </div>
                    </v-tooltip>
                </template>
                <template v-else-if="isBadge(props)">
                    <v-chip
                    color="primary_light"
                    :close="canRemove"
                    small
                    class="chip--select-multi white--text"
                    @click:close="receiverRemoved(props.option)"
                    >
                    <svg-icon icon="label" width="16px" height="12px" class="mr-1" />
                    <span :class="{ mobileChipContent: isMobile }">{{ props.option.displayName }}</span>
                    </v-chip>
                </template>
                <template v-else-if="isGRKAttr(props)">
                    <v-chip
                    color="primary_light"
                    :close="canRemove"
                    small
                    class="chip--select-multi white--text"
                    @click:close="receiverRemoved(props.option)"
                    >
                    <svg-icon icon="user_filled" width="16px" height="12px" class="mr-1" />
                    <span :class="{ mobileChipContent: isMobile }">{{ props.option.displayName }}</span>
                    </v-chip>
                </template>
                <template v-else>
                    <!-- <div v-if="!tooltipFields.length">
                    <v-chip
                        color="primary_light"
                        :close="canRemove"
                        small
                        class="chip--select-multi white--text"
                        @click:close="receiverRemoved(props.option)"
                    >
                        <v-icon class="user-icon mr-1">
                        {{ tagIcon(props.option) }}
                        </v-icon>
                        <span :class="{ mobileChipContent: isMobile }">{{ props.option.displayName }}</span>
                    </v-chip>
                    </div> -->
                    <user-tooltip-chip
                    :user="props.option"
                    :text="props.option.displayName"
                    :icon="tagIcon(props.option)"
                    :can-close="canRemove"
                    @close="receiverRemoved(props.option)"
                    />
                </template>
                </template>
                <!-------------->
                <!-- Options -->
                <!-------------->
                <template slot="option" slot-scope="option">
                <v-row class="py-2" no-gutters>
                    <v-col class="d-flex align-center">
                    <v-icon class="align-self-start" size="18">
                        {{ tagIcon(option.option) }}
                    </v-icon>
                    <div>
                        <div>
                        <template v-if="option.option.fullName">
                            {{ option.option.fullName }}
                        </template>
                        <template v-else>
                            {{ option.option.name }}
                            <template v-if="option.option.positionName">({{ option.option.positionName }})</template>
                        </template>
                        </div>
                        <div v-if="formatOption">{{ formatOption(option.option) }}</div>
                        <div v-else>{{ option.option.departmentName }}</div>
                    </div>
                    </v-col>
                </v-row>
                </template>
                <span slot="noResult">{{ notFoundMessage }}</span>
            </vue-multiselect>
            </v-col>
        </v-row>

        <!-- Частые контакты -->

        <v-row class="no-gutters mt-3" style="min-height: 20px">
            <template v-if="attributes">
            <!-- <v-col v-if="favoriteLabel && favoriteReceivers.length" class="col-12 mb-1">
                <translate class="text-body-1 black--text lighten-1 font-weight-bold">Частые контакты</translate>
            </v-col> -->
            <v-col v-if="1 === 2">
                <v-row
                align="center"
                no-gutters
                justify="center"

                >
                <!-- :class="{ 'position-start': favoriteLabel || favoriteReceivers.length < 3 }" -->

                <div v-if="!tooltipFields.length">
                    <v-sheet :max-width="favoriteReceiversWidth">
                    <v-slide-group multiple>
                        <v-slide-item
                            v-for="(value, key) of Object.keys(attributes)"
                            :key="'fav-rec:' + key"
                        >

                        <!-- Если это не юзер, то отображаем chip без тултипов -->
                        <template>
                            <v-chip
                                close
                                small
                                class="chip--select-multi white--text primary_light"
                                @click="onFavoriteClick(key)"
                                @click:close="deleteFavoriteReceiver(key, index)"
                                >
                                <!-- <v-icon class="user-icon mr-1"> group </v-icon> -->
                                {{ value }}
                            </v-chip>
                        </template>
                        </v-slide-item>
                    </v-slide-group>
                    </v-sheet>
                </div>
                </v-row>
            </v-col>
            <datatable
                ref="table"
                class="material ngx-flex elevation-0"
                sort-type="multi"
                column-mode="standard"
                :rows="attributes"
                :scrollbar-v="true"
                :header-height="32"
                :row-height="26"
                selection-type="singleClick"

                @select="onFavoriteClick()"
            >
                      <!-- :columns="[{prop: 'RS', name: 'Р/с', sortable: true, canAutoResize:true},
                {prop: 'RSBankName', name: 'В банке', sortable: true, canAutoResize:true},
                {prop: 'KS', name: 'К/с', sortable: true, canAutoResize:true},
                {prop: 'KSBankName', name: 'В банке', sortable: true, canAutoResize:true}]" -->
            </datatable>
            </template>
        </v-row>
        </v-col>
    </div>
    <!-- </v-container> -->
</template>