<template>
  <q-select
    class="multi-select"
    v-model="selected"
    outlined
    dense
    options-dense
    :label="label || 'Статус'"
    borderless
    multiple
    :emit-value="false"
    :options="options"
    menu-anchor="bottom start"
    virtual-scroll-slice-size="10"
    @popup-hide="handleSelectedSearch"
    dropdown-icon="pgs-shevron-down-off"
  >
    <template #option="scope">
      <q-item v-bind="scope.itemProps" v-on="scope.itemEvents">
        <q-item-section side>
          <q-checkbox :value="scope.selected" @input="scope.itemEvents.click" />
        </q-item-section>
        <q-item-section>
          <q-item-label v-html="scope.opt.label" />
        </q-item-section>
      </q-item>
    </template>
    <template #before-options>
      <div class="multi-select__custom-header">
        <q-item>
          <q-item-section>
            <q-checkbox
              v-model="isSelectedChange"
              label="Выбрать всё"
              @input="handleAllSelected"
            />
          </q-item-section>
        </q-item>
      </div>
    </template>
  </q-select>
</template>

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

@Component
export default class MultiSelect extends Vue {
  @Prop({ default: [] }) private options: [];
  @Prop() private status!: [];
  @Prop() private label: string | null;

  private selected: [] = [];
  private hasActiveSelected = false;
  private isSelectedChange: boolean | null = false;

  @Watch("selected")
  checkSelectedLength(val: string): void {
    this.isSelectedChange =
      val.length === 0
        ? false
        : val.length === this.options.length
          ? true
          : null;
  }
  @Watch("status")
  resetStatus(val: []): void {
    if (val.length === 0) {
      this.selected = [];
      this.hasActiveSelected = false;
    } else {
      this.selected = val;
      this.hasActiveSelected = true;
    }
  }

  handleSelectedSearch(): void {
    const result = this.selected.length ? this.selected : undefined;
    if (result !== undefined) {
      this.isSelectedChange = false;
      this.$emit("input", result);
      this.hasActiveSelected = true;
    } else {
      this.selected = [];
      this.hasActiveSelected = false;
      this.isSelectedChange = false;
      this.$emit("input", []);
    }
  }

  handleAllSelected(): void {
    if (this.selected.length === this.options.length) {
      this.selected = [];
    } else {
      this.selected = [...this.options];
    }
  }
}
</script>

<style lang="sass">
.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>
