<template>
  <div class="RSelect">
    <span class="RSelect-Label">{{ label }}</span>
    <q-select
      dense
      options-dense
      borderless
      menu-anchor="bottom start"
      virtual-scroll-slice-size="10"
      dropdown-icon="pgs-shevron-down-off"
      class="RSelect-Content"
      :value="value"
      :clearable="clearable"
      :options="options"
      :display-value="displayValue"
      :disable="disable"
      :map-options="mapOptions"
      :emit-value="emitValue"
      :rules="rules"
      @input="checkSelectedLength($event)"
    >
      <template v-if="$slots.prepend" v-slot:prepend>
        <slot name="prepend" />
      </template>
      <template v-if="$slots.append" v-slot:append>
        <slot name="append" />
      </template>
    </q-select>
  </div>
</template>

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

interface Option {
  label: string;
  value: string;
}

@Component
export default class RSelect extends Vue {
  @Prop({ default: [] }) options: [];
  @Prop() label: string;
  @Prop() emit: string;
  @Prop() disable?: boolean | '';
  @Prop({ default: false }) clearable?: boolean;
  @Prop({ default: '' }) placeholder: string;
  @Prop({ type: Boolean, default: false }) readonly mapOptions: boolean;
  @Prop({ type: Boolean, default: false }) readonly emitValue: boolean;
  @Prop({ default: () => [] }) rules?: Array<(val: string) => boolean | string>;

  @Model('update')
  value: Option;

  get displayValue(): string | undefined {
    return this.emitValue ? undefined : this.value?.label || this.placeholder;
  }

  checkSelectedLength(val: Option): void {
    if (this.emit) {
      this.$emit('update', get(val, this.emit));
      return;
    }
    this.$emit('update', val);
  }
}
</script>

<style lang="scss">
.RSelect {
  display: flex;
  flex-direction: column;
  &-Label {
    font-family: 'Golos Text', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    color: rgba(2, 12, 18, 0.58);
    margin-bottom: 4px;
  }

  &-Content {
    .q-field__control {
      height: 39px;
      min-height: 39px;

      background: #e5edf5;
      border-radius: 4px 4px 0 0;
      background-blend-mode: multiply;
      border: none;
      border-bottom: 1px solid rgba(1, 72, 116, 0.18);
      padding: 0 8px !important;
      box-sizing: border-box;
      transition: 0.1s;
      &:focus {
        transition: 0.1s;
        outline: none;
        background-color: white;
        box-shadow: inset 0 0 2px rgba(15, 104, 160, 0.87);
        border-color: #1487cf;
      }
      // Скрывает текст выходящий за границы инпута
      .q-field__native span {
        max-height: 39px;
        overflow: hidden;
      }
    }
  }
}
// .q-field--auto-height.q-field--dense .q-field__control
//   height: 39px
//   min-height: 39px
// .multi-select__custom-header
//   :hover
//     background-color: #e4e4e4
//     cursor: pointer
// .multi-select .q-field__native
//   white-space: nowrap
//   max-width: 900px
//   overflow: hidden
//   text-overflow: ellipsis
//   max-height: 27px
//   span
//     max-width: 50vw // иначе, по неизвестной причине, ломался grid layout при выборе больше чем 3 статуса (на примере со статусом)
// .q-select--with-chips .hide-chip-overflow .q-chip__content
//     overflow: hidden
</style>
