<template>
  <q-select
    ref="select"
    v-model="modelCast.selected"
    hide-dropdown-icon
    outlined
    :label="fieldLabel"
    use-input
    :options="opts"
    :loading="modelCast.loading"
    :multiple="isMultiple"
    :use-chips="isMultiple"
    clearable
    :disable="disable"
    :dense="dense"
    :popup-content-style="{
      'max-height': '40vh',
    }"
    :rules="rules"
    @virtual-scroll="onScroll"
    @input-value="onInput"
    @input="onSelect"
    class="redesigned-autocomplete-select"
  >
    <template #selected-item="scope">
      <span v-if="!isMultiple">
        {{ scope.opt[`${labelValue}`] }}
      </span>
      <q-chip
        v-if="isMultiple"
        removable
        dense
        :tabindex="scope.tabindex"
        class="redesigned-chip"
        icon-remove="pgs-close"
        @remove="scope.removeAtIndex(scope.index)"
      >
        {{ scope.opt[`${labelValue}`] }}
      </q-chip>
    </template>
    <template #option="scope">
      <q-item v-bind="scope.itemProps" v-on="scope.itemEvents">
        <q-item-section>
          <q-item-label v-html="scope.opt[`${labelValue}`]" />
        </q-item-section>
      </q-item>
    </template>
  </q-select>
</template>

<script src="./index.ts"></script>

<style lang="scss">
.redesigned-autocomplete-select {
  font-family: 'Golos UI';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: rgba(2, 12, 18, 0.9);
  .redesigned-chip {
    background: rgba(15, 32, 160, 0.09);
    .q-chip__content {
      overflow: hidden;
    }
  }
}
</style>
