<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() && !showMap"
      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
        v-if="mytable && visButtRow()"
        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` + ` `"
    >
      <div class="q-table__title" style="min-width: 150px">
        {{ mytitle }}
      </div>
      <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">
              <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, false, false)"
                :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 &&
                  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>
            </span>
          </div>
        </div>
      </q-slide-transition>

      <div v-if="prop_search || canEdit">
        <div
          v-if="searchList && finder"
          class="row justify-between q-mb-sm q-mx-sm"
        >
          <q-btn
            class=""
            dense
            :label="
              !showfilter ? $t('grid.openfilter') : $t('grid.closefilter')
            "
            color="positive"
            :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-btn
            v-if="prop_search"
            class=""
            dense
            :label="t('grid.search')"
            color="primary"
            icon="fas fa-search"
            @click="showSearchDialog = true"
          >
          </q-btn>
          <q-btn-toggle
            v-if="shared_consts.TABLES_VISU_MAP.includes(mytable)"
            v-model="showMap"
            push
            glossy
            dense
            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=""
        :arrcord="serverData"
        @clickMarker="clickMarker"
        @updateMapBoundaries="updateMapBoundaries"
        @updateMapZoomOut="updateMapZoomOut"
      >
      </CMapByTable>
    </div>

    <div v-if="!showMap">
      <q-infinite-scroll
        ref="myinfscroll"
        v-if="
          shared_consts.VERTIC_SHOW_GRID.includes(myvertical) &&
          !loading &&
          alreadymounting
        "
        :initial-index="0"
        @load="onLoadScroll"
        :offset="350"
        debounce="300"
      >
        <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 v-for="(row, indexrow) in serverData" :key="indexrow">
          <div
            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>
            <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"
                :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'
            "
          >
            <div class="q-pa-xs row items-start q-gutter-xs">
              <q-card class="my-card text-black">
                <q-toolbar
                  class="bg-primary text-white"
                  style="min-height: 30px"
                >
                  <q-toolbar-title>
                    <span class="q-ma-sm">
                      <q-icon
                        v-if="tools.isEntrataByRecMov(row)"
                        name="fas fa-box-tissue"
                        color="green"
                      ></q-icon>
                      <q-icon
                        v-else-if="tools.isUscitaByRecMov(row)"
                        name="fas fa-share-square"
                        color="red"
                      ></q-icon>
                    </span>
                    {{
                      tools.isEntrataByRecMov(row)
                        ? t('movement.movin')
                        : tools.isUscitaByRecMov(row)
                        ? t('movement.movout')
                        : ''
                    }}
                  </q-toolbar-title>
                </q-toolbar>
                <q-card-section>
                  <div v-for="col in mycolumns" :key="col.name">
                    <div
                      v-if="
                        showColCheck(
                          col,
                          tools.TIPOVIS_SHOW_RECORD,
                          true,
                          1,
                          row
                        )
                      "
                      :class="
                        !col.extrafield ||
                        (col.extrafield &&
                          (col.tipovisu !== costanti.TipoVisu.LINK ||
                            (col.tipovisu === costanti.TipoVisu.LINK &&
                              userStore.getImgByProfile(row, true, col))))
                          ? `tdclass`
                          : ``
                      "
                    >
                      <div :class="getclrow(row)">
                        <CMyPopupEdit
                          :table="mytable"
                          :canEdit="false"
                          :canModify="false"
                          :disable="false"
                          :mycol="col"
                          :row="row"
                          :field="col.field"
                          :visulabel="true"
                          :subfield="col.subfield"
                          minuteinterval="1"
                          @save="SaveValue"
                          @show="selItem(row, col)"
                          @showandsave="showandsel"
                        >
                        </CMyPopupEdit>
                      </div>
                    </div>
                  </div>
                </q-card-section>
              </q-card>
            </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
        "
        :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"
          >
          </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" dense :icon="!showfilteradv ? 'fas fa-arrow-down' : 'fas fa-arrow-up'" label="Filtri Avanzati" @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
                "
                :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, false)"
                :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"
                :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>
            </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
                dense
                type="search"
                debounce="500"
                :hint="hint"
                :error-message="noresultLabel"
                :error="getNumRecFromQuery() === 0 && !startsearch"
                label="Cerca"
                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="showandsel"
                  >
                  </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="showandsel"
                            >
                            </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="showandsel"
                @annulla="annulla"
                @update_col="update_col"
              >
              </CMyPopupEdit>
            </div>
          </div>
        </div>
      </div>
    </div>
    <q-dialog
      v-model="newRecordBool"
      @hide="hidewindow"
      :maximized="$q.screen.lt.sm"
      permanent
    >
      <q-card class="dialog_card">
        <q-bar dense class="bg-primary text-white">
          Aggiungi {{ mytitle }}:
          <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 ? `` : `row` + ` 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="primary" size="md" dense :icon="!showfilteradv ? 'fas fa-arrow-down' : 'fas fa-arrow-up'"
                     label="Campi Avanzati" @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"
                  @save="SaveValue"
                  @show="selItem(newRecord, col)"
                  @showandsave="showandsel"
                  @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="newRecordBoolOld"
      @hide="hidewindow"
      :maximized="$q.screen.lt.sm"
      permanent
    >
      <q-card class="dialog_card">
        <q-bar dense class="bg-primary text-white">
          Nuovo {{ mytitle }}:
          <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 ? `` : `row` + ` 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="primary" size="md" dense :icon="!showfilteradv ? 'fas fa-arrow-down' : 'fas fa-arrow-up'"
                     label="Campi Avanzati" @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"
                  @save="SaveValue"
                  @show="selItem(newRecord, col)"
                  @showandsave="showandsel"
                >
                </CMyPopupEdit>
              </div>
            </div>
          </div>
        </q-card-section>
        <q-card-actions align="center">
          <q-btn
            :label="t('dialog.save')"
            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="Campi Avanzati" @click="showfilteradv = !showfilteradv"></q-btn>
            </div>-->
            <div
              v-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"
                  :value_extra="getValueExtra(col, recModif)"
                  minuteinterval="1"
                  @save="SaveValue"
                  @show="selItem(recModif, col, true)"
                  @showandsave="showandsel"
                  @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>
