<template>
  <div v-if="tools.isDebugOn()"></div>
  <div
    :class="$q.screen.lt.sm ? `` : `q-pa-xs`"
    v-if="isfinishLoading"
  >
    <q-toggle
      v-if="(tools.isManager() || tools.isEditor() || tools.isGrafico()) && !showMap && editOn"
      v-model="editOn"
      color="green"
      icon="fas fa-pencil-alt"
      class="fixed-toggle"
    >
    </q-toggle>
    <div
      v-if="mytable && visButtRow()"
      class="centermydiv q-my-sm"
      style="text-align: center"
    >
      <q-btn
        rounded
        dense
        color="primary"
        size="lg"
        :label="getlabelAddRow()"
        @click="createNewRecordDialog"
      ></q-btn>
    </div>

    <div
      v-if="butt_modif_new || mytitle"
      :class="$q.screen.lt.sm ? `` : `q-ma-xs` + ` `"
    >
      <q-toolbar
        v-if="mytitle"
        class="bg-primary text-white"
      >
        <q-toolbar-title>{{ mytitle }}</q-toolbar-title>
      </q-toolbar>

      <q-space></q-space>
      <div
        v-if="butt_modif_new"
        class="row justify-center"
      >
        <q-btn
          v-if="mytable && !shared_consts.TABLES_FINDER.includes(mytable) && !showMap"
          rounded
          dense
          size="sm"
          flat
          :color="canEdit ? 'positive' : 'light-gray'"
          :disable="disabilita()"
          :val="lists.MenuAction.CAN_EDIT_TABLE"
          icon="fas fa-pencil-alt"
          @update:model-value="changefuncAct"
          @click="canEdit = !canEdit"
        >
        </q-btn>
        <q-btn
          v-if="mytable && labelBtnAddExtra"
          rounded
          outline
          size="md"
          color="primary"
          class="q-mb-sm"
          :label="labelBtnAddExtra"
          :disable="startsearch"
          icon="fas fa-plus"
          @click="createNewRecord"
        >
        </q-btn>
      </div>
    </div>
    <q-inner-loading :showing="spinner_visible">
      <q-spinner-tail
        size="2em"
        color="primary"
      />
    </q-inner-loading>

    <CTitleBanner
      v-if="subtitle"
      :title="subtitle"
      bgcolor="bg-blue"
      clcolor="text-white"
    >
    </CTitleBanner>

    <div v-if="shared_consts.VERTIC_SHOW_GRID.includes(myvertical)">
      <div
        v-if="(prop_search || canEdit) && finder"
        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 v-show="showfilter">
          <div
            v-show="searchList"
            :class="$q.screen.lt.sm ? `` : `row` + ` text-blue `"
          >
            <span
              v-for="(item, index) in searchList"
              :key="index"
            >
              <div
                class="text-center q-my-xs"
                v-if="item.type === costanti.FieldType.separator"
              >
                <q-btn
                  size="sm"
                  color="positive"
                  rounded
                  :icon="!showfilteradv ? 'fas fa-arrow-down' : 'fas fa-arrow-up'"
                  :label="!showfilteradv ? $t('grid.advanced_filters') : $t('grid.hide_advanced_filters')"
                  @click="showfilteradv = !showfilteradv"
                ></q-btn>
              </div>

              <div
                v-if="!(item.filteradv && !showfilteradv)"
                v-show="item.visible"
              >
                <CMySelect
                  :col="fieldsTable.getColByColumns(mycolumns, item.key)"
                  v-if="
                    (item.type === costanti.FieldType.select || item.type === costanti.FieldType.select_by_server) &&
                    lengthopt(item, false, false) > 1
                  "
                  :label="labelcombo(item)"
                  v-model:value="item.value"
                  @update:value="searchval(item.value, item.table)"
                  :addall="item.addall"
                  :addnone="item.addnone"
                  :tablesel="item.type === costanti.FieldType.select_by_server ? item.tablesel : ''"
                  :pickup="item.type === costanti.FieldType.select_by_server"
                  label-color="primary"
                  class="combowidth"
                  color="primary"
                  :icon_alternative="item.icon"
                  :optval="fieldsTable.getKeyByTable(item.table)"
                  :optlab="fieldsTable.getLabelByTable(item.table)"
                  :options="valoriopt(item, item.addall, item.addnone)"
                  :filter="item && item.filter ? item.filter : ''"
                  :filter_extra="item.filter_extra"
                  :useinput="item.useinput && item.type !== costanti.FieldType.select_by_server"
                >
                </CMySelect>

                <CMySelect
                  v-if="item.type === costanti.FieldType.multiselect_by_server && lengthopt(item, false) > 1"
                  :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)"
                  :addall="item.addall"
                  :addnone="item.addnone"
                  :tablesel="item.tablesel"
                  :pickup="true"
                  :param1="item.param1"
                  label-color="primary"
                  class="combowidth"
                  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
                  :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
                  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)"
                  rounded
                  dense
                  outlined
                  multiple
                  options-dense
                  emit-value
                  map-options
                  stack-label
                  :useinput="item.useinput"
                  :options="valoriopt(item, item.addall, item.addnone)"
                  :filter="item.filter"
                  class="combowidth"
                  :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="white"
                        text-color="mycol"
                        class="q-my-none q-ml-xs q-mr-none"
                      >
                        <q-avatar
                          color="primary"
                          text-color="white"
                          :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>
                <q-toggle
                  v-else-if="item.type === costanti.FieldType.boolean"
                  :label="item.label"
                  v-model="item.value"
                  @update:model-value="refresh"
                  color="green"
                />
              </div>
            </span>
          </div>
        </div>
      </q-slide-transition>

      <div
        v-if="prop_search || canEdit"
        class="q-gutter-sm"
      >
        <div
          v-if="searchList && finder"
          class="row items-start"
        >
          <q-btn
            v-if="searchList && searchList.length > 0"
            class="q-mx-xs"
            :color="!showfilter ? 'positive' : 'blue-grey-4'"
            :icon="!showfilter ? 'fas fa-filter' : 'fas fa-arrow-up'"
            @click="showfilter = !showfilter"
          >
            <q-badge
              v-if="getNumFilterSelected()"
              color="red"
              floating
              transparent
            >
              {{ getNumFilterSelected() }}
            </q-badge>
          </q-btn>

          <q-input
            v-model="search"
            filled
            type="search"
            debounce="500"
            :hint="!hintinbtnsearch ? hint : ''"
            :error-message="noresultLabel"
            :error="getNumRecFromQuery() === 0 && !startsearch && myfilter !== ''"
            :label="hintinbtnsearch ? hint : $t('grid.search')"
            @keyup.enter="doSearch"
            @clear="
              myfilter = '';
              doSearch();
            "
            @update:model-value="findByDebounce ? doSearch() : null"
            :clearable="!!myfilter"
            class="col q-mx-xs"
            style="max-width: 400px"
          >
            <template
              v-if="!search"
              v-slot:prepend
            >
              <q-icon name="search" />
            </template>
          </q-input>

          <q-btn
            v-if="(prop_search && myfilter) || search"
            color="primary"
            icon="fas fa-search"
            @click="showSearchOnTop ? (showSearchDialog = true) : doSearch()"
          />

          <q-btn-toggle
            v-if="shared_consts.TABLES_VISU_MAP.includes(mytable)"
            v-model="showMap"
            dense
            spread
            no-caps
            toggle-color="secondary"
            :options="[
              {
                label: $t('grid.showmap'),
                value: true,
                icon: 'fas fa-map-marked-alt',
              },
              { label: $t('grid.showlist'), value: false, icon: 'fas fa-list' },
            ]"
          />
        </div>
        <q-space></q-space>
        <q-select
          :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
          v-if="mytable && pagination.rowsNumber > 0 && (prop_search || canEdit) && showCol && myvertical === 0"
          v-model="colVisib"
          rounded
          outlined
          multiple
          dense
          options-dense
          :display-value="t('grid.columns')"
          emit-value
          map-options
          :options="mycolumns"
          option-value="name"
          @update:model-value="changeCol"
        >
        </q-select>
      </div>

      <div
        v-if="true"
        class=""
      >
        <div v-if="pagination.rowsNumber === 1 && prop_search">
          {{ pagination.rowsNumber }} elemento trovato
          <span v-html="getLabelAreaMap()"></span>
        </div>
        <div v-if="pagination.rowsNumber > 1 && prop_search">
          {{ pagination.rowsNumber }} {{ labelElemFind }}
          <span v-html="getLabelAreaMap()"></span>
        </div>
      </div>

      <div
        v-if="choose_visutype && $q.screen.gt.xs"
        class=""
      >
        <q-radio
          v-model="myvertical"
          :val="2"
          label="Lista"
        />
        <!--<q-radio v-if="mytable === toolsext.TAB" v-model="myvertical" :val="costanti.VISUTABLE_SCHEDA_GROUP"
                 label="Scheda"
                 @update:model-value="tools.setCookie('myv_' + prop_mytable, myvertical) "/>
        <q-radio v-else-if="mytable !== shared_consts.TABLES_MYGROUPS && !finder" v-model="myvertical"
                 :val="costanti.VISUTABLE_SCHEDA_USER" slabel="Scheda"
                 @update:model-value="tools.setCookie('myv_' + prop_mytable, myvertical) "/>-->
        <q-radio
          v-if="$q.screen.gt.xs"
          v-model="myvertical"
          :val="0"
          :label="$t('grid.table')"
        />
      </div>
    </div>

    <div
      v-if="showMapAtLeast1"
      v-show="showMap"
    >
      <CMapByTable
        ref="myMapComp"
        mytable=""
        :arrcordprop="serverData"
        @clickMarker="clickMarker"
        @updateMapBoundaries="updateMapBoundaries"
        @updateMapZoomOut="updateMapZoomOut"
      >
      </CMapByTable>
    </div>

    <div v-if="!showMap">
      <div
        v-if="myvertical === costanti.VISUTABLE_GRID_ORIZ"
        id="carousel-scroll-target"
        class="carousel-scroll-container"
        :style="heightcarousel ? `height: ${heightcarousel}` : ''"
        v-intersection="onIntersection"
      >
        <q-carousel
          swipeable
          animated
          :autoplay="autoplay"
          infinite
          v-model="slideGridOriz"
          navigation
          control-text-color="white"
          ref="carousel"
          transition-next="slide-left"
          transition-prev="slide-right"
          :height="heightcarousel"
          width="100%"
          control-type="flat"
          class="bg-primary shadow-2 rounded-borders"
          @mouseenter="autoplay = false"
          @mouseleave="autoplay = true"
          @transition="handleTransition"
        >
          <template v-slot:control>
            <q-carousel-control
              position="left"
              :offset="[-10, -10]"
              class="q-gutter-xs"
              style="opacity: 0.7"
            >
              <q-btn
                push
                round
                :color="$q.dark.isActive ? `black` : `white`"
                :text-color="$q.dark.isActive ? `white` : `black`"
                icon="keyboard_arrow_left"
                @click="$refs.carousel.previous()"
              ></q-btn>
            </q-carousel-control>
            <q-carousel-control
              position="top-right"
              class="q-gutter-xs"
              :offset="[-10, -10]"
              style="opacity: 0.7"
            >
              <q-btn
                push
                round
                :color="$q.dark.isActive ? `black` : `white`"
                :text-color="$q.dark.isActive ? `white` : `black`"
                icon="keyboard_arrow_right"
                @click="$refs.carousel.next()"
              ></q-btn>
            </q-carousel-control>
          </template>
          <q-carousel-slide
            v-for="(rec, indexrow) in serverData"
            :key="indexrow"
            :name="indexrow"
          >
            <CMyRecCard
              :table="tablesel"
              :prop_myrec="rec"
              @cmdext="cmdExt"
              :editOn="editOn"
              :margin_right="margin_right"
            >
            </CMyRecCard>
          </q-carousel-slide>
        </q-carousel>
        <q-infinite-scroll
          ref="myinfscroll"
          v-if="!loading"
          :initial-index="0"
          @load="loadMore"
          :offset="350"
          style="display: none"
        >
        </q-infinite-scroll>
      </div>

      <q-infinite-scroll
        ref="myinfscroll"
        v-else-if="shared_consts.VERTIC_SHOW_GRID.includes(myvertical) && !loading && alreadymounting"
        :initial-index="0"
        @load="onLoadScroll"
        :offset="350"
        debounce="300"
        scroll-target=".carousel-scroll-container"
      >
        <div v-if="showHeaderCol">
          <div
            v-for="col in mycolumns"
            :key="col.name"
            class="text-italic text-weight-bold"
          >
            <span v-if="col && showColCheck(col, tools.TIPOVIS_SHOW_RECORD, true)">
              {{ col.label }}
            </span>
          </div>
        </div>

        <div
          :style="heightcarousel ? `height: ${heightcarousel}` : ''"
          :class="{
            'carousel-scroll-container': !!heightcarousel,
            row: opt.rowclass,
            'items-stretch': opt.rowclass,
            'justify-evenly': opt.rowclass,
          }"
        >
          <div
            v-for="(row, indexrow) in serverData"
            :key="indexrow"
            :class="{
              row: opt.rowclass,
              'items-stretch': opt.rowclass,
            }"
          >
            <div
            :class="{
              'items-stretch': opt.rowclass,
            }"
              v-if="
                showType === costanti.SHOW_MYCARD ||
                (myvertical !== costanti.VISUTABLE_USER_TABGROUP &&
                  myvertical !== costanti.VISUTABLE_USER_TABCIRCUIT &&
                  myvertical === costanti.VISUTABLE_LISTA &&
                  shared_consts.TABLES_VISU_CMYSRECCARD.includes(tablesel))
              "
            >
              <div v-if="row && withdate">
                <div v-if="setShowMonth(row, indexrow)">
                  <div>
                    <div v-if="row.dateTimeStart">
                      <strong>{{ tools.getstrMonth(row.dateTimeStart) }}</strong>
                    </div>
                    <div>
                      <q-separator />
                    </div>
                  </div>
                </div>
              </div>

              <CMyRecGrpCard
                v-if="tablesel === shared_consts.TABLES_MYGROUPS"
                :table="tablesel"
                :prop_myrec="row"
                @cmdext="cmdExt"
              >
              </CMyRecGrpCard>
              <CMyRecCircuitCard
                v-else-if="tablesel === shared_consts.TABLES_CIRCUITS"
                :table="tablesel"
                :prop_myrec="row"
                @cmdext="cmdExt"
              >
              </CMyRecCircuitCard>
              <CMyRecCatalog
                v-else-if="tablesel === shared_consts.TABLES_CATALOG"
                :table="tablesel"
                :prop_myrec="row"
                :dettagli="getisDettagliByCatalog()"
                :opt="opt"
                @cmdext="cmdExt"
                :editOn="editOn"
                :margin_right="margin_right"
              >
              </CMyRecCatalog>
              <CMyRecCard
                v-else
                :table="tablesel"
                :prop_myrec="row"
                @cmdext="cmdExt"
                :editOn="editOn"
                :margin_right="margin_right"
              >
              </CMyRecCard>
            </div>
            <div
              v-else-if="
                (showType === costanti.SHOW_USERINFO && myvertical !== costanti.VISUTABLE_SCHEDA_USER) ||
                (myvertical === 2 && shared_consts.TABLES_VISU_LISTA_USER.includes(tablesel))
              "
              class="fill-all-width"
            >
              <div>
                <CMyUser
                  :notsetcmd="true"
                  :mycontact="row"
                  :visu="visufind"
                  :groupname="extrafield"
                  :circuitname="circuitname"
                  :actionType="actionType"
                  :labelextra="col_title ? row[col_title] : ''"
                  :labelFooter="col_footer ? tools.getLabelFooterByRow(row, col_footer, tablesel) : ''"
                  @showInnerDialog="showInnerDialog"
                >
                </CMyUser>

                <q-separator></q-separator>
              </div>
            </div>
            <div
              v-else-if="
                (showType === costanti.SHOW_GROUPINFO && myvertical !== costanti.VISUTABLE_SCHEDA_GROUP) ||
                (myvertical === 2 && tablesel === 'mygroups') ||
                myvertical === costanti.VISUTABLE_GROUP_CIRCUIT
              "
              class="fill-all-width"
            >
              <div>
                <CMyGroups
                  v-model="filtergrp"
                  :circuitname="circuitname"
                  :finder="false"
                  :mygrp="row"
                  :visu="visufind ? visufind : costanti.FIND_GROUP"
                />
              </div>
            </div>
            <div v-else-if="showType === costanti.SHOW_MOVEMENTS && tablesel === 'movements'">
              <CSingleMovement :mov="row" />
            </div>
          </div>
        </div>
        <template v-slot:loading>
          <div class="row justify-center q-my-md">
            <q-spinner-dots
              color="primary"
              size="40px"
            />
          </div>
        </template>
      </q-infinite-scroll>
      <q-table
        v-else-if="!shared_consts.VERTIC_SHOW_GRID.includes(myvertical) && !loading && serverData && mycolumns"
        :grid="shared_consts.VERTIC_SHOW_GRID.includes(myvertical)"
        :grid-header="
          shared_consts.VERTIC_SHOW_GRID.includes(myvertical) && shared_consts.TABLES_WITH_SORTING.includes(mytable)
        "
        flat
        bordered
        class="my-sticky-header-table"
        :rows="serverData"
        :columns="mycolumns"
        :filter="myfilter"
        v-model:pagination="pagination"
        @request="onRequest"
        virtual-scroll
        :row-key="colkey"
        :loading="startsearch"
        @selection="selectionclick"
        binary-state-sort
        :visible-columns="colVisib"
        :no-data-label="nodataLabel"
        :no-results-label="noresultLabel"
        :selected-rows-label="getSelectedString"
        selection="single"
        v-model:selected="selected"
      >
        <template
          v-if="
            !(
              myvertical === costanti.VISUTABLE_SCHEDA_USER ||
              myvertical === 2 ||
              myvertical === costanti.VISUTABLE_SCHEDA_GROUP
            )
          "
          v-slot:header="props"
        >
          <q-tr :props="props">
            <q-th> </q-th>
            <q-th
              v-for="col in props.cols"
              :key="col.name"
              :props="props"
              class="text-italic text-weight-bold"
            >
              <span v-if="col && showColCheck(col, tools.TIPOVIS_SHOW_RECORD, true)">
                {{ col.label }}
              </span>
            </q-th>
          </q-tr>
        </template>
        <template
          v-else
          v-slot:header="props"
        >
          <q-tr :props="props">
            <q-th> </q-th>

            <span
              v-for="col in props.cols"
              :key="col.name"
            >
              <q-th
                v-if="col.sortable"
                :key="col.name"
                :props="props"
                class="text-italic text-weight-bold"
              >
                <span>
                  {{ col.label }}
                </span>
              </q-th>
            </span>
          </q-tr>
        </template>

        <template
          v-slot:top-right
          v-if="tablesList || arrfilters || enableExport"
        >
          <span style="display: none">{{ actual = null }}</span>

          <q-select
            :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
            v-if="tablesList"
            v-model="tablesel"
            rounded
            outlined
            dense
            :options="tablesList"
            :display-value="mytitle"
            emit-value
            @update:model-value="changeTable(tablesel)"
          >
          </q-select>

          <q-btn
            v-if="enableExport"
            color="primary"
            icon-right="archive"
            :label="t('export.csv')"
            no-caps
            @click="exportTable"
          />

          <div class="row">
            <q-toggle
              v-for="(filt, index) of arrfilters"
              :key="index"
              v-model="myfilterand"
              :disable="filt.hide"
              :val="filt.value"
              :label="filt.label"
            >
            </q-toggle>
          </div>

          <!--<q-input borderless dense debounce="300" v-model="filter" placeholder="Search">
          <template v-slot:append>
            <q-icon name="search" />
          </template>
        </q-input>-->
        </template>

        <template v-slot:top-left>
          <div
            v-if="searchList"
            :class="$q.screen.lt.sm ? `` : `row` + ` text-blue `"
          >
            <span
              v-for="(item, index) in searchList"
              :key="index"
            >
              <div
                class="text-center q-my-xs"
                v-if="item.type === costanti.FieldType.separator"
              >
                <q-btn
                  size="sm"
                  color="positive"
                  :icon="!showfilteradv ? 'fas fa-arrow-down' : 'fas fa-arrow-up'"
                  :label="!showfilteradv ? $t('grid.advanced_filters') : $t('grid.hide_advanced_filters')"
                  @click="showfilteradv = !showfilteradv"
                ></q-btn>
              </div>

              <CMySelect
                :col="fieldsTable.getColByColumns(mycolumns, item.key)"
                v-if="item.type === costanti.FieldType.select || item.type === costanti.FieldType.select_by_server"
                v-show="item.visible"
                :label="labelcombo(item)"
                v-model:value="item.value"
                @update:value="searchval(item.value, item.table)"
                :addall="item.addall"
                :addnone="item.addnone"
                :tablesel="item.type === costanti.FieldType.select_by_server ? item.tablesel : ''"
                :pickup="item.type === costanti.FieldType.select_by_server"
                label-color="primary"
                class="combowidth"
                color="primary"
                :icon_alternative="item.icon"
                :optval="fieldsTable.getKeyByTable(item.table)"
                :optlab="fieldsTable.getLabelByTable(item.table)"
                :options="valoriopt(item, item.addall, item.addnone)"
                :filter="item.filter"
                :filter_extra="item.filter_extra"
                :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"
                v-show="item.visible"
                :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)"
                :addall="item.addall"
                :addnone="item.addnone"
                :tablesel="item.tablesel"
                :pickup="true"
                :param1="item.param1"
                label-color="primary"
                class="combowidth"
                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
                :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
                v-if="item.type === costanti.FieldType.multiselect"
                v-show="item.visible"
                v-model="item.arrvalue"
                label-color="primary"
                :label="labelcombo(item)"
                @update:model-value="searchval(item.arrvalue, item.table)"
                rounded
                dense
                outlined
                multiple
                options-dense
                emit-value
                map-options
                stack-label
                :useinput="item.useinput"
                :options="valoriopt(item, item.addall, item.addnone)"
                :filter="item.filter"
                class="combowidth"
                :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="white"
                      text-color="mycol"
                      class="q-my-none q-ml-xs q-mr-none"
                    >
                      <q-avatar
                        color="primary"
                        text-color="white"
                        :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>
              <q-toggle
                v-else-if="item.type === costanti.FieldType.boolean"
                :label="item.label"
                v-model="item.value"
                @update:model-value="refresh"
                color="green"
              />
            </span>
          </div>

          <div
            v-if="prop_search || canEdit"
            class="row justify-center vertical-middle"
          >
            <div
              v-if="prop_search"
              :class="'q-mr-sm ' + ($q.screen.lt.sm ? ' full-width' : '')"
            >
              <q-input
                v-model="search"
                filled
                type="search"
                debounce="500"
                :hint="hint"
                :error-message="noresultLabel"
                :error="getNumRecFromQuery() === 0 && !startsearch"
                :label="$t('grid.search')"
                v-on:keyup.enter="doSearch"
              >
                <template v-slot:after>
                  <q-btn
                    v-if="mytable"
                    dense
                    label=""
                    color="primary"
                    @click="refresh"
                    icon="search"
                  ></q-btn>
                </template>
              </q-input>
            </div>

            <q-space></q-space>
            <q-select
              :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
              v-if="mytable && pagination.rowsNumber > 0 && (prop_search || canEdit) && showCol && myvertical === 0"
              v-model="colVisib"
              rounded
              outlined
              multiple
              dense
              options-dense
              :display-value="t('grid.columns')"
              emit-value
              map-options
              :options="mycolumns"
              option-value="name"
              @update:model-value="changeCol"
            >
            </q-select>
          </div>

          <div v-if="pagination.rowsNumber === 1 && prop_search">{{ pagination.rowsNumber }} elemento trovato</div>
          <div v-if="pagination.rowsNumber > 1 && prop_search">{{ pagination.rowsNumber }} elementi trovati</div>

          <div
            v-if="choose_visutype && $q.screen.gt.xs"
            class=""
          >
            <q-radio
              v-model="myvertical"
              :val="2"
              label="Lista"
            />
            <!--<q-radio v-if="mytable === toolsext.TAB" v-model="myvertical" :val="costanti.VISUTABLE_SCHEDA_GROUP"
                   label="Scheda"
                   @update:model-value="tools.setCookie('myv_' + prop_mytable, myvertical) "/>
          <q-radio v-else-if="mytable !== shared_consts.TABLES_MYGROUPS && !finder" v-model="myvertical"
                   :val="costanti.VISUTABLE_SCHEDA_USER" slabel="Scheda"
                   @update:model-value="tools.setCookie('myv_' + prop_mytable, myvertical) "/>-->
            <q-radio
              v-if="$q.screen.gt.xs"
              v-model="myvertical"
              :val="0"
              label="Tabella"
            />
          </div>
        </template>

        <template v-slot:body="props">
          <q-tr
            :props="props"
            class="trclass"
          >
            <q-td
              auto-width
              class="tdclass"
            >
              <q-checkbox
                dense
                v-model="props.selected"
              ></q-checkbox>
            </q-td>
            <q-td
              v-for="col in mycolumns"
              :key="col.name"
              :props="props"
            >
              <div
                v-if="showColCheck(col, tools.TIPOVIS_SHOW_RECORD, true, 1, props.row)"
                class="tdclass"
              >
                <div :class="getclrow(props.row)">
                  <CMyPopupEdit
                    :table="mytable"
                    :canEdit="canEdit"
                    :canModify="tools.canModifyThisRec(props.row, tablesel) || editOn"
                    :disable="disabilita()"
                    :mycol="col"
                    v-model:row="props.row"
                    :field="col.field"
                    :subfield="col.subfield"
                    minuteinterval="1"
                    @save="SaveValue"
                    @show="selItem(props.row, col)"
                    @showandsave="showandsave"
                    :dense="true"
                  >
                  </CMyPopupEdit>
                </div>
              </div>
            </q-td>
            <q-td
              v-for="col in mycolumns"
              :key="col.name"
              :props="props"
            >
              <div
                v-if="colExtra.includes(col.name)"
                class="tdclass"
              >
                <div v-if="col.action && visCol(col)">
                  <q-btn
                    flat
                    round
                    color="red"
                    :icon="col.icon"
                    size="sm"
                    @click="clickFunz(props.row, col)"
                  ></q-btn>
                </div>
              </div>
            </q-td>
          </q-tr>
          <br />
        </template>

        <template v-slot:item="props">
          <div
            class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3"
            :style="props.selected ? 'transform: scale(0.95);' : ''"
          >
            <q-card
              :class="props.selected ? 'bg-grey-2 my-card-withshadow no-padding' : 'my-card-withshadow no-padding'"
              style="background: radial-gradient(circle, #ffffff 0%, #bbddff 100%)"
            >
              <q-bar
                v-if="!visuinpage && (tools.canModifyThisRec(props.row, tablesel) || editOn)"
                dense
                class="bg-primary text-white full-height"
              >
                <q-badge
                  v-if="props.row['adType']"
                  :color="fieldsTable.getColByAdType(props.row['adType'])"
                >
                  {{ fieldsTable.getValByTabAndId(tablesel, 'adType', props.row['adType']) }}
                  <!--<q-icon
                    :name="fieldsTable.getIconByAdType(props.row['adType'])"
                    color="white"
                    class="q-ml-xs"
                  />-->
                </q-badge>

                <q-space />

                <q-btn
                  v-if="tools.canModifyThisRec(props.row, tablesel) || editOn"
                  flat
                  round
                  color="white"
                  icon="fas fa-pencil-alt"
                  size="sm"
                  @click="
                    clickFunz(
                      props.row,
                      prop_mycolumns.find((rec) => rec.action === lists.MenuAction.CAN_EDIT_TABLE)
                    )
                  "
                ></q-btn>
                <q-btn
                  v-if="tools.canModifyThisRec(props.row, tablesel) || editOn"
                  flat
                  round
                  color="white"
                  icon="fas fa-trash-alt"
                  size="sm"
                  @click="
                    clickFunz(
                      props.row,
                      prop_mycolumns.find((rec) => rec.action === lists.MenuAction.DELETE_RECTABLE)
                    )
                  "
                ></q-btn>
              </q-bar>
              <!--<q-toolbar dense v-if="col_title" class="bg-primary text-white centeritems">
              <q-toolbar-title>
                {{ props.row[col_title] }}
              </q-toolbar-title>
            </q-toolbar>-->

              <q-card-section class="">
                <q-list dense>
                  <div
                    v-for="col in mycolumns"
                    :key="col.name"
                  >
                    <q-item
                      v-if="
                        showColCheck(
                          col,
                          tools.TIPOVIS_SHOW_RECORD,
                          false,
                          tools.getValue(props.row, col.field, col.subfield)
                        )
                      "
                      :class="clByCol(col)"
                      class="riduci_pad"
                    >
                      <q-item-section
                        avatar
                        v-if="col.icon"
                      >
                        <q-item-label class="q-table__col">
                          <q-icon :name="col.icon"></q-icon>
                        </q-item-label>
                      </q-item-section>

                      <q-item-section
                        avatar
                        v-if="visuIntestazCol(col)"
                      >
                        <q-item-label class="q-table__col">{{ col.label }}</q-item-label>
                      </q-item-section>
                      <q-item-section>
                        <div class="tdclass">
                          <div :class="getclrow(props.row)">
                            <CMyPopupEdit
                              :table="mytable"
                              :canEdit="canEdit"
                              :canModify="tools.canModifyThisRec(props.row, tablesel) || editOn"
                              :disable="disabilita()"
                              :mycol="col"
                              v-model:row="props.row"
                              :field="col.field"
                              :subfield="col.subfield"
                              minuteinterval="1"
                              @save="SaveValue"
                              @show="selItem(props.row, col)"
                              @showandsave="showandsave"
                              :dense="true"
                            >
                            </CMyPopupEdit>
                          </div>
                        </div>
                      </q-item-section>
                    </q-item>
                  </div>
                </q-list>
              </q-card-section>
            </q-card>
          </div>
        </template>
      </q-table>
    </div>

    <!--<q-page-sticky
      v-if="mytable && butt_modif_new && !hidetitleIfEmpty"
      position="bottom-right"
      :offset="[18, 68]"
    >
      <q-btn
        fab
        glossy
        class="semi-transparent"
        icon="add"
        color="primary"
        @click="createNewRecordDialog"
      />
    </q-page-sticky>-->

    <q-dialog
      v-model="showSearchDialog"
      transition-show="slide-up"
      transition-hide="slide-down"
      class="q-dialog-fullscreen no-padding-dialog"
    >
      <q-card class="dialog_card q-dialog-on-top no-padding q-my-sm">
        <q-card-section class="no-padding">
          <q-input
            :class="'q-mr-sm full-width '"
            v-model="search"
            filled
            autofocus
            type="search"
            :hint="
              pagination.rowsNumber === 1 && prop_search
                ? `${pagination.rowsNumber} ` + t('grid.found') + ' ' + getLabelAreaMap(false)
                : pagination.rowsNumber > 1 && prop_search
                  ? `${pagination.rowsNumber} ${labelElemFind}` + ' ' + getLabelAreaMap(false)
                  : ''
            "
            debounce="500"
            :error-message="noresultLabel"
            :error="getNumRecFromQuery() === 0 && !startsearch"
            :label="hint ? hint : $t('grid.search')"
            v-on:keyup.enter="doSearch"
          >
            <template v-slot:prepend>
              <q-spinner-oval
                v-if="startsearch"
                color="primary"
                size="1em"
              />
              <q-icon
                v-else
                name="search"
              />
            </template>
            <template v-slot:append>
              <q-btn
                v-if="showMap"
                dense
                flat
                text-color="primary"
                @click="gotoCurrentLocation"
                icon="fas fa-crosshairs"
                class="q-ml-sm"
              ></q-btn>
            </template>
            <template v-slot:after>
              <q-select
                v-if="prop_SortFieldsAvailable.length > 0"
                :behavior="'menu'"
                rounded
                outlined
                v-model="ordinam"
                :options="prop_SortFieldsAvailable"
                :label="$t('grid.order')"
                emit-value
                map-options
                style="min-width: 120px"
              >
              </q-select>
              <!-- Pulsante per ottenere la posizione GPS -->

              <q-btn
                label=""
                color="primary"
                @click="doSearch"
                icon="fas fa-search"
              ></q-btn>
            </template>
          </q-input>
        </q-card-section>
      </q-card>
    </q-dialog>
    <q-dialog
      v-model="visupagedialog"
      transition-show="slide-up"
      transition-hide="slide-down"
      @hide="hidewindow"
      :maximized="$q.screen.lt.sm"
      :persistent="false"
      :class="'dialog_annunci ' + ($q.screen.lt.sm ? 'bottom-dialog' : ' right-align-dialog')"
    >
      <CMyCardGrpPopup
        v-if="mytable === shared_consts.TABLES_MYGROUPS"
        :table="mytable"
        :prop_myrec="myrecdialog"
      >
      </CMyCardGrpPopup>
      <CMyCardCircuitPopup
        v-else-if="mytable === shared_consts.TABLES_CIRCUITS"
        :table="mytable"
        :prop_myrec="myrecdialog"
      >
      </CMyCardCircuitPopup>
      <!--<CMyCardService
        v-else-if="shared_consts.TABLES_FAVORITE_BOOKMARK.includes(mytable)"
        :table="mytable"
        :idRec="myrecdialog._id"
      >
      </CMyCardService>-->
      <CMyCardService
        v-else-if="shared_consts.TABLES_FAVORITE_BOOKMARK.includes(mytable)"
        :table="mytable"
        :prop_myrec="myrecdialog"
        :idRec="myIdRecDialog"
        :showAnteprima="false"
        @showInMap="showInMap"
      >
      </CMyCardService>
      <CMyCardPopup
        v-else
        :table="mytable"
        :prop_myrec="myrecdialog"
      >
      </CMyCardPopup>
    </q-dialog>

    <div v-if="rowclicksel">
      <CTitleBanner title="Record:"></CTitleBanner>

      <div
        class="q-ma-xs q-pa-xs text-center rounded-borders q-list--bordered"
        v-for="mycol in mycolumns"
        :key="mycol.name"
      >
        <div v-if="showColCheck(mycol, tools.TIPOVIS_SHOW_RECORD, false)">
          <div class="row items-center justify-center q-gutter-md q-ma-xs">
            <div class="q-ma-xs">
              <q-field
                rounded
                outlined
                :bg-color="$q.dark.isActive ? '' : 'orange-3'"
                dense
              >
                <template v-slot:control>
                  <div
                    class="self-center full-width no-outline"
                    tabindex="0"
                  >
                    {{ mycol.label }}
                  </div>
                </template>
              </q-field>
            </div>
            <div
              class="q-ma-sm q-pa-sm colmodif col-grow popupedit"
              @click="colclicksel = mycol"
            >
              <CMyPopupEdit
                :table="mytable"
                :canEdit="true"
                :canModify="tools.canModifyThisRec(rowclicksel, tablesel) || editOn"
                :disable="disabilita()"
                :isInModif="mycol.isInModif"
                view="field"
                :mycol="mycol"
                :showall="true"
                :row="rowclicksel"
                :tablesel="mycol.tablesel"
                :field="mycol.field"
                :subfield="mycol.subfield"
                @save="SaveValdb"
                @show="selItem(rowclicksel, mycol)"
                @showandsave="showandsave"
                @annulla="annulla"
                @update_col="update_col"
                :dense="true"
              >
              </CMyPopupEdit>
            </div>
          </div>
        </div>
      </div>
    </div>
    <q-dialog
      v-model="newRecordBool"
      @hide="hidewindow"
      class="dialog_class"
      :persistent="true"
      :maximized="$q.screen.lt.sm"
    >
      <q-card class="dialog_card">
        <q-bar
          dense
          class="bg-primary text-white"
        >
          {{ t('dialog.insert') }} {{ mytitlenew }}:
          <q-space />
          <q-btn
            flat
            round
            color="white"
            icon="close"
            v-close-popup
          ></q-btn>
        </q-bar>
        <q-card-section class="inset-shadow">
          <div
            :class="$q.screen.lt.sm ? `` : `` + ` text-blue `"
            v-for="col in mycolumns"
            :key="col.name"
          >
            <div
              class="text-center q-my-xs"
              v-if="col.fieldtype === costanti.FieldType.separator"
            >
              <q-btn
                color="positive"
                size="md"
                dense
                rounded
                :icon="!showfilteradv ? 'fas fa-arrow-down' : 'fas fa-arrow-up'"
                :label="showfilteradv ? $t('grid.hide_campi_avanzati') : $t('grid.show_campi_avanzati')"
                :class="{ 'q-btn--active': showfilteradv }"
                :aria-expanded="showfilteradv.toString()"
                @click="showfilteradv = !showfilteradv"
              ></q-btn>
            </div>
            <div v-if="showColCheck(col, tools.TIPOVIS_NEW_RECORD, true, 0, newRecord) && col.foredit">
              <div class="">
                <CMyPopupEdit
                  :table="mytable"
                  :canEdit="true"
                  :canModify="true"
                  :mycol="col"
                  v-model:row="newRecord"
                  :field="col.field"
                  :subfield="col.subfield"
                  :tablesel="col.tablesel"
                  :value_extra="getValueExtra(col, newRecord)"
                  :isInModif="true"
                  minuteinterval="1"
                  :visulabel="true"
                  :insertMode="true"
                  :dense="false"
                  @save="SaveValue"
                  @show="selItem(newRecord, col)"
                  @showandsave="showandsave"
                  @update_col="update_col"
                >
                </CMyPopupEdit>
              </div>
            </div>
          </div>
        </q-card-section>
        <q-card-actions align="center">
          <q-btn
            :label="t('dialog.insert')"
            color="primary"
            @click="saveNewRecord"
          ></q-btn>
          <q-btn
            flat
            :label="t('dialog.cancel')"
            color="primary"
            v-close-popup
            @click="annulla"
          ></q-btn>
        </q-card-actions>
      </q-card>
    </q-dialog>
    <q-dialog
      v-model="editRecordBool"
      @hide="hidewindow"
      :maximized="$q.screen.lt.sm"
    >
      <q-card class="dialog_card">
        <q-bar
          dense
          class="bg-primary text-white"
        >
          <span class="ellipsis">{{ recModif[col_title] }}</span>
          <q-space />
          <q-btn
            flat
            round
            color="white"
            icon="close"
            v-close-popup
          ></q-btn>
        </q-bar>
        <q-card-section class="inset-shadow">
          <div
            v-for="col in mycolumns"
            :key="col.name"
          >
            <div
              class="text-center q-my-xs"
              v-if="col.fieldtype === costanti.FieldType.separator"
            >
              <q-btn
                color="primary"
                size="md"
                dense
                :icon="!showfilteradv ? 'fas fa-arrow-down' : 'fas fa-arrow-up'"
                :label="!showfilteradv ? $t('grid.show_campi_avanzati') : $t('grid.hide_campi_avanzati')"
                @click="showfilteradv = !showfilteradv"
              ></q-btn>
            </div>
            <div
              v-else-if="showColCheck(col, tools.TIPOVIS_EDIT_RECORD, false) && col.foredit"
              class="tdclass"
            >
              <div>
                <CMyPopupEdit
                  :table="mytable"
                  :canEdit="true"
                  :canModify="tools.canModifyThisRec(recModif, tablesel) || editOn"
                  :tablesel="col.tablesel"
                  :mycol="col"
                  :isInModif="true"
                  v-model:row="recModif"
                  :field="col.field"
                  :subfield="col.subfield"
                  :dense="false"
                  :value_extra="getValueExtra(col, recModif)"
                  minuteinterval="1"
                  @save="SaveValue"
                  @show="selItem(recModif, col, true)"
                  @showandsave="showandsave"
                  @update_col="update_col"
                >
                </CMyPopupEdit>
              </div>
            </div>
          </div>
        </q-card-section>
        <q-card-actions align="center">
          <q-btn
            :label="t('dialog.save')"
            color="primary"
            @click="saverecModif"
          ></q-btn>
          <q-btn
            flat
            :label="t('dialog.cancel')"
            color="primary"
            @click="cancelrecModif"
          ></q-btn>
        </q-card-actions>
      </q-card>
    </q-dialog>
    <span v-if="!hidetitleIfEmpty"> <br /></span>
  </div>
  <q-dialog
    v-model="showNotification"
    :maximized="$q.screen.lt.sm"
  >
    <q-card class="dialog_card">
      <q-toolbar class="bg-primary text-white">
        <q-toolbar-title> Notifiche </q-toolbar-title>
        <q-btn
          flat
          round
          color="white"
          icon="close"
          v-close-popup
        ></q-btn>
      </q-toolbar>

      <q-card-section class="inset-shadow">
        <CNotifSettings> </CNotifSettings>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

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

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