<template>
  <div v-if="tools.isDebugOn()"></div>
  <div :class="$q.screen.lt.sm ? `` : `q-pa-xs`" v-if="isfinishLoading">
    <q-infinite-scroll
      ref="myinfscroll"
      :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, index) in serverData" :key="index">
        <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 && shared_consts.TABLES_WITH_DATE.includes(tablesel)">
            <div
              v-if="
                actmonth !== tools.getstrMonth(row.dateTimeStart) ||
                !actmonth ||
                index === 0
              "
            >
              <span style="display: none">{{
                (actmonth = tools.getstrMonth(row.dateTimeStart))
              }}</span>
              <div class="">
                <div>
                  <strong>{{ tools.getstrMonth(row.dateTimeStart) }}</strong>
                </div>
                <div>
                  <q-separator />
                </div>
              </div>
            </div>

            <div
              v-if="
                false &&
                ((row.dateTimeStart &&
                  tools.getstrVeryShortDate(row.dateTimeStart) !== actual) ||
                  index === 0)
              "
              class="actualdate"
            >
              <span style="display: none">{{
                (actual = tools.getstrVeryShortDate(row.dateTimeStart))
              }}</span>
              <q-chip
                class="text-center shadow-5 glossy bg-orange"
                icon="fas fa-calendar-day"
                >{{ tools.getstrDateLong(row.dateTimeStart) }}</q-chip
              >
            </div>
          </div>

          <CMyRecGrpCard
            v-if="tablesel === shared_consts.TABLES_MYGROUPS"
            :table="tablesel"
            :prop_myrec="row"
            @cmdext="cmdExt"
          >
          </CMyRecGrpCard>
          <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="showandsave"
                      >
                      </CMyPopupEdit>
                    </div>
                  </div>
                </div>
              </q-card-section>
            </q-card>
          </div>
        </div>
      </div>
      <template v-slot:loading>
        <div v-if="!hidetitleIfEmpty" class="text-center">
          <q-spinner-dots color="primary" size="40px" />
        </div>
      </template>
    </q-infinite-scroll>

    <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>

    <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"
              >
              </CMyPopupEdit>
            </div>
          </div>
        </div>
      </div>
    </div>
    <q-dialog
      v-model="newRecordBool"
      @hide="hidewindow"
      :maximized="$q.screen.lt.sm"
      :persistent="true"
    >
      <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="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="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="showandsave"
                  @update_col="update_col"
                >
                </CMyPopupEdit>
              </div>
            </div>
          </div>
        </q-card-section>
        <q-card-actions align="center">
          <q-btn
            :label="$t('dialog.ok')"
            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="./CGridTableUser.ts">
</script>

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