<template>
  <div class="DopButton" v-if="filtred.length">
    <div class="row flex items-center q-gutter-xs">
      <div class="q-pr-sm">
        <span class="DopButton-TextFiled"> Выбрано: </span>
        <span class="DopButton-TextField DopButton-TextFiled__Bold">
          {{ filtred.length }}
        </span>
        <q-tooltip v-if="tooltip">
          <slot name="tooltip">{{
            `${$tc('RSelectionFilter.selected', filtred.length)} ${tooltip}`
          }}</slot>
        </q-tooltip>
      </div>
      <slot name="default" :filtred="filtred" />
    </div>
  </div>
</template>

<i18n>
  {
    "ru": {
      "RSelectionFilter": {
        "selected": "Не выбрано | Один гражданин выбран | {n} гражданина выбраны | {n} граждан выбраны"
      }
    }
  }
</i18n>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component({})
export default class RSelectionFilter extends Vue {
  @Prop()
  label: string;

  @Prop()
  tooltip: string;

  @Prop({ default: () => [] })
  selected: unknown[];

  @Prop({ default: null })
  filter: {
    <T = unknown>(sekected: T, index?: number, array?: T[]): boolean;
  } | null;

  get filtred(): unknown[] {
    if (!this.filter) return this.selected;
    return this.selected.filter(this.filter);
  }
}
</script>

<style lang="scss" scoped>
.ButtonsBlock {
  align-items: center;
}
.DopButton {
  box-sizing: border-box;
  background-color: rgba(15, 32, 160, 0.08);
  border-radius: 20px;
  padding: 4px;
  margin-top: -5px;
  margin-bottom: -5px;
  &-TextFiled {
    margin-left: 8px;
    margin-right: 8px;
    font-family: 'Golos UI', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: rgba(2, 12, 18, 0.58);
    &__Bold {
      font-weight: 500;
      color: #015e98;
    }
  }
  &-Button {
    &__Color {
      &__DarkBlue {
        background: linear-gradient(92.91deg, #1491cf 0%, #0f68a0 100%);
        box-shadow: 0 0.6px 1.8px rgba(7, 46, 71, 0.12),
          0 3.2px 8px rgba(7, 46, 71, 0.15);
        color: rgba(255, 255, 255, 0.92);
      }
    }
  }
}
</style>
