<template>
  <div
    :class="$q.screen.lt.sm ? `` : `q-pa-xs`"
    v-if="isfinishLoading && mycolumns"
  >
    <div :class="`shadow-2 rounded-borders`">
      <div>
        <div v-if="prop_search || canEdit" class="q-my-xs text-right">
          <q-btn
            size="sm"
            dense
            icon="fas fa-filter"
            :label="$t('grid.showfilters')"
            @click="showfilter = !showfilter"
          ></q-btn>
        </div>
        <q-slide-transition>
          <div class="row no-wrap shadow-1">
            <div v-if="$q.screen.gt.xs" class="col-1">
              <q-avatar @click="toHome" class="imglink">
                <img
                  :src="tools.getimglogo()"
                  height="27"
                  alt="Immagine Logo"
                />
              </q-avatar>
            </div>
            <div class="col-fixed " style="width: 200px;">
              <q-select
                v-model="tablesel"
                :options="optionsMainCards"
                emit-value
                rounded
                dense
                filled
                class="text-blue q-ml-sm"
                bg-color="light-blue-2"
                map-options
                :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
                @update:model-value="gotoPageSel"
              >
                <template v-slot:prepend>
                  <q-icon :name="iconsel" :color="colorsel" />
                </template>
                <template v-slot:option="scope">
                  <q-item v-bind="scope.itemProps">
                    <q-item-section avatar>
                      <q-icon :name="scope.opt.icon" />
                    </q-item-section>
                    <q-item-section>
                      <q-item-label>{{ scope.opt.label }}</q-item-label>
                      <!--<q-item-label caption>{{
                        scope.opt.description
                      }}</q-item-label>-->
                    </q-item-section>
                  </q-item>
                </template>
              </q-select>
            </div>
            <div class="col-auto">
              <!-- to the right -->
              <q-btn
                v-if="
                  tools.getLabelAddrec(ind) && tools.checkIfICanAddNewRecord()
                "
                rounded
                outline
                color="primary"
                class="q-ma-xs q-py-sm"
                :label="tools.getLabelAddrec(ind)"
                icon="fas fa-pencil-alt"
                @click="clickButtBar(tools.BUTT_ADDREC)"
              >
              </q-btn>
            </div>

            <!--<q-btn
                  size="sm"
                  class="col-1 q-mx-xs"
                  icon="fas fa-plus"
                  @click="createNewRecordDialog"
                >
                </q-btn>-->
            <q-btn v-if="false" color="green" label="Filtra la ricerca">
              <q-popup-proxy>
                <q-banner class="bg-brown text-white">
                  <div
                    class="col"
                    v-for="(item, index) in searchList"
                    :key="index"
                  >
                    <CMySelect
                      :col="fieldsTable.getColByColumns(mycolumns, item.key)"
                      v-if="
                        item.type === costanti.FieldType.select ||
                        item.type === costanti.FieldType.select_by_server
                      "
                      :label="
                        item.value && item.value._id > 0
                          ? undefined
                          : labelcombo(item)
                      "
                      v-model:value="item.value"
                      @update:value="
                        searchval(item.value, item.table, tablesel)
                      "
                      :addall="item.addall"
                      :addnone="item.addnone"
                      :addlast="true"
                      :tablesel="
                        item.type === costanti.FieldType.select_by_server
                          ? item.tablesel
                          : ''
                      "
                      :pickup="
                        item.type === costanti.FieldType.select_by_server
                      "
                      :label-color="$q.dark.isActive ? 'white' : 'black'"
                      myclass="comboselector"
                      color="primary"
                      dark
                      :dense="true"
                      :icon_alternative="item.icon"
                      :optval="fieldsTable.getKeyByTable(item.table)"
                      :optlab="fieldsTable.getLabelByTable(item.table)"
                      :options="valoriopt(item, false)"
                      :filter="item.filter"
                      :filter_extra="item.filter_extra"
                      style="font-size: 0.8rem !important"
                      :useinput="
                        item.useinput &&
                        item.type !== costanti.FieldType.select_by_server
                      "
                    >
                    </CMySelect>

                    <!--<div v-if="item.type === costanti.FieldType.multiselect_by_server">
              item: {{ item}}
            </div>-->

                    <CMySelect
                      v-if="
                        item.type === costanti.FieldType.multiselect_by_server
                      "
                      :col="fieldsTable.getColByColumns(mycolumns, item.key)"
                      :multiselect_by_server="true"
                      :label="labelcombo(item)"
                      v-model:arrvalue="item.arrvalue"
                      @update:arrvalue="
                        searchval(item.arrvalue, item.table, tablesel)
                      "
                      :addall="item.addall"
                      :addnone="item.addnone"
                      dark
                      :addlast="true"
                      :tablesel="item.tablesel"
                      :pickup="true"
                      :param1="item.param1"
                      label-color="primary"
                      class="comboselector"
                      color="primary"
                      :icon_alternative="item.icon"
                      :optval="fieldsTable.getKeyByTable(item.table)"
                      :optlab="fieldsTable.getLabelByTable(item.table)"
                      :filter="item.filter"
                      :filter_extra="item.filter_extra"
                      :options="valoriopt(item, false)"
                      :useinput="true"
                    >
                    </CMySelect>

                    <q-select
                      v-if="item.type === costanti.FieldType.multiselect"
                      v-model="item.arrvalue"
                      label-color="primary"
                      :label="labelcombo(item)"
                      @update:model-value="
                        searchval(item.arrvalue, item.table, tablesel)
                      "
                      rounded
                      dark
                      dense
                      outlined
                      multiple
                      options-dense
                      emit-value
                      map-options
                      :useinput="item.useinput"
                      :options="valoriopt(item, item.addall, item.addnone)"
                      :filter="item.filter"
                      class="comboselector"
                      :option-value="fieldsTable.getKeyByTable(item.table)"
                    >
                      <template v-if="item.icon" v-slot:prepend>
                        <q-icon :name="item.icon" />
                      </template>
                      <template
                        v-if="item.arrvalue.length >= 1"
                        v-slot:selected-item="scope"
                      >
                        <div
                          v-if="
                            scope.opt[
                              fieldsTable.getLabelByTable(item.table)
                            ] ||
                            (scope.opt && checkIfShowRec(scope.opt))
                          "
                        >
                          <q-chip
                            removable
                            dense
                            @remove="scope.removeAtIndex(scope.index)"
                            v-if="checkIfShowRec(scope.opt)"
                            :color="$q.dark.isActive ? 'white' : 'black'"
                            text-color="mycol"
                            class="q-my-none q-ml-xs q-mr-none"
                          >
                            <q-avatar
                              color="primary"
                              :text-color="$q.dark.isActive ? 'white' : 'black'"
                              :icon="item.icon"
                              size="12px"
                            />
                            {{
                              scope.opt[
                                fieldsTable.getLabelByTable(item.table)
                              ] || scope.opt
                            }}
                          </q-chip>
                        </div>
                      </template>
                      <template
                        v-slot:option="{
                          itemProps,
                          opt,
                          selected,
                          toggleOption,
                        }"
                      >
                        <q-item v-bind="itemProps">
                          <q-item-section>
                            <q-item-label>{{
                              opt[fieldsTable.getLabelByTable(item.table)]
                            }}</q-item-label>
                          </q-item-section>
                          <q-item-section side>
                            <q-toggle
                              :model-value="selected"
                              @update:model-value="toggleOption(opt)"
                            />
                          </q-item-section>
                        </q-item>
                      </template>
                    </q-select>
                  </div>
                </q-banner>
              </q-popup-proxy>
            </q-btn>
          </div>
        </q-slide-transition>
      </div>
      <div class="q-my-xs">
        <slot />
      </div>
    </div>
  </div>
</template>
<script lang="ts" src="./CBarSelection.ts">
</script>

<style lang="scss">
@import './CBarSelection.scss';
</style>
