<template>
  <div class="q-pa-xs" v-if="isfinishLoading">
    <div class="centermydiv q-ma-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="prop_search"
      class="row justify-center vertical-middle">

      <q-input
        v-model="search" filled dense type="search" debounce="500" hint="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>

      <q-space></q-space>

      <q-select
        v-if="mytable"
        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 class="q-gutter-md q-ma-xs row">
      <div class="q-table__title" style="min-width: 150px;">{{ mytitle }}</div>
      <q-space></q-space>
      <q-btn
        v-if="mytable" 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" rounded dense size="sm" flat color="light-gray"
        :disable="loading"
        icon="fas fa-plus"
        @click="createNewRecord">

      </q-btn>
    </div>
    <q-inner-loading :showing="spinner_visible">
      <q-spinner-tail size="2em" color="primary"/>
    </q-inner-loading>
    <q-table
      :grid="vertical"
      flat
      bordered
      class="my-sticky-header-table"
      :rows="serverData"
      :columns="mycolumns"
      :filter="myfilter"
      v-model:pagination="pagination"
      :row-key="colkey"
      :loading="loading"
      @request="onRequest"
      @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-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 && colVisib.includes(col.field + col.subfield)">
              {{ col.label }}
            </span>

          </q-th>
        </q-tr>
      </template>

      <template v-slot:top-right v-if="tablesList || arrfilters">
        <q-select
          v-if="tablesList"
          v-model="tablesel"
          rounded
          outlined
          dense
          :options="tablesList"
          :display-value="mytitle"
          emit-value
          @update:model-value="changeTable"
        >
        </q-select>

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

          </q-toggle>
        </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="colVisib.includes(col.field + col.subfield)" class="tdclass">
              <div :class="getclrow(props.row)">
                <CMyPopupEdit
                  :table="prop_mytable"
                  :canEdit="canEdit"
                  :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 grid-style-transition"
          :style="props.selected ? 'transform: scale(0.95);' : ''"
        >
          <q-card :class="props.selected ? 'bg-grey-2' : ''">
            <q-bar dense class="bg-primary text-white">
              <span class="ellipsis"> {{ props.row[col_title] }} </span>
              <q-space />
              <q-btn
                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
                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="inset-shadow">
              <q-list dense>
                <div v-for="col in mycolumns" :key="col.name">
                  <q-item v-if="colVisib.includes(col.field + col.subfield)" :class="clByCol(col)">
                    <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="prop_mytable"
                            :canEdit="canEdit"
                            :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-btn
                              flat round dense
                              :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
                              @click="props.toggleFullscreen"
                              class="q-ml-md">
                      </q-btn>
      -->
      <!---->
    </q-table>

    <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="colVisib.includes(mycol.field + mycol.subfield)">
          <div class="row items-center justify-center q-gutter-md q-ma-xs">
            <div class="q-ma-xs">
              <q-field rounded outlined bg-color="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 rounded-borders " style="border: 1px solid #bbb"
              @click="colclicksel = mycol">

              <CMyPopupEdit
                :table="prop_mytable"
                :canEdit="true"
                :disable="disabilita()"
                view="field"
                :mycol="mycol"
                :showall="true"
                :row="rowclicksel"
                :field="mycol.field"
                :subfield="mycol.subfield"
                @save="SaveValdb"
                @show="selItem(rowclicksel, mycol)"
                @showandsave="showandsel"
                @annulla="annulla">

              </CMyPopupEdit>
            </div>
          </div>
        </div>
      </div>
    </div>
    <q-dialog v-model="newRecordBool" @hide="hidewindow">
      <q-card :style="`min-width: `+ tools.myheight_dialog() + `px;`">
        <q-bar dense class="bg-primary text-white">
          Nuovo:
          <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" class="newrec_fields">
            <div
              v-if="colVisib.includes(col.field + col.subfield)">
              <div class="">

                <CMyPopupEdit
                  :table="prop_mytable"
                  :canEdit="true"
                  :mycol="col"
                  v-model:row="newRecord"
                  :field="col.field"
                  :subfield="col.subfield"
                  :isInModif="true"
                  minuteinterval="1"
                  :visulabel="false"
                  @save="SaveValue"
                  @show="selItem(newRecord, col)"
                  @showandsave="showandsel">

                </CMyPopupEdit>
              </div>
            </div>
          </div>
        </q-card-section>
        <q-card-actions align="center">
          <q-btn flat :label="$t('dialog.ok')" 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">
      <q-card :style="`min-width: `+ tools.myheight_dialog() + `px;`">
        <q-bar dense class="bg-primary text-white">
          <span v-if="mytitle">{{ mytitle }}</span>
          <span v-else>{{ 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
              v-if="colVisib.includes(col.field + col.subfield)">
              <div>
                <CMyPopupEdit
                  :table="prop_mytable"
                  :canEdit="true"
                  :mycol="col"
                  :isInModif="true"
                  v-model:row="recModif"
                  :field="col.field"
                  :subfield="col.subfield"
                  minuteinterval="1"
                  @save="SaveValue"
                  @show="selItem(recModif, col, true)"
                  @showandsave="showandsel">

                </CMyPopupEdit>
              </div>
            </div>
          </div>
        </q-card-section>
        <q-card-actions align="center">
          <q-btn flat :label="$t('dialog.ok')" color="primary" @click="saverecModif"></q-btn>
          <q-btn flat :label="$t('dialog.cancel')" color="primary" v-close-popup></q-btn>
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>
<script lang="ts" src="./CGridTableRec.ts">
</script>

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