<template>
  <CNotifAtTop/>
  <div class="q-gutter-sm q-pa-sm q-pb-md">
    <div v-if="!circuit && !loading">
      <div v-if="mystatus === 403">
        <h3>Non hai i permessi per accedere al Circuito.<br>

          Occorre prima registrarsi alla App </h3>
      </div>
      <div v-else-if="tools.isLogged() && path">
        <h3>Circuito non Esistente</h3>
      </div>
      <div v-else>
        <div v-if="!tools.isLogged()">
          <CCheckIfIsLogged></CCheckIfIsLogged>
        </div>

      </div>
    </div>
    <div v-else>

      <div v-if="!tools.isLogged()">
        <CCheckIfIsLogged></CCheckIfIsLogged>
      </div>
      <div v-if="circuit">

        <div v-if="circuit.name" class="fit column no-wrap justify-evenly items-center content-start">

          <div class="">
            <q-avatar size="140px">
              <q-img :src="getImgCircuit()" :alt="circuit.name" img-class="imgprofile" height="140px" @click="showPic = true"/>
            </q-avatar>
          </div>

          <div class="text-h6">
            <span v-if="checkifShow('name')"> {{ circuit.name }}</span>
          </div>

          <q-banner
            v-if="userStore.IsRefusedCircuitByName(circuit.name)"
            rounded
            class="bg-red text-white"
            style="text-align: center;"
          >
            <em style="font-weight: bold">{{ $t('db.youarerefusedcircuit') }}</em><br>
          </q-banner>

          <CSaldo
            :symbol="circuit.symbol"
            :account="account"
            :color="circuit.color"
            :saldo="saldo"
            :qtarem="account ? qtarem : 0">
          </CSaldo>
          <div>
            <q-btn
              v-if="!userStore.IsMyCircuitByName(circuit.name) && !userStore.IsAskedCircuitByName(circuit.name) && !userStore.IsRefusedCircuitByName(circuit.name)"
              icon="fas fa-user-plus"
              color="primary" :label="$t('circuit.ask')"
              @click="requestToEnterCircuit = true"
            />
            <q-btn
              v-if="userStore.IsMyCircuitByName(circuit.name)"
              rounded icon="fas fa-ellipsis-h">
              <q-menu>
                <q-list v-if="true" style="min-width: 150px">
                  <q-item clickable v-close-popup
                          v-if="saldo === 0"
                          @click="tools.removeFromMyCircuits($q, userStore.my.username, circuit.name, $t('circuit.domanda_exit_fromcircuit', {circuitname: circuit.name }))">
                    <q-item-section avatar>
                      <q-icon color="negative" name="fas fa-user-minus"/>
                    </q-item-section>
                    <q-item-section>{{ $t('circuit.exit_circuit') }}</q-item-section>
                  </q-item>

                  <q-list v-if="tools.iAmAdminCircuit(circuit.name)" style="min-width: 200px">
                    <q-item clickable v-close-popup @click="tools.setCmd($q, shared_consts.CIRCUITCMD.DELETE, userStore.my.username, '', circuit.name)">
                      <q-item-section avatar>
                        <q-icon color="negative" name="fas fa-trash-alt"/>
                      </q-item-section>
                      <q-item-section>{{ $t('circuit.delete') }}</q-item-section>
                    </q-item>
                  </q-list>


                </q-list>
              </q-menu>
            </q-btn>

            <q-btn
              v-if="userStore.IsAskedCircuitByName(circuit.name) && !userStore.IsMyCircuitByName(circuit.name)"
              icon="fas fa-user-minus"
              flat :label="$t('shared.cancel_ask_short')"
              @click="tools.cancelReqCircuit($q, userStore.my.username, circuit.name)"
            />
          </div>

        </div>
        <div v-if="circuit.name" class="no-wrap justify-evenly items-center content-start">

          <q-tabs v-model="tabgrp" class="text-blue">
            <q-tab :label="t('shared.info1')" name="info" icon="fas fa-info"></q-tab>
            <q-tab v-if="tools.iCanShowCircuitsMember(circuit) || tools.iAmAdminCircuit(circuit.name)"
                   :label="t('shared.subscribes')" name="members" icon="fas fa-users"></q-tab>
            <q-tab v-if="userStore.IsMyCircuitByName(circuit.name)" :label="t('circuit.movements')" name="mov" icon="fas fa-coins"></q-tab>
            <q-tab v-if="!!circuit.note" :label="t('circuit.page')" name="page" icon="fas fa-file-word"></q-tab>
          </q-tabs>

          <q-tab-panels v-model="tabgrp" animated>
            <q-tab-panel name="mov">

              <q-toggle v-model="showonlymine" :label="t('movement.onlymymov')"></q-toggle>
              <q-toggle v-model="tabellare" label="Tabella"></q-toggle>

              <CGridTableRec
                v-if="tabellare && !loading"
                prop_mytable="movements"
                prop_mytitle=""
                :prop_mycolumns="colmyMovementTable"
                prop_colkey="_id"
                col_title="Lista Movimenti"
                :vertical="0"
                nodataLabel="Nessun Movimento effettuato"
                :prop_search="true"
                :enableExport="true"
                hint="nota da trovare"
                :finder="false"
                :choose_visutype="false"
                :finder_noNull="false"
                :options="shared_consts.OPTIONS_SEARCH_USER_ALL_WORDS"
                :butt_modif_new="false"
                noresultLabel="movimenti non trovati con questa ricerca"
                :arrfilters="arrfilterand"
                :filtercustom="filtercustom_rich"
                :prop_searchList="searchList"
                :prop_pagination="{ sortBy: 'transactionDate', descending: true, page: 1, rowsNumber: 20, rowsPerPage: 20 }"
                :showType="costanti.SHOW_MOVEMENTS"
                keyMain=""
                :showCol="true"
                :showHeaderCol="true"
                :extraparams="extraparams_movs()"
                extrafield=""
                :visufind="costanti.FRIENDS"
              >

              </CGridTableRec>
              <CGridTableRec
                v-else-if="!loading"
                prop_mytable="movements"
                prop_mytitle=""
                :prop_mycolumns="colmyMovement"
                prop_colkey="_id"
                col_title="Lista Movimenti"
                :vertical="costanti.VISUTABLE_LISTA"
                nodataLabel="Nessun Movimento effettuato"
                :enableExport="true"
                :prop_search="true"
                hint="nota da trovare"
                :finder="false"
                :choose_visutype="false"
                :finder_noNull="false"
                :options="shared_consts.OPTIONS_SEARCH_USER_ALL_WORDS"
                :butt_modif_new="false"
                noresultLabel="movimenti non trovati con questa ricerca"
                :arrfilters="arrfilterand"
                :filtercustom="filtercustom_rich"
                :prop_searchList="searchList"
                :prop_pagination="{ sortBy: 'transactionDate', descending: true, page: 1, rowsNumber: 20, rowsPerPage: 20 }"
                :showType="costanti.SHOW_MOVEMENTS"
                keyMain=""
                :showCol="false"
                :showHeaderCol="false"
                :extraparams="extraparams_movs()"
                extrafield=""
                :visufind="costanti.FRIENDS"
              >

              </CGridTableRec>

            </q-tab-panel>
            <q-tab-panel name="info">
              <div>
                <q-card>
                  <q-card-section>
                    <div class="text-h6">{{ t('circuit.info') }}</div>
                  </q-card-section>

                  <q-separator/>

                  <q-card-section>
                    <div v-if="circuit.createdBy" class="container">
                      <q-icon name="fas fa-lightbulb" class="iconcirc"></q-icon>
                      {{
                        $t('shared.createdby', {
                          username: circuit.createdBy,
                          date: tools.getstrDateYY(circuit.date_created),
                        })
                        }}
                    </div>
                    <div v-if="!!circuit.date_updated && tools.getstrDate(circuit.date_updated) !== tools.getstrDate(circuit.date_created)" class="container">
                      <q-icon name="fas fa-pencil-alt" class="iconcirc"></q-icon>
                      <span class="element">{{
                        $t('shared.lastmodify', {
                          date: tools.getstrDateYY(circuit.date_updated),
                        })
                        }}</span>
                    </div>

                    <div class="container">
                      <q-icon name="fas fa-users" class="iconcirc"></q-icon>
                      <span class="element">{{ numUsers() }}</span> {{ numUsers() === 1 ? t('shared.member') : t('shared.members') }}
                    </div>
                    <div class="container">
                      <q-icon name="fas fa-user-cog" class="iconcirc"></q-icon>
                      <span class="element">{{ numAdmins() }}</span> {{ numAdmins() === 1 ? t('shared.admin') : t('shared.admins') }}
                    </div>
                    <div v-for="(user, index) of circuit.admins" :key="index">
                      <CMyUser
                        :mycontact="user"
                        :visu="costanti.FIND_PEOPLE"
                        @setCmd="tools.setCmd"
                      >
                      </CMyUser>
                    </div>
                    <div class="sezioni">
                      <q-icon name="fas fa-coins" class="iconcirc"></q-icon>
                      {{ t('circuit.symbol') }}:
                      <span class="text-h5">
                        <em class="q-px-sm text-black rounded-borders"
                            :style="`background-color: ` + tools.getColorByCircuit(circuit)">{{ tools.getSymbolByCircuit(circuit) }}</em>
                      </span>
                    </div>
                    <div :class="$q.screen.lt.sm ? '' : 'row'">
                      <div v-if="circuit.fido_scoperto_default" class="sezioni">
                        <CCurrencyValue
                          :symbol="tools.getSymbolByCircuit(circuit)"
                          :color="tools.getColorByCircuit(circuit)"
                          color_border="red"
                          :value="circuit.fido_scoperto_default"
                          icon="fas fa-battery-quarter"
                          :label="t('circuit.fido_scoperto_default')"
                          :tips="t('circuit.fido_scoperto_default_tips')"
                        >
                        </CCurrencyValue>
                      </div>
                      <div v-if="circuit.fido_scoperto_default" class="sezioni">
                        <CCurrencyValue
                          :symbol="tools.getSymbolByCircuit(circuit)"
                          :color="tools.getColorByCircuit(circuit)"
                          color_border="green"
                          :value="circuit.qta_max_default"
                          icon="fas fa-battery-quarter"
                          :label="t('circuit.qta_max_default')"
                          :tips="t('circuit.qta_max_default_tips')"
                        >
                        </CCurrencyValue>
                      </div>
                    </div>
                    <div class="sezioni">
                      <q-icon name="fas fa-stats" class="iconcirc"></q-icon>
                      {{ t('circuit.stats') }}:<br>
                    </div>
                    <div :class="$q.screen.lt.sm ? '' : 'row'">
                      <div v-if="circuit.totTransato" class="sezioni">
                        <CCurrencyValue
                          :symbol="tools.getSymbolByCircuit(circuit)"
                          :color="tools.getColorByCircuit(circuit)"
                          color_border="blue"
                          :value="circuit.totTransato"
                          icon="fas fa-battery-quarter"
                          :label="t('circuit.totTransato')"
                          :tips="t('circuit.totTransato_tips')"
                        >
                        </CCurrencyValue>
                      </div>
                      <div v-if="circuit.totCircolante" class="sezioni">
                        <CCurrencyValue
                          :symbol="tools.getSymbolByCircuit(circuit)"
                          :color="tools.getColorByCircuit(circuit)"
                          color_border="blue"
                          :value="circuit.totCircolante"
                          icon="fas fa-battery-quarter"
                          :label="t('circuit.totCircolante')"
                          :tips="t('circuit.totCircolante_tips')"
                        >
                        </CCurrencyValue>
                      </div>
                    </div>
                    <div class="sezioni">
                      <q-icon name="fas fa-toggle-on" class="iconcirc"></q-icon>
                      {{ t('circuit.transactionsEnabled') }}: <span class="text-section">{{ circuit.transactionsEnabled ? t('dialog.yes') : t('dialog.no') }} {{ }}</span>
                    </div>
                    <div class="sezioni" v-if="circuit.deperimento !== undefined">
                      <q-icon name="fas fa-battery-full" class="iconcirc"></q-icon>
                      {{ t('circuit.deperimento') }}: <span class="text-section">{{ circuit.deperimento ? t('dialog.yes') : t('dialog.no') }} {{ }}</span>
                    </div>

                  </q-card-section>
                </q-card>

                <br>
              </div>
              <q-card v-if="circuit.name">
                <q-card-section>
                  <div class="text-h6">{{t('circuit.descr')}}:</div>
                </q-card-section>
                <q-separator/>

                <q-card-section>
                  <div class="col-12 text-h7">
                    <span v-if="checkifShow('descr')" v-html="circuit.longdescr"></span>
                  </div>
                </q-card-section>
              </q-card>

              <q-card v-if="circuit.name">
                <q-card-section>
                  <div class="text-h6">{{t('circuit.regulation')}}:</div>
                </q-card-section>
                <q-separator/>

                <q-card-section>
                  <div class="col-12 text-h7">
                    <span v-if="checkifShow('descr')" v-html="circuit.regulation"></span>
                  </div>
                </q-card-section>
              </q-card>

            </q-tab-panel>

            <q-tab-panel name="page">
              <div v-if="circuit.note">
                <br>
                <div class="q-ma-sm q-gutter-sm q-pa-xs">
                  <div v-if="circuit.note" v-html="circuit.note">
                  </div>
                </div>
              </div>
            </q-tab-panel>

            <q-tab-panel name="members" style="max-width: 400px;" v-if="tools.iCanShowCircuitsMember(circuit)">

              <q-tabs
                v-show="tools.iAmAdminCircuit(circuit.name)"
                v-model="tabmembers" class="text-blue">
                <q-tab label="Iscritti" name="all" icon="fas fa-users"></q-tab>
                <q-tab v-if="tools.iAmAdminCircuit(circuit.name)" label="Richieste" name="rich" icon="fas fa-user-plus"></q-tab>
                <q-tab v-if="tools.iAmAdminCircuit(circuit.name)" label="Rifiutati" name="refused" icon="fas fa-user-minus"></q-tab>
              </q-tabs>

              <q-tab-panels v-model="tabmembers" animated>
                <q-tab-panel name="all">

                  <!--<q-toggle v-model="showsaldi" :label="t('movement.showsaldi')"></q-toggle>-->

                  <CGridTableRec
                    v-if="!loading"
                    ref="tabMembri"
                    prop_mytable="users"
                    prop_mytitle=""
                    :prop_mycolumns="showsaldi ? colmyUserPeopleSaldi : colmyUserPeople"
                    prop_colkey="_id"
                    col_title="username"
                    :vertical="costanti.VISUTABLE_LISTA"
                    nodataLabel="Nessun Iscritto"
                    :prop_search="true"
                    hint="Username da trovare"
                    :finder="false"
                    :choose_visutype="true"
                    :finder_noNull="false"
                    :options="shared_consts.OPTIONS_SEARCH_USER_ALL_WORDS"
                    :butt_modif_new="false"
                    noresultLabel="Username non trovato"
                    :arrfilters="arrfilterand"
                    :filtercustom="filtercustom"
                    :prop_searchList="searchList"
                    :showType="costanti.SHOW_USERINFO"
                    :showCol="false"
                    :circuitname="circuit.name"
                    :extraparams="extraparams()"
                    :visufind="tools.iAmAdminCircuit(circuit.name) ? costanti.REQ_REMOVE_USER_TO_CIRCUIT : costanti.FIND_PEOPLE"
                  >

                  </CGridTableRec>
                </q-tab-panel>
                <q-tab-panel name="rich">

                  <CGridTableRec
                    v-if="!loading"
                    prop_mytable="circuits"
                    prop_mytitle=""
                    :prop_mycolumns="colmyUserPeople"
                    prop_colkey="_id"
                    col_title=""
                    :vertical="costanti.VISUTABLE_USER_TABCIRCUIT"
                    nodataLabel="Nessuna Richiesta in sospeso"
                    :prop_search="false"
                    hint="Username da trovare"
                    :finder="false"
                    :choose_visutype="false"
                    :finder_noNull="false"
                    :options="shared_consts.OPTIONS_SEARCH_USER_ALL_WORDS"
                    :butt_modif_new="false"
                    noresultLabel="Username non trovato"
                    :arrfilters="arrfilterand"
                    :filtercustom="filtercustom_rich"
                    :prop_searchList="searchList"
                    :showType="costanti.SHOW_USERINFO"
                    keyMain=""
                    :showCol="false"
                    :extraparams="extraparams_rich()"
                    :circuitname="circuit.name"
                    :visufind="costanti.REQ_ADD_USER_TO_CIRCUIT"
                  >

                  </CGridTableRec>
                </q-tab-panel>
                <q-tab-panel name="refused">

                  <CGridTableRec
                    prop_mytable="circuits"
                    prop_mytitle=""
                    :prop_mycolumns="colmyUserPeople"
                    prop_colkey="_id"
                    col_title=""
                    :vertical="costanti.VISUTABLE_USER_TABCIRCUIT"
                    nodataLabel="Nessun utente Rifiutato"
                    :prop_search="false"
                    hint="Username da trovare"
                    :finder="false"
                    :choose_visutype="false"
                    :finder_noNull="false"
                    :options="shared_consts.OPTIONS_SEARCH_USER_ALL_WORDS"
                    :butt_modif_new="false"
                    noresultLabel="Username non trovato"
                    :arrfilters="arrfilterand"
                    :filtercustom="filtercustom_rich"
                    :prop_searchList="searchList"
                    :showType="costanti.SHOW_USERINFO"
                    keyMain=""
                    :showCol="false"
                    :extraparams="extraparams_refused()"
                    :circuitname="circuit.name"
                    :visufind="costanti.REQ_ADD_USER_TO_CIRCUIT"
                  >

                  </CGridTableRec>
                </q-tab-panel>
              </q-tab-panels>

            </q-tab-panel>
            <q-tab-panel name="mov">

            </q-tab-panel>
          </q-tab-panels>

        </div>
        <div v-else class="fit column no-wrap justify-evenly items-center content-start">
          <q-skeleton type="QAvatar" size="140px" height="140px" animation="fade"/>
          <q-card flat bordered style="width: 250px">
            <div class="text-h6">
              <q-skeleton :animation="animation"/>
            </div>
            <div class="col-12 text-h7 text-grey text-center">
              {{ path }}
            </div>
            <div class="col-12 text-h7">
              <q-skeleton :animation="animation"/>
            </div>

            <div class="col-12 text-h8 q-mt-sm">
              <q-skeleton :animation="animation"/>
            </div>
            <div class="col-12 text-h8 q-mt-sm">
              <q-skeleton :animation="animation"/>
            </div>
          </q-card>
        </div>

      </div>
      <q-dialog
        v-model="showPic"
        full-height full-width
      >

        <img :src="getImgCircuit()" :alt="circuit.name" class="full-width">

      </q-dialog>

      <q-dialog v-model="requestToEnterCircuit" maximized transition-show="slide-up"
                transition-hide="slide-down">
        <q-card v-if="circuit" class="dialog_card">
          <q-toolbar class="bg-primary text-white" dense>
            <!--<q-toolbar :class="tools.displayClasses(myevent)"-->
            <!--:style="tools.displayStyles(myevent) + ` min-width: `+ tools.myheight_dialog() + `px;`">-->
            <q-toolbar-title>
              {{ circuit.name }}
            </q-toolbar-title>
            <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
          </q-toolbar>
          <q-card-section class="inset-shadow">
            <q-banner
              rounded
              class="bg-green text-white"
              style="text-align: center;"
            >
              <em style="font-weight: bold">Disclaimer:</em><br>
            </q-banner>
            <div v-html="t('circuit.disclaimer')">
            </div>
          </q-card-section>
          <q-card-section class="inset-shadow">
            <q-banner
              rounded
              class="bg-green text-white"
              style="text-align: center;"
            >
              <em style="font-weight: bold">Regolamento interno:</em><br>
            </q-banner>
            <div v-html="circuit.regulation">
            </div>
          </q-card-section>
          <q-card-actions align="center">
            <q-btn
              class="centeritems"
              icon="fas fa-user-plus"
              color="positive" :label="$t('circuit.acceptregulation')"
              @click="requestToEnterCircuit = false; tools.setRequestCircuit($q, userStore.my.username, circuit.name, true)"
            />
            <q-btn flat round color="negative"
                   :label="$t('friends.refuse')"
                   icon="close" v-close-popup></q-btn>


          </q-card-actions>
        </q-card>
      </q-dialog>
    </div>
  </div>

</template>

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

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

