<template>
  <widget-wrapper v-bind="$props" ref="widget">
    <reference-book-item
      v-if="fieldNode"
      :dictionary="dictionary"
      :value="value && value.__id"
      :name="valueName"
      :nested="isNested"
      :selected-group-index="selectedGroupIndex"
      @load="dictionaryReady"
    >
      <template
        v-if="!(isReadonly && readonlyAsText)"
        v-slot="{ loading, value }"
      >
        <q-select
          class="dictionary-select"
          :disable="disable"
          ref="select"
          :readonly="isReadonly"
          use-input
          @filter="filterItems"
          v-bind="$props"
          outlined
          filled
          emit-value
          :options="filteredOptions"
          v-model="selected"
          :error="hasError"
          :display-value="loading ? '' : undefined"
          :error-message="errorMessage"
          :loading="loading"
          :label="fieldNode.label"
          @popup-show="onPopupShow"
        >
          <template v-if="isMultipleOptions" v-slot:option="scope">
            <q-expansion-item
              expand-separator
              group="somegroup"
              :default-opened="hasOption(scope)"
              header-class="text-weight-bold"
              :label="scope.opt.label"
            >
              <template v-for="child in scope.opt.children">
                <q-item
                  :key="child.label + child.value"
                  clickable
                  v-ripple
                  v-close-popup
                  @click="selectOption(child, scope)"
                  :class="{ 'bg-light-blue-1': isSelectedOption(child) }"
                >
                  <q-item-section>
                    <q-item-label
                      v-html="child.label"
                      class="q-ml-md"
                    ></q-item-label>
                  </q-item-section>
                </q-item>
              </template>
            </q-expansion-item>
          </template>
        </q-select>
      </template>
    </reference-book-item>
  </widget-wrapper>
</template>

<script lang="ts" src="./DictionarySelect.ts"></script>

<style lang="scss" scoped>
.dictionary-select {
  padding-bottom: 20px;
  margin-top: 12px;
}
</style>
