<template>
  <div>
    <div v-if="visustat">
      <CTitleBanner class="q-pa-xs" :title="$t('pages.status')" bgcolor="bg-primary" clcolor="text-white" mystyle=""
        myclass="sfondo_gradiente_blu myshad" :canopen="true">
        <div class="flex flex-center">
          <CElemStat myclass="fixed-size" :title="$t('statusreg.reg')" icon="fas fa-users"
            :value_today="datastat.num_reg_today" :mytextval="datastat.activeusers + ' su ' + tools.numtostr(datastat.num_reg)
              " classColor="text-red" colBack="green">
          </CElemStat>
          <CElemStat v-if="true" myclass="fixed-size" :title="$t('statusreg.online_today')" icon="fas fa-wifi"
            :mytextval="tools.numtostr(datastat.online_today)" classColor="text-orange" colBack="yellow">
          </CElemStat>
          <CElemStat myclass="fixed-size" v-f="datastat.num_annunci > 0" :title="$t('statusreg.num_annunci')"
            icon="fas fa-tshirt" :value_today="0" :mytextval="tools.numtostr(datastat.num_annunci)"
            classColor="text-green" colBack="orange">
          </CElemStat>
          <CElemStat myclass="fixed-size" v-f="datastat.num_circuiti_attivi > 0"
            :title="$t('statusreg.num_circuiti_attivi')" icon="fas fa-map-marker-alt" :value_today="0" :mytextval="datastat.num_circuiti_attivi + ' su ' + datastat.num_circuiti
              " classColor="text-blue" colBack="red">
          </CElemStat>
          <CElemStat myclass="fixed-size" v-f="datastat.num_transaz_tot > 0" :title="$t('statusreg.numtransazioni')"
            icon="fas fa-sync-alt" :value_today="0" :mytextval="tools.numtostr(datastat.num_transaz_tot)"
            classColor="text-indigo" colBack="green">
          </CElemStat>
          <CElemStat myclass="fixed-size" v-f="datastat.tot_RIS_transati > 0" :title="$t('statusreg.totristransati')"
            icon="img: /images/1ris_rosso_100.png" :value_today="0"
            :mytextval="tools.numtostr(datastat.tot_RIS_transati) + ' RIS'" classColor="text-blueviolet"
            colBack="green">
          </CElemStat>

          <!--<CCardState :mytext="$t('statusreg.autorizzare')" :myval="datastat.num_autorizzare"
                      mycolor="yellow" :myperc="(datastat.num_autorizzare / datastat.num_teleg_attivo) * 100"></CCardState>
                      -->

          <div class="q-pa-xs" v-if="datastat.num_part_accepted > 1">
            <CCardStat :mytext="$t('stat.accepted')" :myval="datastat.num_part_accepted"></CCardStat>
            <!--<CCardStat :mytext="$t('stat.modalita_pagamento')"
                       :myval="datastat.num_modalita_pagamento"></CCardStat>-->
            <!--<CCardStat :mytext="$t('stat.requisiti')" :myval="datastat.num_requisiti"></CCardStat>-->
            <!--<CCardStat :mytext="$t('stat.qualificati')" :myval="datastat.num_qualificati"></CCardStat>-->
            <!--<CCardStat v-if="emailnonverif" :mytext="$t('stat.email_not_verif')" :myval="emailnonverif"
                       mycol="negative"></CCardStat>
            <CCardStat v-if="telegnonattivi" :mytext="$t('stat.telegram_non_attivi')"
                       :myval="telegnonattivi"
                       mycol="negative"></CCardStat>
            <CCardStat v-if="datastat.num_teleg_pending > 0" :mytext="$t('stat.telegram_pendenti')"
                       :myval="datastat.num_teleg_pending" mycol="negative"></CCardStat>-->
          </div>

          <q-list bordered>
            <q-expansion-item group="somegroup" icon="fas fa-user-plus" :label="$t('statusreg.newreg')" default-opened
              header-class="text-primary">
              <q-card>
                <q-card-section>
                  <div class="q-pa-md" style="max-width: 350px; margin: auto">
                    <transition-group name="fade" mode="out-in" appear enter-active-class="animazione fadeIn"
                      leave-active-class="animazione fadeOut">
                      <q-item v-for="(user, index) in lastsreg" :key="index" class="animated chip_shadow q-ma-sm"
                        v-ripple clickable @click="gotoPage(`/my/${user.username}`)">
                        <q-item-section avatar>
                          <q-avatar round size="48px">
                            <img :src="userStore.getImgByProfile(user)" />
                            <q-badge v-if="tools.isUserOnline(user)" align="top" floating color="green">online</q-badge>
                          </q-avatar>
                        </q-item-section>
                        <q-item-section class="">
                          <q-item-label>
                            <span v-html="tools.getNameToShow(user, null, {
                              showprov: true,
                              html: true,
                            })
                              "></span>
                          </q-item-label>
                          <q-item-label caption>
                            <span v-html="tools.getUserNameOnlyIfToShow(user, null, {
                              showprov: false,
                              html: true,
                            })"></span>
                          </q-item-label>
                          <q-item-label class="iscritto_da">
                            {{ t("statusreg.invite_by") }}:
                            <span class="iscritto_da_name">{{
                              tools.getNameToShow(user.user_aportador)
                              }}</span>
                          </q-item-label>
                        </q-item-section>
                        <q-item-section side>
                          <q-item-label style="color: white">{{
                            tools.getstrshortDate(user.date_reg)
                            }}</q-item-label>
                        </q-item-section>
                      </q-item>
                    </transition-group>
                  </div>
                </q-card-section>
              </q-card>
            </q-expansion-item>

            <q-separator />

            <q-expansion-item expand-separator group="somegroup" icon="fas fa-medal"
              :label="$t('statusreg.lastsharedlink')" header-class="text-purple">
              <div>
                <div class="text-center text-bold text-h6">Unisciti a RISO</div>
                <div class="text-center">
                  Se ancora non sei registrato a RISO, scegli un invitante che
                  conosci. Questa persona dovrà ammetterti per permetterti di
                  accedere alle funzionalità.
                </div>
              </div>

              <q-item v-for="(user, index) in lastssharedlink" :key="index" class="animated chip_shadow q-ma-sm"
                clickable v-ripple @click="gotoPage(`/registrati/${user.user_aportador.username}`)">
                <q-item-section avatar>
                  <q-avatar round size="48px">
                    <img :src="userStore.getImgByProfile(user.user_aportador)" />
                  </q-avatar>
                </q-item-section>
                <q-item-section class="">
                  <q-item-label>
                    <span v-html="tools.getNameToShow(user.user_aportador, null, {
                      showprov: true,
                      html: true,
                    })
                      "></span>
                  </q-item-label>
                  <q-item-label caption>
                    <span v-html="tools.getUserNameOnlyIfToShow(user.user_aportador, null, {
                      showprov: false,
                      html: true,
                    })">
                    </span></q-item-label>
                  <q-item-label class="iscritto_da">
                    {{ t("statusreg.has_invited") }}:
                    <span class="iscritto_da_name">{{
                      tools.getNameToShow(user)
                      }}</span>
                  </q-item-label>
                </q-item-section>
                <q-item-section side><span class="text-h6 q-mr-sm"></span></q-item-section>
              </q-item>
            </q-expansion-item>

            <q-expansion-item group="somegroup" icon="fas fa-wifi" :label="$t('statusreg.onlineusers', { today: datastat.online_today })
              " header-class="text-teal">
              <q-card>
                <q-card-section>
                  <div class="q-pa-md" style="max-width: 350px; margin: auto">
                    <q-list bordered>
                      <transition-group name="fade" mode="out-in" appear enter-active-class="animazione fadeIn"
                        leave-active-class="animazione fadeOut">
                        <q-item v-for="(user, index) in lastsonline" :key="index" class="animated chip_shadow q-ma-sm"
                          clickable v-ripple @click="gotoPage(`/my/${user.username}`)">
                          <q-item-section avatar>
                            <q-avatar round size="48px">
                              <img :src="userStore.getImgByProfile(user)" />
                              <q-badge v-if="tools.isUserOnline(user)" align="top" floating
                                color="green">online</q-badge>
                            </q-avatar>
                          </q-item-section>
                          <q-item-section class="">
                            <q-item-label>
                              <span v-html="tools.getNameToShow(user, null, {
                                showprov: true,
                                html: true,
                              })
                                "></span>
                            </q-item-label>
                            <q-item-label caption>{{
                              tools.getUserNameOnlyIfToShow(user, null, {
                                showprov: false,
                                html: true,
                              })
                            }}</q-item-label>
                          </q-item-section>
                          <q-item-section side>
                            <div :class="`text-h6 q-mr-sm text-bold ` + $q.dark.isActive
                              ? `text-white`
                              : `text-black`
                              ">
                              <CTimeAgo :datetime="user.lasttimeonline" />
                            </div>
                          </q-item-section>
                        </q-item>
                      </transition-group>
                    </q-list>
                  </div>
                </q-card-section>
              </q-card>
            </q-expansion-item>

            <q-separator />

            <q-expansion-item v-if="false" expand-separator group="somegroup" icon="fas fa-medal"
              :label="$t('statusreg.diffusori')" header-class="text-purple">
              <q-card>
                <q-card-section>
                  <div class="q-pa-md" style="max-width: 350px; margin: auto">
                    <div class="text-center text-bold text-h6">
                      Aiuta RISO a crescere
                    </div>
                    <div class="text-center">
                      Condividi il tuo link d'invito, alimentando nuovi ingressi
                      alla RETE Solidale di RISO.
                    </div>
                    <q-list bordered>
                      <transition-group name="fade" mode="out-in" appear enter-active-class="animazione fadeIn"
                        leave-active-class="animazione fadeOut">
                        <q-item v-for="(user, index) in diffusorilist" :key="index" class="animated chip_shadow q-ma-sm"
                          clickable v-ripple @click="gotoPage(`/my/${user.username}`)">
                          <q-item-section avatar>
                            <q-avatar round size="48px">
                              <img :src="userStore.getImgByProfile(user)" />
                              <q-badge v-if="tools.isUserOnline(user)" align="top" floating
                                color="green">online</q-badge>
                            </q-avatar>
                          </q-item-section>
                          <q-item-section class="">
                            <q-item-label overline>
                              <div class="index_diffusore">
                                {{ index + 1 }}°
                              </div>
                            </q-item-label>
                            <q-item-label>
                              <span v-html="tools.getNameToShow(user, null, {
                                showprov: true,
                                html: true,
                              })
                                "></span>
                            </q-item-label>
                            <q-item-label caption>{{
                              tools.getUserNameOnlyIfToShow(user, null, {
                                showprov: false,
                                html: true,
                              })
                            }}</q-item-label>
                          </q-item-section>
                          <q-item-section side>
                            <div :class="`text-h6 q-mx-sm q-px-sm text-bold ` +
                              ($q.dark.isActive ? `text-white` : `text-black`)
                              ">
                              {{ user.count }}
                            </div>
                          </q-item-section>
                        </q-item>
                      </transition-group>
                    </q-list>
                  </div>
                </q-card-section>
              </q-card>
            </q-expansion-item>

            <q-separator />

            <q-expansion-item group="somegroup" icon="fas fa-handshake" :label="$t('handshake.last_strettedimano')"
              header-class="bg-teal text-white" expand-icon-class="text-white">
              <q-card class="bg-teal-2">
                <q-card-section>
                  <div class="q-pa-md" style="max-width: 350px; margin: auto">
                    <div class="text-center text-bold text-h6">
                      Strette di Mano
                    </div>
                    <div class="text-center">
                      Più persone conoscerai di persona e maggiore aumenterà la
                      Rete di fiducia.
                    </div>
                    <q-list bordered>
                      <transition-group name="fade" mode="out-in" appear enter-active-class="animazione fadeIn"
                        leave-active-class="animazione fadeOut">
                        <q-item v-for="(user, index) in strettelist" :key="index" class="animated chip_shadow q-ma-sm"
                          clickable v-ripple>
                          <q-item-section avatar>
                            <q-avatar round size="48px" @click="gotoPage(`/my/${user.username}`)">
                              <img :src="userStore.getImgByProfile(user)" />
                              <q-badge v-if="tools.isUserOnline(user)" align="top" floating
                                color="green">online</q-badge>
                            </q-avatar>
                          </q-item-section>
                          <q-item-section class="">
                            <q-item-label class="clDateStrette">
                              {{
                                tools.getstrDateTimeLong(
                                  user.profile.handshake.date
                                )
                              }}</q-item-label>
                            <q-item-label>
                              <span v-html="tools.getNameToShow(user, null, {
                                showprov: true,
                                html: true,
                              })
                                "></span>
                            </q-item-label>

                            <q-item-label style="text-align: right">
                              <span v-html="tools.getNameToShow(user.userfriend, null, {
                                showprov: true,
                                html: true,
                              })
                                "></span>
                            </q-item-label>
                          </q-item-section>
                          <q-item-section side>
                            <q-avatar round size="48px" @click="
                              gotoPage(`/my/${user.userfriend.username}`)
                              ">
                              <img :src="userStore.getImgByProfile(user.userfriend)
                                " />
                              <q-badge v-if="tools.isUserOnline(user.userfriend)" align="top" floating
                                color="green">online</q-badge>
                            </q-avatar>
                          </q-item-section>
                        </q-item>
                      </transition-group>
                    </q-list>
                  </div>
                </q-card-section>
              </q-card>
            </q-expansion-item>
          </q-list>

          <!--<CGeoChart :mydata="datastat.arr_nations">

          </CGeoChart>-->

          <div class="row q-pa-sm text-center justify-center">
            <!--
            <div class="clBorderZoom">
              <CListNationality :mydata="datastat.arr_nations">

              </CListNationality>
            </div>-->
            <div class="clBorderTutor">
              <CLineChart :mydata="datastat.reg_daily" :title="$t('stat.reg_daily')" color="blue" bordercolor="blue"
                :sum="true" :showMedia="true">
              </CLineChart>

              <!--<CLineChart :mydata="datastat.reg_daily" :title="$t('stat.reg_total')"
                          :offset="datastat.numreg_untilday" :sum="true"
                          :mycolors="['#0b0', '#666']">

              </CLineChart>-->
            </div>
          </div>
        </div>
      </CTitleBanner>
    </div>
  </div>
</template>

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

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